9

我正在尝试了解 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"]
}

注入图像.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);

背景.html

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

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

4

5 回答 5

25

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

对于刚开始的任何人，请查看每个示例的清单版本，该版本在 manifest.json 中定义。版本 2 具有更严格的安全策略，并且内联 javascript 无效，因此复制示例 v1 代码并将其粘贴到 background.html 将不再起作用。所有脚本都需要位于一个外部文件中，该文件可以使用如下src属性包含在 HTML 文件中<script src="main.js"></script>

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

  1. 正在查看的选项卡的 DOM，只能由以下人员访问content_scripts

  2. content_scripts是 manifest.json 中标识的 JavaScript 文件数组，这些文件按顺序直接注入到选项卡的 DOM 中。显然，选项卡中的 JS 变量和函数与您的 content_scripts 无法交互。

  3. Chrome 要么通过连接一组脚本生成的一个背景 HTML 页面，要么被定义为一个页面，通常命名为 background.html。

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

您的背景被定义为一个或多个scripts：

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

或作为page：

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

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

在此处输入图像描述

于 2013-10-21T05:50:57.157 回答
2

You have a typo in your manifest file. Including a background page should look like this:

"background": {"page": "background.html"}
于 2013-04-04T21:38:35.757 回答
2

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

  "background": {
    "scripts": ["background.js"]
  },
于 2015-11-16T05:47:46.030 回答
0

One more gotcha not mentioned here. Doing <script src="myscript"/> doesn't work :P, you have to type it out completely with <script src="myscript"></script>. Took me a bit to figure that out.

于 2014-04-01T03:26:42.723 回答
0

对于版本 3

service_workers背景页面在 MV3中被替换为

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

{
  "manifest_version": 3,
  "name": "",
  "background": {
    "service_worker": "background.js"
  }
}
于 2021-07-11T11:55:36.963 回答