15分鐘手摸手教你寫個可以操控 Chrome 的插件
故事背景
事情是這樣的呢
友人 A: 能不能幫我整一個 chrome 插件？
我: 啥插件？
友人 A: 通過后端服務或者 python 腳本通信 chrome 插件能夠操作瀏覽器
我: 你小子是想爬數(shù)據(jù)吧？直接用現(xiàn)成的 python 框架或者 谷歌的 puppeteer 就能操控瀏覽器吧
友人 A: 你說的路子我早就試過了，對于反爬檢測高的網(wǎng)站一下就能檢測你的無頭瀏覽器的相應特征，所以就用平時用的瀏覽器就能以真亂真
我: 老是整這些花里胡哨的，有啥用呀
友人 A: 10 斤小龍蝦!
我:成交!!!
整體的思路
根據(jù)朋友以上的要求，我們可以簡單的得出一下的通信流程：
具體有疑問沒關系，我們只要知道大體的流程是這樣通信的即可
github 地址 每個 commit 對應相應的步驟
第一步 創(chuàng)建一個 chrome 插件
我們首先來創(chuàng)建一個啥功能都沒有的 chrome 插件
目錄如下所示
manifest.json
// manifest.json
{
"manifest_version": 2, // 配置文件的版本
"name": "SocketEXController", // 插件的名稱
"version": "1.0.0", // 插件的版本
"description": "Chrome SocketEXController",// 插件描述
"author": "wjryours", // 作者
"icons": {
"48": "icon.png",// 對應尺寸的圖標路徑 我這邊全部用一個了
"128": "icon.png"
},
"browser_action": {
"default_icon": "icon.png", // 圖標
"default_popup": "popup.html" // 點擊右上角的圖標的 popup 浮層 html 文件
},
"background": {
// 會一直常駐的后臺 JS 或后臺頁面
// 2 種指定方式，如果指定 JS，那么會自動生成一個背景頁
"page": "background.html"
},
"content_scripts": [
{
// 允許哪些域名下加載 注入的 JS
// "matches": ["http://*/*", "https://*/*"],
// "<all_urls>" 表示匹配所有地址
"matches": [
"<all_urls>"
],
"js": [
"content-script.js"
],
"run_at": "document_start"
}
],
"permissions": [
"contextMenus", // 右鍵菜單
"tabs", // 標簽
"notifications", // 通知
"webRequest", // web 請求
"webRequestBlocking", // 阻塞式 web 請求
"storage", // 插件本地存儲
"http://*/*", // 可以通過 executeScript 或者 insertCSS 訪問的網(wǎng)站
"https://*/*" // 可以通過 executeScript 或者 insertCSS 訪問的網(wǎng)站
],
}
js
// background.js
console.log('background.js')
// popup.js
console.log('popup.js')
// content-script.js
console.log('content-script.js loaded')
html
<!-- popup -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SocketController Popup</title>
<link rel="stylesheet" href="./lib/css/popup.css">
<script src="./popup.js"></script>
</head>
<body>
popup
</body>
</html>
<!-- background -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SocketController</title>
</head>
<body>
<div class="bg-container">
bg-container
</div>
</body>
</html>
然后在 chrome 的擴展程序頁加載我們的文件目錄 即可
然后我們啟用插件 隨手打開一個頁面就發(fā)現(xiàn)我們的插件已經(jīng)生效了
第二步 在本地創(chuàng)建 websocket 的服務
正如上面的通信流程所示，我們還需要在本地創(chuàng)建一個可用的 websocket 來發(fā)送信息給 chrome 插件
為了方便起見，我這邊就用 node 的 express 以及 socket.io 這個庫來啟用
目錄結構和代碼都很簡單
// index.js 用來創(chuàng)建 node 服務
const express = require('express')
const app = express()
const http = require('http')
const server = http.createServer(app)
const { Server } = require("socket.io")
const io = new Server(server)
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html')
})
io.on('connection', (socket) => {
console.log('a user connected')
socket.on('disconnect', () => {
console.log('user disconnected');
});
socket.on('webviewEvent', (msg) => {
console.log('webviewEvent: ' + msg);
io.emit('webviewEvent', msg);
// socket.broadcast.emit('chat message', msg);
});
socket.on('webviewEventCallback', (msg) => {
console.log('webviewEventCallback: ' + msg);
io.emit('webviewEventCallback', msg);
});
})
server.listen(9527, () => {
console.log('listening on 9527')
})
<!-- index.html -->
<!-- 點擊事件傳遞的參數(shù)后續(xù)會用到，這里可以不去了解 -->
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO Page</title>
<style>
</head>
<body>
<input id="SendInput" autocomplete="off" />
<button id="SendInputevent">Send input event</button>
<button id="SendClickevent">Send click event</button>
<button id="SendGetTextevent">Send getText event</button>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var form = document.getElementById('form');
var input = document.getElementById('input');
document.getElementById('SendClickevent').addEventListener('click', function (e) {
socket.emit('webviewEvent', { event: 'click', params: { delay: 300 }, element: '#su', operateTabIndex: 0 });
})
document.getElementById('SendInputevent').addEventListener('click', function (e) {
const value = document.getElementById('SendInput').value
socket.emit('webviewEvent', { event: 'input', params: { inputValue: value }, element: '#kw', operateTabIndex: 0 });
})
document.getElementById('SendGetTextevent').addEventListener('click', function (e) {
socket.emit('webviewEvent', { event: 'getElementText', params: {}, element: '.result.c-container.new-pmd .t a', operateTabIndex: 0 });
})
socket.on('webviewEventCallback', (msg) => {
console.log(msg)
})
</script>
</html>
// package.json
{
"name": "socket-service",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nodemon index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"nodemon": "^2.0.7",
"socket.io": "^4.1.2"
}
}
具體的內(nèi)容也很簡單，就是使用 express 和 socket.io 創(chuàng)建了一個 node 服務支持長鏈接，對于 socket.io 想有更多的了解的可以參照 官方文檔
運行 npm run dev 即可
好的，這樣我們的服務就跑起來了
我們訪問 http://localhost:9527
并點擊頁面上的按鈕在命令行上有 log 輸出就說明連接成功啦!
第三步 開始使 chrome 插件 與 本地的 node 服務相互通信
在開始與 node 服務通信前我們要了解下 chrome 插件的幾種 js 的使用場景
content-scripts
這個主要功能就是 Chrome 插件中向頁面注入腳本 在第一步的操作中正是該文件在別的頁面控制臺中打印出了我們期望的 log content-scripts 和 原始頁面共享 DOM，但是不共享 JS 但是這個功能足以讓我們?nèi)ゲ僮髂繕隧撁媪?/p>
background.js
是一個常駐的頁面，它的生命周期是插件中所有類型頁面中最長的，它隨著瀏覽器的打開而打開， 隨著瀏覽器的關閉而關閉，所以通常把需要一直運行的、啟動就運行的、全局的代碼放在 background 里面
popup.js
這個就是點擊瀏覽器右上角的插件圖標展示的彈窗，生命周期很短，可以將臨時的交互寫在這里
對于我們這次要長時間駐存在瀏覽器后臺與服務通信的要求得出 我們將相應的寫在 background.js 中即可
我們這里將需要的 js 庫 和 background.js 引入到 background.html 中
<script src="./lib/js/lodash.min.js"></script>
<script src="./lib/js/socket.io.min.js"></script>
<script src="./background.js"></script>
我們可以使用兩種方式來調(diào)試 這個常駐后臺文件
1.直接在 chrome 拓展點擊對應按鈕即可彈出調(diào)試
2.直接在瀏覽器上輸入對應的地址 即可
chrome-extension://${extensionID}/background.html
每次更新代碼點擊按鈕刷新即可
為了調(diào)試方便起見我在 popup.js 中加入了以下代碼 每次點擊我們的插件圖標即可新開一個后臺頁面
const extensionId = chrome.runtime.id
const backgroundURL = `chrome-extension://${extensionId}/background.html`
window.open(backgroundURL)
現(xiàn)在我們只需要在 background.js 中編寫相應代碼，建立長鏈接就可以了
// background.js
class BackgroundService {
constructor() {
this.socketIoURL = 'http://localhost:9527'
this.socketInstance = {}
this.socketRetryMax = 5
this.socketRetry = 0
}
init() {
console.log('background.js')
this.connectSocket()
this.linstenSocketEvent()
}
setSocketURL(url) {
this.socketIoURL = url
}
connectSocket() {
if (!_.isEmpty(this.socketInstance) && _.isFunction(this.socketInstance.disconnect)) {
this.socketInstance.disconnect()
}
this.socketInstance = io(this.socketIoURL);
this.socketRetry = 0
this.socketInstance.on('connect_error', (e) => {
console.log('connect_error', e)
this.socketRetry++
if (this.socketRetryMax < this.socketRetry) {
this.socketInstance.close()
alert(`以嘗試連接${this.socketRetryMax}次，無法連接到 socket 服務，請排查服務是否可用`)
}
})
}
linstenSocketEvent() {
if (!_.isEmpty(this.socketInstance) && _.isFunction(this.socketInstance.on)) {
this.socketInstance.on('webviewEvent', (msg) => {
console.log(`webviewEvent msg`, msg)
});
}
}
}
const app = new BackgroundService()
app.init()
刷新插件，打開插件后臺頁面 就可以看見鏈接建立成功，然后從 node 服務發(fā)送 msg 給 chrome 插件，我們就可以看到信息被成功接收了
(tips:之前的 node 服務別忘記啟動)
第四步 開始使 chrome 插件 background.js 與 content-script.js 建立通信
這一步也是相當簡單，chrome 官方的文檔也有很多介紹 我這邊就寫下實現(xiàn)步驟
// 修改 background.js 為如下代碼
static emitMessageToSocketService(socketInstance, params = {}) {
if (!_.isEmpty(socketInstance) && _.isFunction(socketInstance.emit)) {
console.log(params)
// 將從 content-script.js 接收到的 msg 發(fā)送到 node 服務
socketInstance.emit('webviewEventCallback', params);
}
}
linstenSocketEvent() {
if (!_.isEmpty(this.socketInstance) && _.isFunction(this.socketInstance.on)) {
this.socketInstance.on('webviewEvent', (msg) => {
console.log(`webviewEvent msg`, msg)
// 將從 node 服務接收到的 msg 發(fā)送到 content-script.js
this.sendMessageToContentScript(msg, BackgroundService.emitMessageToSocketService)
});
}
}
sendMessageToContentScript(message, callback) {
const operateTabIndex = message.operateTabIndex ? message.operateTabIndex : 0
console.log(message)
chrome.tabs.query({ index: operateTabIndex }, (tabs) => { // 獲取 索引的方式獲取對應 tabs 實例以及 id
chrome.tabs.sendMessage(tabs[0].id, message, (response) => { // 發(fā)送消息到對應 tab
console.log(callback)
if (callback) callback(this.socketInstance, response)
});
});
}
// content-script.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
console.log(request, sender, sendResponse)
sendResponse(res)
});
然后我們這邊將插件重新加載后關閉瀏覽器重新打開新瀏覽器，將需要測試的頁面放置在第一個， 然后在我們的 localhost:9527 發(fā)送信息 這是我們就能在我們預期的頁面接收到對應參數(shù)了
這時你可能會看到 2 條 log,其實這個是正常現(xiàn)象, 因為如果你是通過打開了 chrome-extension://xxx/background.html 直接打開后臺頁 運行一個后臺線程 但是真正在后臺常駐的還有一個線程 所以相當是 2 個后臺接收到了 socket 消息所以就發(fā)送 2 次 msg
第五步 嘗試操控瀏覽器做對應操作
好的，朋友們，我們終于來到了最后一步了
我們現(xiàn)在已經(jīng)建立起了這 3 個模塊間的聯(lián)系了 現(xiàn)在無非就是要將從后端發(fā)送的消息通過一些判斷做一些 js 操作
我們就來完成一個簡單的任務，打開百度頁面，搜索關鍵字，并將搜索到的各個 title 獲取
我這邊為了做演示方便點就直接引入了 jq 來操作 dom 在 js 文件夾下創(chuàng)建 operate.js 以及 jquery.min.js
// 在 manifest.json 中加入 相應 js
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"lib/js/jquery.min.js",
"lib/js/operate.js",
"content-script.js"
],
"run_at": "document_start"
}
]
operate.js 主要用來定義一些操作
根據(jù)我們上面的小任務，我這邊現(xiàn)在這里面加幾個簡單的事件定義，后續(xù)可以支持擴展
// operate.js
const operateTypeMap = {
CLICK: 'click',
INPUT: 'input',
GETELEMENTTEXT: 'getElementText'
}
class OperateConstant {
static operateByEventType(type, payload = {}) {
let res
switch (type) {
case operateTypeMap.CLICK:
res = OperateConstant.handleClickEvent(payload)
break;
case operateTypeMap.INPUT:
res = OperateConstant.handleInputEvent(payload)
break;
case operateTypeMap.GETELEMENTTEXT:
res = OperateConstant.handleGetElementTextEvent(payload)
break;
default:
break;
}
return res
}
static handleClickEvent(payload) {
let data = null
if (payload.element) {
$(payload.element).click()
}
return data
}
static handleInputEvent(payload) {
let data = null
if (payload.element) {
$(payload.element).val(payload.params.inputValue)
}
return data
}
static handleGetElementTextEvent(payload) {
let data = []
if (payload.element && $(payload.element)) {
Array.from($(payload.element)).forEach((item) => {
const resItem = {
value: $(item).text()
}
data.push(resItem)
})
}
return data
}
}
然后在 conent-script.js 使用
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
const operateRes = OperateConstant.operateByEventType(request.event, request)
console.log(operateRes)
const res = {
code: 0,
data: operateRes,
message: '操作成功'
}
sendResponse(res)
});
好的，我們來試下我們的功能吧 (tips: 請重新加載插件關閉所有 tab 以及確保你想要測試的 tabs 處于第一個)
可以，非常完美
小結
好的，朋友們，今天的分享就到這里了， 也許這個插件有許多不完善的地方，主要還是給大家分享個想法和思路，讓沒接觸過 chrome 插件的朋友們也可以嘗試下