• 注册
  • 操作系统 操作系统 关注:2 内容:37319

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

  • 查看作者
  • 打赏作者
  • 当前位置: 职业司 > 资讯 > 操作系统 > 正文
    • 操作系统
    • 15分钟手摸手教你写个可以操控 Chrome 的插件

      故事背景

      事情是这样的呢

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

      我: 啥插件?

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

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

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

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

      友人 A: 10 斤小龙虾!

      我:成交!!!

      整体的思路

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

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

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

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

      第一步 创建一个 chrome 插件

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

      目录如下所示

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

      manifest.json

      1. // manifest.json 
      2.     "manifest_version": 2, // 配置文件的版本 
      3.     "name""SocketEXController", // 插件的名称 
      4.     "version""1.0.0", // 插件的版本 
      5.     "description""Chrome SocketEXController",// 插件描述 
      6.     "author""wjryours", // 作者 
      7.     "icons": { 
      8.         "48""icon.png",// 对应尺寸的图标路径 我这边全部用一个了 
      9.         "128""icon.png" 
      10.     }, 
      11.     "browser_action": { 
      12.         "default_icon""icon.png", // 图标 
      13.         "default_popup""popup.html" // 点击右上角的图标的 popup 浮层 html 文件 
      14.     }, 
      15.     "background": { 
      16.         // 会一直常驻的后台 JS 或后台页面 
      17.         // 2 种指定方式,如果指定 JS,那么会自动生成一个背景页 
      18.         "page""background.html" 
      19.     }, 
      20.     "content_scripts": [ 
      21.         { 
      22.             // 允许哪些域名下加载 注入的 JS 
      23.             // "matches": ["http://*/*""https://*/*"], 
      24.             // "<all_urls>" 表示匹配所有地址 
      25.             "matches": [ 
      26.                 "<all_urls>" 
      27.             ], 
      28.             "js": [ 
      29.                 "content-script.js" 
      30.             ], 
      31.             "run_at""document_start" 
      32.         } 
      33.     ], 
      34.     "permissions": [ 
      35.         "contextMenus", // 右键菜单 
      36.         "tabs", // 标签 
      37.         "notifications", // 通知 
      38.         "webRequest", // web 请求 
      39.         "webRequestBlocking", // 阻塞式 web 请求 
      40.         "storage", // 插件本地存储 
      41.         "http://*/*", // 可以通过 executeScript 或者 insertCSS 访问的网站 
      42.         "https://*/*" // 可以通过 executeScript 或者 insertCSS 访问的网站 
      43.     ], 

      js

      1. // background.js 
      2. console.log('background.js'
      1. // popup.js 
      2. console.log('popup.js'
      1. // content-script.js 
      2. console.log('content-script.js loaded'

      html

      1. <!-- popup --> 
      2. <!DOCTYPE html> 
      3. <html lang="en"
      4. <head> 
      5.     <meta charset="UTF-8"
      6.     <meta http-equiv="X-UA-Compatible" content="IE=edge"
      7.     <meta name="viewport" content="width=device-width, initial-scale=1.0"
      8.     <title>SocketController Popup</title> 
      9.     <link rel="stylesheet" href="./lib/css/popup.css"
      10.     <script src="./popup.js"></script> 
      11. </head> 
      12. <body> 
      13.     popup 
      14. </body> 
      15. </html> 
      1. <!-- background --> 
      2. <!DOCTYPE html> 
      3. <html lang="en"
      4.  
      5. <head> 
      6.     <meta charset="UTF-8"
      7.     <meta http-equiv="X-UA-Compatible" content="IE=edge"
      8.     <meta name="viewport" content="width=device-width, initial-scale=1.0"
      9.     <title>SocketController</title> 
      10. </head> 
      11.  
      12. <body> 
      13.     <div class="bg-container"
      14.         bg-container 
      15.     </div> 
      16. </body> 
      17.  
      18. </html> 

      然后在 chrome 的扩展程序页加载我们的文件目录 即可

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

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

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

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

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

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

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

      目录结构和代码都很简单

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

      1. // index.js  用来创建 node 服务 
      2. const express = require('express'
      3. const app = express() 
      4. const http = require('http'
      5. const server = http.createServer(app) 
      6. const { Server } = require("socket.io"
      7. const io = new Server(server) 
      8.  
      9. app.get('/', (req, res) => { 
      10.     res.sendFile(__dirname + '/index.html'
      11. }) 
      12.  
      13. io.on('connection', (socket) => { 
      14.     console.log('a user connected'
      15.     socket.on('disconnect', () => { 
      16.         console.log('user disconnected'); 
      17.     }); 
      18.     socket.on('webviewEvent', (msg) => { 
      19.         console.log('webviewEvent: ' + msg); 
      20.         io.emit('webviewEvent', msg); 
      21.         // socket.broadcast.emit('chat message', msg); 
      22.     }); 
      23.     socket.on('webviewEventCallback', (msg) => { 
      24.         console.log('webviewEventCallback: ' + msg); 
      25.         io.emit('webviewEventCallback', msg); 
      26.     }); 
      27. }) 
      28.  
      29.  
      30. server.listen(9527, () => { 
      31.     console.log('listening on 9527'
      32. }) 
      1. <!-- index.html -->  
      2. <!-- 点击事件传递的参数后续会用到,这里可以不去了解 --> 
      3. <!DOCTYPE html> 
      4. <html> 
      5.  
      6. <head> 
      7.   <title>Socket.IO Page</title> 
      8.   <style> 
      9. </head> 
      10.  
      11. <body> 
      12.   <input id="SendInput" autocomplete="off" /> 
      13.   <button id="SendInputevent">Send input event</button> 
      14.   <button id="SendClickevent">Send click event</button> 
      15.   <button id="SendGetTextevent">Send getText event</button> 
      16. </body> 
      17. <script src="/socket.io/socket.io.js"></script> 
      18. <script> 
      19.   var socket = io(); 
      20.  
      21.   var form = document.getElementById('form'); 
      22.   var input = document.getElementById('input'); 
      23.  
      24.   document.getElementById('SendClickevent').addEventListener('click'function (e) { 
      25.     socket.emit('webviewEvent', { event: 'click', params: { delay: 300 }, element: '#su', operateTabIndex: 0 }); 
      26.   }) 
      27.   document.getElementById('SendInputevent').addEventListener('click'function (e) { 
      28.     const value = document.getElementById('SendInput').value 
      29.     socket.emit('webviewEvent', { event: 'input', params: { inputValue: value }, element: '#kw', operateTabIndex: 0 }); 
      30.   }) 
      31.   document.getElementById('SendGetTextevent').addEventListener('click'function (e) { 
      32.     socket.emit('webviewEvent', { event: 'getElementText', params: {}, element: '.result.c-container.new-pmd .t a', operateTabIndex: 0 }); 
      33.   }) 
      34.  
      35.   socket.on('webviewEventCallback', (msg) => { 
      36.     console.log(msg) 
      37.   }) 
      38. </script> 
      39.  
      40. </html> 
      1. // package.json 
      2.   "name""socket-service"
      3.   "version""1.0.0"
      4.   "description"""
      5.   "main""index.js"
      6.   "scripts": { 
      7.     "test""echo \"Error: no test specified\" && exit 1"
      8.     "dev""nodemon index.js" 
      9.   }, 
      10.   "author"""
      11.   "license""ISC"
      12.   "dependencies": { 
      13.     "express""^4.17.1"
      14.     "nodemon""^2.0.7"
      15.     "socket.io""^4.1.2" 
      16.   } 

      具体的内容也很简单,就是使用 express 和 socket.io 创建了一个 node 服务支持长链接,对于 socket.io 想有更多的了解的可以参照 官方文档

      运行 npm run dev 即可

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

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

      我们访问 链接

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      1. // background.js 
      2. class BackgroundService { 
      3.     constructor() { 
      4.         this.socketIoURL = 'http://localhost:9527' 
      5.         this.socketInstance = {} 
      6.         this.socketRetryMax = 5 
      7.         this.socketRetry = 0 
      8.     } 
      9.     init() { 
      10.         console.log('background.js')    
      11.         this.connectSocket() 
      12.         this.linstenSocketEvent() 
      13.     } 
      14.     setSocketURL(url) { 
      15.         this.socketIoURL = url 
      16.     } 
      17.     connectSocket() { 
      18.         if (!_.isEmpty(this.socketInstance) && _.isFunction(this.socketInstance.disconnect)) { 
      19.             this.socketInstance.disconnect() 
      20.         } 
      21.         this.socketInstance = io(this.socketIoURL); 
      22.         this.socketRetry = 0 
      23.         this.socketInstance.on('connect_error', (e) => { 
      24.             console.log('connect_error', e) 
      25.             this.socketRetry++ 
      26.             if (this.socketRetryMax < this.socketRetry) { 
      27.                 this.socketInstance.close() 
      28.                 alert(`以尝试连接${this.socketRetryMax}次,无法连接到 socket 服务,请排查服务是否可用`) 
      29.             } 
      30.         }) 
      31.     } 
      32.     linstenSocketEvent() { 
      33.         if (!_.isEmpty(this.socketInstance) && _.isFunction(this.socketInstance.on)) { 
      34.             this.socketInstance.on('webviewEvent', (msg) => { 
      35.                 console.log(`webviewEvent msg`, msg) 
      36.             }); 
      37.         } 
      38.     } 
      39. const app = new BackgroundService() 
      40. app.init() 

      刷新插件,打开插件后台页面 就可以看见链接建立成功,然后从 node 服务发送 msg 给 chrome 插件,我们就可以看到信息被成功接收了

      (tips:之前的 node 服务别忘记启动)

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

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

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

      1. // 修改 background.js 为如下代码 
      2. static emitMessageToSocketService(socketInstance, params = {}) { 
      3.     if (!_.isEmpty(socketInstance) && _.isFunction(socketInstance.emit)) { 
      4.         console.log(params) 
      5.         // 将从 content-script.js 接收到的 msg 发送到 node 服务 
      6.         socketInstance.emit('webviewEventCallback', params); 
      7.     } 
      8. linstenSocketEvent() { 
      9.     if (!_.isEmpty(this.socketInstance) && _.isFunction(this.socketInstance.on)) { 
      10.         this.socketInstance.on('webviewEvent', (msg) => { 
      11.             console.log(`webviewEvent msg`, msg) 
      12.             // 将从 node 服务接收到的 msg 发送到 content-script.js 
      13.             this.sendMessageToContentScript(msg, BackgroundService.emitMessageToSocketService) 
      14.         }); 
      15.     } 
      16. sendMessageToContentScript(message, callback) { 
      17.     const operateTabIndex = message.operateTabIndex ? message.operateTabIndex : 0 
      18.     console.log(message) 
      19.     chrome.tabs.query({ index: operateTabIndex }, (tabs) => { // 获取 索引的方式获取对应 tabs 实例以及 id 
      20.         chrome.tabs.sendMessage(tabs[0].id, message, (response) => { // 发送消息到对应 tab 
      21.             console.log(callback) 
      22.             if (callback) callback(this.socketInstance, response) 
      23.         }); 
      24.     }); 
      1. // content-script.js 
      2.  
      3. chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { 
      4.     console.log(request, sender, sendResponse) 
      5.     sendResponse(res) 
      6. }); 

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

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

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

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

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

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

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

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

      1. // 在 manifest.json 中加入 相应 js 
      2. "content_scripts": [ 
      3.     { 
      4.         "matches": [ 
      5.             "<all_urls>" 
      6.         ], 
      7.         "js": [ 
      8.             "lib/js/jquery.min.js"
      9.             "lib/js/operate.js"
      10.             "content-script.js" 
      11.         ], 
      12.         "run_at""document_start" 
      13.     } 

      operate.js 主要用来定义一些操作

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

      1. // operate.js 
      2. const operateTypeMap = { 
      3.     CLICK: 'click'
      4.     INPUT: 'input'
      5.     GETELEMENTTEXT: 'getElementText' 
      6.  
      7. class OperateConstant { 
      8.     static operateByEventType(type, payload = {}) { 
      9.         let res 
      10.         switch (type) { 
      11.             case operateTypeMap.CLICK: 
      12.                 res = OperateConstant.handleClickEvent(payload) 
      13.                 break; 
      14.             case operateTypeMap.INPUT: 
      15.                 res = OperateConstant.handleInputEvent(payload) 
      16.                 break; 
      17.             case operateTypeMap.GETELEMENTTEXT: 
      18.                 res = OperateConstant.handleGetElementTextEvent(payload) 
      19.                 break; 
      20.             default
      21.                 break; 
      22.         } 
      23.         return res 
      24.     } 
      25.     static handleClickEvent(payload) { 
      26.         let data = null 
      27.         if (payload.element) { 
      28.             $(payload.element).click() 
      29.         } 
      30.         return data 
      31.     } 
      32.     static handleInputEvent(payload) { 
      33.         let data = null 
      34.         if (payload.element) { 
      35.             $(payload.element).val(payload.params.inputValue) 
      36.         } 
      37.         return data 
      38.     } 
      39.     static handleGetElementTextEvent(payload) { 
      40.         let data = [] 
      41.         if (payload.element && $(payload.element)) { 
      42.             Array.from($(payload.element)).forEach((item) => { 
      43.                 const resItem = { 
      44.                     value: $(item).text() 
      45.                 } 
      46.                 data.push(resItem) 
      47.             }) 
      48.         } 
      49.         return data 
      50.     } 

      然后在 conent-script.js 使用

      1. chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { 
      2.     const operateRes =  OperateConstant.operateByEventType(request.event, request) 
      3.     console.log(operateRes) 
      4.     const res = { 
      5.         code: 0, 
      6.         data: operateRes, 
      7.         message: '操作成功' 
      8.     } 
      9.     sendResponse(res) 
      10. }); 

      好的,我们来试下我们的功能吧 (tips: 请重新加载插件关闭所有 tab 以及确保你想要测试的 tabs 处于第一个)

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

      可以,非常完美

      小结

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

      请登录之后再进行评论

      登录

      手机阅读天地(APP)

      • 微信公众号
      • 微信小程序
      • 安卓APP
      手机浏览,惊喜多多
      匿名树洞,说我想说!
      问答悬赏,VIP可见!
      密码可见,回复可见!
      即时聊天、群聊互动!
      宠物孵化,赠送礼物!
      动态像框,专属头衔!
      挑战/抽奖,金币送不停!
      赶紧体会下,不会让你失望!
    • 实时动态
    • 签到
    • 做任务
    • 发表内容
    • 偏好设置
    • 到底部
    • 帖子间隔 侧栏位置:
    • 还没有账号?点这里立即注册