Chrome application run javascript on click

Question

What am I doing wrong? I want to run a function when clicking "Show me some foo".

manifest.json browser_action

"browser_action": {
"default_icon": "img/icon.png",
"default_popup": "popup.html"
  },

popup.html

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
    <script type="text/javascript" src="js/popup.js"></script>
  </head>
  <body>
 <div class="changes">

<span class="reset"><a href="#" title="Get some foo!" id="foo">Show me some foo</a>
</span>
</div>
  </body>
</html>

popup.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null,
                       {file:"reset.js"});
});

reset.js

var el = document.getElementById('foo');
el.onclick = showFoo;


function showFoo() {
  alert('I am foo!');
  return false;
}

Full manifest.json file

{
  "name": "App name",
  "version": "1.0.2",
  "manifest_version": 2,
  "description": "Desc.",
  "permissions": [
    "tabs"
  ],
  "browser_action": {
    "default_icon": "img/icon.png"
  },
  "background": {
    "page": "background.html"
  },
  "browser_action": {
    "default_icon": "img/icon.png",
    "default_popup": "popup.html"
  },
    "content_scripts": [
    {
      "matches": [
    "http://*/*",
    "https://*/*"
],
  "js": ["js/myscript.js"],
  "exclude_matches":[
    "http://site.com/*"
]
}
  ],
  "web_accessible_resources": [
"chrome_ex_oauth.html"
  ]
}

Konrad Dzwinel · Accepted Answer · 2012-10-29 08:46:15Z

1

I'm not sure what you are trying to do, but I'll explain your code to you:

user clicks a browserAction
popup window is crated and scripts from popup.html are loaded
popup.js loads and registers a listener chrome.browserAction.onClicked.addListener
user closes a popup window (by clicking anywhere outside it or on the browserAction again)
pupup.html page is unloaded
chrome.browserAction.onClicked.addListener listener is unregistered

As you can see reset.js is never loaded as it's never injected. What's more, you can't have a popup.html and chrome.browserAction.onClicked.addListener in the same extension ("This event will not fire if the browser action has a popup." source).

You probably want to put chrome.browserAction.onClicked.addListener into the background page so that reset.js is injected to current page whenever browserAction is clicked. And, as I mentioned above, for chrome.browserAction.onClicked.addListener to fire, you need to get rid of "default_popup": "popup.html" from manifest.

If you wanted to inject a script to popup.html - it doesn't make much sense. You have full control over popup.html and you can simply put reset.js in the <head>.

answered Oct 29, 2012 at 8:46

Konrad Dzwinel

38.1k12 gold badges102 silver badges106 bronze badges

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

4 Comments

Ciprian Over a year ago

Hi, thank you for the explaining this to me. I have this fiddle which shows a bit better what I m trying to do. jsfiddle.net/cPAN5. To be brief, I want to change a few words on a page, then display what was changed in popup.html and have a button which will undo the changes.

Konrad Dzwinel Over a year ago

That's great, but what is the question here? :) My approach to such an extension would probably go like this: create a popup.html that, when opened, executes a script at current page (developer.chrome.com/extensions/tabs.html#method-executeScript) that does word changing and returns relevant results. Then, in the callback, read the results and show them. For the undo button, basically do the same - execute a script that undoes changes on current page.

Ciprian Over a year ago

The script will run when the page loads and then in popup.html I just want to display the results. That's where it gets a little confusing. I wasn't using chrome.tabs.executeScript, I was just loading the script. i just put this in the head of background.html but the page color doesn't change. <script> chrome.tabs.executeScript(null,{code:"document.body.style.backgroundColor='red'"}); </script>

Konrad Dzwinel Over a year ago

If you put chrome.tabs.executeScript( in the head of background.html it will run only once - when extension will be activated. If you want this to run for each tab when it loads you should probably put chrome.tabs.executeScript( inside the callback from developer.chrome.com/extensions/tabs.html#event-onUpdated .

Collectives™ on Stack Overflow

Chrome application run javascript on click

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related