15分钟手摸手教你写个可以操控 Chrome 的插件

故事背景

事情是这样的呢

友人 A: 能不能帮我整一个 chrome 插件？

我: 啥插件？

友人 A: 通过后端服务或者 python 脚本通信 chrome 插件能够操作浏览器

我: 你小子是想爬数据吧？直接用现成的 python 框架或者谷歌的 puppeteer 就能操控浏览器吧

友人 A: 你说的路子我早就试过了，对于反爬检测高的网站一下就能检测你的无头浏览器的相应特征，所以就用平时用的浏览器就能以真乱真

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

友人 A: 10 斤小龙虾!

我:成交!!!

整体的思路

根据朋友以上的要求，我们可以简单的得出一下的通信流程：

flow.png

具体有疑问没关系，我们只要知道大体的流程是这样通信的即可

github 地址每个 commit 对应相应的步骤

第一步创建一个 chrome 插件

我们首先来创建一个啥功能都没有的 chrome 插件

目录如下所示

1.png

manifest.json

代码语言：javascript复制

// 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 访问的网站
    ],
}

js

代码语言：javascript复制

// background.js
console.log('background.js')

代码语言：javascript复制

// popup.js
console.log('popup.js')

代码语言：javascript复制

// content-script.js
console.log('content-script.js loaded')

html

代码语言：javascript复制

<!-- 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>

代码语言：javascript复制

<!-- 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 的扩展程序页加载我们的文件目录即可

2.png

然后我们启用插件随手打开一个页面就发现我们的插件已经生效了

3.png

4.png

第二步在本地创建 websocket 的服务

正如上面的通信流程所示，我们还需要在本地创建一个可用的 websocket 来发送信息给 chrome 插件

为了方便起见，我这边就用 node 的 express 以及 socket.io 这个库来启用

目录结构和代码都很简单

5.png

代码语言：javascript复制

// 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')
})

代码语言：javascript复制

<!-- 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>

代码语言：javascript复制

// 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 即可

好的，这样我们的服务就跑起来了

6.png

我们访问 http://localhost:9527

并点击页面上的按钮在命令行上有 log 输出就说明连接成功啦!

7.png

第三步开始使 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 中

代码语言：javascript复制

<script src="./lib/js/lodash.min.js"></script>
<script src="./lib/js/socket.io.min.js"></script>
<script src="./background.js"></script>

我们可以使用两种方式来调试这个常驻后台文件

1.直接在 chrome 拓展点击对应按钮即可弹出调试

8.png

9.png

2.直接在浏览器上输入对应的地址即可

代码语言：javascript复制

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

每次更新代码点击按钮刷新即可

为了调试方便起见我在 popup.js 中加入了以下代码每次点击我们的插件图标即可新开一个后台页面

代码语言：javascript复制

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

现在我们只需要在 background.js 中编写相应代码，建立长链接就可以了

代码语言：javascript复制

// 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 服务别忘记启动)

10.png

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

这一步也是相当简单，chrome 官方的文档也有很多介绍我这边就写下实现步骤

代码语言：javascript复制

// 修改 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)
        });
    });
}

代码语言：javascript复制

// content-script.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    console.log(request, sender, sendResponse)
    sendResponse(res)
});

然后我们这边将插件重新加载后关闭浏览器重新打开新浏览器，将需要测试的页面放置在第一个，然后在我们的 localhost:9527 发送信息这是我们就能在我们预期的页面接收到对应参数了

11.png

这时你可能会看到 2 条 log,其实这个是正常现象, 因为如果你是通过打开了 chrome-extension://xxx/background.html 直接打开后台页运行一个后台线程但是真正在后台常驻的还有一个线程所以相当是 2 个后台接收到了 socket 消息所以就发送 2 次 msg

第五步尝试操控浏览器做对应操作

好的，朋友们，我们终于来到了最后一步了

我们现在已经建立起了这 3 个模块间的联系了现在无非就是要将从后端发送的消息通过一些判断做一些 js 操作

我们就来完成一个简单的任务，打开百度页面，搜索关键字，并将搜索到的各个 title 获取

我这边为了做演示方便点就直接引入了 jq 来操作 dom 在 js 文件夹下创建 operate.js 以及 jquery.min.js

代码语言：javascript复制

// 在 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 主要用来定义一些操作

根据我们上面的小任务，我这边现在这里面加几个简单的事件定义，后续可以支持扩展

代码语言：javascript复制

// 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 使用

代码语言：javascript复制

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 插件(扩展)开发全攻略（https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html）

公众号：前端食堂

知乎：童欧巴

掘金：童欧巴

这是一个终身学习的男人，他在坚持自己热爱的事情，欢迎你加入前端食堂，和这个男人一起开心的变胖～

“如果你觉得读了本文有收获的话可以点个在看让我看到。阅读过程中有任何问题、想法或者感触也欢迎你在下方留言，也可以在后台回复加群进入食堂的交流群。沟通创造价值，分享带来快乐。也欢迎你分享给身边有需要的同学，利他就是最好的利己。 ”

node.js javascript socket.io html

0 人点赞

15分钟手摸手教你写个可以操控 Chrome 的插件

故事背景

整体的思路

第一步 创建一个 chrome 插件

manifest.json

js

html

第二步 在本地创建 websocket 的服务

第三步 开始使 chrome 插件 与 本地的 node 服务相互通信

content-scripts

background.js

popup.js

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

第五步 尝试操控浏览器做对应操作

小结

参考资料

第一步创建一个 chrome 插件

第二步在本地创建 websocket 的服务

第三步开始使 chrome 插件与本地的 node 服务相互通信

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

第五步尝试操控浏览器做对应操作