音乐分享：
Future Islands - 《Aladdin》
中年大叔的抖腿新专辑《The Far Field》
——————————————————————————————————————————————————————————————————————
项目截图：
项目地址：https://github.com/uustoboy/set-region
项目说明:
一般公司有线上环境和测试环境(还有可能要改host)
比如:
线上:http://www.xxx.com/xx/xx.html
测试:http://www.xxx.dev/xx/xx.html
这个chrome插件,主要功能就是简单的把当前打开的页面连接切换(不改host)，
原理很简单就是利用JS正则比配字符串然后重新加载一遍路径；
项目截图：
目录说明:
1 |---manifest.json----------------配置文件 2 |---static-----------------------静态资源：css/img/js 3 |---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:(插件展示页)
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <title>域名助手</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" href="../static/css/reset.css"> 7 <link rel="stylesheet" href="../static/css/popup.css"/> 8 <script type="text/javascript" src="../static/js/jquery.min.js"></script> 9 <script type="text/javascript" src="../static/js/settings.js"></script> 10 </head> 11 <body> 12 <div class="set-main"> 13 <div class="set-title"> 14 域名助手 <span class="slide-btn">[切换已添加页]</span> 15 </div> 16 <div class="set-warp"> 17 <div class="set-slide"> 18 <div class="set-left"> 19 <div class="set-p fn-clear"> 20 <div class="set-txt">原始域名:(http/https)</div> 21 <input type="text" name="" placeholder="字符串" value="" class="set-input input-origin"> 22 <input type="checkbox" checked="checked" class="set-checkbox" name="" value=""> 23 </div> 24 <div class="set-p"> 25 <div class="set-txt">替换域名:(http/https)</div> 26 <input type="text" placeholder="字符串" checked="checked" name="" value="" class="set-input input-replace"> 27 <input type="checkbox" checked="checked" class="set-checkbox" name="" value=""> 28 </div> 29 <div class="set-p"> 30 <div class="set-txt">别名:</div> 31 <input type="text" name="" placeholder="字符串" value="" class="set-input input-alias"> 32 </div> 33 <div class="set-p"> 34 <a href="javascript:;" class="set-btn set-add">添加</a> 35 <a href="javascript:;" class="set-btn set-switch">切换</a> 36 </div> 37 </div> 38 <div class="set-right"> 39 <div class="set-list"> 40 <ul> 41 </ul> 42 </div> 43 </div> 44 </div> 45 </div> 46 </div> 47 </body> 48 </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扩展的翻译)