The alert shows but the console.log doesn't, why would this be?

Question

I'm creating a chrome extension and within an event listener function call I have an alert and a console.log. The alert shows but the console.log doesn't, why would this be?

This is the popup js script that is added on the content side.

Popup.js

console.log('popuploaded');   // shows

function settingsButtonClick() {
  alert('test');              // shows when clicked
  console.log('popuploaded2');  // doesn't show
}


window.addEventListener('DOMContentLoaded', function() {
  document.getElementById('theSettings').addEventListener('click', settingsButtonClick);
});

This is the content that contains the button and script code.

content.html

<!doctype html>
<html>
  <head>
    <title>Am I Home?</title>
  </head>
  <body>
    <div style="width:300px;">
      <button id="theSettings" >Settings</button>
    </div>
    <script type="text/javascript" src="js/jquery.amihome.js"></script>
    <script type="text/javascript" src="js/popup.js"></script>
    <script type="text/javascript" src="js/amihome.js"></script>
  </body>
</html>

This is the manifest file for the plugin

// Manifest

{
  "background": {
    "scripts": [ "js/background.js" ]
  },
  "content_security_policy":"script-src 'self' https://apis.google.com; object-src 'self'",
  "content_scripts": [ {
    "all_frames": false,
    "css": [ "css/amihome.css" ],
    "js": [ "js/jquery.amihome.js", "js/amihome.js", "js/popup.js" ],
    "matches": [ "http://*/*", "https://*/*" ],
    "run_at": "document_end"
  } ],
  "manifest_version": 2,
  "name": "Am I Home",
  "description": "This extension will show a red Home Icon when the tab you are working on is receiving requests from Localhost (127.0.0.1)",
  "version": "1.0",
  "icons": {
    "128": "img/home_icon_128.png",
    "48": "img/home_icon_38.png"
  },
  "browser_action": {
    "default_icon": {
      "19": "img/home_icon_faded_19.png",
      "38": "img/home_icon_faded_38.png"
  },
    "default_popup": "amihome.html"
  },
  "permissions": [
    "activeTab", "tabs", "http://*/*", "https://*/*", "webRequest" 
  ]
}

I have tried all number of event listners including jQuery and I thought my script was broken because no logs were showing from the function, but then I added the alert and it showed that it was running. So why would this be?

Note that the popup is a separate window so it has its own separate devtools: right-click inside the popup and select "inspect" in the menu. — wOxxOm, Nov 21 '20 at 08:05

The alert shows but the console.log doesn't, why would this be?

0 Answers0