使用 jquery 时未加载 Google Chrome 扩展弹出窗口答案

【问题标题】：Google Chrome Extension Popup not loading when using jquery使用 jquery 时未加载 Google Chrome 扩展弹出窗口
【发布时间】：2016-10-07 21:33:30
【问题描述】：

问题： 我正在尝试在我的 Google Chrome 扩展程序中使用 jquery。它似乎不起作用。我尝试将它添加到引用 jquery 文件的本地副本的清单中，并且我还尝试添加不同的指令以允许远程访问托管它的 CDN，这两种解决方案都是我从 StackOverflow 中找到的。

症状： 当我单击右上角的操作按钮时，它假设启动 popup.html 它什么也不做，但如果我右键单击并选择“检查弹出窗口”，弹出窗口会加载 jquery 包括的所有功能。有任何想法吗？我在下面包含了我的清单。

可能的线索：添加时间延迟实际上会使弹出窗口渲染和 jquery 代码在弹出窗口自行过早退出后不久执行，基本上是无声地崩溃。

{
  "manifest_version": 2,

  "name": "My extension",
  "description": "A test extension.",
  "version": "1.0",
  "icons":{"128": "icon_512.png"},
  "background": {
    "scripts": ["jquery-3.1.1.min.js","events.js"],
    "persistent": false
  },
      "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Click here!"
  }
}

jQuery

在 popup.js 里面我有以下内容：

$(document).ready(function(){
    alert("Random output!");
});

但如果我这样做，它会暂时起作用：

setTimeout(function(){
    // Code here
$(document).ready(function(){
    alert("Jquery works for a little bit!!!");
});

},1000);

popup.html

<!doctype html>
<html>
  <head>
    <title>Test</title>
    <style type="text/css">
        #content {
            background-color: yellow;
            width: 500px;
            height: 500px;
        }
    </style>
  </head>
  <body>
    <div id="content">
        <h1>Test</h1>
        <button id="checkPage">Start</button>
    </div>

     <script src="jquery.min.js"></script>
     <script src="popup.js"></script>
  </body>
</html>

【问题讨论】：

弹出页面和背景页面是不同的文档。你在 popup.html 中加载 jQuery 吗？如果是，请出示。
@wOxxOm 我的清单文件和描述应该暗示了这一点。您看到的 jquery 是针对 popup.js 的。我也会添加 popup.html 文件。
我在这里尝试了您的代码，它在版本 54.0.2840.50 beta-m（64 位）上正常工作
谢谢大家。我会在周末试一试，然后告诉你结果。
看来你是对的。

标签： google-chrome google-chrome-extension

【解决方案1】：

正如 Granga 上面指出的，这个问题是由版本兼容性问题引起的。到目前为止，最新版本的 jQuery 与最新版本的 Google Chrome 似乎工作正常。如果将来有人遇到此类问题，请尝试升级 jQuery 和/或 Chrome。

【讨论】：