CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Ciprian
Ciprian

Reputation: 3226

Chrome application run javascript on click

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"
  ]
}

Upvotes: 0

Views: 333

Answers (1)

Konrad Dzwinel
Konrad Dzwinel

Reputation: 37903

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

Upvotes: 1

Related Questions