0

At http://developer.chrome.com/extensions/samples.html 2nd sample titled:
"A browser action with no icon that makes the page red"

I downloaded the 3 files (manifest, js, icon) and installed the extension sample.

When I run it I get a puzzle icon on the bar with a badge that increments every second.
When I click on the icon - nothing
When I click on the page - nothing
I also cannot see the supplied icon being used anywhere.

I don't know if this is a code issue or a usage issue.

manifest.json:

{
  "name": "A browser action with no icon that makes the page red",
  "version": "1.0",
  "background": { "scripts": ["background.js"] },
  "permissions": [
    "tabs", "http://*/*"
  ],
  "browser_action": {
    "name": "Make this page red",
    "icons": ["icon.png"]
  },
  "manifest_version": 2
}

background.js file

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(
      null, {code:"document.body.style.background='red !important'"});
});

chrome.browserAction.setBadgeBackgroundColor({color:[0, 200, 0, 100]});

var i = 0;
window.setInterval(function() {
  chrome.browserAction.setBadgeText({text:String(i)});
  i++;
}, 10);
Jack L.
  • 1,257
  • 2
  • 17
  • 37
godzilla
  • 971
  • 1
  • 10
  • 18
  • Omit `!important`, and your code will work. If you only intend to change the background color (not the bg image), use `.style.backgroundColor='red';`. – Rob W Sep 29 '12 at 20:39

1 Answers1

2

This is a duplicate of How to make Google Chrome extension sample work?

Please see my answer below:

If you open up the sample zip... find backgrond.js... edit. Find the line that says:

null, {code:"document.body.style.background='red !important'"});

and remove the "!important". so it should read:

null, {code:"document.body.style.background='red'"});

That is it. just save and reload the extension, should work (unless the page has an !important flag set to the background).

I am afraid I don't know why the "!important" tag doesn't work but I have never been able to get it to work in an extension. Hopefully someone else here will be able to give an explanation and maybe a work around.

Community
  • 1
  • 1
Gravitate
  • 2,885
  • 2
  • 21
  • 37
  • @John Shedletsky a down vote is a little harsh just because it didn't work for you isn't it? Perhaps you did not edit your code properly. I am sure that this is the correct answer. See the link I posted for other people confirming it. – Gravitate Oct 18 '12 at 20:48