Popup.js not working for Chrome Extension

Question

Currently I am working on a chrome extension and with the popup.html I cannot get the popup.js to work

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>

  <body style="width: 15rem; height: 15rem">
    <div class="container-fluid" style="padding: 10px"> 
        <input id="url" />
        <button type="button" id="newDetails">Submit</button>
    </div>
    <script src="./popup.js"></script>
  </body>
</html>

popup.js

console.log("Hello")
let btn = document.getElementById("newDetails");
btn.onclick = function () {
  console.log("Clicked!");
};

I have already looked at plenty of questions/answers (e.g. this,this,this) but none have been able to fix my issue.

Thank you in advance!

Yes, I see the popup but when I click the button it does not print the desired function. In addition, I have just included a `document.addEventListener(DOMContentLoaded, function(){}` but still nothing — pythonNovice, Sep 17 '20 at 07:36
Have you tried `alert` instead of `console.log`? The `console.log` only logs in the popup's console, not the current page's. — Hao Wu, Sep 17 '20 at 07:37
The alert works! Is there any way for me to check the popup's console? — pythonNovice, Sep 17 '20 at 07:39
You need to go to `chrome://extensions/`, and click the `Inspect views background page` on your extension to see the popup's console. Also in dev tools, you can pick the source by choosing the extension on the dropdown that says `top` by default(but that's probably only for `background.js`) — Hao Wu, Sep 17 '20 at 07:41
Sorry, that's also for the background script. Here's the way how you should do it: [Cannot get Chrome popup.js to use console.log](https://stackoverflow.com/questions/14858909/cannot-get-chrome-popup-js-to-use-console-log) — Hao Wu, Sep 17 '20 at 07:47

score 1 · Accepted Answer · answered Sep 17 '20 at 07:55

1

Resolved! Answered by Hao Wu in the comments of the original post.

Needed to check the popup's console vs the browser console. You can do that by right clicking the extension and inspecting it.

answered Sep 17 '20 at 07:55

pythonNovice

1,130
1
14
36

Popup.js not working for Chrome Extension

1 Answers1