av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

15分鐘手摸手教你寫(xiě)個(gè)可以操控Chrome的插件

故事背景

事情是這樣的呢

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

友人 A: 能不能幫我整一個(gè) chrome 插件?

我: 啥插件?

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

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

友人 A: 你說(shuō)的路子我早就試過(guò)了，對(duì)于反爬檢測(cè)高的網(wǎng)站一下就能檢測(cè)你的無(wú)頭瀏覽器的相應(yīng)特征，所以就用平時(shí)用的瀏覽器就能以真亂真

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

友人 A: 10 斤小龍蝦!

我:成交!!!

整體的思路

根據(jù)朋友以上的要求，我們可以簡(jiǎn)單的得出一下的通信流程：

具體有疑問(wèn)沒(méi)關(guān)系，我們只要知道大體的流程是這樣通信的即可

github 地址 每個(gè) commit 對(duì)應(yīng)相應(yīng)的步驟

第一步 創(chuàng)建一個(gè) chrome 插件

我們首先來(lái)創(chuàng)建一個(gè)啥功能都沒(méi)有的 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",// 對(duì)應(yīng)尺寸的圖標(biāo)路徑 我這邊全部用一個(gè)了 
    10.   
  
  
  
  10.         "128": "icon.png" 
    11.   
  
  
  
  11.     }, 
    12.   
  
  
  
  12.     "browser_action": { 
    13.   
  
  
  
  13.         "default_icon": "icon.png", // 圖標(biāo) 
    14.   
  
  
  
  14.         "default_popup": "popup.html" // 點(diǎn)擊右上角的圖標(biāo)的 popup 浮層 html 文件 
    15.   
  
  
  
  15.     }, 
    16.   
  
  
  
  16.     "background": { 
    17.   
  
  
  
  17.         // 會(huì)一直常駐的后臺(tái) JS 或后臺(tái)頁(yè)面 
    18.   
  
  
  
  18.         // 2 種指定方式，如果指定 JS，那么會(huì)自動(dòng)生成一個(gè)背景頁(yè) 
    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", // 標(biāo)簽 
    38.   
  
  
  
  38.         "notifications", // 通知 
    39.   
  
  
  
  39.         "webRequest", // web 請(qǐng)求 
    40.   
  
  
  
  40.         "webRequestBlocking", // 阻塞式 web 請(qǐng)求 
    41.   
  
  
  
  41.         "storage", // 插件本地存儲(chǔ) 
    42.   
  
  
  
  42.         "http://*/*", // 可以通過(guò) executeScript 或者 insertCSS 訪問(wèn)的網(wǎng)站 
    43.   
  
  
  
  43.         "https://*/*" // 可以通過(guò) executeScript 或者 insertCSS 訪問(wèn)的網(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 的擴(kuò)展程序頁(yè)加載我們的文件目錄 即可

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

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

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

    為了方便起見(jiàn)，我這邊就用 node 的 express 以及 socket.io 這個(gè)庫(kù)來(lái)啟用

    目錄結(jié)構(gòu)和代碼都很簡(jiǎn)單

     
 
 
 
      
  
  
  
  
    1. // index.js  用來(lái)創(chuàng)建 node 服務(wù) 
      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.