• 主頁
  • 文章
  • 網絡
  • 為所有瀏覽器創建一個瀏覽器擴展：Edge、Chrome、Firefox、Opera、Brave 和 Vivaldi

為所有瀏覽器創建一個瀏覽器擴展：Edge、Chrome、Firefox、Opera、Brave 和 Vivaldi

已發表: 2022-03-10
快速總結 ↬在今天的文章中，我們將使用相同的代碼庫創建一個適用於所有主要現代瀏覽器的 JavaScript 擴展。 事實上，基於 HTML、CSS 和 JavaScript 的 Chrome 擴展模型現在幾乎無處不在，甚至還有一個瀏覽器擴展社區小組正在製定標準。 我將解釋如何安裝支持 Web 擴展模型（即 Edge、Chrome、Firefox、Opera、Brave 和 Vivaldi）的擴展，並提供一些關於如何為所有這些模型獲取唯一代碼庫的簡單提示，但是還如何在每個瀏覽器中進行調試。

我將解釋如何安裝支持 Web 擴展模型（即 Edge、Chrome、Firefox、Opera、Brave 和 Vivaldi）的擴展，並提供一些關於如何為所有這些模型獲取唯一代碼庫的簡單提示，但是還如何在每個瀏覽器中進行調試。

注意：我們不會在本文中介紹 Safari，因為它不支持與其他擴展模型相同的擴展模型。

基本

我不會介紹擴展開發的基礎知識，因為每個供應商已經提供了大量好的資源：

跳躍後更多！ 繼續往下看↓
  • 谷歌
  • Microsoft（另請參閱精彩的概述視頻“為 Microsoft Edge 構建擴展”）
  • Mozilla（另見 wiki）
  • 歌劇
  • 勇敢的

因此，如果您以前從未構建過擴展或不知道它是如何工作的，請快速查看這些資源。 不用擔心：構建一個簡單明了。

我們的擴展

讓我們構建一個概念驗證——一個使用人工智能 (AI) 和計算機視覺來幫助盲人分析網頁上圖像的擴展。

我們將看到，通過幾行代碼，我們可以在瀏覽器中創建一些強大的功能。 就我而言，我關心的是網絡上的可訪問性，並且我已經花了一些時間思考如何使用網絡音頻和 SVG 來製作一款可訪問的突破性遊戲。

儘管如此，我一直在尋找能夠以更普遍的方式幫助盲人的東西。 我最近在里斯本聆聽 Chris Heilmann 的精彩演講時受到啟發：“像素和像素中的隱藏意義”。

事實上，使用今天的雲端 AI 算法，以及文本到語音技術，通過 Web Speech API 暴露在瀏覽器中或使用遠程雲服務，我們可以非常輕鬆地構建一個擴展來分析缺少的網頁圖像或不正確填充的alt文本屬性。

我的小概念證明只是從網頁（活動選項卡中的那個）中提取圖像並在列表中顯示縮略圖。 當您單擊其中一張圖像時，擴展程序會查詢計算機視覺 API以獲取圖像的一些描述性文本，然後使用Web Speech API或Bing Speech API與訪問者共享它。

下面的視頻在 Edge、Chrome、Firefox、Opera 和 Brave 中進行了演示。

您會注意到，即使計算機視覺 API 正在分析一些 CGI 圖像，它也非常準確！ 最近幾個月該行業在這方面取得的進展給我留下了深刻的印象。

我正在使用這些服務：


  • 計算機視覺 API、微軟認知服務
    這是免費使用的（有配額）。 您需要生成一個免費密鑰； 用您的密鑰替換代碼中的TODO部分，以使此擴展在您的機器上工作。 要了解此 API 可以做什麼，請嘗試一下。
    • 字幕機器人
  • 必應文本到語音 API，Microsoft 認知服務
    這也是免費使用的（也有配額）。 您需要再次生成免費密鑰。 我們還將使用我最近編寫的一個小型庫從 JavaScript 調用此 API。 如果您沒有 Bing 密鑰，則該擴展將始終回退到 Web Speech API，所有最新瀏覽器都支持該 API。

但請隨意嘗試其他類似服務：

  • 視覺識別，IBM 沃森
  • 雲視覺 API，谷歌

你可以在我的 GitHub 頁面上找到這個小型瀏覽器擴展的代碼。 隨意修改您要測試的其他產品的代碼。

使您的代碼與所有瀏覽器兼容的提示

您會發現大多數代碼和教程都使用擴展 API 的命名空間chrome.xxx （例如chrome.tabs ）。

但是，正如我所說，擴展 API 模型目前正在標準化為browser.xxx ，同時一些瀏覽器正在定義自己的命名空間（例如，Edge 正在使用msBrowser ）。

幸運的是，大多數 API 在瀏覽器後面保持不變。 因此，創建一個支持所有瀏覽器和命名空間定義的小技巧非常簡單，這要歸功於 JavaScript 的美妙之處：

 window.browser = (function () { return window.msBrowser || window.browser || window.chrome; })();

瞧！

當然，您還需要使用所有瀏覽器都支持的 API 子集。 例如：

  • Microsoft Edge 有一個支持列表。
  • Mozilla Firefox 共享其當前的 Chrome 不兼容性。
  • Opera 維護自己的瀏覽器支持的擴展 API 列表。

擴展架構

讓我們一起回顧一下這個擴展的架構。 如果您是瀏覽器擴展的新手，這應該可以幫助您理解流程。

讓我們從清單文件開始：

幻燈片1
（查看大圖）

當然，如果我們不考慮擴展程序本身的代碼，這個清單文件及其關聯的 JSON 是您在所有瀏覽器中加載擴展程序所需的最低要求。 請在我的 GitHub 帳戶中查看源代碼，並從這裡開始，以確保您的擴展程序與所有瀏覽器兼容。

例如，您必須指定author屬性才能在 Edge 中加載它； 否則，它會拋出一個錯誤。 您還需要對圖標使用相同的結構。 default_title屬性也很重要，因為它在某些瀏覽器中被屏幕閱讀器使用。

以下是文檔的鏈接，可幫助您構建在任何地方都兼容的清單文件：

  • 鉻合金
  • 邊緣
  • 火狐

本文使用的示例擴展主要基於內容腳本的概念。 這是一個存在於我們要檢查的頁面上下文中的腳本。 因為它可以訪問 DOM，所以它將幫助我們檢索網頁中包含的圖像。 如果您想了解更多關於內容腳本是什麼的信息，Opera、Mozilla 和 Google 都有關於它的文檔。

我們的內容腳本很簡單：

幻燈片2
（查看大圖）
 console.log("Dare Angel content script started"); browser.runtime.onMessage.addListener(function (request, sender, sendResponse) { if (request.command == "requestImages") { var images = document.getElementsByTagName('img'); var imagesList = []; for (var i = 0; i < images.length; i++) { if ((images[i].src.toLowerCase().endsWith(".jpg") || images[i].src.toLowerCase().endsWith(".png")) && (images[i].width > 64 && images[i].height > 64)) { imagesList.push({ url: images[i].src, alt: images[i].alt }); } } sendResponse(JSON.stringify(imagesList)); } }); view raw

這首先登錄到控制台，讓您檢查擴展是否已正確加載。 通過瀏覽器的開發工具檢查它，可通過F12 、 Control + Shift + I或⌘ + ⌥ + I訪問。

然後它等待來自 UI 頁面的帶有requestImages命令的消息，以獲取當前 DOM 中可用的所有圖像，然後如果它們大於 64 × 64 像素，則返回它們的 URL 列表（以避免所有像素跟踪垃圾和低分辨率圖像）。

幻燈片3
（查看大圖）

我們使用的彈出式 UI 頁面非常簡單，它將顯示由內容腳本返回的圖像列表，該列表由 flexbox 容器內的內容腳本返回。 它加載start.js腳本，該腳本會立即創建一個dareangel.dashboard.js實例，以向內容腳本發送一條消息，以獲取當前可見選項卡中圖像的 URL。

這是 UI 頁面中的代碼，請求內容腳本的 URL：

 browser.tabs.query({ active: true, currentWindow: true }, (tabs) => { browser.tabs.sendMessage(tabs[0].id, { command: "requestImages" }, (response) => { this._imagesList = JSON.parse(response); this._imagesList.forEach((element) => { var newImageHTMLElement = document.createElement("img"); newImageHTMLElement.src = element.url; newImageHTMLElement.alt = element.alt; newImageHTMLElement.tabIndex = this._tabIndex; this._tabIndex++; newImageHTMLElement.addEventListener("focus", (event) => { if (COMPUTERVISIONKEY !== "") { this.analyzeThisImage(event.target.src); } else { var warningMsg = document.createElement("div"); warningMsg.innerHTML = "
 請在另一個選項卡中生成計算機視覺密鑰。
 ";
                    this._targetDiv.insertBefore(warningMsg, this._targetDiv.firstChild);
                    browser.tabs.create({ active: false, url: "https://www.microsoft.com/cognitive-services/en-US/sign-up?ReturnUrl=/cognitive-services/en-us/subscriptions?productId =%2fproducts%2f54d873dd5eefd00dc474a0f4" });
                }
            });
            this._targetDiv.appendChild(newImageHTMLElement);
        });
    });
});

我們正在創建圖像元素。 如果每個圖像具有焦點，它將觸發一個事件，查詢計算機視覺 API 以供審查。

這是通過這個簡單的 XHR 調用完成的：

 analyzeThisImage(url) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { var response = document.querySelector('#response'); var reponse = JSON.parse(xhr.response); var resultToSpeak = `With a confidence of ${Math.round(reponse.description.captions[0].confidence * 100)}%, I think it's ${reponse.description.captions[0].text}`; console.log(resultToSpeak); if (!this._useBingTTS || BINGSPEECHKEY === "") { var synUtterance = new SpeechSynthesisUtterance(); synUtterance.text = resultToSpeak; window.speechSynthesis.speak(synUtterance); } else { this._bingTTSclient.synthesize(resultToSpeak); } } }; xhr.onerror = (evt) => { console.log(evt); }; try { xhr.open('POST', 'https://api.projectoxford.ai/vision/v1.0/describe'); xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Ocp-Apim-Subscription-Key", COMPUTERVISIONKEY); var requestObject = { "url": url }; xhr.send(JSON.stringify(requestObject)); } catch (ex) { console.log(ex); } } view raw

以下文章將幫助您了解此計算機視覺 API 的工作原理：

  • “分析圖像版本 1.0”，Microsoft 認知服務
  • “計算機視覺 API，v1.0”，微軟認知服務
    這將通過網頁中的交互式控制台向您展示如何使用正確的 JSON 屬性調用 REST API，以及您將獲得的 JSON 對象。 了解它的工作原理以及如何調用它很有用。

在我們的例子中，我們使用 API 的describe功能。 您還會在回調中註意到，我們將根據您的選擇嘗試使用Web Speech API或Bing Text-to-Speech服務。

那麼，這裡是這個小擴展的全局工作流程：

幻燈片4
（查看大圖）

在每個瀏覽器中加載擴展

讓我們快速回顧一下如何在每個瀏覽器中安裝擴展。

先決條件

從某個地方的 GitHub 下載或克隆我的小擴展到您的硬盤驅動器。

此外，修改dareangel.dashboard.js以添加至少一個計算機視覺API 密鑰。 否則，擴展程序將只能顯示從網頁中提取的圖像。

微軟邊緣

首先，您至少需要一個 Windows 10 週年更新（OS Build 14393+）才能支持 Edge 中的擴展。

然後，打開 Edge 並在地址欄中輸入about:flags 。 選中“啟用擴展開發者功能”。

EnableInEdge001

單擊 Edge 導航欄中的“...”，然後單擊“擴展”，然後單擊“加載擴展”，然後選擇克隆我的 GitHub 存儲庫的文件夾。 你會得到這個：

單擊這個新加載的擴展程序，然後啟用“地址欄旁邊的顯示按鈕”。

EnableInEdge003

請注意“重新加載擴展”按鈕，這在您開發擴展時很有用。 在開發過程中您不會被迫刪除或重新安裝它； 只需單擊按鈕即可刷新擴展程序。

導航到 BabylonJS，然後單擊 Dare Angel (DA) 按鈕以跟隨視頻中所示的相同演示。

谷歌瀏覽器、Opera、維瓦爾第

在 Chrome 中，導航到chrome://extensions 。 在 Opera 中，導航到opera://extensions 。 在 Vivaldi 中，導航到vivaldi://extensions 。 然後，啟用“開發者模式”。

單擊“加載解壓縮的擴展程序”，然後選擇您提取我的擴展程序的文件夾。

鉻001
（查看大圖）

導航到 BabylonJS，然後打開擴展以檢查它是否正常工作。

火狐瀏覽器

你在這裡有兩個選擇。 首先是臨時加載您的擴展程序，這與在 Edge 和 Chrome 中一樣簡單。

打開 Firefox，導航到about:debugging並單擊“Load Temporary Add-on”。 然後，導航到擴展的文件夾，並選擇manifest.json文件。 而已！ 現在去 BabylonJS 測試擴展。

火狐001
（查看大圖）

此解決方案的唯一問題是每次關閉瀏覽器時，都必須重新加載擴展程序。 第二種選擇是使用 XPI 打包。 您可以在 Mozilla 開發者網絡上的“擴展打包”中了解更多信息。

勇敢的

Brave 的公共版本沒有嵌入“開發者模式”來讓您加載未簽名的擴展。 您需要按照“在 Brave 中加載 Chrome 擴展程序”中的步驟構建您自己的版本。

如那篇文章所述，克隆 Brave 後，您需要在文本編輯器中打開extensions.js文件。 找到下面的行，並為您的擴展插入註冊碼。 就我而言，我剛剛添加了最後兩行：

 // Manually install the braveExtension and torrentExtension extensionInfo.setState(config.braveExtensionId, extensionStates.REGISTERED) loadExtension(config.braveExtensionId, getExtensionsPath('brave'), generateBraveManifest(), 'component') extensionInfo.setState('DareAngel', extensionStates.REGISTERED) loadExtension('DareAngel', getExtensionsPath('DareAngel/')) view raw

將擴展複製到app/extensions文件夾。 在browser-laptop文件夾中打開兩個命令提示符。 在第一個中，啟動npm run watch ，然後等待 webpack 完成構建 Brave 的 Electron 應用程序。 它應該說，“webpack: bundle 現在是有效的。” 否則，你會遇到一些問題。

勇敢001
（查看大圖）

然後，在第二個命令提示符下，啟動npm start ，這將啟動我們稍微自定義的 Brave 版本。

在 Brave 中，導航到about:extensions ，您應該會在地址欄中看到顯示和加載的擴展程序。

勇敢002
（查看大圖）

在每個瀏覽器中調試擴展

適用於所有瀏覽器的提示：使用console.log() ，只需從擴展程序流中記錄一些數據。 大多數時候，使用瀏覽器的開發人員工具，您將能夠單擊記錄它的 JavaScript 文件以打開它並進行調試。

微軟邊緣

要在頁面上下文中調試客戶端腳本部分，您只需要打開F12即可。 然後，單擊“調試器”選項卡並找到您的擴展程序的文件夾。

打開你想調試的腳本文件——在我的例子中是dareangel.client.js然後像往常一樣調試你的代碼，設置斷點等。

DebugInEdge001
（查看大圖）

如果您的擴展程序創建了一個單獨的選項卡來完成其工作（例如我們的 Vorlon.js 團隊在商店中發布的頁面分析器），只需在該選項卡上按F12即可對其進行調試。

DebugInEdge002
（查看大圖）

如果您想調試彈出頁面，您首先需要獲取您的擴展程序的 ID。 為此，只需進入擴展的屬性，您就會找到一個 ID 屬性：

DebugInEdge003

然後，您需要在地址欄中輸入類似ms-browser-extension://ID_of_your_extension/yourpage.html 。 在我們的例子中，它將是ms-browser-extension://DareAngel_vdbyzyarbfgh8/dashboard.html 。 然後，只需在此頁面上使用F12 ：

DebugInEdge004
（查看大圖）

谷歌瀏覽器、歌劇、維瓦爾第、勇敢

因為 Chrome 和 Opera 依賴於相同的 Blink 代碼庫，所以它們共享相同的調試過程。 儘管 Brave 和 Vivaldi 是 Chromium 的分支，但它們大部分時間也共享相同的調試過程。

要調試客戶端腳本部分，請在您要調試的頁面上打開瀏覽器的開發人員工具（按F12 、 Control + Shift + I或⌘ + ⌥ + I ，具體取決於您使用的瀏覽器或平台）。

然後，單擊“內容腳本”選項卡並找到您的擴展程序的文件夾。 打開您要調試的腳本文件，並像調試任何 JavaScript 代碼一樣調試您的代碼。

DebugInChrome001
（查看大圖）

我們使用的彈出式 UI 頁面非常簡單，它將顯示由內容腳本返回的圖像列表，該列表由 flexbox 容器內的內容腳本返回。 它加載start.js腳本，該腳本會立即創建一個dareangel.dashboard.js實例，以向內容腳本發送一條消息，以獲取當前可見選項卡中圖像的 URL。

這是 UI 頁面中的代碼，請求內容腳本的 URL：

 browser.tabs.query({ active: true, currentWindow: true }, (tabs) => { browser.tabs.sendMessage(tabs[0].id, { command: "requestImages" }, (response) => { this._imagesList = JSON.parse(response); this._imagesList.forEach((element) => { var newImageHTMLElement = document.createElement("img"); newImageHTMLElement.src = element.url; newImageHTMLElement.alt = element.alt; newImageHTMLElement.tabIndex = this._tabIndex; this._tabIndex++; newImageHTMLElement.addEventListener("focus", (event) => { if (COMPUTERVISIONKEY !== "") { this.analyzeThisImage(event.target.src); } else { var warningMsg = document.createElement("div"); warningMsg.innerHTML = "
 請在另一個選項卡中生成計算機視覺密鑰。
 ";
                    this._targetDiv.insertBefore(warningMsg, this._targetDiv.firstChild);
                    browser.tabs.create({ active: false, url: "https://www.microsoft.com/cognitive-services/en-US/sign-up?ReturnUrl=/cognitive-services/en-us/subscriptions?productId =%2fproducts%2f54d873dd5eefd00dc474a0f4" });
                }
            });
            this._targetDiv.appendChild(newImageHTMLElement);
        });
    });
});

我們正在創建圖像元素。 如果每個圖像具有焦點，它將觸發一個事件，查詢計算機視覺 API 以供審查。

這是通過這個簡單的 XHR 調用完成的：

 analyzeThisImage(url) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { var response = document.querySelector('#response'); var reponse = JSON.parse(xhr.response); var resultToSpeak = `With a confidence of ${Math.round(reponse.description.captions[0].confidence * 100)}%, I think it's ${reponse.description.captions[0].text}`; console.log(resultToSpeak); if (!this._useBingTTS || BINGSPEECHKEY === "") { var synUtterance = new SpeechSynthesisUtterance(); synUtterance.text = resultToSpeak; window.speechSynthesis.speak(synUtterance); } else { this._bingTTSclient.synthesize(resultToSpeak); } } }; xhr.onerror = (evt) => { console.log(evt); }; try { xhr.open('POST', 'https://api.projectoxford.ai/vision/v1.0/describe'); xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Ocp-Apim-Subscription-Key", COMPUTERVISIONKEY); var requestObject = { "url": url }; xhr.send(JSON.stringify(requestObject)); } catch (ex) { console.log(ex); } } view raw

以下文章將幫助您了解此計算機視覺 API 的工作原理：

  • “分析圖像版本 1.0”，Microsoft 認知服務
  • “計算機視覺 API，v1.0”，微軟認知服務
    這將通過網頁中的交互式控制台向您展示如何使用正確的 JSON 屬性調用 REST API，以及您將獲得的 JSON 對象。 了解它的工作原理以及如何調用它很有用。

在我們的例子中，我們使用 API 的describe功能。 您還會在回調中註意到，我們將根據您的選擇嘗試使用Web Speech API或Bing Text-to-Speech服務。

那麼，這裡是這個小擴展的全局工作流程：

幻燈片4
（查看大圖）

在每個瀏覽器中加載擴展

讓我們快速回顧一下如何在每個瀏覽器中安裝擴展。

先決條件

從某個地方的 GitHub 下載或克隆我的小擴展到您的硬盤驅動器。

此外，修改dareangel.dashboard.js以添加至少一個計算機視覺API 密鑰。 否則，擴展程序將只能顯示從網頁中提取的圖像。

微軟邊緣

首先，您至少需要一個 Windows 10 週年更新（OS Build 14393+）才能支持 Edge 中的擴展。

然後，打開 Edge 並在地址欄中輸入about:flags 。 選中“啟用擴展開發者功能”。

EnableInEdge001

單擊 Edge 導航欄中的“...”，然後單擊“擴展”，然後單擊“加載擴展”，然後選擇克隆我的 GitHub 存儲庫的文件夾。 你會得到這個：

單擊這個新加載的擴展程序，然後啟用“地址欄旁邊的顯示按鈕”。

EnableInEdge003

請注意“重新加載擴展”按鈕，這在您開發擴展時很有用。 在開發過程中您不會被迫刪除或重新安裝它； 只需單擊按鈕即可刷新擴展程序。

導航到 BabylonJS，然後單擊 Dare Angel (DA) 按鈕以跟隨視頻中所示的相同演示。

谷歌瀏覽器、Opera、維瓦爾第

在 Chrome 中，導航到chrome://extensions 。 在 Opera 中，導航到opera://extensions 。 在 Vivaldi 中，導航到vivaldi://extensions 。 然後，啟用“開發者模式”。

單擊“加載解壓縮的擴展程序”，然後選擇您提取我的擴展程序的文件夾。

鉻001
（查看大圖）

導航到 BabylonJS，然後打開擴展以檢查它是否正常工作。

火狐瀏覽器

你在這裡有兩個選擇。 首先是臨時加載您的擴展程序，這與在 Edge 和 Chrome 中一樣簡單。

打開 Firefox，導航到about:debugging並單擊“Load Temporary Add-on”。 然後，導航到擴展的文件夾，並選擇manifest.json文件。 而已！ 現在去 BabylonJS 測試擴展。

火狐001
（查看大圖）

此解決方案的唯一問題是每次關閉瀏覽器時，都必須重新加載擴展程序。 第二種選擇是使用 XPI 打包。 您可以在 Mozilla 開發者網絡上的“擴展打包”中了解更多信息。

勇敢的

Brave 的公共版本沒有嵌入“開發者模式”來讓您加載未簽名的擴展。 您需要按照“在 Brave 中加載 Chrome 擴展程序”中的步驟構建您自己的版本。

如那篇文章所述，克隆 Brave 後，您需要在文本編輯器中打開extensions.js文件。 找到下面的行，並為您的擴展插入註冊碼。 就我而言，我剛剛添加了最後兩行：

 // Manually install the braveExtension and torrentExtension extensionInfo.setState(config.braveExtensionId, extensionStates.REGISTERED) loadExtension(config.braveExtensionId, getExtensionsPath('brave'), generateBraveManifest(), 'component') extensionInfo.setState('DareAngel', extensionStates.REGISTERED) loadExtension('DareAngel', getExtensionsPath('DareAngel/')) view raw

將擴展複製到app/extensions文件夾。 在browser-laptop文件夾中打開兩個命令提示符。 在第一個中，啟動npm run watch ，然後等待 webpack 完成構建 Brave 的 Electron 應用程序。 它應該說，“webpack: bundle 現在是有效的。” 否則，你會遇到一些問題。

勇敢001
（查看大圖）

然後，在第二個命令提示符下，啟動npm start ，這將啟動我們稍微自定義的 Brave 版本。

在 Brave 中，導航到about:extensions ，您應該會在地址欄中看到顯示和加載的擴展程序。

勇敢002
（查看大圖）

在每個瀏覽器中調試擴展

適用於所有瀏覽器的提示：使用console.log() ，只需從擴展程序流中記錄一些數據。 大多數時候，使用瀏覽器的開發人員工具，您將能夠單擊記錄它的 JavaScript 文件以打開它並進行調試。

微軟邊緣

要在頁面上下文中調試客戶端腳本部分，您只需要打開F12即可。 然後，單擊“調試器”選項卡並找到您的擴展程序的文件夾。

打開你想調試的腳本文件——在我的例子中是dareangel.client.js然後像往常一樣調試你的代碼，設置斷點等。

DebugInEdge001
（查看大圖）

如果您的擴展程序創建了一個單獨的選項卡來完成其工作（例如我們的 Vorlon.js 團隊在商店中發布的頁面分析器），只需在該選項卡上按F12即可對其進行調試。

DebugInEdge002
（查看大圖）

如果您想調試彈出頁面，您首先需要獲取您的擴展程序的 ID。 為此，只需進入擴展的屬性，您就會找到一個 ID 屬性：

DebugInEdge003

然後，您需要在地址欄中輸入類似ms-browser-extension://ID_of_your_extension/yourpage.html 。 在我們的例子中，它將是ms-browser-extension://DareAngel_vdbyzyarbfgh8/dashboard.html 。 然後，只需在此頁面上使用F12 ：

DebugInEdge004
（查看大圖）

谷歌瀏覽器、歌劇、維瓦爾第、勇敢

因為 Chrome 和 Opera 依賴於相同的 Blink 代碼庫，所以它們共享相同的調試過程。 儘管 Brave 和 Vivaldi 是 Chromium 的分支，但它們大部分時間也共享相同的調試過程。

要調試客戶端腳本部分，請在您要調試的頁面上打開瀏覽器的開發人員工具（按F12 、 Control + Shift + I或⌘ + ⌥ + I ，具體取決於您使用的瀏覽器或平台）。

然後，單擊“內容腳本”選項卡並找到您的擴展程序的文件夾。 打開您要調試的腳本文件，並像調試任何 JavaScript 代碼一樣調試您的代碼。

DebugInChrome001
（查看大圖）

要調試您的擴展程序將創建的選項卡，它與 Edge 完全相同：只需使用開發人員工具。

DebugInChrome002
（查看大圖）

對於 Chrome 和 Opera，要調試彈出頁面，請右鍵單擊地址欄旁邊的擴展程序按鈕並選擇“檢查彈出窗口”，或打開彈出窗口的 HTML 窗格並在其中右鍵單擊“檢查。 ” Vivaldi 僅支持右鍵單擊，然後打開 HTML 窗格內的“檢查”。

DebugInChrome003
（查看大圖）

對於 Brave，這與使用 Edge 的過程相同。 您首先需要在about:extensions中找到與您的擴展關聯的 GUID：

勇敢調試001

然後，在一個單獨的選項卡中，打開您想要調試的頁面——在我的例子中是chrome-extension://bodaahkboijjjodkbmmddgjldpifcjap/dashboard.html並打開開發人員工具。

勇敢調試002
（查看大圖）

對於佈局，您可以使用Shift + F8獲得一些幫助，這將讓您檢查 Brave 的完整框架。 你會發現 Brave 是一個使用 React 的 Electron 應用程序！

例如，請注意data-reactroot屬性。

勇敢調試003
（查看大圖）

注意：我不得不稍微修改 Brave 擴展的 CSS，因為它當前默認顯示具有透明背景的彈出窗口，而且我的圖像集合的高度也有一些問題。 我在 Brave 中將其限制為四個元素。

火狐瀏覽器

Mozilla 有關於調試 Web 擴展的非常好的文檔。

對於客戶端腳本部分，它與 Edge、Chrome、Opera 和 Brave 中的相同。 只需在您要調試的選項卡中打開開發人員工具，您就會找到一個moz-extension://guid部分，其中包含要調試的代碼：

DebugInFirefox001
（查看大圖）

如果您需要調試您的擴展將創建的選項卡（如 Vorlon.js 的頁面分析器擴展），只需使用開發人員工具：

DebugInFirefox002
（查看大圖）

最後，調試彈出窗口有點複雜，但在文檔的“調試彈出窗口”部分中有很好的解釋。

DebugInFirefox003
（查看大圖）

在每個商店中發布您的擴展

每個供應商都有詳細的文檔說明在其商店中發布您的擴展程序要遵循的過程。 他們都採取類似的方法。 您需要將擴展打包成特定的文件格式——大多數情況下，是一個類似 ZIP 的容器。 然後，您必須在專用門戶中提交，選擇定價模型並等待審核過程完成。 如果被接受，任何訪問擴展程序商店的用戶都可以在瀏覽器中下載您的擴展程序。

以下是各種流程：

  • 谷歌：“在 Chrome 網上應用店中發布”
  • Mozilla：“發布你的 WebExtension”
  • Opera：“出版指南”
  • 微軟：“打包 Microsoft Edge 擴展”

請注意，向 Windows 應用商店提交 Microsoft Edge 擴展目前是一項受限功能。 聯繫 Microsoft Edge 團隊，提出加入 Windows 應用商店的申請，他們會考慮為你提供未來的更新。

我試圖分享我從開發我們的 Vorlon.js 頁面分析器擴展和這個小小的概念證明中學到的盡可能多的東西。

一些開發人員還記得通過各種實現來構建他們的擴展的痛苦——無論是使用不同的構建目錄，還是使用稍微不同的擴展 API，或者遵循完全不同的方法，例如 Firefox 的 XUL 擴展或 Internet Explorer 的 BHO 和 ActiveX。

很高興看到，今天，使用我們常規的 JavaScript、CSS 和 HTML 技能，我們可以使用相同的代碼庫並跨所有瀏覽器構建出色的擴展！

如有任何反饋，請隨時在 Twitter 上聯繫我。