目录
上面说了些什么？示例插件示例应用示例插件安装打开开发者模式添加本地插件包安装后的效果插件开发插件介绍目录结构manifest.jsonindex.htmladdToken.jsgetToken1.js作为一名测试汪，经常需要对同类型的接口进行，而这些接口都需要填入几个参数（如：一些对外接口，需要token、app_key、app_secret对调用者进行身份认证），每次测试时都需要复制粘贴
这几个值，虽然这样的工作量不是很大，但是对于爱折腾的人来说，这明显不符合我们的工作态度,那么有没有方便的方法呢?这就是今天要讲的内容.
上面说了些什么？
类似上图这样的接口有很多，每一个接口都需要填入图中三个箭头数值，那么我们常规的办法就是复制一个token在这个接口页面粘贴一下，再复制一个app_key再在这个接口页面粘贴一下，app_secert同样。为了解决这样一个简单的功能，我们可以入门学习一下浏览器插件，简化我们的工作。
示例
插件示例
分别在token、app_key、app_secret中填入相应内容，然后点击保存。
应用示例
插件内容保存好了之后，刷新页面，然后只需要在相应的输入框中点击一下即可填入保存的内容。
插件安装
正常情况下,chrome的插件是需要从google的应用商店下载然后安装的,但是插件肯定还是需要先开发,测试运行好后才可以发布的,所以说,如果我们不需要发布自己的插件的话,那么就在开发模式开发使用即可.如果最后要发布,那是另一个话题,今天不说.
打开开发者模式
设置>更多设置>扩展程序(或者直接在地栏里输入:chrome://extensions/)然后点击右上角"开发者模式"开关,如下图:
添加本地插件包
安装后的效果
在插件列表中多了一个刚添加的插件,浏览器右上角多了一个插件图标(由于我的插件是给公司开发的,所以隐去了公司的logo)
插件开发
插件介绍
chrome插件开发其实很简单,只需要在一个空目录中创建一个
manifest.json文件即可.(代码全部是前端技术)
目录结构
这里的
logo.png就不需要说了吧
.gitignore.git是git的代码管理工具自己留下的,这里不需要管
index.html和getToken1.js以及js目录看了manifest.json就明白了…
manifest.json
{//插件名"name": "**_openapi_token",//版本号"version": "1.0","manifest_version": 2,"description": "**** openapi test,auto add token and app_key and app_secret","icons": {"128": "logo.png"},//背景html,就是你点击插件图标后出现的"background": {"page": "index.html"},// 星号是任意匹配符// 根据自己的插件要求,替换matches中的内容// 也可以用:"matches":["<all_urls>"],匹配所有"browser_action": {"matches":["https://*.--.com/api/*","https://*.----.com/api/*"],"default_title": "","default_icon": "logo.png","default_popup": "index.html"},//要加载的资源,如果你的html里需要引入js的话,请务必写上//还有我这里写的是相对路径,因为我把所有资源都放在一个文件夹下了"content_scripts":[{//, "matches":["<all_urls>"],"matches":["https://*.--.com/api/*","https://*.----.com/api/*"],"js": ["js/addToken.js"]//,"js/getToken.js"// "run_at":"document_start"}],//这是权限,不用我多解释了吧?意思就是你在哪个网页下可以访问的这个插件"permissions": ["cookies","https://*.--.com/","https://*.----.com/","storage","webRequest","notifications","tabs","contextMenus"// "http://*/*",// "https://*/*"],// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的"web_accessible_resources": ["getToken1.js"],// Chrome40以前的插件配置页写法"options_page": "index.html",// Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个"options_ui":{"page": "index.html",// 添加一些默认的样式，推荐使用"chrome_style": true}}
index.html
<!DOCTYPE html><html lang="zh-CN"><head><title>-- openapi token + app_key</title><meta charset="UTF-8"></head><body>token: <input id="plugin_token1" type="text" name="token" width="100" value="">app_key: <input id="plugin_app_key" type="text" name="app_key">app_secret: <input id="plugin_app_secret" type="text" name="app_secret"><button id="save">保存</button> <!-- 这里需要注意,在插件的这个html中,不能直接写js脚本,需要引入外部js --><script src="getToken1.js"></script><script src="js/addToken.js"></script></body></html>
addToken.js
getToken1.js实现了插件保存的功能,addToken.js可以获取这些内容,并在相应的js中应用
// 最关键也就这一行window.onload = function(){// 插件在安装时，目标网站还没有加载，导致下面的tokenObj为null或undifined，导致添加事件失败var token = "";var app_key = "";var app_secret = "";// 从存储中获取valuechrome.storage.sync.get(["token1","app_key1","app_secret1"],function(result){if(typeof(result.token1) === "undefined"){token = "";}else{token = result.token1;}if(typeof(result.app_key1) === "undefined"){app_key = "";}else{app_key = result.app_key1;}if(typeof(result.app_secret1) === "undefined"){app_secret = "";}else{app_secret = result.app_secret1;}});// 获取目标页面的对象var tokenObj = document.getElementById("token");var appkeyObj = document.getElementById("app_key");var appsecretObj = document.getElementById("app_secret");// 为对象添加事件,这里添加的是"点击"事件if(tokenObj){tokenObj.addEventListener('click', function(){tokenObj.value = token;console.log('token被执行了!');});}// 点击app_key输入框，写入插件保存的valueif(appkeyObj){appkeyObj.addEventListener('click', function(){appkeyObj.value = app_key;console.log('app_key被执行了！');});}// 点击app_secret输入框，写入插件保存的valueif(appsecretObj){appsecretObj.addEventListener('click', function(){appsecretObj.value = app_secret;console.log('app_secret被执行了！');});}}
getToken1.js
getToken1.js主要功能就是实现插件保存这三个值然后当页面需要时,可以获取这三个值
这样做的好处是不需要把这三个值写死在代码里.
// 保存方法function save_options(){var plugin_token1 = document.getElementById('plugin_token1');var plugin_app_key = document.getElementById('plugin_app_key');var plugin_app_secret = document.getElementById('plugin_app_secret');chrome.storage.sync.set({// chrome.storage.local.set({"token1": plugin_token1.value,"app_key1": plugin_app_key.value,"app_secret1": plugin_app_secret.value,}, function() {alert("存储成功");});}// 获取插件保存的value，并显示在插件输入框中chrome.storage.sync.get(["token1","app_key1","app_secret1"],function(result){if(typeof(result.token1) === "undefined"){plugin_token1.value = "";}else{plugin_token1.value = result.token1;}if(typeof(result.app_key1) === "undefined"){plugin_app_key.value = "";}else{plugin_app_key.value = result.app_key1;}if(typeof(result.app_secret1) === "undefined"){plugin_app_secret.value = "";}else{plugin_app_secret.value = result.app_secret1;}});// 点击保存，执行保存valuevar save = document.getElementById("save");save.addEventListener('click',save_options)
