最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
15分鐘手摸手教你寫個可以操控Chrome的插件

故事背景

事情是這樣的呢

創(chuàng)新互聯(lián)網(wǎng)站建設提供從項目策劃、軟件開發(fā)，軟件安全維護、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評估等整套的建站服務，主營業(yè)務為成都網(wǎng)站制作、成都網(wǎng)站建設、外貿營銷網(wǎng)站建設，成都app軟件開發(fā)公司以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。創(chuàng)新互聯(lián)深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

友人 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

 
 
 
 
    
  
  
  
  
  1. // manifest.json 
    2.   
  
  
  
  2. { 
    3.   
  
  
  
  3.     "manifest_version": 2, // 配置文件的版本 
    4.   
  
  
  
  4.     "name": "SocketEXController", // 插件的名稱 
    5.   
  
  
  
  5.     "version": "1.0.0", // 插件的版本 
    6.   
  
  
  
  6.     "description": "Chrome SocketEXController",// 插件描述 
    7.   
  
  
  
  7.     "author": "wjryours", // 作者 
    8.   
  
  
  
  8.     "icons": { 
    9.   
  
  
  
  9.         "48": "icon.png",// 對應尺寸的圖標路徑 我這邊全部用一個了 
    10.   
  
  
  
  10.         "128": "icon.png" 
    11.   
  
  
  
  11.     }, 
    12.   
  
  
  
  12.     "browser_action": { 
    13.   
  
  
  
  13.         "default_icon": "icon.png", // 圖標 
    14.   
  
  
  
  14.         "default_popup": "popup.html" // 點擊右上角的圖標的 popup 浮層 html 文件 
    15.   
  
  
  
  15.     }, 
    16.   
  
  
  
  16.     "background": { 
    17.   
  
  
  
  17.         // 會一直常駐的后臺 JS 或后臺頁面 
    18.   
  
  
  
  18.         // 2 種指定方式，如果指定 JS，那么會自動生成一個背景頁 
    19.   
  
  
  
  19.         "page": "background.html" 
    20.   
  
  
  
  20.     }, 
    21.   
  
  
  
  21.     "content_scripts": [ 
    22.   
  
  
  
  22.         { 
    23.   
  
  
  
  23.             // 允許哪些域名下加載 注入的 JS 
    24.   
  
  
  
  24.             // "matches": ["http://*/*", "https://*/*"], 
    25.   
  
  
  
  25.             // "" 表示匹配所有地址 
    26.   
  
  
  
  26.             "matches": [ 
    27.   
  
  
  
  27.                 "" 
    28.   
  
  
  
  28.             ], 
    29.   
  
  
  
  29.             "js": [ 
    30.   
  
  
  
  30.                 "content-script.js" 
    31.   
  
  
  
  31.             ], 
    32.   
  
  
  
  32.             "run_at": "document_start" 
    33.   
  
  
  
  33.         } 
    34.   
  
  
  
  34.     ], 
    35.   
  
  
  
  35.     "permissions": [ 
    36.   
  
  
  
  36.         "contextMenus", // 右鍵菜單 
    37.   
  
  
  
  37.         "tabs", // 標簽 
    38.   
  
  
  
  38.         "notifications", // 通知 
    39.   
  
  
  
  39.         "webRequest", // web 請求 
    40.   
  
  
  
  40.         "webRequestBlocking", // 阻塞式 web 請求 
    41.   
  
  
  
  41.         "storage", // 插件本地存儲 
    42.   
  
  
  
  42.         "http://*/*", // 可以通過 executeScript 或者 insertCSS 訪問的網(wǎng)站 
    43.   
  
  
  
  43.         "https://*/*" // 可以通過 executeScript 或者 insertCSS 訪問的網(wǎng)站 
    44.   
  
  
  
  44.     ], 
    45.   
  
  
  
  45. } 
    46.

js

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

html

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.      
    7.   
  
  
  
  7.      
    8.   
  
  
  
  8.     SocketController Popup 
    9.   
  
  
  
  9.      
    10.   
  
  
  
  10.      
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.     popup 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.  
    16.  
 
 
 
 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.      
    7.   
  
  
  
  7.      
    8.   
  
  
  
  8.      
    9.   
  
  
  
  9.     SocketController 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.      
    14.   
  
  
  
  14.         bg-container 
    15.   
  
  
  
  15.     
 
  •  
  •  
  •  

    • 然后在 chrome 的擴展程序頁加載我們的文件目錄 即可

    然后我們啟用插件 隨手打開一個頁面就發(fā)現(xiàn)我們的插件已經(jīng)生效了

    第二步 在本地創(chuàng)建 websocket 的服務

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

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

    目錄結構和代碼都很簡單

     
 
 
 
      
  
  
  
  
    1. // index.js  用來創(chuàng)建 node 服務 
      2.   
  
  
  
    2. const express = require('express') 
      3.   
  
  
  
    3. const app = express() 
      4.   
  
  
  
    4. const http = require('http') 
      5.   
  
  
  
    5. const server = http.createServer(app) 
      6.   
  
  
  
    6. const { Server } = require("socket.io") 
      7.   
  
  
  
    7. const io = new Server(server) 
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9. app.get('/', (req, res) => { 
      10.   
  
  
  
    10.     res.sendFile(__dirname + '/index.html') 
      11.   
  
  
  
    11. }) 
      12.   
  
  
  
    12.  
      13.   
  
  
  
    13. io.on('connection', (socket) => { 
      14.   
  
  
  
    14.     console.log('a user connected') 
      15.   
  
  
  
    15.     socket.on('disconnect', () => { 
      16.   
  
  
  
    16.         console.log('user disconnected'); 
      17.   
  
  
  
    17.     }); 
      18.   
  
  
  
    18.     socket.on('webviewEvent', (msg) => { 
      19.   
  
  
  
    19.         console.log('webviewEvent: ' + msg); 
      20.   
  
  
  
    20.         io.emit('webviewEvent', msg); 
      21.   
  
  
  
    21.         // socket.broadcast.emit('chat message', msg); 
      22.   
  
  
  
    22.     }); 
      23.   
  
  
  
    23.     socket.on('webviewEventCallback', (msg) => { 
      24.   
  
  
  
    24.         console.log('webviewEventCallback: ' + msg); 
      25.   
  
  
  
    25.         io.emit('webviewEventCallback', msg); 
      26.   
  
  
  
    26.     }); 
      27.   
  
  
  
    27. }) 
      28.   
  
  
  
    28.  
      29.   
  
  
  
    29.  
      30.   
  
  
  
    30. server.listen(9527, () => { 
      31.   
  
  
  
    31.     console.log('listening on 9527') 
      32.   
  
  
  
    32. }) 
      33.  
 
 
 
     
 
 
 
      
  
  
  
  
    1.   
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7.   Socket.IO Page 
      8.   
  
  
  
    8.