时间戳

首页 > 技术文章 > chrome扩展程序----域名助手

chrome扩展程序----域名助手

auok 2017-04-22 21:20 原文

音乐分享：

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扩展的翻译) 

推荐阅读