Question

我刚开始使用Chrome扩展程序。作为一个例子，我正在使用＆＃34; Page Redder＆＃34; 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

答案是内容脚本;请参阅documentation和architecture overview。

有几种注入内容脚本的方法：您已使用其中一个，使用chrome.tabs.executeScript。这称为programmatic injection，允许您在任意时间运行内容脚本。

另一种方法是注册内容脚本in the manifest file。然后它将始终*注入匹配页面。一个满足您需求的简单示例：

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

页面加载时的火灾事件

1 个答案: