Can't get browser.browserAction.setIcon to work in content script

Add-ons Development
#1

Hi all,

I’m making my first extension, and mostly it’s been pretty smooth, but I’ve ran into the first problem that I can’t work out. I’ve tried doing it so many different ways, and nothing works. Here’s the issue…

I have an IF statement in my content script which checks if a XMLHttpRequest has been successful. The result is sent to the console log. That all works fine. However the IF statement is meant to also change the browserAction icon to tell the user the result of the XMLHttpRequest, but the icon nether changes.

Here’s the code:

function reqListener () {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", 'https://web.archive.org/save/' + encodeURI(decodeURI(location.href)));

oReq.onload = function () {
  console.log('DONE: ', oReq.status);

 if (oReq.status==200) {
console.log('Working') ;
  browser.browserAction.setIcon({
    path: "icons/aws-32-worked.png"
   });
 }
else {
console.log('Not working') ;
	  browser.browserAction.setIcon({
    path: "icons/aws-32-failed.png"
   });
}

};

oReq.send();

Any ideas what I’m doing wrong? I’d also be fine doing it with
browserAction.setBadgeText(), but I can’t get that to work either.

Let me know if you need anymore information. Here’s my manifest:

{

  "manifest_version": 2,
  "name": "AutoWaybackSaver",
  "version": "1.0",

  "permissions": [
	"https://web.archive.org/save/*",
	"storage",
    "tabs"
],	
	
	
  "description": "Saves every page you visit to archive.org's Wayback Machine",

  "icons": {
    "48": "icons/aws-48.png",
    "96": "icons/aws-96.png"
  },

  "browser_action": {
    "default_icon": "icons/aws-32.png",
    "default_title": "AutoWaybackSaver"
  },

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["awm.js"]
    }
  ],

"options_ui": {
    "page": "options.html"
  },

  "applications": {
    "gecko": {
      "id": "AutoWaybackSaver@example.com"
    }
  },

  "background": {
      "scripts": ["background.js"]
}

}
#2

Can you find any error messages in the console?

#3

Content Scripts
Content scripts can only access a small subset of the WebExtension APIs, but they can communicate with background scripts using a messaging system, and thereby indirectly access the WebExtension APIs.

1 Like
#4

No, there’s no error messages that I can see.

#5

I think your right, this will be why setIcon isn’t working in the above code.

I’ve just spent the last hour or two trying get the content script to send a message to the background script, and then setting the icon from there, but I still can’t get it to work. Any ideas?

#6

You can attach a .zip of the entire add-on to your next forum post.
(“Upload” icon, 7th from the left)

Upload
Upload.png784×49 1.52 KB

#7

Thank you. It’s attached. awm.zip (35.3 KB) .

Another odd thing is that since I’ve added a “Message Listener” to the background script, my options page no longer opens when clicking on the browser action.

#8

There’s an error when I temporarily load the add-on in about:debugging
SyntaxError: expected expression, got keyword ‘else’ background.js:6:10

The error is displayed in the Console, not in the Debugger.
Displaying Errors must be enabled if you want to see it.

More info:
Debugging

#9

Thank you so much! I had two Curly brackets/French braces in the wrong place. Now I have to learn how to use tad IDs. But first I’ll read up on debugging a bit more.

In case it’s useful for anyone, here’s the corrected background.js:

browser.runtime.onMessage.addListener(notify);

function notify(message) {
    if (message==200)
		browser.browserAction.setIcon({path: "icons/aws-32-worked.png"});
        else {
            browser.browserAction.setIcon({path: "icons/aws-32-failed.png"});
        };
}

function handleClick() {

browser.runtime.openOptionsPage(); }

browser.browserAction.onClicked.addListener(handleClick);

Thanks again!