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

音乐分享：

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正则比配字符串然后重新加载一遍路径；

项目截图：

目录说明:

 |---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》(需要翻墙)

《Chrome扩展及应用开发》

《360极速浏览器应用开放平台》(其实就是chrome扩展的翻译)

chrome扩展程序----域名助手的更多相关文章

【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序
关于 chrome 扩展的文章,很久之前也写过一篇.清除页面广告?身为前端,自己做一款简易的chrome扩展吧. 本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点. 什么是 chrome 扩展 ...
----转载----【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序
关于 chrome 扩展的文章,很久之前也写过一篇.清除页面广告?身为前端,自己做一款简易的chrome扩展吧. 本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点. 什么是 chrome 扩展 ...
chrome扩展程序开发
首先,明确两个概念的区别:chrome扩展程序和Web Apps.具体参考:http://www.chromi.org/archives/10106 本文只讨论chrome扩展程序. 最好的开发教程莫 ...
编写Chrome扩展程序
Chrome的扩展程序很多,也很容易入门,可以来简单实现一下看看,慢慢就能实现出一个扩展程序来每个扩展程序应用一般会包含: 一个manifest清单文件 html文件 js文件其他文件等可以看 ...
Web 开发人员必备的12款 Chrome 扩展程序
之前已经分享过一些帮助 Web 开发人员和设计师的 Chrome 扩展,这次我们继续展示一组很有用的 Chrome 应用程序.这些免费的 Chrome 应用程序可以简化您的工作流程,为了加快您的工作流 ...
Google Chrome 扩展程序开发
根据公司的规定,每月八小时,弹性工作制.所以大家平时来的不太准时,如果有事,下班也就早些回去了.所以一个月下来工作时间可能不够,但是公司的考勤日历是这样的: 除了请假和法定节假日外,其他样式显示都是一 ...
解决高版本 Google Chrome 扩展程序强制停用问题 -摘自网络
1]前往这里下载你喜欢的语言的组策略模板后缀为.adm (其他的文件自己看 https://docs.google.com/viewer?a=v&pid=sites&srcid=Y2 ...
【转】编写Chrome扩展程序
Chrome的扩展程序很多,也很容易入门,可以来简单实现一下看看,慢慢就能实现出一个扩展程序来每个扩展程序应用一般会包含: 一个manifest清单文件 html文件 js文件其他文件等可以看 ...
Chrome扩展程序——TabCopy：一键复制网页标题和网址
Chrome扩展程序——TabCopy:一键复制网页标题和网址 - Erik_ly的博客 - CSDN博客 https://blog.csdn.net/u012318074/article/detai ...

随机推荐

MySQL之字符集
看unicode编码区从1 - 126就属于传统utf8区,当然utf8mb4也兼容这个区,126行以下就是utf8mb4扩充区 1.utf8与utf8mb4(utf8 most bytes 4) M ...
Centos7 IPv6 Route And Dhcpv6 Server(借鉴补充)
软件:radvd.dhcp 1)启用ipv6 vi /etc/sysctl.conf net.ipv6.conf.all.disable_ipv6 = 0net.ipv6.conf.default.d ...
虚拟机ubuntu设置静态IP与主机、外网互ping配置流程
方案一.VMnet8(NAT模式) 1.选择自定义模式,VMnet8(NAT模式) 2.进入虚拟机,设置静态IP之前确认三者可互ping通,命令ifconfig,查看当前的IP 3.主机通过命令ipc ...
String,StringBuffer与StringBuilder的区别?? 缓存
转: String 字符串常量StringBuffer 字符串变量(线程安全)StringBuilder 字符串变量(非线程安全) 简要的说, String 类型和 StringBuffer 类型的主 ...
codeforces8A
Train and Peter CodeForces - 8A Peter likes to travel by train. He likes it so much that on the trai ...
「洛谷4197」「BZOJ3545」peak【线段树合并】
题目链接 [洛谷] [BZOJ]没有权限号嘤嘤嘤.题号:3545 题解窝不会克鲁斯卡尔重构树怎么办??? 可以离线乱搞. 我们将所有的操作全都存下来. 为了解决小于等于\(x\)的操作,那么我们按照 ...
Vue学习笔记二：v-cloak，v-text，v-html的使用
目录 v-cloak:解决插值表达式闪烁问题安装插件Live Server 右键以HTTP形式运行HTML v-text:以属性方式使用插值表达式 v-cloak和v-text的区别 v-html: ...
java基础关于转换流
转换流有两种:InputStreamReader:将字节流转换为字符流 OutputStreamWriter:将字符流转换为字节流什么时候使用转换流?由以下分析: 流对象很多,首先要明确那个流对象. ...
蓝桥杯入门训练-Fibonacci数列
刚刚开始刷题的时候就栽了个大跟头,稍微记一下...... 一开始不是很理解:“我们只要能算出这个余数即可,而不需要先计算出Fn的准确值,再将计算的结果除以10007取余数,直接计算余数往往比先算出原数 ...
Windows Hook技术
0x01 简介有人称它为“钩子”,有人称它为“挂钩”技术.谈到钩子,很容易让人联想到在钓东西,比如鱼钩就用于钓鱼.编程技术的钩子也是在等待捕获系统中的某个消息或者动作.钩子的应用范围非常广泛,比如输 ...

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

chrome扩展程序----域名助手的更多相关文章

随机推荐

热门专题