Skip to content

Instantly share code, notes, and snippets.

@greatghoul
Last active July 12, 2023 17:43
Show Gist options
  • Star 88 You must be signed in to star a gist
  • Fork 18 You must be signed in to fork a gist
  • Save greatghoul/8120275 to your computer and use it in GitHub Desktop.
Save greatghoul/8120275 to your computer and use it in GitHub Desktop.
alert('hello ' + document.location.href);
{
"manifest_version": 2,
"name": "Click to execute",
"description": "Execute script after click in popup.html (chrome extension) http://stackoverflow.com/questions/20764517/execute-script-after-click-in-popup-html-chrome-extension.",
"version": "1.0",
"icons": {
"48": "icon.png"
},
"permissions": [
"tabs", "<all_urls>"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
<!DOCTYPE html>
<html>
<body style="width: 300px">
Open <a href="http://stackoverflow.com" target="_blank">this page</a> and then
<button id="clickme">click me</button>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
// var app = chrome.runtime.getBackgroundPage();
function hello() {
chrome.tabs.executeScript({
file: 'alert.js'
});
}
document.getElementById('clickme').addEventListener('click', hello);
@apysais
Copy link

apysais commented Mar 15, 2017

tnx

@trevren11
Copy link

👍

@shape-of-myHeart
Copy link

thx

@gilgri
Copy link

gilgri commented Sep 24, 2017

why background.js is empty ?
do you have an example that can read from the html and get show the values in popup.html?

@XuYanci
Copy link

XuYanci commented May 22, 2018

thanks a lot

@greatghoul
Copy link
Author

removed the background file.

@Gnanavelc7
Copy link

how to redirect to .cshtml in default popup
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"--->here
}

@ebanner
Copy link

ebanner commented Jul 31, 2018

thanks!

@puneettrivedi008
Copy link

How can we execute the the complete javascript having multiple functions using chrome.tab.executescript? I am complete new to all this.

@Yagniksojitra
Copy link

how to add a radio button and turn on and off the script with radio button ?

@fxnoob
Copy link

fxnoob commented Oct 12, 2018

@filip505
Copy link

filip505 commented Dec 1, 2018

thanks 👍

@DanielOberlechner
Copy link

I have followning error:
"Uncaught TypeError: Cannot read property 'addEventListener' of null"

what the heck am I doing wrong???
Greets

@rrpathi
Copy link

rrpathi commented Jan 18, 2019

thanks lot you save my life

@ole0
Copy link

ole0 commented Mar 12, 2019

thank you!

@brenoprata10
Copy link

Thanks 👍

@kartickmanna
Copy link

Excellent...... and for Firefox browser.tabs.executeScript

@pupumeme
Copy link

thank you

@sahin52
Copy link

sahin52 commented Jan 24, 2020

You are perfecto, spacibo, gracias

@vbharuka
Copy link

vbharuka commented Aug 8, 2020

Thanks a lot.

@deCodeIt
Copy link

deCodeIt commented Aug 8, 2020

I have followning error:
"Uncaught TypeError: Cannot read property 'addEventListener' of null"
what the heck am I doing wrong???
Greets

did you figure this out? Currently having the same problem

My popup.js looks like the following:

// var app = chrome.runtime.getBackgroundPage();

function hello() {
  chrome.tabs.executeScript({
    file: 'alert.js'
  }); 
}

var readyStateCheckIntervalLocal = setInterval(function() {
    if (document.readyState === "complete") {
        clearInterval(readyStateCheckIntervalLocal);
        document.getElementById('clickme').addEventListener('click', hello);
    }
}, 10);

@deCodeIt
Copy link

deCodeIt commented Aug 8, 2020

On a side note, you don't really need the alert.js file as the following will work too.

function hello() {
  alert('hello ' + document.location.href);
}

@joelthorner
Copy link

Omfg tnx!

@manoj9121
Copy link

How to show popup for desktopcapture on button click? Please help

@cclambie
Copy link

cclambie commented Jan 22, 2022

Thanks for the work here. I upvoted on StackOverflow :)

Wondering if you could extend it?
I would like to send a variable to the alert.js

Say
popup.html has

<input id="var1" type="text">
<input id="var2" type="text">
<button id="clickme">click me</button>

Then what to do with alert.js or the popup.js to get the variables to alert?

popup.js

   function hello() {
     chrome.tabs.executeScript({
       file: 'alert.js'
       variable: var1, var2
     }); 
   }

   document.getElementById('clickme').addEventListener('click', hello);

Or how please?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment