From popup.html, how can I run a javascript function by button onclick?

Question

I'm trying to build an extension for Chrome, but I'm a newbie and I'm having trouble understanding the Docs provided by Google. I want the extension to have a popup that shows a few buttons, and when a button is clicked, I want to run a script.

This is my setup:

popup.html

<button id="test1" onclick="getSite();">button 1</button>
<button id="test2" onclick="getSite();">button 2</button>

content_script.js

function getSite(){alert('getSite works!');}

I'm having trouble understanding how to use the chrome javascript api, as I see others saying use chrome.tabs.executeScript, but I can't figure out where that line goes. Can anyone help me? I'll give you a cookie! or just an upvote.. or maybe both?

Both answers below are correct. You cannot use inline event attributes, and you cannot reference variables in your content script from your browser action popup. Use addEventListener in a separate JS file, and use message passing via your background page. — apsillers
– apsillers, Commented May 8, 2012 at 15:42
Ohhh.. I think I just figured it out, but I'll test more before confirming. This is how you use chrome.tabs.executeScript Instead of just typing out alert('test'); you write chrome.tabs.executeScript(null, {code:"alert('test')"}); window.close(); — Jack
– Jack, Commented May 8, 2012 at 19:30
That is correct; you can also use {file:"some_file.js"} to inject a whole file. Each tab has an isolated execution evironment for extension scripts, and those are all separate from the background paage. executeScript is how the background page gets a particular tab to run code. — apsillers
– apsillers, Commented May 8, 2012 at 19:44

Juzer Ali · Accepted Answer · 2012-05-08 07:27:35Z

2

You haven't mentioned on which page you want your scripts to run onclick, in Popup.html page or the page on which user is currently working on the browser. If it is just the popup.html page in which you want to execute your script, include them in popup.html page itself.

If however you want to execute them on the user's browser page, You will have to pass a message to your background page, which in turn will execute chrome.tabs.executeScript with current tab's id and {file: 'yourjsfile.js'} as arguments.

answered May 8, 2012 at 7:27

Juzer Ali

4,2073 gold badges38 silver badges64 bronze badges

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

3 Comments

Jack Over a year ago

Trying this in popup.html:

<script> function getSiteThree() { alert('test3'); } 			  document.addEventListener('DOMContentLoaded', function () {  			document.getElementById('button3').addEventListener('click', getSiteThree); }); </script>

in body: <button id="button3">button3</button> It's not running the function. But when I reference the same script in content_script.js, the pop up shows, albeit briefly. I'm sure I"m doing something wrong, so I'll keep trying this a little more, but if you see something obvious, please do let me know!

Juzer Ali Over a year ago

I've never used the event DOMContentLoaded. Can you try window.onload instead and check if it works for you?

Juzer Ali Over a year ago

Jophin Joseph has mentioned correctly with the link that you cannot use inline javascript in your popup.html. You will have to put all your js in a file and load it through <script> tag.

Jophin Joseph · Accepted Answer · 2012-05-08 05:51:51Z

1

I think you are having this problem because of restrictions imposed by the Google Content Security Policy. It mentions that iniline javascript like the one that you have mentioned in you code will not be executed. Try removing the onclick="getSite()" from your HTML markup to content_script.js. Use addEventListener function to attach the event to the button.

answered May 8, 2012 at 5:51

Jophin Joseph

2,9614 gold badges32 silver badges42 bronze badges

1 Comment

Jack Over a year ago

I did it this way, and it seems to working, somewhat. The alert shows, but it fades away right away. I'm guessing I'll have to try it by passing the message to the background page.

Collectives™ on Stack Overflow

From popup.html, how can I run a javascript function by button onclick?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related