頁面加載時觸發事件

Question

我剛剛開始使用Chrome擴展程序。 例如，我使用的是“ Page Redder” https://developer.chrome.com/extensions/samples#page-redder 。

由於存在chrome.browserAction.onClicked.addListener(function(tab) { ，當單擊browserAction按鈕時，它將執行紅色背景。如何調整此設置，以使每個瀏覽的頁面默認都具有紅色背景？

這是完整的background.js文件：

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  // No tabs or host permissions needed!
  console.log('Turning ' + tab.url + ' red!');
  chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor="red"'
  });
});

這是清單：

{
  "name": "Page Redder",
  "description": "Make the current page red",
  "version": "2.0",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_title": "Make this page red"
  },
  "manifest_version": 2
}

Answer 1

答案是內容腳本； 請參閱文檔和體系結構概述 。

有幾種注入內容腳本的方法：您已經在使用chrome.tabs.executeScript 。 這稱為程序注入 ，它允許您在任意時間運行內容腳本。

另一種方法是在清單文件中注冊內容腳本。 然后，它將始終*注入匹配的頁面中。 一個滿足您需求的簡單示例：

"content_scripts": [
  {
    "matches": ["*://*/*"],
    "js": ["redder.js"],
    "run_at": "document_end"
  }
],

其中redder.js是：

document.body.style.backgroundColor="red";

*請注意，只有在完全加載擴展名后重新加載頁面時，才會注入該頁面。 啟用擴展時，它不會插入現有的選項卡中。

---

實際上，在您的特定情況下，您甚至不必使用javascript。 您可以改為注入CSS：

"content_scripts": [
  {
    "matches": ["*://*/*"],
    "css": ["redder.css"],
    "run_at": "document_end"
  }
],

其中redder.css是：

body {
  backgroundColor: red !important;
}