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

我真的是 chrome 扩展开发的新手,并尝试在其中使用 jquery 和 bootstrap。我一直有这样的错误

  • ReferenceError: $ 未定义

  • 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>

哔哔one
浏览 170回答 1
1回答

繁华开满天机

在 manifest.json 中声明的脚本background已经有它自己的页面,一个它运行的隐藏背景页面,所以你不应该在弹出窗口中加载它,因为它没有意义:当弹出窗口打开并注册重复事件时它会运行第二次听众或以其他方式执行后台页面中已完成的重复工作。请参阅访问扩展的 background.js 的控制台和开发工具。根据您实际想要执行的操作,您可能根本不需要后台脚本。在 manifest.json 中声明content_scripts的已经在匹配的网页中运行。网页在任何方面都与扩展弹出窗口无关,它们是完全不同的页面,因此您不应在弹出窗口中加载相同的内容脚本,因为这没有任何意义。根据您实际想要做的事情,您可能根本不需要 content_scripts。解决方法:不要在popup中加载background.js和content.js。编写并加载一个单独的 popup.js。重要提示:弹出窗口是一个单独的窗口,因此它有自己的开发工具。在弹出窗口内右键单击并选择“检查”以打开其开发工具。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript