chrome扩展程序----域名助手
2017-04-22 21:20
120 查看
音乐分享:
Future Islands - 《Aladdin》
中年大叔的抖腿新专辑《The Far Field》
——————————————————————————————————————————————————————————————————————
项目截图:
![](https://images2015.cnblogs.com/blog/543206/201704/543206-20170422203711431-750454089.gif)
![](https://images2015.cnblogs.com/blog/543206/201704/543206-20170422203151165-58005763.png)
项目地址:https://github.com/uustoboy/set-region
项目说明:
一般公司有线上环境和测试环境(还有可能要改host)
比如:
线上:http://www.xxx.com/xx/xx.html
测试:http://www.xxx.dev/xx/xx.html
这个chrome插件,主要功能就是简单的把当前打开的页面连接切换(不改host),
原理很简单就是利用JS正则比配字符串然后重新加载一遍路径;
项目截图:
![](https://images2015.cnblogs.com/blog/543206/201704/543206-20170422204746993-205977908.png)
目录说明:
manifest.json(配置文件):
template/setting_popup.html:(插件展示页)
static/js/settings.js(主页面js):
static/js/menus.js(创建右键快捷键):
后记:
因为要调用chrome浏览器本身的接口,我得改一下打包一下安装到chrome中,很繁琐。
参考资料:
《Chrome API》(需要FQ)
《Chrome扩展及应用开发》
《360极速浏览器应用开放平台》(其实就是chrome扩展的翻译)
Future Islands - 《Aladdin》
中年大叔的抖腿新专辑《The Far Field》
——————————————————————————————————————————————————————————————————————
项目截图:
![](https://images2015.cnblogs.com/blog/543206/201704/543206-20170422203711431-750454089.gif)
![](https://images2015.cnblogs.com/blog/543206/201704/543206-20170422203151165-58005763.png)
项目地址:https://github.com/uustoboy/set-region
项目说明:
一般公司有线上环境和测试环境(还有可能要改host)
比如:
线上:http://www.xxx.com/xx/xx.html
测试:http://www.xxx.dev/xx/xx.html
这个chrome插件,主要功能就是简单的把当前打开的页面连接切换(不改host),
原理很简单就是利用JS正则比配字符串然后重新加载一遍路径;
项目截图:
![](https://images2015.cnblogs.com/blog/543206/201704/543206-20170422204746993-205977908.png)
目录说明:
|---manifest.json----------------配置文件 |---static-----------------------静态资源:css/img/js |---template---------------------模板文件html
manifest.json(配置文件):
{ "name" : "域名助手", "version": "0.1", "manifest_version": 2, "description": "域名助手:切换测试环境与正式环境", "icons": { "16": "static/img/icon16.png", "48": "static/img/icon48.png", "128": "static/img/icon128.png" }, "browser_action": { "default_icon": "static/img/icon16.png", "default_title": "域名助手", "default_popup": "template/setting_popup.html" }, "background": { "persistent": true, "scripts": [ "static/js/jquery.min.js", "static/js/settings.js", "static/js/menus.js" ] }, "permissions":[ "tabs", "activeTab", "storage", "contextMenus" ] }
template/setting_popup.html:(插件展示页)
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>域名助手</title> <meta charset="utf-8"> <link rel="stylesheet" href="../static/css/reset.css"> <link rel="stylesheet" href="../static/css/popup.css"/> <script type="text/javascript" src="../static/js/jquery.min.js"></script> <script type="text/javascript" src="../static/js/settings.js"></script> </head> <body> <div class="set-main"> <div class="set-title"> 域名助手 <span class="slide-btn">[切换已添加页]</span> </div> <div class="set-warp"> <div class="set-slide"> <div class="set-left"> <div class="set-p fn-clear"> <div class="set-txt">原始域名:(http/https)</div> <input type="text" name="" placeholder="字符串" value="" class="set-input input-origin"> <input type="checkbox" checked="checked" class="set-checkbox" name="" value=""> </div> <div class="set-p"> <div class="set-txt">替换域名:(http/https)</div> <input type="text" placeholder="字符串" checked="checked" name="" value="" class="set-input input-replace"> <input type="checkbox" checked="checked" class="set-checkbox" name="" value=""> </div> <div class="set-p"> <div class="set-txt">别名:</div> <input type="text" name="" placeholder="字符串" value="" class="set-input input-alias"> </div> <div class="set-p"> <a href="javascript:;" class="set-btn set-add">添加</a> <a href="javascript:;" class="set-btn set-switch">切换</a> </div> </div> <div class="set-right"> <div class="set-list"> <ul> </ul> </div> </div> </div> </div> </div> </body> </html>
static/js/settings.js(主页面js):
let region={}; let Max_Size = 10; chrome.storage.local.get('region',function(result){ region = result.region || {}; creaList(region); }); $(function(){ $('.set-add').click(function(){ let _originVal = $.trim( $('.input-origin').val() ); let _origin_agre = $('.input-origin').next().get(0).checked; let _replaceVal = $.trim( $('.input-replace').val() ); let _replace_agre = $('.input-replace').next().get(0).checked; let _aliasVal = $.trim( $('.input-alias').val() ); if( countNum(region) > Max_Size ){ return boom('最多添加10个!'); } if( region[_aliasVal] != undefined ){ return boom('已添加!'); } if( _originVal=="" || _replaceVal=="" || _aliasVal=="" ){ return boom('不能为空!'); } let jsons = {}; region[_aliasVal] = jsons[_aliasVal] = { "origin" :_originVal, "origin_agre" : _origin_agre, "replace": _replaceVal, "replace_agre" : _replace_agre, "alias":_aliasVal } chrome.storage.local.set({'region':region}, function() { creaList(jsons); boom('添加完成!'); $('.input-origin').val(''); $('.input-replace').val(''); $('.input-alias').val('') }); }); $('.set-switch').click(function(){ chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ let href = tabs[0].url; let url = ''; let agreement = ''; for( let val in region ){ let o = region[val].origin; let r = region[val].replace; let origin_agre = region[val].origin_agre; let replace_agre = region[val].replace_agre; let origin_reg = new RegExp(o); let replace_reg = new RegExp(r); if ( origin_reg.test(href) ) { if( origin_agre && replace_agre || !origin_agre && !replace_agre){ url = href.replace(o, r); }else if( origin_agre && !replace_agre ){ agreement = href.replace("http",'https'); url = agreement.replace(o, r); }else if( !origin_agre && replace_agre ){ agreement = href.replace("https",'http'); url = agreement.replace(o, r); } chrome.tabs.update(tabs[0].id, { url: url }, function(tab){ }); }else if( replace_reg.test(href) ){ if( origin_agre && replace_agre || !origin_agre && !replace_agre){ url = href.replace(r, o); }else if( origin_agre && !replace_agre ){ agreement = href.replace("https",'http'); url = agreement.replace(r,o); }else if( !origin_agre && replace_agre ){ agreement = href.replace("http",'https'); url = agreement.replace(r,o); } chrome.tabs.update(tabs[0].id, { url: url }, function(tab){ }); } } }); }); $('.slide-btn').click(function(){ if( $('.set-list li').length<= 0 ){ return boom('列表为空!'); } if( $('.slide-btn').is('.cur') ){ $('.slide-btn').removeClass('cur'); $('.set-slide').animate({'left':0},'fast',function(){ $('.slide-btn').html('[切换已添加页]'); }); }else{ $('.slide-btn').addClass('cur'); $('.set-slide').animate({'left':-150},'fast',function(){ $('.slide-btn').html('[切换添加页]'); }); } }); $('.set-list').delegate('.set-close','click',function(){ let $this = $(this); let _aliasVal = $this.prev().text(); let $parent = $this.parent('li'); $parent.remove(); if( $('.set-list li').length <= 0 ){ boom('列表为空!'); $('.slide-btn').removeClass('cur'); $('.set-slide').animate({'left':0},'fast',function(){ $('.slide-btn').html('[切换已添加页]'); }); } if( region[_aliasVal] != undefined ){ delete region[_aliasVal]; } chrome.storage.local.set({'region':region}, function() { }); }); }); function creaList(json){ let $ul = $('.set-list ul'); for (name in json){ let html=` <li> <div class="set-info">${name}</div> <span class="set-close">X</span> </li> `; $ul.append(html) } } function countNum( json ){ let count = 0; for(let a in json){ if(json[a]){ count++; } } return count; } function boom(txt){ let html = ` <div class="set-boom"> <div class="set-mark"></div> <div class="set-alert"> <span class="set-alertxt">${txt}</span> </div> </div> `; let timer = null; $('body').append(html); $('.set-boom').fadeIn('fast',function(){ timer = setTimeout(function(){ $('.set-boom').fadeOut('fast',function(){ $('.set-boom').remove(); }); },450); }); }
static/js/menus.js(创建右键快捷键):
//添加右键菜单; chrome.contextMenus.create({ "title": "域名助手", "contexts":["all"], "onclick":function(info,tab){ let region = {}; chrome.storage.local.get('region',function(result){ region = result.region || {}; chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ let href = tabs[0].url; let url = ''; let agreement = ''; for( let val in region ){ let o = region[val].origin; let r = region[val].replace; let origin_agre = region[val].origin_agre; let replace_agre = region[val].replace_agre; let origin_reg = new RegExp(o); let replace_reg = new RegExp(r); if ( origin_reg.test(href) ) { if( origin_agre && replace_agre || !origin_agre && !replace_agre){ url = href.replace(o, r); }else if( origin_agre && !replace_agre ){ agreement = href.replace("http",'https'); url = agreement.replace(o, r); }else if( !origin_agre && replace_agre ){ agreement = href.replace("https",'http'); url = agreement.replace(o, r); } chrome.tabs.update(tabs[0].id, { url: url }, function(tab){ }); }else if( replace_reg.test(href) ){ if( origin_agre && replace_agre || !origin_agre && !replace_agre){ url = href.replace(r, o); }else if( origin_agre && !replace_agre ){ agreement = href.replace("https",'http'); url = agreement.replace(r,o); }else if( !origin_agre && replace_agre ){ agreement = href.replace("http",'https'); url = agreement.replace(r,o); } chrome.tabs.update(tabs[0].id, { url: url }, function(tab){ }); } } }); }); } });
后记:
因为要调用chrome浏览器本身的接口,我得改一下打包一下安装到chrome中,很繁琐。
参考资料:
《Chrome API》(需要FQ)
《Chrome扩展及应用开发》
《360极速浏览器应用开放平台》(其实就是chrome扩展的翻译)
相关文章推荐
- chrome扩展小程序tomorrow rain
- chrome 常用扩展程序
- 节省微博互粉时间,使用全自动"一键关注"Chrome扩展程序
- chrome添加来自其他网站的扩展程序
- 分享Chrome Extension(扩展程序/插件)开发的一些小经验
- Chrome自动换页扩展程序推荐
- 常用chrome扩展程序
- 提高我们微博互粉的效率,使用"一键关注"Chrome扩展程序
- 如何制作chrome扩展程序
- 将 开源中国 在线工具 制作成chrome的扩展程序
- 尝试做了个Chrome浏览器的扩展程序,显示extensions的页面
- 巧用chrome扩展程序
- chrome扩展程序
- Chrome第一个扩展程序
- 好用的Chrome扩展程序
- 开发chrome扩展程序
- 9个网页设计师专用的Chrome扩展程序
- 在隐身模式下使用 Chrome 扩展程序
- 强制安装chrome扩展程序
- HqBaiduMusic百度音乐高品质下载Chrome扩展 _ 程序人生