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

創(chuàng)建清單文件

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

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

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

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

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

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

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

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

browser_action中的一些內(nèi)容也是可選的。例如，如果擴(kuò)展程序不需要彈出窗口來(lái)實(shí)現(xiàn)其功能，則可以刪除default_title和default_popup 。在這種情況下，只需要擴(kuò)展程序的圖標(biāo)即可。如果擴(kuò)展程序僅在某些網(wǎng)站上有效，則Chrome 會(huì)在擴(kuò)展程序處?kù)斗腔顒?dòng)狀態(tài)時(shí)將其圖標(biāo)灰顯。

偵錯(cuò)

清單文件、CSS 和JavaScript 文件準(zhǔn)備就緒後，請(qǐng)?jiān)跒g覽器的地址欄中訪問(wèn)chrome://extensions/ ，然後啟用開(kāi)發(fā)者模式。這將激活“加載已解壓”按鈕，以添加擴(kuò)展程序文件。還可以切換開(kāi)發(fā)者版本的擴(kuò)展程序是否處?kù)痘顒?dòng)狀態(tài)。

我強(qiáng)烈建議此時(shí)開(kāi)始一個(gè)GitHub 倉(cāng)庫(kù)來(lái)進(jìn)行版本控制。這是保存工作的好方法。

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

彈出窗口功能

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

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

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

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

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

如果我們?cè)?code>popup.html文件中創(chuàng)建一個(gè)按鈕，為其分配一個(gè)名為submit的ID，然後返回一個(gè)控制臺(tái)日誌，你可能會(huì)注意到實(shí)際上控制臺(tái)中沒(méi)有任何內(nèi)容被記錄。這是因?yàn)槲覀兲庫(kù)恫煌纳舷挛?，這意味著我們需要右鍵單擊彈出窗口並打開(kāi)一組不同的DevTools。

現(xiàn)在我們可以訪問(wèn)日誌和調(diào)試了！但是請(qǐng)記住，如果在localStorage 中設(shè)置了任何內(nèi)容，那麼它只存在於擴(kuò)展程序的DevTools localStorage 中；而不是用戶的瀏覽器localStorage。 （我第一次嘗試時(shí)就遇到了這個(gè)問(wèn)題！）

在擴(kuò)展程序外部運(yùn)行腳本

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

示例1：激活文件

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

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

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

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

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

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

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

圖示

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

請(qǐng)記住，無(wú)論使用哪個(gè)圖標(biāo)，都需要在瀏覽器的淺色模式和深色模式下看起來(lái)都很好。我通常在Noun Project 上找到我的圖標(biāo)。

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

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

Chrome 會(huì)在此處詢問(wèn)一些關(guān)於擴(kuò)展程序的問(wèn)題，並請(qǐng)求有關(guān)擴(kuò)展程序中請(qǐng)求的權(quán)限以及為什麼需要這些權(quán)限的信息。警告：請(qǐng)求“activeTab”或“tabs”權(quán)限將需要更長(zhǎng)的審核時(shí)間，以確保代碼沒(méi)有執(zhí)行任何濫用行為。

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

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