Execute script after click in popup.html (chrome extension)

Question

I am trying to execute javascript on a page when I click on a button in popup.html. I tried to use such a way:

In background.js:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo){
    if(changeInfo.status == "loading") {
        insert(tabId);
    }
});
function insert(tabId) {
    chrome.tabs.get(tabId, function(tab) {
        $('button').click(function() {
            chrome.tabs.executeScript(tab.id, {file: 'js/alert.js'});
        });
    });
}

Alert.js consists only of one string: alert('works');

Alert is just an example. Real script should do some DOM manipulation with opened tab after user clicks on a button im popup.html.

You seem to have messed up some concepts (such popup, background-page, etc). It would help to post your manifest as well. — gkalpak
– gkalpak, Commented Dec 24, 2013 at 19:57
The presented background.js doesn't meet your requirements, and seems useless. In your content script, place alert into a function, say 'handleButtonClick'. Make sure the content script is registered in the manifest. Then in the popup.html just invoke your function: chrome.tabs.executeScript({code: 'handleButtonClick()'});. — Stan
– Stan, Commented Dec 24, 2013 at 21:03

Shayan · Accepted Answer · 2019-12-02 14:17:00Z

44

I wrote a demo for your need.

https://gist.github.com/greatghoul/8120275

alert.js

alert('hello ' + document.location.href);

background.js

// empty file, but needed

icon.png

manifest.json

{
  "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"
  },

  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

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>

popup.js

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

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

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

edited Dec 2, 2019 at 14:17

Shayan

8863 gold badges19 silver badges36 bronze badges

answered Dec 25, 2013 at 5:18

greatghoul

1,5482 gold badges17 silver badges19 bronze badges

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

6 Comments

Stan Over a year ago

I upvoted for your efforts, but what for you added the empty background.js?

greatghoul Over a year ago

@VladGolubev there is no such api, but you can insert html use pure javascript document.createElement('tag_name'); or jQuery to go. it's easy.

Makyen Over a year ago

While this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. It would be trivial to just copy the contents of your Gist into this answer. However, you do not state the licensing terms for the code in your gist. Thus, it is not clear that it would be permissible for me to just do that.

Shayan Over a year ago

Where will this script executed? On popup.html? Or the active webpage (like contentscript)?

Nor.Z Over a year ago

For manifest V3: \ 1. you need to use chrome.scripting.executeScript({ & files stackoverflow.com/questions/66549560/… \ 1. for the target you may use chrome.tabs.query({currentWindow: true, active: true}, function(tabs){ stackoverflow.com/questions/7303452/…

|

Community · Accepted Answer · 2019-04-06 13:55:49Z

5

You can also use Messaging:

in popup.js

document.getElementById("clicked-btn").addEventListener("click", function(e) {
    chrome.runtime.sendMessage({'myPopupIsOpen': true});
});

in background.js

chrome.runtime.onMessage.addListener(function(message, sender) {
      if(!message.myPopupIsOpen) return;

      // Do your stuff
});

Not tested but should works, further informations about Messaging.

edited Apr 6, 2019 at 13:55

CommunityBot

11 silver badge

answered Apr 13, 2017 at 12:50

Jean-Luc Barat

1,16511 silver badges19 bronze badges

2 Comments

satvikpendem Over a year ago

This is a better way to do it rather than running raw scripts like in @greatghoul's answer

EGS Over a year ago

Theoractly It may be better, but it doesn't work.

Collectives™ on Stack Overflow

Execute script after click in popup.html (chrome extension)

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related