目錄
作爲一名測試汪，經常需要對同類型的接口進行，而這些接口都需要填入幾個參數（如：一些對外接口，需要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 = "";
// 從存儲中獲取value
chrome.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輸入框，寫入插件保存的value
if(appkeyObj){
appkeyObj.addEventListener('click', function(){
appkeyObj.value = app_key;
console.log('app_key被執行了！');
});
}
// 點擊app_secret輸入框，寫入插件保存的value
if(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;
}
});
// 點擊保存，執行保存value
var save = document.getElementById("save");
save.addEventListener('click',save_options)