Question

我真的是chrome扩展开发的新手，尝试在其中使用jquery和bootstrap。我一直有类似的错误

参考错误：未定义$
Bootstrap的JavaScript需要jQuery。必须包含jQuery 在Bootstrap的JavaScript之前。

有人可以帮我吗？我将Jquery放在了引导程序之前，并且如果我在浏览器中运行它也没有看到该问题。.不知道出了什么问题？

清单Json

{
"name": "Stocking",
"version": "1.0.0",
"description": "Chrome extention to keep tracks of stocks' real time movement",
"manifest_version": 2,
"icons":{"128":"icon/icon128.png"},
"permissions": [
  "tabs",
  "<all_urls>"],
"browser_action":{
  "default_icon":{
    "16":"icon/icon16.png",
    "24":"icon/icon24.png",
    "32": "icon/icon32.png"},
  "default_popup": "popup.html"
},
"content_scripts": [
  {
    "matches": [
      "<all_urls>"
    ],
    "js": [
      "bootstrap-4.4.1-dist/js/jquery-3.3.1.slim.min.js",
      "bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js",
      "content.js"],
    "css":[
      "bootstrap-4.4.1-dist/css/bootstrap.min.css"
    ]
  }
],
"background":{
  "scripts": [ 
    "bootstrap-4.4.1-dist/js/jquery-3.3.1.slim.min.js",
    "bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js",
    "background.js"],
  "persistent": false
}

弹出窗口，html

<body>
<!-- Stocks -->
<div class="btn-group dropleft">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>
<!--Search box-->
<div>
    <input type="text" name="tickerInput" placeholder="Search ticker symbols...">
    <button type="submit" name="add"><i class="fas fa-plus"></i></button>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="bootstrap-4.4.1-dist/js/jquery-3.3.1.slim.min.js"></script>
<script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js"></script>
<!-- My JavaScript -->
<script src="js/background.js"></script>
<script src="js/content.js"></script>

Answer 1

manifest.json中声明的background脚本已经有自己的页面，该页面在其中运行是隐藏的背景页面，因此您不应在弹出窗口中加载它，因为它没有任何意义：它将再次运行当弹出窗口打开并注册重复的事件侦听器，或执行其他与后台页面中已完成的工作相同的工作时。参见Accessing console and devtools of extension's background.js。根据您实际要执行的操作，您可能根本不需要后台脚本。

在manifest.json中声明的content_scripts已在匹配的网页中运行。网页在任何方面都与扩展弹出窗口无关，因为它们是完全不同的页面，因此您不应在弹出窗口中加载相同的内容脚本，因为这毫无意义。根据您实际要执行的操作，可能根本不需要content_scripts。

解决方案：：不要在弹出窗口中加载background.js和content.js。编写并加载单独的popup.js。

重要：弹出窗口是一个单独的窗口，因此具有自己的devtools。右键单击弹出窗口，然后选择“检查”以打开其devtools。

Chrome扩展程序：ReferenceError：未定义$

1 个答案: