0

I am really new to chrome extension development, and try to use jquery and bootstrap in it. I keep having errors like

  • ReferenceError: $ is not defined

  • Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

Could anyone help me with this? I have put the Jquery before bootstrap, and didn't see that issue if I run it in browser..don't know what goes wrong?

Manifest 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
}

popup,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>
Yang Hsin Jou
  • 3
  • 2

1 Answers1

0

The background script declared in manifest.json already has its own page, a hidden background page where it runs, so you should not load it in the popup as it makes no sense: it runs for a second time when the popup opens and registers duplicate event listeners or otherwise performs duplicate work of what's already done in the background page. See Accessing console and devtools of extension's background.js. Depending on what you actually want to do, you may not need the background script at all.

The content_scripts declared in manifest.json are already running in the matching web pages. A web page is not related to the extension popup in any regard, these are completely different pages, so you should not load the same content script in the popup as it makes no sense. Depending on what you actually want to do, you may not need content_scripts at all.

Solution: don't load background.js and content.js in popup. Write and load a separate popup.js.

Important: the popup is a separate window so it has its own devtools. Right-click inside the popup and choose "inspect" to open its devtools.

wOxxOm
  • 65,848
  • 11
  • 132
  • 136