Question

我正在尝试了解Chrome背景页面。我设法在对示例进行蚕食后运行background.js脚本，每次用户访问页面时都会弹出一个警告框。但是，当我使用相同的脚本并将其移动到background.html文件时，我似乎无法让文件执行。

我已将清单文件更新为页面（而不是脚本），并且扩展程序加载正常。我也尝试过直接在主体或函数中使用脚本标记中的javascript，因为它现在在主体或头部称为onload。

也许我不理解Chrome扩展程序中使用background.html页面的概念？

清单文件：

{
  "name": "Testing Extension",
  "version": "0.2",
  "background": { "pages": ["background.html"] },
  "permissions": [
    "tabs", "https://mail.google.com/*", "http://*/*, https://*/*"
  ],
  "browser_action": {
    "name": "Do some action",
    "icons": ["icon.png"]
  },
  "manifest_version": 2,
  "web_accessible_resources": ["injectImage.js", "background.html"]
}

injectImage.js

alert('Got Here');
'use strict';   
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript(null, {file: "injectImage.js"});
});

    chrome.browserAction.setBadgeBackgroundColor({color: [0, 200, 0, 100]});

    var i = 0;
    window.setInterval(function () {
        chrome.browserAction.setBadgeText({text: String(i)});
        i++;
    }, 10);

background.html

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-1.8.0.min.js"></script>
        <script src="injectImage.js"></script>
    </head>
    <body>
</body>
</html>

目前，除了在右上角放置一个图标外，此代码似乎没有做任何其他事情。

Answer 1

您的背景只有一页，就像本地服务器一样，可以在content_scripts和default_popup或其他扩展程序页之间发送和接收数据。

对于任何开始的人，请查看每个示例的清单版本，该版本在manifest.json中定义。版本2具有更严格的安全策略，并且内联javascript无效，因此复制样本v1代码并将其粘贴到background.html将不再起作用。所有脚本都必须位于外部文件中，该文件可以使用src

等<script src="main.js"></script>属性包含在HTML文件中

我的理解是，您有四个常用的基本扩展组件：

正在查看的标签的DOM，只能通过content_scripts

content_scripts 是manifest.json中标识的javascript文件数组，它们会直接顺序注入选项卡的DOM。显然，选项卡和您的content_scripts中的JS变量和函数无法进行交互。

Chrome通过连接一系列脚本 OR 生成的一个后台HTML页面被定义为一个页面，通常名为background.html。

{"browser_action" : {"default_popup" : "popup.html"}}是manifest.json中定义的可选用户界面，当有人点击您的扩展程序图标时会显示该界面。弹出窗口无法访问选项卡的DOM，因此如果选项卡的内容很重要，则必须使用Chrome chrome.extension.sendMessage

等Chrome消息进行请求
您的背景被定义为一个或多个scripts：

"background": { "scripts": ["background.js"] },

或page：

"background": { "page": "background.html" },

如果您想了解后台内部发生了什么，那么您可以使用console.log但是为了检查输出，您必须从Extensions页面启动检查器。您甚至可以看到后台文件始终命名为“_generated_background_page.html”。

Answer 2

您的清单文件中有拼写错误。包含背景页面应如下所示：

"background": {"page": "background.html"}

Answer 3

这里没有提到另外一件事。执行<script src="myscript"/>不起作用：P，您必须使用<script src="myscript"></script>完全输入。我想了解一下。

Answer 4

或者您可以直接定义js而不是定义后台页面并在其中引用脚本文件（根据内容安全策略（CSP）不允许使用内联脚本）

  "background": {
    "scripts": ["background.js"]
  },

Answer 5

对于版本 3

background pages are replaced by service_workers in MV3

<块引用>

将 manifest.json 中的 background.page 或 background.scripts 替换为 background.service_worker。

{
  "manifest_version": 3,
  "name": "",
  "background": {
    "service_worker": "background.js"
  }
}

Chrome扩展程序背景页面html无效

5 个答案:

对于版本 3