javascript - 添加后台脚本时，Chrome 扩展弹出页面停止更新

问题描述

我一直在开发 Chrome 扩展程序，我注意到我的 Bootstrap 微调器停止正常旋转，并且当我将后台脚本添加到我的 DOM 时，我的 DOM 不会更新manifest.json

在一个简单的虚拟扩展中复制了这个问题，我将在下面分享。它似乎不是特定于 Bootstrap 的事情，因为在某些情况下，我在其他扩展程序中进行的 DOM 更新会在日志记录表明 DOM 已更新后 10 秒出现。要进行 DOM 更新，我必须四处移动鼠标、单击按钮或突出显示某些文本。保持微调器运行的另一个有趣方法是打开 DevTools，转到 Elements，然后将鼠标悬停在某物上。

证据：

笔记：

似乎无关紧要persistent_truefalse
是否permissions指定似乎无关紧要
当我在此处下载 Bootstrap并链接到bootstrap.min.css我的popup.html
我background.js故意留空，但可能需要一些代码来解决这个问题（比如监听器）。我尝试将其添加到我的background.js但它似乎没有影响任何东西：
```
chrome.runtime.onInstalled.addListener(function() {
  console.log("Hello World!");
});
```

清单.json

{
  "name": "spinner-test",
  "version": "0.0.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "popup.html"
  },
  "background": {       // Comment this out to see it work properly
    "scripts": [        // Comment this out to see it work properly
      "background.js"   // Comment this out to see it work properly
    ],                  // Comment this out to see it work properly
    "persistent": false // Comment this out to see it work properly
  },                    // Comment this out to see it work properly
  "permissions": [
    "storage",
    "tabs"
  ]
}

popup.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Spinner Test</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div class="container-fluid">
      <h1 class="h1 center">Spinner Test</h1>
      <div id="spinner" class="btn btn-block">
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        &nbsp;Loading...
      </div>
    </div>
  </body>
</html>

背景.js

// Nothing

标签： javascripthtmlgoogle-chromegoogle-chrome-extensionmanifest.json

javascript - 添加后台脚本时，Chrome 扩展弹出页面停止更新

问题描述

解决方案

推荐阅读