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?

Community
  • 1
  • 1
JamesG
  • 1,552
  • 8
  • 39
  • 86
  • Please [edit] the question to be on-topic: include a **complete** [mcve] 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 [mcve]**", [What topics can I ask about here?](http://stackoverflow.com/help/on-topic), and [ask]. – Makyen Dec 01 '16 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. – Makyen Dec 01 '16 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? – Makyen Dec 01 '16 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. – Makyen Dec 01 '16 at 19:06
  • @Makyen please see updated post. – JamesG Dec 02 '16 at 01:16
  • I can, unfortunately, quite understand getting that information from examples on GitHub, and elsewhere. What they do makes the example easier and more likely to function with whatever random website the person trying it uses to test. The unfortunate and frustrating part is that they almost never explain what portions of what they are doing are, or are not, good practice when writing an extension which you plan to release, or use on a day-to-day basis. – Makyen Dec 02 '16 at 02:01
  • Thank you for the additional information. If my answer does not clear things up for you, please tell me. – Makyen Dec 02 '16 at 02:02

2 Answers2

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... )

Elad
  • 1,114
  • 8
  • 15
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.

Community
  • 1
  • 1
Makyen
  • 31,849
  • 12
  • 86
  • 121