Add buttons to webpage with Chrome Extension

Question

I am trying to build a Chrome Extension that will add a button on Deezer's album page.

My manifest is as follows:

{
  "manifest_version": 2,

  "name": "Deezeet",
  "description": ".",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["https://www.deezer.com/*", "http://www.deezer.com/*"],
      "js": ["jquery.js", "popup.js"],
      "run_at": "document_end"
    }
  ],
  "web_accessible_resources": ["script.js"],
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "content_security_policy": "script-src 'self' https://api.deezer.com; object-src 'self' https://api.deezer.com; script-src 'self'"
}

My popup.js (from here):

var s = document.createElement('script');
s.src = chrome.extension.getURL('script.js');
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

And my script.js (just for tests now):

$('header').hide();

But it doesn't work. All of my JS works inside the popup. What can I do?

Are you sure your jQuery selector is correct? Did you by any chance mean `'#header'` or `'.header'`? Also note that injected script won't be able to use jQuery you injected as a content script. — Xan, Jun 25 '14 at 09:31
Yes, I'm sure ;-) I even add whole jQuery code in my `script.js`, but it didn't help. Like I said before, even if I use `alert('bam')` or something as simple, it all runs _inside_ my popup. — Tomek Buszewski, Jun 25 '14 at 09:51
Why do you have a _popup_ in the first place? You have a content script defined, you should examine the page you're trying to inject into. Calling a popup does _nothing_ with other pages as it is. — Xan, Jun 25 '14 at 09:56
Hm. I used popup before to maintain script, but now, it's propbly useless. I'll test it right away and tell you the results. — Tomek Buszewski, Jun 25 '14 at 10:21
Removing `popup.html` helped, @Xan, please post this as an answer so I can accept it ;-) — Tomek Buszewski, Jun 25 '14 at 10:26

score 2 · Accepted Answer · answered Jun 25 '14 at 14:04

You're opening a popup and seeing the effects in the popup:

[...] even if I use alert('bam') or something as simple, it all runs inside my popup.

When you open it, it has nothing to do with any other pages. You've set your script as a content script. It will execute when you navigate to a page or refresh an existing page.

If you need your script to fire when you click your extension button, you should remove the default_popup property from the manifest, add a background script and put into it a click handler:

chrome.browserAction.onClicked.addListener(function(tab){
  chrome.tabs.executeScript(tab.id, {file: "popup.js"});
  // Or, alternatively, send a message to an already-injected script
});

Please note: injecting a script as a <script> element is a very heavy-handed solution, needed only to escape isolated context. In your test case, you're only accessing the page's DOM, and your popup.js wrapper is not needed.

Add buttons to webpage with Chrome Extension

1 Answers1