背景

在調(diào)研瀏覽器多開的過程中，electron 有自帶的 browserview，webview，但是上面兩個受制于 electron 內(nèi)核版本限制，升級不夠靈活，對新版的網(wǎng)頁支持可能不及時，甚至不兼容，必須通過發(fā)布新的客戶端版本才能解決，此外，這兩個組件本身也不穩(wěn)定，經(jīng)常內(nèi)存溢出，如果能改為 chrome 自己開發(fā)的瀏覽器內(nèi)核來運行，則以上問題解決起來都不會特別吃力，所以才有了對 Electorn 控制瀏覽器多開的技術(shù)調(diào)研。

思路

在開發(fā)爬蟲時，我了解導 selenium  和 chromedriver，其中 selenium 有個 node.js 調(diào)用庫（還有 php，python，java 等包），其中 selenium 是一個 webdriver 協(xié)議，webdriver 是什么？和 chromedriver 有什么區(qū)別？這個后續(xù)再說。selenium 基于 webdriver 協(xié)議并且封裝了 webdriver 協(xié)議，用以操控瀏覽器，而 chromedriver 負責橋接 selenium 和 chrome 瀏覽器，這樣就實現(xiàn)了瀏覽器多開。

在研究爬蟲時，還發(fā)現(xiàn) puppeteer 庫，這個庫就比較特殊，它不依賴 chromedriver，那就意味著 puppeteer 自己實現(xiàn)了一套 chromedriver 用來管理 chrome，同時自己還實現(xiàn)了 selenium 的封裝，如果將 puppeteer 打包到 electron 包中，那就要解決 chrome 執(zhí)行路徑的問題。   

實現(xiàn)

puppeteer 這個還沒跑通，這個也沒有現(xiàn)成的案例，github 有個庫，但是只支持 node.js 18，而我用的 electron 依賴 node.js 16，此外還需要 puppeteer 的版本和 electron 的版本對應，這個處理起來比較復雜，也沒有人給予一個完整可運行的 demo 包，因為暫時放棄這方面的探索。

electron 官網(wǎng)中講了 selenium 和 chromedriver

這是一個比較古老的文檔，electron 更新頻率過快，很多庫都懶得跟進 electron，選擇 electron 本身就是個大坑，要面對的問題很多，要求掌握的知識也很多，還解決不了這些基礎的 C++問題

Selenium 和 WebDriver | Electron

webdriver vs chromedriver 的區(qū)別 WebDriver

WebDriver 是一種定義了如何通過代碼來操作瀏覽器的接口。它是一個規(guī)范（或者說協(xié)議），由 W3C 制定，旨在通過統(tǒng)一的接口與各種瀏覽器進行交互。WebDriver 允許開發(fā)人員編寫代碼來控制瀏覽器執(zhí)行各種操作，如打開網(wǎng)頁、點擊按鈕、輸入文本等。

ChromeDriver

ChromeDriver 是 WebDriver 的一個具體實現(xiàn)，它專門用于與 Google Chrome 瀏覽器進行交互。ChromeDriver 充當一個獨立的服務，用于接收 WebDriver 的命令并將這些命令轉(zhuǎn)發(fā)給 Chrome 瀏覽器，從而控制瀏覽器的行為。它是由開發(fā) Chromium 和 WebDriver 的團隊維護的。

electron 文檔講的亂亂的

看上面的 electron 你會很懵逼，對方講了很多套路和方法，但由于一些東西缺失具體的演示，你根本不知道干嘛的

electron 文檔核心點解析

開頭配置 Spectron沒啥用，你可以直接忽略，看起來這個庫都被放棄了

緊接著 Electron 給了兩種 webdriver 實現(xiàn)協(xié)議，一種是WebDriverJs,一種是WebdriverIO,我一開始還以為這兩者是順序關(guān)系呢，其實是互斥的關(guān)系，是兩種獨立實現(xiàn)方式，第一種比較像 selenium，庫名字也有 selenium，npm install selenium-webdriver, 第二種，ChatGPT-4o 說是一種簡化寫法，類似于 js 和 jquery 的關(guān)系，但其實第一種就夠用了。

其中講到的 npm install electron-chromedriver也是一種誤導，其實就是 chromedriver，你裝這個還會搞不清楚 chromedriver 和 chrome 兩者之間的版本問題，但這里的 electron-chromedriver 應該是可以驅(qū)動 electron 自帶的 chrome 瀏覽器的，但本文并不想探討這個問題。

如何找到 chromedriver 以及對應的 chrome

開發(fā)爬蟲最麻煩的點，就在于 chromedriver 和 chrome 的版本對應關(guān)系，這會讓新手搔頭抓耳，不過早有一批人整理了這些東西，我分享在這里

https://googlechromelabs.github.io/chrome-for-testing/latest-versions-per-milestone-with-downloads.json

非常 nice，這個 json 查看谷歌擴展是哪個？

GitHub - tulios/json-viewer: It is a Chrome extension for printing JSON and JSONP.

還有很多風格可以選擇，推薦給大家，用這個查看在線 json 事半功倍

chromedriver 是可以直接啟動的

下載好之后，找到路徑，在地址欄輸入 cmd，按回車，即可打開控制臺

默認開啟 9515 端口，至于啟動那個 chrome，這是 selenium 那邊控制的，chromedriver 會根據(jù)你給的 chrome.exe 去找到 chrome，來執(zhí)行命令

我們將 119 版本的 chrome 下載下來放到 D 盤

在 Electron 主進程中編寫一個啟動函數(shù)

在 ready 事件中調(diào)用

function openChrome(){
    const webdriver = require('selenium-webdriver')
    const driver = new webdriver.Builder()
        // "9515" 是ChromeDriver使用的端口
        .usingServer('http://localhost:9515')
        .withCapabilities({
            'goog:chromeOptions': {
                // 這里填您的Electron二進制文件路徑。
                binary: "D:\\chrome-win64\\chrome.exe",
                args: ['--no-sandbox', '--enable-chrome-browser-cloud-management']
            },
        }).forBrowser('chrome').build()
    driver.get('https://www.google.com')
    driver.findElement(webdriver.By.name('q')).sendKeys('webdriver')
    driver.executeScript(`
        setTimeout(function() {
            var inputElement = document.querySelector('input[name="btnK"]');
            if (inputElement) {
                inputElement.click();
            } else {
                console.error('元素未找到');
            }
        }, 3000);
    `);
}
app.on('ready', openChrome)

運行腳本 npm run dev就可以拉起瀏覽器了，通過給于不同的用戶目錄，就可以打開多個獨立的瀏覽器同時運行，如果你將目錄更換為最新用戶自帶的 chrome 瀏覽器地址也可以，不過這樣

到此這篇關(guān)于Electron 結(jié)合 Selenium + chromedriver 驅(qū)動服務實現(xiàn)瀏覽器多開的文章就介紹到這了,更多相關(guān)Electron瀏覽器多開內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論