chrome扩展程序----域名助手
音乐分享：
中年大叔的抖腿新专辑《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》(需要翻墙)
《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 ...
随机推荐
- NW.js使用及打包
简介 NW.js (原名 node-webkit)是一个结合了 Chromium 和 node.js 的应用运行时,通过它可以用 HTML 和 JavaScript 编写原生应用程序.它还允许开发者从 ...
- Spring 完成自动注入（autowire）
目录 两个测试类 普通方式手动注入 普通方式注入的缺点 自动注入的介绍 配置自动注入的方式 配置全局自动注入 局部单独配置 利用注解实现自动注入 两个测试类 package cn.ganlixin.p ...
- Linux下Nginx配置阿里云 SSL证书实现HTTPS访问
这篇文章主要介绍了nginx配置ssl证书实现https访问的示例 1.服务器系统:Centos 2. 阿里云申请SSL证书 选择“免费版DV SSL”,点击立即购买: 下载证书 列表中找到已签发的证 ...
- python并发编程之协程知识点
由线程遗留下的问题:GIL导致多个线程不能真正的并行,CPython中多个线程不能并行 单线程实现并发:切换+保存状态 第一种方法:使用yield,yield可以保存状态.yield的状态保存与操作系 ...
- 关于python深浅拷贝的个人浅见
起初,关于python的深浅拷贝,总是习惯去用传值传址的方式去考虑,发现总是get不到规律,容易记混. python有着高度自治的内存管理,而不可变对象的内存分配,则是能省则省,就是说,无论用什么拷贝 ...
- MySQ数据备份
MySQL备份概述 问题:备份和冗余有什么区别? 备份:能够防止由于机械故障以及人为操作带来的数据丢失,例如将数据库文件保存在了其它地方. 冗余:数据有多份冗余,但不等于备份,只能防止机械故障带来的数 ...
- MySQL物理备份 lvm-snapshot
MySQL备份之 lvm-snapshot lvm-snapshot(工具备份) 优点: 几乎是热备(穿件快照前把表上锁,创建完成后立即释放) 支持所有引擎 备份速度快 无需使用昂贵的商业软件(它是操 ...
- package.json 中script脚本传入参数问题
"build:test": "cross-env BUILD_ENV=dev nuxt build", 最近项目中通过传入自定义参数区分测试和正式环境,但是发现 ...
- Curl请求慢
背景原因:测试环境发现一个连接内网访问和外网访问延迟差别很大,内网访问很快.外网访问很慢.于是我们用curl来诊断问题所在的区域! 命令如下: 1 curl -o /dev/null -s -w %{ ...
- Nacos集群环境的搭建与配置
Nacos集群环境的搭建与配置 集群搭建 一．环境: 服务器环境:CENTOS-7.4-64位 三台服务器IP:192.168.102.57:8848,192.168.102.59:8848,192. ...