本周末我開發(fā)了一個 Chrome 擴展程序，因為我發(fā)現(xiàn)自己反復執(zhí)行相同的任務(wù)，想要實現(xiàn)自動化。此外，我是一個宅在家里度過疫情的極客，所以我會把積攢的精力用在創(chuàng)造事物上。這些年來，我已經(jīng)開發(fā)了一些 Chrome 擴展程序，希望這篇文章也能幫助你入門。讓我們開始吧！

創(chuàng)建清單文件

第一步是創(chuàng)建一個名為 manifest.json 的文件，放在項目文件夾中。它的作用類似于 package.json，它為 Chrome 網(wǎng)上應(yīng)用商店提供項目的重要信息，包括名稱、版本、所需權(quán)限等等。以下是一個示例：

{
  "manifest_version": 2,
  "name": "示例名稱",
  "version": "1.0.0",
  "description": "這是一個示例描述",
  "short_name": "示例名稱縮寫",
  "permissions": ["activeTab", "declarativeContent", "storage", "<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["background.css"],
      "js": ["background.js"]
    }
  ],
  "browser_action": {
    "default_title": "執(zhí)行操作時執(zhí)行某操作",
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png"
    }
  }
}</all_urls></all_urls>

你可能會注意到一些細節(jié)——首先：名稱和描述可以隨意填寫。

權(quán)限取決于擴展程序需要執(zhí)行的操作。在這個示例中，我們使用了 ["activeTab", "declarativeContent", "storage", "<all_urls>"]</all_urls>，因為這個特定的擴展程序需要有關(guān)活動標簽的信息，需要更改頁面內(nèi)容，需要訪問 localStorage，并且需要在所有網(wǎng)站上處于活動狀態(tài)。如果它只需要在一個網(wǎng)站上處于活動狀態(tài)，我們可以刪除該數(shù)組的最后一個索引。

Chrome 的擴展程序文檔中列出了所有權(quán)限及其含義。

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "css": ["background.css"],
    "js": ["background.js"]
  }
],</all_urls>

content_scripts 部分設(shè)置擴展程序應(yīng)處于活動狀態(tài)的網(wǎng)站。如果你想要一個單獨的網(wǎng)站，例如 Twitter，你可以寫成 ["https://twitter.com/*"]。CSS 和 JavaScript 文件是擴展程序所需的一切。例如，我高效的 Twitter 擴展程序使用這些文件來覆蓋 Twitter 的默認外觀。

"browser_action": {
  "default_title": "執(zhí)行操作時執(zhí)行某操作",
  "default_popup": "popup.html",
  "default_icon": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png"
  }
}

browser_action 中的一些內(nèi)容也是可選的。例如，如果擴展程序不需要彈出窗口來實現(xiàn)其功能，則可以刪除 default_title 和 default_popup。在這種情況下，只需要擴展程序的圖標即可。如果擴展程序僅在某些網(wǎng)站上有效，則 Chrome 會在擴展程序處于非活動狀態(tài)時將其圖標灰顯。

調(diào)試

清單文件、CSS 和 JavaScript 文件準備就緒后，請在瀏覽器的地址欄中訪問 chrome://extensions/，然后啟用開發(fā)者模式。這將激活“加載已解壓”按鈕，以添加擴展程序文件。還可以切換開發(fā)者版本的擴展程序是否處于活動狀態(tài)。

我強烈建議此時開始一個 GitHub 倉庫來進行版本控制。這是保存工作的好方法。

更新擴展程序時，需要從此界面重新加載它。屏幕上會顯示一個小的刷新圖標。此外，如果擴展程序在開發(fā)過程中出現(xiàn)任何錯誤，它也會在此處顯示一個帶有堆棧跟蹤和更多信息的錯誤按鈕。

彈出窗口功能

如果擴展程序需要使用從擴展程序圖標彈出的彈出窗口，那么幸運的是，這非常簡單。在清單文件中使用 browser_action 指定文件名后，可以使用你喜歡的任何 HTML 和 CSS 來構(gòu)建頁面，包括圖像（我傾向于使用內(nèi)聯(lián) SVG）。

我們可能需要為彈出窗口添加一些功能。這可能需要一些 JavaScript，因此請確保在清單文件中指定了 JavaScript 文件，并在你的彈出窗口文件中也鏈接了它，如下所示：

在該文件中，首先創(chuàng)建功能，我們將像這樣訪問彈出窗口 DOM：

document.addEventListener("DOMContentLoaded", () => {
  var button = document.getElementById("submit");

  button.addEventListener("click", (e) => {
    console.log(e);
  });
});

如果我們在 popup.html 文件中創(chuàng)建一個按鈕，為其分配一個名為 submit 的 ID，然后返回一個控制臺日志，你可能會注意到實際上控制臺中沒有任何內(nèi)容被記錄。這是因為我們處于不同的上下文，這意味著我們需要右鍵單擊彈出窗口并打開一組不同的 DevTools。

現(xiàn)在我們可以訪問日志和調(diào)試了！但是請記住，如果在 localStorage 中設(shè)置了任何內(nèi)容，那么它只存在于擴展程序的 DevTools localStorage 中；而不是用戶的瀏覽器 localStorage。（我第一次嘗試時就遇到了這個問題?。?/p>

在擴展程序外部運行腳本

這一切都很好，但是假設(shè)我們想要運行一個可以訪問當前選項卡信息的腳本呢？這里有幾種方法可以做到這一點。我通常會在 DOMContentLoaded 事件監(jiān)聽器內(nèi)部調(diào)用一個單獨的函數(shù)：

示例 1：激活文件

function exampleFunction() {
  chrome.tabs.executeScript(() => {
    chrome.tabs.executeScript({ file: "content.js" });
  });
}

示例 2：只執(zhí)行少量代碼

如果只需要運行少量代碼，這種方法非常棒。但是，由于它需要將所有內(nèi)容作為字符串或模板字面量傳遞，因此很快就會變得難以處理。

function exampleFunction() {
  chrome.tabs.executeScript({
    code: `console.log('hi there');`
  });
}

示例 3：激活文件并傳遞參數(shù)

請記住，擴展程序和選項卡在不同的上下文中運行。這使得在它們之間傳遞參數(shù)并非易事。我們將在這里嵌套前兩個示例，將一些代碼傳遞到第二個文件中。我將所有需要的內(nèi)容存儲在一個選項中，但是為了使它正常工作，我們將必須對對象進行字符串化處理。

function exampleFunction(options) {
  chrome.tabs.executeScript(
    { code: "var options = "   JSON.stringify(options) },
    function() {
      chrome.tabs.executeScript({ file: "content.js" });
    }
  );
}

圖標

即使清單文件只定義了兩個圖標，我們還需要另外兩個才能正式將擴展程序提交到 Chrome 網(wǎng)上應(yīng)用商店：一個 128 像素的正方形圖標，還有一個我稱為 icon128_proper.png 的圖標，它也是 128 像素，但在圖像邊緣和圖標之間有一些填充。

請記住，無論使用哪個圖標，都需要在瀏覽器的淺色模式和深色模式下看起來都很好。我通常在 Noun Project 上找到我的圖標。

提交到 Chrome 網(wǎng)上應(yīng)用商店

現(xiàn)在我們可以轉(zhuǎn)到 Chrome 網(wǎng)上應(yīng)用商店開發(fā)者控制臺來提交擴展程序了！單擊“新建項目”按鈕，然后將壓縮的項目文件拖放到上傳器中。

Chrome 會在此處詢問一些關(guān)于擴展程序的問題，并請求有關(guān)擴展程序中請求的權(quán)限以及為什么需要這些權(quán)限的信息。警告： 請求“activeTab”或“tabs”權(quán)限將需要更長的審核時間，以確保代碼沒有執(zhí)行任何濫用行為。

就是這樣！這應(yīng)該可以讓你準備好開始構(gòu)建 Chrome 瀏覽器擴展程序了！?

以上是如何構(gòu)建鍍鉻擴展的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！