Chrome Extension Button Click to Console

Question

Hi I am working on my first chrome extension and am running into a problem I imagine is pretty simple for a pro. I have a chrome extension built that runs and when text is highlighted on screen it makes an icon popup, if the icon is clicked it opens a window, and that window is a local html file. Right now I have a button in that local html file with the id of "CM_SpellingGrammar" and this code in my contentScript.js

document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('CM_SpellingGrammar');
    button.addEventListener('click', function() {
      console.log('Button Pressed!');
    });
});

But for some reason there is no print out to the console when the button is clicked. Keep in mind that this local html file that occupies the little window that opens when the icon is clicked is different then my popup.html file which opens the main window when my chrome extension is selected in the top right of the browser. Here is the code for the local html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="contentScript.js"></script>
    <title>Document</title>
</head>
<body>
    <button id="CM_SpellingGrammar">Check Spelling and Grammar</button>
</body>
</html>

and my manifest.json file:

{
"name": "EssayWriter",
"version": "0.1.0",
"description": "Write anthing is seconds.",
"permissions": ["tabs", "activeTab", "storage", "contextMenus"],  
"host_permissions": ["<all_urls>"],
"background": {
  "service_worker": "background.js"
},
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["contentScript.js"]
  }
],
"web_accessible_resources": [
  {
    "resources": [
      "assets/bookmark.png",
      "assets/play.png",
      "assets/delete.png",
      "assets/save.png"
    ],
    "matches": ["<all_urls>"]
  }
],
"action": {
  "default_icon": {
    "16": "assets/ext-icon.png",
    "24": "assets/ext-icon.png",
    "32": "assets/ext-icon.png"
  },
  "default_title": "AssignmentAssistant",
  "default_popup": "popup.html"
},
"manifest_version": 3
}

Thanks in advance!!!!!

@Yogi I apologize I uploaded a earlier version of that bit of code when I was testing. I updated the code above to reflect the newest attempt. — Russell Hertel, May 30 '23 at 23:39
Sorry. I deleted my previous comment as it was incorrect. What do you see when you add console.log(button) to the third line of contentScript.js? — Norio Yamamoto, May 31 '23 at 00:12
1) The popup is a separate window so it has its own separate devtools: right-click inside the popup and select "inspect" in the menu. 2) Rename contentScript.js to popup.js, also in html. 3) Remove `content_scripts` from manifest.json if you don't need to run scripts in a web page, otherwise make a separate contentScript.js, see also [Accessing \`window\`/DOM/HTML of the webpage from the extension](https://stackoverflow.com/a/67227376) — wOxxOm, May 31 '23 at 05:14

score 0 · Answer 1 · answered May 31 '23 at 01:06

I tested it with a minimal manifest.json. it worked correctly.
Please reload the extension and local html files.

manifest.json

{
  "name": "EssayWriter",
  "version": "0.1.0",
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "contentScript.js"
      ]
    }
  ],
  "manifest_version": 3
}

Chrome Extension Button Click to Console

1 Answers1