14

I'm a bit stuck here and was wondering if anyone can point out where I might be wrong.

I am simply trying to make the body color change to red on click of the app icon.

manifest.json

{
    "name": "Bagde",
    "description": "",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "browser_action": {
        "default_title": "Test",
        "default_popup": "popup.html"
    }
}

popup.html

<html>

    <head>
        <script src="popup.js"></script>
    </head>

    <body>
        <p>Some Content ..</p>
    </body>

</html>

popup.js

document.addEventListener("DOMContentLoaded", function () {
    //Get Reference to Functions
    backGround = chrome.extension.getBackgroundPage();
    //Call Function
    backGround.updateIcon();
  });

background.js

var i = 1;

function updateIcon() {
    i = 1;
    chrome.browserAction.setBadgeText({
        text: 'Test'
    });
    chrome.browserAction.setPopup({
        popup: "popup.html"
    });
}


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

window.setInterval(function () {
    chrome.browserAction.setBadgeText({
        text: String(i)
    });
    i++;
}, 4000);

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

any ideas what I may be doing wrong? Thanks for taking your time to reading this.

BaconJuice
  • 3,739
  • 13
  • 56
  • 88

1 Answers1

26

If you define default_popup, you can't have a listener for browserAction.onClicked. In this case you can simply add the code in your handler to your popup.js.

EDIT: That is, add to popup.js the following:

chrome.tabs.executeScript(null, {code:"document.body.bgColor='red'"});
rsanchez
  • 14,467
  • 1
  • 35
  • 46
  • hi @rsanchez so are you saying to remove what ever I have in popup.js and replace it with chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(null, {code:"document.body.bgColor='red'"}); });? because doing so still doesn't make my page red on click – BaconJuice Sep 12 '13 at 14:59
  • @BaconJuice no, just the code inside your handler function. See my update. – rsanchez Sep 12 '13 at 15:03
  • Adding that to my popup.js doesn't render my page red on click. Any ideas? thanks for your help btw! – BaconJuice Sep 12 '13 at 15:15
  • @BaconJuice I think you need to add the `tabs` permission to your manifest. Also, check the console of your popup window for errors. – rsanchez Sep 12 '13 at 15:40
  • 1
    @BaconJuice you also need to add the urls of the pages you want to be able to turn red to the permissions. If you want it to work on any page, add `` – rsanchez Sep 12 '13 at 15:42
  • @BaconJuice now you can use the `activeTab` permission instead of `tabs` and `` if your extension only acts on the current tab when the browser action is invoked. https://developer.chrome.com/extensions/activeTab – rsanchez May 01 '14 at 21:01
  • 2
    "_you can't have a listener for browserAction.onClicked_" Here's the doc that verifies this: https://developer.chrome.com/extensions/browserAction#event-onClicked – lasec0203 Sep 23 '17 at 05:58