Javascript 页面加载时发生火灾事件

我刚刚开始使用Chrome扩展。例如，我使用的是“页面更红”

由于

chrome.browserAction.onClicked.addListener（函数（选项卡）{

单击

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
}

---

答案是内容脚本；请参阅和

有几种方法可以插入内容脚本：您已经在使用其中一种方法，即使用

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;
}

---

你做过任何研究吗？事实上，我做过。我梳理了文档、stack overflow和Google。虽然答案可能已经存在，但我（显然对chrome扩展没有经验：见上文）决定尝试向社区寻求帮助。