CODEWITHSUNDEEP
javascriptjquerygoogle-chromegoogle-chrome-extension
JamesG
JamesG

Reputation: 1601

Chrome extension popup: running JavaScript, respond to button click

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?

Upvotes: 0

Views: 2451

Answers (2)

Makyen
Makyen

Reputation: 33296

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.

Upvotes: 1

Elad
Elad

Reputation: 1144

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

Upvotes: 1

Related Questions