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 ...

随机推荐

01构建第一个SpringBoot工程
第一篇:构建第一个SpringBoot工程文章指导学习笔记学习代码创建项目创建工程:Idea-> new Project ->Spring Initializr ->填写g ...
菜鸟学IT之python词云初体验
作业来源:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2822 1. 下载一长篇中文小说. 2. 从文件读取待分析文本. txt = ...
SpringMVC 框架介绍以及环境搭建
目录前端设计模式介绍分析前端设计模式 Spring MVC简单介绍 Spring和Spring MVC的关系配置Spring MVC的环境并简单测试前端设计模式介绍前端设计模式其实和前端没啥 ...
Google SRE
SRE_百度百科 https://baike.baidu.com/item/SRE/1141123 我们离Google SRE还有多远? - 简书https://www.jianshu.com/p/6 ...
Codeforces Round #523 (Div. 2) D. TV Shows 模拟（多重集先把所有区间加入多重集合）+贪心+二分
题意:给出n个电视节目的起始和结束时间并且租一台电视需要x +y*(b-a) [a,b]为时段问完整看完电视节目的最小花费是多少思路:贪心的思想情况1 如果新租一台电视的花费<=在空 ...
foreach 中获取索引index的方法
一样,很少用到,记下来先主要代码: foreach (var item in arr) { int index = arr.indexOf(item); //index 为索引值 }
“三次握手，四次挥手”你真的懂吗？TCP
“三次握手,四次挥手”你真的懂吗? mp.weixin.qq.com 来源:码农桃花源解读:“拼多多”被薅的问题出在哪儿?损失将如何买单? 之前有推过一篇不错的干货<TCP之三次握手四次挥手 ...
python之路day08--文件的操作
文件的操作 hanfei的博客.txt 1/文件的路径2.编码方式3.操作方式:只读,只写,追加,读写,写读... 只读 f=open('hanfei的博客',mode='r',encoding='u ...
sourceinsight问题
1.添加.cc文件 Options-〉“Document Options”-〉在“File filter” 裡邊加上*.cc Project--->Add and Remove Pr ...
Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
场景:父组件向子组件传递数据,子组件去试图改变父组件数据的时候. 解决:子组件通过事件向父组件传递信息,让父组件来完成数据的更改. 比如:我的父组件是普通页面,子组件是弹窗的登录界面,父组件传递的数据 ...

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

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

随机推荐

热门专题