15分鐘手摸手教你寫個可以操控 Chrome 的插件

作者：翁佳瑞 2021-07-19 07:01:20

開發前端瀏覽器

今天教你寫個可以操控 Chrome 的插件，也許這個插件有許多不完善的地方，主要還是給大家分享個想法和思路，讓沒接觸過 chrome 插件的朋友們也可以嘗試下

[[411930]]

故事背景

事情是這樣的呢

友人 A: 能不能幫我整一個 chrome 插件?

我: 啥插件?

友人 A: 通過后端服務或者 python 腳本通信 chrome 插件能夠操作瀏覽器

我: 你小子是想爬數據吧?直接用現成的 python 框架或者谷歌的 puppeteer 就能操控瀏覽器吧

友人 A: 你說的路子我早就試過了，對于反爬檢測高的網站一下就能檢測你的無頭瀏覽器的相應特征，所以就用平時用的瀏覽器就能以真亂真

我: 老是整這些花里胡哨的，有啥用呀

友人 A: 10 斤小龍蝦!

我:成交!!!

整體的思路

根據朋友以上的要求，我們可以簡單的得出一下的通信流程：

具體有疑問沒關系，我們只要知道大體的流程是這樣通信的即可

github 地址每個 commit 對應相應的步驟

第一步創建一個 chrome 插件

我們首先來創建一個啥功能都沒有的 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 訪問的網站 
        "https://*/*" // 可以通過 executeScript 或者 insertCSS 訪問的網站 
    ], 
}

// 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 的擴展程序頁加載我們的文件目錄即可

然后我們啟用插件隨手打開一個頁面就發現我們的插件已經生效了

第二步在本地創建 websocket 的服務

正如上面的通信流程所示，我們還需要在本地創建一個可用的 websocket 來發送信息給 chrome 插件

為了方便起見，我這邊就用 node 的 express 以及 socket.io 這個庫來啟用

目錄結構和代碼都很簡單

// index.js  用來創建 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 -->  
<!-- 點擊事件傳遞的參數后續會用到，這里可以不去了解 --> 
<!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" 
  } 
}

具體的內容也很簡單，就是使用 express 和 socket.io 創建了一個 node 服務支持長鏈接，對于 socket.io 想有更多的了解的可以參照官方文檔

運行 npm run dev 即可

好的，這樣我們的服務就跑起來了

我們訪問 http://localhost:9527

并點擊頁面上的按鈕在命令行上有 log 輸出就說明連接成功啦!

第三步開始使 chrome 插件與本地的 node 服務相互通信

在開始與 node 服務通信前我們要了解下 chrome 插件的幾種 js 的使用場景

content-scripts

這個主要功能就是 Chrome 插件中向頁面注入腳本在第一步的操作中正是該文件在別的頁面控制臺中打印出了我們期望的 log content-scripts 和原始頁面共享 DOM，但是不共享 JS 但是這個功能足以讓我們去操作目標頁面了

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>

我們可以使用兩種方式來調試這個常駐后臺文件

1.直接在 chrome 拓展點擊對應按鈕即可彈出調試

2.直接在瀏覽器上輸入對應的地址即可

chrome-extension://${extensionID}/background.html

每次更新代碼點擊按鈕刷新即可

為了調試方便起見我在 popup.js 中加入了以下代碼每次點擊我們的插件圖標即可新開一個后臺頁面

const extensionId = chrome.runtime.id 
const backgroundURL = `chrome-extension://${extensionId}/background.html` 
window.open(backgroundURL)

現在我們只需要在 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 服務發送 msg 給 chrome 插件，我們就可以看到信息被成功接收了

(tips:之前的 node 服務別忘記啟動)

第四步開始使 chrome 插件 background.js 與 content-script.js 建立通信

這一步也是相當簡單，chrome 官方的文檔也有很多介紹我這邊就寫下實現步驟

// 修改 background.js 為如下代碼 
static emitMessageToSocketService(socketInstance, params = {}) { 
    if (!_.isEmpty(socketInstance) && _.isFunction(socketInstance.emit)) { 
        console.log(params) 
        // 將從 content-script.js 接收到的 msg 發送到 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 發送到 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) => { // 發送消息到對應 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 發送信息這是我們就能在我們預期的頁面接收到對應參數了

這時你可能會看到 2 條 log,其實這個是正常現象, 因為如果你是通過打開了 chrome-extension://xxx/background.html 直接打開后臺頁運行一個后臺線程但是真正在后臺常駐的還有一個線程所以相當是 2 個后臺接收到了 socket 消息所以就發送 2 次 msg

第五步嘗試操控瀏覽器做對應操作

好的，朋友們，我們終于來到了最后一步了

我們現在已經建立起了這 3 個模塊間的聯系了現在無非就是要將從后端發送的消息通過一些判斷做一些 js 操作

我們就來完成一個簡單的任務，打開百度頁面，搜索關鍵字，并將搜索到的各個 title 獲取

我這邊為了做演示方便點就直接引入了 jq 來操作 dom 在 js 文件夾下創建 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 主要用來定義一些操作

根據我們上面的小任務，我這邊現在這里面加幾個簡單的事件定義，后續可以支持擴展

// 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 插件的朋友們也可以嘗試下

責任編輯：姜華來源：微醫大前端技術

Chrome 插件瀏覽器

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看