0

I seem to be having trouble running a script in my Chrome extension popup.

Here is the info about my project first:

The file popup.html contains a button with the id of newDetails and an <h1> tag with the class title:

popup.html:

<button id="newDetails">Click for details</button>
<h1 class="title">Mr Sanderson</h1>

In a file called background3.js, I have this script:

$(document).ready(function() {
  console.log("Test");
  document.getElementById("newDetails").addEventListener("click", testClick);
});

function testClick() {
  $('.title').html("The New Title");
}

In my manifest.json file I have this:

"content_scripts": [ {
  "js": [ "jquery.min.js", "background3.js" ],
  "matches": [ "http://*/*", "https://*/*"]
}]

I found this answer which has a similar title, and this is why I added the event listener:

Chrome Extension won't run function on button click

However this is also not working. I made the function only include a console.log("test") and still nothing.

Eventually, I want to run an AJAX script that gets details from an online JSON file but I can't even seem to get this to work.

How do I get the click of the button to run the function I want?

Additional notes: There is nothing in the console for the page nor the background page.

edit for @Makyen

The HTML I put up earlier in the post is all the HTML in the popup.html file. Apart from the <html>, <head> and <body> tags.

Here is the manifest section you asked for:

"browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
},

For your question: Why have you named a content_scripts background3.js? I got this basic template app for Chrome extensions to work with from GitHub. It said to name the JavaScript file whatever I want. So, I just coped what was there, added a 3 and then removed it to be blank. I then added the code above to it. This is, after all, only a play around to learn it so I did not think it would matter on the name.

Next you say: Please do not load jQuery into every http and https page. This was part of the template I got. Again not for production. But thank you for the heads up. I did not know so I will make a note of that. :)

Anything else you need to know?

Improve this question
7
  • Please edit the question to be on-topic: include a complete minimal reproducible example that duplicates the problem. Including a manifest.json, some of the background and content scripts. Questions seeking debugging help ("why isn't this code working?") must include: ►the desired behavior, ►a specific problem or error and ►the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: "How to create a minimal reproducible example", What topics can I ask about here?, and How to Ask. Commented Dec 1, 2016 at 18:42
  • At a minimum we need the HTML file which is being used as your popup along with your manifest.json showing the browser_action popup. Having these would eliminate/identify multiple probable errors. Commented Dec 1, 2016 at 18:47
  • Why have you named a content_scripts background3.js? Are you thinking that having background3.js as a content script will make it load in your popup? It will not. is your Popup.html an actual browser_action popup, or are you injecting/showing it in a webpage? Commented Dec 1, 2016 at 18:50
  • Please do not load jQuery into every http and https page (content_scripts with your matches) unless you have to. jQuery is 85kiB of minimized code. This is a significant burden with which to saddle every single page. While It is possible you really need to load jQuery, what is more likely is that you are doing so for the convenience of saving a couple/few hundred characters in your own code by not writing your code in vanilla JavaScript. If that is the case (we have no way to know), doing so is a very poor trade-off from your user's point of view. Commented Dec 1, 2016 at 19:06
  • @Makyen please see updated post. Commented Dec 2, 2016 at 1:16

2 Answers 2

Reset to default
1

If you want a script in popup, content script isn't the way. You need reference the relevant script in popup.html.

Content script inject scripts into regular web pages. The domain of extension's pages is chrome-extension://....

(I'm sorry about my english... )

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You must include the JavaScript files in <script src=""> tags

If you want JavaScript to load into your popup, you need to include the script files(s) for the src within <script type="text/javascript" src=""> tags in your popup.html file. What is in the content_scripts key in your manifest.json has no effect on what is loaded into your popup. Content scripts are scripts which can interact with the DOM of a specified webpage by being loaded into a somewhat privileged context. Popups are loaded into the same context as the background page, but in a different scope (e.g. a different window).

I would suggest that you read Chrome extension architecture overview which describes how Chrome extensions are organized.

For what I understand of your popup, which is that you want both jquery.min.js and background3.js to be loaded/run, you would want something like:

<!doctype html>
<html>
<head>
    <title>My Popup</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="background3.js"> </script>
</head>
<body>
    <button id="newDetails">Click for details</button>
    <h1 class="title">Mr Sanderson</h1>
</body>
</html>

Your JavaScript appears to be functional as written.

The above code was modified from the HTML for the complete extension included in my answer to Simple jQuery within <script> tag in Chrome extension popup is not executing. While the title of that question makes it sound like a duplicate, the problem which that OP had was different. However, subsections of my answer there could provide an answer here.

Seeing the console for your popup

In Chrome, the console for your popup is a different console than the one for the background page and the one for any webpage. The one for the web page is also for your content scripts. For more information, please see my answer to Google Chrome / Firefox do not see WebExtension output in Console

Testing your popup

As long as you are not using any Chrome specific APIs, you should be able to test your popup page as a normal webpage. You should be able to load it from a file:// URL to test that it is working. From time to time, I have even added fake placeholders for some Chrome APIs just to test the basic functionality of a popup.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.