如何構建鍍鉻擴展

本週末我開發了一個Chrome 擴展程序，因為我發現自己反复執行相同的任務，想要實現自動化。此外，我是一個宅在家裡度過疫情的極客，所以我會把積攢的精力用在創造事物上。這些年來，我已經開發了一些Chrome 擴展程序，希望這篇文章也能幫助你入門。讓我們開始吧！

創建清單文件

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

 {
  "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": "執行操作時執行某操作",
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png"
    }
  }
}</all_urls></all_urls>

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

權限取決於擴展程序需要執行的操作。在這個示例中，我們使用了["activeTab", "declarativeContent", "storage", "<all_urls> "]</all_urls> ，因為這個特定的擴展程序需要有關活動標籤的信息，需要更改頁面內容，需要訪問localStorage，並且需要在所有網站上處於活動狀態。如果它只需要在一個網站上處於活動狀態，我們可以刪除該數組的最後一個索引。

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

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

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

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

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

偵錯

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

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

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

彈出窗口功能

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

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

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

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

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

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

現在我們可以訪問日誌和調試了！但是請記住，如果在localStorage 中設置了任何內容，那麼它只存在於擴展程序的DevTools localStorage 中；而不是用戶的瀏覽器localStorage。 （我第一次嘗試時就遇到了這個問題！）

在擴展程序外部運行腳本

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

示例1：激活文件

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

示例2：只執行少量代碼

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

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

示例3：激活文件並傳遞參數

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

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

圖示

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

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

提交到Chrome 網上應用商店

現在我們可以轉到Chrome 網上應用商店開發者控制台來提交擴展程序了！單擊“新建項目”按鈕，然後將壓縮的項目文件拖放到上傳器中。

Chrome 會在此處詢問一些關於擴展程序的問題，並請求有關擴展程序中請求的權限以及為什麼需要這些權限的信息。警告：請求“activeTab”或“tabs”權限將需要更長的審核時間，以確保代碼沒有執行任何濫用行為。

就是這樣！這應該可以讓你準備好開始構建Chrome 瀏覽器擴展程序了！ ?

以上是如何構建鍍鉻擴展的詳細內容。更多資訊請關注PHP中文網其他相關文章！