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

随机推荐

tensorflow-TensorBoard
Tensorborad--> 是Tensorflow的可视化工具,它可以通过Tensorflow程序运行过程中输出的日志文件可视化Tensorflow程序的运行状态.Tensorflow和Ten ...
PHP——秒数转换为时分秒
前言通讯记录需要用到的一个方法,就是将秒转为时分秒方法 PHP有内置的方法,直接用即可,不过这个只是24小时以内.对于通讯录来说是够用了~ 示例 $v = 30; gmdate('H:i:s', ...
python面试题整合
面试题整合面试题—并发编程部分
集合源码分析[1]-Collection 源码分析
目录 Collection 1. 介绍 2. 继承关系 3. 方法 4. JDK8新增的方法 removeIf(Predicate<? super E> filter) Spliterat ...
mysql 在visual studio中的配置
视图-->其他窗口-->服务器资源管理器-->数据连接-->右键添加连接 servername:localhost username:root password:123456 ...
centos7 部署安装gitlab服务器
概念: git 是一种版本控制系统,是一个命令,是一种工具 gitlib 是用于实现git功能的开发库 github 是一个基于git实现的在线代码托管仓库,包含一个网站界面,向互联网开放 gitla ...
解决php -v查看到版本与phpinfo()版本不一致问题
安装p7后发现phpinfo的版本是7.2.12,而php -v查看的却是5.4.16 应该是php.ini的配置文件有问题. 查看文件,有两个查看cli执行的文件是哪一个? 再查看phpinfo用 ...
Nginx 反向代理负载均衡虚拟主机
Nginx 反向代理负载均衡虚拟主机配置通过本章你将学会利用Nginx配置多台虚拟主机,清楚代理服务器的作用,区分正向代理和反向代理的区别,搭建使用Nginx反向搭理和负载均衡,了解Nginx常 ...
Hibernate日志输出到SLF4J
一,Hibernate日志问题工程使用SLF4J,但日志文件一直没有看到Hibernate相关日志及showsql 二,Logback文件配置修改Hibernate 日志输出指定为SLF4J,当修 ...
hive 时间函数
使用时发现:1.datediff可以传入timestamp类型参数官网文档: Date Functions The following built-in date functions are ...

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

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

随机推荐

热门专题