如何在 Chrome 扩展程序中使用带有 Manifest 2 的 background.html 页面（而不是 background.js）答案

【问题标题】：How do you use a background.html page (instead of background.js) with Manifest 2 in a Chrome Extension如何在 Chrome 扩展程序中使用带有 Manifest 2 的 background.html 页面（而不是 background.js）
【发布时间】：2018-05-19 17:16:56
【问题描述】：

我有一个 Chrome 扩展程序，它与指定为脚本 (background.js) 的背景配合得很好。 Chrome 创建了一个虚拟的 background.html 页面...

我需要一个后台脚本（以获取 Google Drive 集成），因此（据我了解）需要移至 background.html。

我的清单现在指定：

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

我将“https://apis.google.com/js/api.js”添加到我的原始设置（如下）以获得我的 Chrome 扩展程序的 Google Drive 访问权限...但我的后台页面抛出“未定义 gapi”错误...所以我切换到后台.html 尝试让我的后台进程能够访问 Drive 脚本。

"background": {
    "scripts": ["/dscripts/jquery-3.1.1.min.js","/dscripts/firebase.js","/dscripts/bootstrap-multiselect.min.js","/dscripts/bootstrap.min.js", "https://apis.google.com/js/api.js", "/scripts/background.js"]},

我的新 background.html 页面如下所示：

<!DOCTYPE html>
<html>
  <head>
    <!--Original javascript / CDN -->
    <script type="text/javascript" src="dscripts/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="dscripts/jquery-ui.min.js"></script>
    <script type="text/javascript" src="dscripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="dscripts/bootstrap-toggle.min.js"></script>

    <!-- FIREBASE  - I think we only need JS, not app.js and auth.js -->
    <script src="dscripts/firebase.js"></script>

    <!-- <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script> -->

    <!-- Google APIS -->
    <script type="text/javascript" src="https://apis.google.com/js/api.js"></script>

    <!-- background.js -->
    <script type="text/javascript" src="scripts/background.js">

  </head>
</html>

我没有对 background.js 进行任何更改 - 它包含 chrome.runtime.onStartup.addListener 和许多成熟的逻辑。

当我运行我的扩展程序并查看 background.html 控制台时，我得到：导航到 chrome-extension://XXXXX/background.html

我的 background.js 文件通常会生成大量调试控制台内容。就好像 background.js 没有运行一样。

这是有道理的，我猜 - 没有 dom 可以加载和触发操作。

我觉得我遗漏了一些非常明显的东西（道歉）——但我能找到的所有示例都使用 background.js，而不是 background.html。

如何在指定 background.html 时触发我的 javascript？

【问题讨论】：

为什么使用 background.html 而不是在清单中列出您的脚本？
特定于我在 CSP 中的 apis.google.com/js/api.js，我收到“GAPI 未定义”消息......所以我想通过创建一个 background.html 页面我可以得到它工作......主要遗憾......现在没有任何工作:)我不知道（除了回滚）如何让基本的 background.js 事情再次发生......
嗯，不看代码很难说，但我不认为从列出所有脚本更改为使用 background.html 会做任何事情。我的意思是，background.html 页面无论如何都会自动生成，所以...
我找不到参考...但早些时候，当我试图解决原始问题时，我遇到了文档说如果你想使用你会使用 background.html 页面外部 JS ......类似的东西。假设最简单的情况......如果你切换到 .html 而不是 .js，你如何让实际的 javascript 触发？是否必须在每个想要使用后台页面的附加 js 文件中使用 chrome.runtime.getBackgroundPage()？
我明白你在说什么......我通常总是下载脚本并将它们添加到清单中，而不是依赖外部资源，所以我真的不知道。你应该仍然可以使用chrome.runtime.getBackgroundPage()，我不明白你为什么不应该。

标签： google-chrome google-chrome-extension

【解决方案1】：

background.js 文件中缺少结束标记。一旦我添加了它，后台的 js 就会完全按照预期运行。

因此，使用您自己的 background.html 页面与自动生成的页面相比，不需要额外的操作（对于后面的人）。

【讨论】：