場景:某網站后台管理員頁面,有幾萬會員數據,但列表頁面每次只能顯示20個,通過F12可以得知列表是通過RPC調用,然后解析Json串在前端進行展示渲染的,現要獲取所有會員信息,因后台沒有導出功能,如果一頁一頁翻看並拷貝粘貼,那肯定是一件極其繁瑣無聊的事情;
解決過程:最先想到的是編寫一個web程序,然后通過httpclient調用RPC,帶上cookiee及參數,但是調用時發現無法通過用戶認證;換個思路,既然后端請求有權限驗證問題,那就讓請求直接在瀏覽器發起,自動化測試工具及chrome擴展都可以發起瀏覽器請求,網上搜了下 chrome擴展,本以為很難,看了下 chrome已定義好框架,往里面塞內容即可,如果不涉及高級功能其實還是挺簡單的,下面記錄下編寫的步驟;
chrome擴展基本文件包括 manifest.json,background.js,content.js,popup.html
編寫步驟:
1.新建manifest.json,該文件是主要配置文件,包含資源定義及配置信息,這里只要配置即可未涉及功能實現;
{undefined
"manifest_version": 2,
"name": "GetMobile",
"version": "1.0",
"description": "get youzan mobile",
"content_security_policy": "script-src 'self'",
"browser_action": {undefined
"default_icon": "icon.png",//擴展的圖表
"tooltip": "my extentions"
},
"permissions": ["tabs","😕//*"],
"background": {undefined
"scripts": ["background.js","jquery-1.9.1.min.js"], //這里是腳本資源定義
"persistent": false
}
}
2.新建background.js,該文件是主要功能文件,要實現的主要功能都寫在這里;
function sendMessage(tabid) {undefined
chrome.tabs.sendMessage(tabid, { action: "getText" }, function (respond) {undefined
var formatStr = respond.content;
//此處通過http發起服務端請求,將content寫入自己的數據庫或文件
});
}
var posStart = 1;
var posMax = 200;//循環調用200次
var tabId = 0;
var intervalObj = null;
chrome.browserAction.onClicked.addListener(function () {undefined
intervalObj = setInterval(function () {undefined
if (posStart == (posMax+1)) { alert("so happy,is finished!");if(intervalObj){clearInterval(intervalObj);}return; }
if (posStart > posMax) {return; }
chrome.tabs.create({ url: "后台管理會員列表RPC地址" }, function (tab) {undefined
tabId = tab.id;
// chrome.tabs.sendMessage/chrome.runtime.onMessage.addListener 必須是分開的才能正常工作
// 因此借用 executeScript 包含監聽的腳本
chrome.tabs.executeScript(tab.id, { file: "content.js" }, function () {undefined
sendMessage(tab.id);
});
});
try {undefined
chrome.tabs.remove(tabId); //關閉這個標簽頁
}
catch (e) {undefined
}
posStart++; //page頁面加一
}, 8000) //每隔8秒，重復上述操作
});
3.新建content.js文件,這個文件一般都不用改;
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {undefined
if (request.action == "getText");
{undefined
var result = document.all[0].outerHTML; // innerText
sendResponse({ content: result });
}
});
4.新建popup.html文件,該文件是擴展說明文件
test
獲取信息
5.好了主要文件已加好,在同目錄下增加icon.png,至此chrome擴展已編寫完成;下面我們進行打包;
6.在瀏覽器輸入chrome://extensions/ 然后點擊打包擴展程序,選擇代碼目錄即可(私有密鑰文件不用選)
0818b9ca8b590ca3270a3433284dd417.png
0818b9ca8b590ca3270a3433284dd417.png
0818b9ca8b590ca3270a3433284dd417.png
0818b9ca8b590ca3270a3433284dd417.png
0818b9ca8b590ca3270a3433284dd417.png
7.選擇代碼目錄文件,找到crx打包后的文件,然后將crx文件拖入chrome://extensions/,提示是否要添加擴展程序,選擇是,擴展即添加成功,這個時候,仔細觀察發現右上角有你的擴展圖表.
8.好了,至此chrome擴展即編寫完成了.