背景

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

思路

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

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

實(shí)現(xiàn)

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

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

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

Selenium 和 WebDriver | Electron

webdriver vs chromedriver 的區(qū)別 WebDriver

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

ChromeDriver

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

electron 文檔講的亂亂的

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

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

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

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

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

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

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

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，按回車，即可打開控制臺(tái)

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

我們將 119 版本的 chrome 下載下來放到 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就可以拉起瀏覽器了，通過給于不同的用戶目錄，就可以打開多個(gè)獨(dú)立的瀏覽器同時(shí)運(yùn)行，如果你將目錄更換為最新用戶自帶的 chrome 瀏覽器地址也可以，不過這樣

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

最新評(píng)論