页面加载时触发事件

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