背景

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

思路

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

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

實(shí)現(xiàn)

puppeteer 這個(gè)還沒(méi)跑通，這個(gè)也沒(méi)有現(xiàn)成的案例，github 有個(gè)庫(kù)，但是只支持 node.js 18，而我用的 electron 依賴 node.js 16，此外還需要 puppeteer 的版本和 electron 的版本對(duì)應(yīng)，這個(gè)處理起來(lái)比較復(fù)雜，也沒(méi)有人給予一個(gè)完整可運(yùn)行的 demo 包，因?yàn)闀簳r(shí)放棄這方面的探索。

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

這是一個(gè)比較古老的文檔，electron 更新頻率過(guò)快，很多庫(kù)都懶得跟進(jìn) electron，選擇 electron 本身就是個(gè)大坑，要面對(duì)的問(wèn)題很多，要求掌握的知識(shí)也很多，還解決不了這些基礎(chǔ)的 C++問(wèn)題

Selenium 和 WebDriver | Electron

webdriver vs chromedriver 的區(qū)別 WebDriver

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

ChromeDriver

ChromeDriver 是 WebDriver 的一個(gè)具體實(shí)現(xiàn)，它專門用于與 Google Chrome 瀏覽器進(jìn)行交互。ChromeDriver 充當(dāng)一個(gè)獨(dú)立的服務(wù)，用于接收 WebDriver 的命令并將這些命令轉(zhuǎn)發(fā)給 Chrome 瀏覽器，從而控制瀏覽器的行為。它是由開(kāi)發(fā) Chromium 和 WebDriver 的團(tuán)隊(duì)維護(hù)的。

electron 文檔講的亂亂的

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

electron 文檔核心點(diǎn)解析

開(kāi)頭配置 Spectron沒(méi)啥用，你可以直接忽略，看起來(lái)這個(gè)庫(kù)都被放棄了

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

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

如何找到 chromedriver 以及對(duì)應(yīng)的 chrome

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

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

非常 nice，這個(gè) json 查看谷歌擴(kuò)展是哪個(gè)？

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

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

chromedriver 是可以直接啟動(dòng)的

下載好之后，找到路徑，在地址欄輸入 cmd，按回車，即可打開(kāi)控制臺(tái)

默認(rèn)開(kāi)啟 9515 端口，至于啟動(dòng)那個(gè) chrome，這是 selenium 那邊控制的，chromedriver 會(huì)根據(jù)你給的 chrome.exe 去找到 chrome，來(lái)執(zhí)行命令

我們將 119 版本的 chrome 下載下來(lái)放到 D 盤

在 Electron 主進(jìn)程中編寫一個(gè)啟動(dòng)函數(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二進(jìn)制文件路徑。
                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)

運(yùn)行腳本 npm run dev就可以拉起瀏覽器了，通過(guò)給于不同的用戶目錄，就可以打開(kāi)多個(gè)獨(dú)立的瀏覽器同時(shí)運(yùn)行，如果你將目錄更換為最新用戶自帶的 chrome 瀏覽器地址也可以，不過(guò)這樣

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

最新評(píng)論