15分钟手摸手教你写个能够操控 Chrome 的插件

时间  2021-08-12
标签 javascript css html 前端 java node python jquery git github 栏目 Chrome 繁體版
原文   原文链接

翁佳瑞，微医前端技术部前端工程师。javascript

故事背景

事情是这样的呢css

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

我: 啥插件？前端

友人 A: 经过后端服务或者 python 脚本通讯 chrome 插件可以操做浏览器java

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

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

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

友人 A: 10 斤小龙虾!git

我:成交!!!github

总体的思路

根据朋友以上的要求，咱们能够简单的得出一下的通讯流程：

flow.png

具体有疑问不要紧，咱们只要知道大致的流程是这样通讯的便可

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

第一步 建立一个 chrome 插件

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

目录以下所示

1.png

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 访问的网站
    ],
}
复制代码

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

2.png

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

3.png

4.png

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

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

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

目录结构和代码都很简单

5.png

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

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

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 中

<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.直接在浏览器上输入对应的地址 便可

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

10.png

第四步 开始使 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 发送信息 这是咱们就能在咱们预期的页面接收到对应参数了

11.png

这时你可能会看到 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 处于第一个)

demo.gif

能够，很是完美

小结

好的，朋友们，今天的分享就到这里了， 也许这个插件有许多不完善的地方，主要仍是给你们分享个想法和思路，让没接触过 chrome 插件的朋友们也能够尝试下

参考资料

未命名_自定义px_2021-07-18-0.gif

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程