├── LICENSE ├── README.md ├── chrome ├── README.md ├── _locales │ └── zh_CN │ │ └── messages.json ├── manifest.json ├── static │ ├── css │ │ ├── toollink-helper.css │ │ ├── toollink-opt.css │ │ └── toollink-popup.css │ ├── img │ │ ├── close.png │ │ ├── crosshair.png │ │ ├── icon-128.png │ │ ├── icon-16.png │ │ ├── icon-48.png │ │ ├── icon.png │ │ ├── image_default.png │ │ ├── json-down.png │ │ ├── pbar-ani.gif │ │ └── ui-icons_228ef1_256x240.png │ ├── js │ │ ├── core │ │ │ ├── const.js │ │ │ ├── core.js │ │ │ └── network.js │ │ ├── mod │ │ │ ├── mod_background.js │ │ │ ├── mod_options.js │ │ │ └── mod_popup.js │ │ ├── toollink-background.js │ │ ├── toollink-option.js │ │ └── toollink-popup.js │ └── vendor │ │ ├── bootstrap │ │ └── bootstrap.min.css │ │ ├── jquery-1.5 │ │ └── jquery-1.5.min.js │ │ └── template │ │ └── templateengine.js └── template │ ├── toollinkhelper_options.html │ └── toollinkhelper_popup.html ├── datasource.json ├── index.html ├── list.html └── static ├── css └── index.css ├── img └── chrome │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ └── 4.jpg ├── js └── index.js └── vendor ├── jquery-1.5 └── jquery-1.5.min.js └── template └── templateengine.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Jim 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML-DEV-ToolLink 2 | 常用的在线字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成与解码等工具，支持在线搜索和Chrome插件。 3 | HTML Development Tool Link：在线工具，支持搜索 4 | Link:[https://easonjim.github.io/HTML-DEV-ToolLink/index.html](https://easonjim.github.io/HTML-DEV-ToolLink/index.html) 5 | Chrome Plugin：Chrome插件，支持自定义添加数据源 6 | Link:[https://github.com/easonjim/HTML-DEV-ToolLink/tree/master/chrome](https://github.com/easonjim/HTML-DEV-ToolLink/tree/master/chrome) 7 | -------------------------------------------------------------------------------- /chrome/README.md: -------------------------------------------------------------------------------- 1 | # ToolLink助手（ToolLinkHelper） 2 | ToolLink助手：默认包括常用的在线字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成与解码等工具，也可以后续自定义增加。 3 | 4 | ## 安装方式： 5 | - Google市场（由于经费问题，后续再补上） 6 | - Link： 7 | - 开发者模式（每次需要手动升级） 8 | - Clone整个目录。 9 | - 在扩展程序中开启“开发者模式”。 10 | - 选择“加载已解压的扩展程序”，定位到chrome文件夹即可。 11 | ## 框架说明： 12 | - 图标使用了这个项目，第一版参照此项目实现：[https://github.com/anttribe/DevTookit](https://github.com/anttribe/DevTookit) 13 | - 开发框架使用FeHelper这个项目，灵感也来自此框架，命名空间全改了，框架的版权属于这个项目：[https://github.com/zxlie/FeHelper](https://github.com/zxlie/FeHelper) 14 | - 由于FeHelper是高度集成工具到插件的，后续增加一些自定义工具不太方便，所以就单独剥离整个框架，去除所有工具，改造成只管理在线工具的插件。 15 | - ToolLink只包含最简单的配置和展示框架，且支持自定义的数据源，后续可以自行在GitHub上新建自己的数据源来进行插件的配置。 16 | - FeHelper的框架基于模块化和Chrome的Background模式的消息机制封装进行开发的，没有太多的第三方框架，基本是纯JavaScript实现，所以学习起来非常的好入手。   17 | ## 自定义数据源添加方式说明：   18 | 参考这个文件[https://github.com/easonjim/HTML-DEV-ToolLink/blob/master/datasource.json](https://github.com/easonjim/HTML-DEV-ToolLink/blob/master/datasource.json)写一份自己的，并在插件的配置页面选择自己的数据源文件即可。 19 | 数据源文件的存放方式可以是GitHub，也可以是自己的私有服务器等等。 20 | ## 效果展示： 21 | ![img](https://raw.githubusercontent.com/easonjim/HTML-DEV-ToolLink/master/static/img/chrome/1.jpg) 22 | ![img](https://raw.githubusercontent.com/easonjim/HTML-DEV-ToolLink/master/static/img/chrome/2.jpg) 23 | ![img](https://raw.githubusercontent.com/easonjim/HTML-DEV-ToolLink/master/static/img/chrome/3.jpg) 24 | ![img](https://raw.githubusercontent.com/easonjim/HTML-DEV-ToolLink/master/static/img/chrome/4.jpg) 25 | -------------------------------------------------------------------------------- /chrome/_locales/zh_CN/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /chrome/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ToolLink助手（ToolLinkHelper）", 3 | "version": "0.0.1", 4 | "manifest_version": 2, 5 | 6 | "default_locale": "zh_CN", 7 | 8 | "description": "ToolLink助手：默认包括常用的在线字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成与解码等工具，也可以后续自定义增加。", 9 | "icons": { 10 | "16": "static/img/icon-16.png", 11 | "48": "static/img/icon-48.png", 12 | "128": "static/img/icon-128.png" 13 | }, 14 | 15 | "browser_action": { 16 | "default_icon": "static/img/icon-16.png", 17 | "default_title": "ToolLink助手", 18 | "default_popup": "template/toollinkhelper_popup.html" 19 | }, 20 | 21 | "background": { 22 | "persistent": true, 23 | "scripts": [ 24 | "static/vendor/jquery-1.5/jquery-1.5.min.js", 25 | "static/js/mod/mod_background.js" 26 | ] 27 | }, 28 | "options_page": "template/toollinkhelper_options.html", 29 | 30 | "permissions": [ 31 | "tabs", 32 | "contextMenus", 33 | "cookies", 34 | "notifications", 35 | "alarms", 36 | "webNavigation", 37 | "\u003Call_urls\u003E" 38 | ], 39 | 40 | "web_accessible_resources": [ 41 | "static/img/icon-16.png", 42 | "static/img/icon-48.png", 43 | "static/img/icon-128.png", 44 | "static/img/pbar-ani.gif", 45 | "static/img/ui-icons_228ef1_256x240.png", 46 | "static/img/crosshair.png", 47 | "static/img/close.png", 48 | "static/css/toollink-helper.css" 49 | ], 50 | 51 | "content_scripts": [ 52 | { 53 | "matches": [ 54 | "http://*/*", 55 | "https://*/*", 56 | "file://*/*", 57 | "*://*/*" 58 | ], 59 | "js": [ 60 | "static/vendor/jquery-1.5/jquery-1.5.min.js", 61 | "static/js/core/core.js", 62 | "static/js/core/const.js", 63 | "static/js/toollink-option.js" 64 | ], 65 | "run_at": "document_end", 66 | "all_frames": false 67 | } 68 | ], 69 | "content_security_policy": "style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-eval'; object-src 'self' ", 70 | "update_url": "https://clients2.google.com/service/update2/crx", 71 | "homepage_url": "https://github.com/easonjim/HTML-DEV-ToolLink" 72 | 73 | } 74 | -------------------------------------------------------------------------------- /chrome/static/css/toollink-helper.css: -------------------------------------------------------------------------------- 1 | .toollink-helper-hide { 2 | display:none; 3 | } 4 | #toollink-helper-box { 5 | position: fixed; 6 | left: 1px; 7 | bottom: 0; 8 | right:8px; 9 | z-index: 2147483646; 10 | font-size:12px; 11 | } 12 | 13 | #toollink-helper-main-ifr { 14 | width: 100%; 15 | height: 100%; 16 | position: absolute; 17 | left: 0; 18 | top: 0; 19 | bottom:0; 20 | z-index: 2147483646; 21 | } 22 | 23 | #toollink-helper-main-tab { 24 | width: 100%; 25 | position: absolute; 26 | top:0; 27 | left: 0; 28 | bottom: 0; 29 | z-index: 2147483647; 30 | background: #fcfcfc; 31 | text-align:left; 32 | } 33 | 34 | #toollink-helper-main-tab .ui-tabs-nav { 35 | -webkit-user-select : none; 36 | } 37 | 38 | #toollink-helper-main-tab li .ui-icon-close { 39 | float: left; 40 | margin: 0.4em 0.2em 0 0; 41 | cursor: pointer; 42 | } 43 | 44 | #toollink-helper-main-tab.ui-tabs .ui-tabs-panel { 45 | padding-right:0; 46 | } 47 | 48 | 49 | #toollink-helper-main-tab .rst-title .rst-count{ 50 | color:#f00; 51 | } 52 | #toollink-helper-main-tab .rst-content{ 53 | color:#666; 54 | height:460px; 55 | overflow-y:auto; 56 | } 57 | #toollink-helper-main-tab .rst-content .x-num{ 58 | color:#f00; 59 | font-weight:bold; 60 | } 61 | #toollink-helper-main-tab .rst-content .x-tag{ 62 | color:#00f; 63 | font-weight:bold; 64 | word-wrap: break-word; 65 | } 66 | #toollink-helper-main-tab .rst-content .x-attr{ 67 | color:#b00; 68 | font-weight:bold; 69 | } 70 | #toollink-helper-main-tab .rst-content .x-file{ 71 | color:#48b; 72 | } 73 | 74 | #toollink-helper-box .ui-corner-top>a{ 75 | font-weight:bold; 76 | } 77 | #toollink-helper-box .ui-resizable-s{ 78 | position: absolute; 79 | top:0px; 80 | z-index: 2147483647; 81 | } 82 | #toollink-helper-box #toollink-helper-minusthick, 83 | #toollink-helper-box #toollink-helper-plusthick, 84 | #toollink-helper-box #toollink-helper-closethick{ 85 | float:right; 86 | cursor:pointer; 87 | margin:5px 5px 0 ; 88 | } 89 | #toollink-helper-box #toollink-helper-minusthick:hover, 90 | #toollink-helper-box #toollink-helper-plusthick:hover, 91 | #toollink-helper-box #toollink-helper-closethick:hover{ 92 | background:#c00; 93 | } 94 | 95 | #toollink-helper-box table { 96 | font-size:11px; 97 | border:2px solid #366EB9; 98 | border-collapse:collapse; 99 | width:100%; 100 | table-layout:fixed; 101 | } 102 | #toollink-helper-box table th, 103 | #toollink-helper-box table td { 104 | vertical-align:middle; 105 | padding:3px 10px; 106 | border:1px solid #eee; 107 | } 108 | #toollink-helper-box table .td-linenum { 109 | background:#ffc; 110 | color:#900; 111 | font-weight:normal; 112 | font-style:italic; 113 | text-align:right; 114 | -webkit-user-select:none; 115 | width:10%; 116 | cursor:default; 117 | } 118 | #toollink-helper-box table .td-content { 119 | text-align:left; 120 | padding-left:10px; 121 | width:90%; 122 | } 123 | #toollink-helper-box table .td-content-title { 124 | text-align:right; 125 | padding-right:10px; 126 | width:6%; 127 | } 128 | #toollink-helper-box table .td-content-content { 129 | text-align:left; 130 | padding-left:10px; 131 | width:84%; 132 | } 133 | #toollink-helper-box table .td-content-content.-c-x-issue { 134 | color:#555; 135 | } 136 | 137 | #toollink-helper-box table .td-cookie-linenum { 138 | background:#ffc; 139 | color:#900; 140 | font-weight:normal; 141 | font-style:italic; 142 | text-align:right; 143 | -webkit-user-select:none; 144 | width:5%; 145 | } 146 | #toollink-helper-box table .td-cookie-name { 147 | width:20%; 148 | word-wrap:break-word; 149 | } 150 | #toollink-helper-box table .td-cookie-value { 151 | word-wrap:break-word; 152 | width:30%; 153 | } 154 | #toollink-helper-box table .td-cookie-domain { 155 | width:15%; 156 | } 157 | #toollink-helper-box table .td-cookie-expires { 158 | width:20%; 159 | } 160 | #toollink-helper-box table .td-cookie-op { 161 | width:10%; 162 | text-align:center; 163 | } 164 | 165 | #toollink-helper-box table thead td{ 166 | background:#366EB9; 167 | font-weight:bold; 168 | height:20px; 169 | text-align:center; 170 | color:#ff0; 171 | cursor:default; 172 | } 173 | #toollink-helper-box table thead .td-content-title { 174 | border-right:none; 175 | } 176 | #toollink-helper-box table thead .td-content-content { 177 | border-left:none; 178 | text-align:center; 179 | } 180 | #toollink-helper-box table tbody tr.tr-content-even { 181 | background:#F3FAFF; 182 | } 183 | #toollink-helper-box table tbody tr:hover { 184 | background:#ffa; 185 | } 186 | #toollink-helper-box table tbody .-x-issue{ 187 | color:#b00; 188 | } 189 | #toollink-helper-box table tbody .-x-suggestion{ 190 | color:#00b; 191 | } 192 | 193 | #toollink-helper-box .x-selector { 194 | color:#00f; 195 | } 196 | #toollink-helper-box .x-css-text { 197 | color:#aaa; 198 | padding-left:20px; 199 | } 200 | #toollink-helper-box .table-css-bg { 201 | margin-left:40px; 202 | margin-top:10px; 203 | } 204 | #toollink-helper-box .table-css-bg div { 205 | height:20px; 206 | } 207 | #toollink-helper-box .table-css-bg div:hover { 208 | background:#fff; 209 | } 210 | #toollink-helper-box .x-expand { 211 | margin-left:20px; 212 | cursor:pointer; 213 | color:#48b; 214 | font-weight:bold; 215 | } 216 | #toollink-img-tootip { 217 | position:absolute; 218 | z-index: 2147483647; 219 | top:-10000px; 220 | left:-10000px; 221 | } 222 | #f-h-p-m { 223 | position:fixed; 224 | top:0; 225 | left:0; 226 | bottom:0; 227 | right:0; 228 | z-index: 2147483646; 229 | background:#000; 230 | opacity:0.4; 231 | } 232 | #toollink-helper-progress-bar-img { 233 | position:fixed; 234 | z-index: 2147483647; 235 | width:800px; 236 | height:20px; 237 | line-height:20px; 238 | text-align:center; 239 | font-weight:bold; 240 | color:#f00; 241 | border:1px solid transparent; 242 | -webkit-border-radius:2px 2px; 243 | } 244 | #toollink-helper-progress-bar { 245 | width:0px; 246 | height:0px; 247 | } 248 | #toollink-helper-acc-HTML-issue-sug, 249 | #toollink-helper-acc-CSS-issue-sug, 250 | #toollink-helper-acc-Javascript-issue-sug{ 251 | width:100%; 252 | overflow:auto; 253 | } 254 | #toollink-helper-box .-f-h-get-more- { 255 | position:absolute; 256 | bottom:10px; 257 | right:20px; 258 | color:#00f; 259 | } 260 | #toollink-helper-grid { 261 | position:absolute; 262 | top:0; 263 | left:0; 264 | z-index:2147483647; 265 | opacity:0.2; 266 | overflow:hidden; 267 | -webkit-user-select:none; 268 | } 269 | #toollink-helper-btn-close-grid { 270 | position:fixed; 271 | bottom:10px; 272 | right:10px; 273 | font-size:12px; 274 | font-weight:bold; 275 | color:#00f; 276 | z-index:2147483647; 277 | cursor:pointer; 278 | } 279 | #toollink-helper-btn-close-grid:hover { 280 | color:#f00; 281 | } 282 | #toollink-helper-g-pos { 283 | background:none; 284 | position:absolute; 285 | top:0; 286 | left:0; 287 | z-index:2147483646; 288 | border:1px solid #0b0; 289 | border-width:0 1px 1px 0; 290 | } 291 | #toollink-helper-gp-info { 292 | position:absolute; 293 | z-index:2147483646; 294 | background:#ffc; 295 | border:1px solid #666; 296 | font-size:12px; 297 | text-align:left; 298 | padding:2px 10px; 299 | display:none; 300 | color:#000; 301 | } 302 | 303 | #toollink-helper-ruler-top { 304 | position:fixed; 305 | top:0; 306 | left:0; 307 | right:0; 308 | height:20px; 309 | background:#fff; 310 | border-bottom:1px solid #000; 311 | z-index:2147483647; 312 | overflow:hidden; 313 | } 314 | #toollink-helper-ruler-left { 315 | position:fixed; 316 | top:0px; 317 | left:0; 318 | bottom:0; 319 | width:20px; 320 | background:#fff; 321 | border-right:1px solid #000; 322 | z-index:2147483647; 323 | overflow:hidden; 324 | } 325 | #toollink-helper-ruler-top .h-line{ 326 | position:absolute; 327 | width:1px; 328 | background:#000; 329 | } 330 | #toollink-helper-ruler-top .h-text{ 331 | position:absolute; 332 | top:0; 333 | font-size:8px; 334 | color:#000; 335 | } 336 | #toollink-helper-ruler-left .v-line{ 337 | position:absolute; 338 | height:1px; 339 | background:#000; 340 | } 341 | #toollink-helper-ruler-left .v-text{ 342 | position:absolute; 343 | left:0; 344 | font-size:8px; 345 | color:#000; 346 | -webkit-transform:rotate(90deg); 347 | margin-top:4px; 348 | } 349 | -------------------------------------------------------------------------------- /chrome/static/css/toollink-opt.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family:"MS Sans Serif"; 3 | font-size:14px; 4 | } 5 | .mod-body-inner { 6 | width: 960px; 7 | margin: 0 auto; 8 | border: 1px solid rgba(0, 0, 0, 0.3); 9 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); 10 | } 11 | .toollink-opt-header { 12 | width:100%; 13 | background: #fff; 14 | } 15 | .toollink-opt-header .bar{ 16 | height:30px; 17 | width:100%; 18 | background:rgba(111, 178, 248, 0.1); 19 | border-bottom: 2px solid #ccc; 20 | clear:both; 21 | line-height: 20px; 22 | } 23 | .toollink-opt-header .bar:after { 24 | content:"\20"; 25 | } 26 | 27 | .toollink-opt-header .bar .text{ 28 | padding:5px; 29 | float: left; 30 | } 31 | .toollink-opt-header .bar img { 32 | float: left; 33 | margin: 3px 0 0 3px; 34 | } 35 | 36 | .toollink-opt-content { 37 | } 38 | .toollink-opt-content .left{ 39 | width:200px; 40 | border-right:5px solid #def; 41 | } 42 | .toollink-opt-content .left ul{ 43 | margin:0; 44 | padding:5px; 45 | } 46 | .toollink-opt-content .left li{ 47 | padding:6px 0 6px 20px; 48 | cursor:default; 49 | margin:4px 0; 50 | list-style:none; 51 | } 52 | .toollink-opt-content .right ul{ 53 | margin:0px; 54 | padding:5px; 55 | } 56 | .toollink-opt-content .right ul li{ 57 | margin:0 0 0 20px; 58 | padding:5px; 59 | line-height: 24px; 60 | } 61 | .toollink-opt-content .right ul li input { 62 | margin-right: 20px; 63 | } 64 | .toollink-opt-content .right ul li input[type="text"] { 65 | width: 88%; 66 | } 67 | .toollink-opt-content .right ul.no-list-style li{ 68 | margin:0; 69 | list-style:none; 70 | } 71 | .toollink-opt-content fieldset{ 72 | border: 1px solid #ccc; 73 | border-radius: 5px; 74 | } 75 | .toollink-opt-content fieldset legend{ 76 | padding: 0 5px; 77 | color:#f00; 78 | } 79 | .toollink-opt-content .right ul li input.sort { 80 | width: 50px; 81 | margin-right: 0px; 82 | } 83 | .toollink-opt-content .right ul li input.alias { 84 | width: 100px; 85 | margin-right: 0px; 86 | } 87 | 88 | .toollink-opt-content .right ul li a { 89 | color:#000; 90 | text-decoration:none; 91 | text-align: left; 92 | } 93 | .toollink-opt-content .right ul li a:hover { 94 | color: #0000cc; 95 | } 96 | 97 | .toollink-hide { 98 | display:none; 99 | } 100 | hr { 101 | height: 1px ; 102 | background: #ccc; 103 | border: none; 104 | } 105 | .mod-btns { 106 | padding: 10px; 107 | } 108 | .mod-btns .btn { 109 | margin: 5px 10px; 110 | cursor: pointer; 111 | height: 30px; 112 | width: 60px; 113 | background: #f9f9f9; 114 | border: 1px solid #ddd; 115 | border-radius: 4px; 116 | } 117 | 118 | .mod-btns .btn.with120 { 119 | width: 120px; 120 | } 121 | 122 | .mod-btns .btn.close { 123 | background: #eee; 124 | margin-left:0; 125 | margin-right:20px; 126 | } 127 | .mod-btns .btn:hover { 128 | color:#b00; 129 | } -------------------------------------------------------------------------------- /chrome/static/css/toollink-popup.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 14px; 3 | -webkit-user-select: none; 4 | padding: 0; 5 | margin: 0; 6 | width: 170px; 7 | position: relative; 8 | /*overflow: hidden;*/ 9 | } 10 | 11 | .toollink-hide { 12 | display: none; 13 | } 14 | 15 | .toollink-function-title { 16 | width: 100%; 17 | padding: 5px; 18 | color: #522; 19 | font-weight: bolder; 20 | cursor: default; 21 | border-bottom: 1px dotted #aaa; 22 | } 23 | 24 | ul.toollink-function-list { 25 | padding: 0px; 26 | list-style: none; 27 | } 28 | 29 | ul.toollink-function-list li { 30 | padding: 3px 3px 3px 10px; 31 | cursor: pointer; 32 | color: #555; 33 | -webkit-transition: all .4s ease; 34 | white-space: nowrap; 35 | text-overflow: ellipsis; 36 | overflow: hidden; 37 | } 38 | 39 | ul.toollink-function-list li:hover { 40 | color: #0000cc; 41 | background: #f1f1f1; 42 | } 43 | 44 | ul.toollink-function-list li > a { 45 | color: #000; 46 | text-decoration: none; 47 | text-align: left; 48 | } 49 | 50 | ul.toollink-function-list li > a:focus { 51 | outline:none; 52 | } 53 | 54 | ul.toollink-function-list li > a:hover { 55 | color: #0000cc; 56 | } 57 | 58 | ul.toollink-function-list li > a span { 59 | padding-left: 24px; 60 | } 61 | 62 | ul.toollink-function-list li > b { 63 | width: 14px; 64 | height: 14px; 65 | background: url(../img/ui-icons_228ef1_256x240.png) no-repeat; 66 | -webkit-transition: all .5s ease; 67 | position: absolute; 68 | margin-top: 2px; 69 | } 70 | 71 | ul.toollink-function-list li:hover > b { 72 | -webkit-transform: rotate(360deg); 73 | } 74 | 75 | ul.toollink-function-list li.-x-grid b { 76 | background-position: -113px -113px; 77 | } 78 | 79 | ul.toollink-function-list li i { 80 | color: #aaa; 81 | font-weight: 700; 82 | font-style: normal; 83 | } 84 | 85 | ul.toollink-function-list li ul.sub-toollink-function-list { 86 | display: none; 87 | margin-left: -8px; 88 | } 89 | 90 | ul.toollink-function-list li ul.sub-toollink-function-list:hover { 91 | background: #d4d4d4; 92 | } 93 | 94 | ul.toollink-function-list li ul.sub-toollink-function-list li:hover { 95 | background: none; 96 | } 97 | ul.toollink-function-list li ul.sub-toollink-function-list li { 98 | padding: 3px 3px 3px 10px; 99 | cursor: pointer; 100 | color: #555; 101 | -webkit-transition: all .4s ease; 102 | white-space: nowrap; 103 | text-overflow: ellipsis; 104 | overflow: hidden; 105 | margin-left: -25px; 106 | } 107 | 108 | .toollink-feedback { 109 | font-size: 12px; 110 | border-top: 1px dotted #ddd; 111 | padding: 5px 15px 5px 5px; 112 | line-height: 20px; 113 | color: #888; 114 | } 115 | 116 | .toollink-feedback a { 117 | color: #888; 118 | text-decoration: none; 119 | text-align: left; 120 | } 121 | 122 | .toollink-feedback a:hover { 123 | color: #0000cc; 124 | } 125 | 126 | svg:not(:root) { 127 | overflow: hidden; 128 | } 129 | 130 | .toollink-feedback .octicon { 131 | vertical-align: text-bottom; 132 | } 133 | 134 | .toollink-feedback .octicon { 135 | display: inline-block; 136 | fill: currentColor; 137 | } 138 | 139 | .toollink-feedback .x-settings { 140 | float: right; 141 | cursor: pointer; 142 | } 143 | 144 | .toollink-feedback .x-settings:hover { 145 | color: #0000cc; 146 | } 147 | 148 | -------------------------------------------------------------------------------- /chrome/static/img/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easonjim/HTML-DEV-ToolLink/df8b6f634478ea177992c4eb71944201b5480ac7/chrome/static/img/close.png -------------------------------------------------------------------------------- /chrome/static/img/crosshair.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easonjim/HTML-DEV-ToolLink/df8b6f634478ea177992c4eb71944201b5480ac7/chrome/static/img/crosshair.png -------------------------------------------------------------------------------- /chrome/static/img/icon-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easonjim/HTML-DEV-ToolLink/df8b6f634478ea177992c4eb71944201b5480ac7/chrome/static/img/icon-128.png -------------------------------------------------------------------------------- /chrome/static/img/icon-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easonjim/HTML-DEV-ToolLink/df8b6f634478ea177992c4eb71944201b5480ac7/chrome/static/img/icon-16.png -------------------------------------------------------------------------------- /chrome/static/img/icon-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easonjim/HTML-DEV-ToolLink/df8b6f634478ea177992c4eb71944201b5480ac7/chrome/static/img/icon-48.png -------------------------------------------------------------------------------- /chrome/static/img/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easonjim/HTML-DEV-ToolLink/df8b6f634478ea177992c4eb71944201b5480ac7/chrome/static/img/icon.png -------------------------------------------------------------------------------- /chrome/static/img/image_default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easonjim/HTML-DEV-ToolLink/df8b6f634478ea177992c4eb71944201b5480ac7/chrome/static/img/image_default.png -------------------------------------------------------------------------------- /chrome/static/img/json-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easonjim/HTML-DEV-ToolLink/df8b6f634478ea177992c4eb71944201b5480ac7/chrome/static/img/json-down.png -------------------------------------------------------------------------------- /chrome/static/img/pbar-ani.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easonjim/HTML-DEV-ToolLink/df8b6f634478ea177992c4eb71944201b5480ac7/chrome/static/img/pbar-ani.gif -------------------------------------------------------------------------------- /chrome/static/img/ui-icons_228ef1_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easonjim/HTML-DEV-ToolLink/df8b6f634478ea177992c4eb71944201b5480ac7/chrome/static/img/ui-icons_228ef1_256x240.png -------------------------------------------------------------------------------- /chrome/static/js/core/const.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * 常量定义 4 | * @author jim 5 | * @date 2018/01/07 6 | */ 7 | 8 | /** 9 | * 各个模块进行信息交互时的消息类型 10 | */ 11 | const MSG_TYPE = { 12 | //browserAction被点击 13 | BROWSER_CLICKED : "browser-clicked", 14 | //提取CSS 15 | GET_CSS : "get-css", 16 | //提取JS 17 | GET_JS : "get-js", 18 | //提取HTML 19 | GET_HTML : "get-html", 20 | //cookie 21 | GET_COOKIE : 'get-cookie', 22 | //remvoe cookie 23 | REMOVE_COOKIE : 'remove-cookie', 24 | //set cookie 25 | SET_COOKIE : 'set-cookie', 26 | //get options 27 | GET_OPTIONS : 'get_options', 28 | //set options 29 | SET_OPTIONS : 'set_options', 30 | 31 | FCP_HELPER_INIT:'fcp_helper_init', 32 | 33 | //css ready... 34 | CSS_READY : 'css-ready', 35 | 36 | //js ready... 37 | JS_READY : 'js-ready', 38 | 39 | //html ready... 40 | HTML_READY : 'html-ready', 41 | //all ready... 42 | ALL_READY : 'all-ready', 43 | 44 | //启动项 45 | START_OPTION : 'start-option', 46 | //启动FCPHelper 47 | OPT_START_FCP : 'opt-item-fcp', 48 | //启动栅格检测 49 | OPT_START_GRID : 'opt-item-grid', 50 | 51 | //计算网页加载时间 52 | CALC_PAGE_LOAD_TIME : "calc-page-load-time", 53 | //页面相关性能数据 54 | GET_PAGE_WPO_INFO : 'get_page_wpo_info', 55 | 56 | //查看加载时间 57 | SHOW_PAGE_LOAD_TIME : "show-page-load-time", 58 | //执行FCP Helper检测 59 | FCP_HELPER_DETECT : 'fcp-helper-detect', 60 | //执行栅格检测 61 | GRID_DETECT : 'grid-detect', 62 | //执行JS嗅探：Tracker，from 志龙（http://ucren.com) 63 | JS_TRACKER : 'js_tracker', 64 | 65 | CODE_COMPRESS : 'code_compress', 66 | 67 | FROM_POPUP : 'from_popup_action', 68 | 69 | TAB_CREATED_OR_UPDATED: 'tab_created_or_updated', 70 | 71 | ////////////////////如下是popup中的menu，value和filename相同/////////////////// 72 | REGEXP_TOOL : 'regexp', 73 | //字符串编解码 74 | EN_DECODE : 'endecode', 75 | //json查看器 76 | JSON_FORMAT : 'jsonformat', 77 | //QR生成器 78 | QR_CODE : 'qrcode', 79 | //代码美化 80 | CODE_BEAUTIFY : 'codebeautify', 81 | // 时间转换 82 | TIME_STAMP : 'timestamp', 83 | // 图片base64 84 | IMAGE_BASE64 : 'imagebase64', 85 | // 二维码解码 86 | QR_DECODE : 'qr_decode', 87 | 88 | //页面json代码自动格式化 89 | AUTO_FORMART_PAGE_JSON : "opt_item_autojson", 90 | 91 | //页面取色器 92 | COLOR_PICKER : "color-picker:newImage", 93 | 94 | // ajax debugger 95 | AJAX_DEBUGGER : "ajax-debugger", 96 | AJAX_DEBUGGER_CONSOLE : "ajax-debugger-console", 97 | AJAX_DEBUGGER_SWITCH : "ajax-debugger-switch", 98 | 99 | // 在线url 100 | ONLINE_URL : "online-url" 101 | }; 102 | 103 | /** 104 | * 文件类型 105 | */ 106 | const FILE = { 107 | //css的