Firefox addon button (browser_action) not calling js on click

Question

Trying to create a simple addon to retry a duckduckgo search in google. It parses the current duckduckgo url search params, appends them to a google url, and opens that url in a new tab.

The searchGoogle.js works great when pasted directly into the console context of a duckduckgo search. And the addon loads correctly in about:debugging... But I am unable to get the "searchGoogle.js" to fire on button (browser_action) click. What am I missing here?

manifest.json

  {

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

  "description": "Repeats a duckduckgo search in a new tab using google.",

  "icons": {
    "48": "icons/48search-pointer-icon.png",
    "32": "icons/32search-pointer-icon.png",
    "16": "icons/16search-pointer-icon.png"
  },

  "permissions": [
    "tabs",
    "activeTab",
    "webRequest",
    "webNavigation"
  ],

  "browser_action": {
      "default_icon": "icons/48search-pointer-icon.png",
      "default_title": "SearchGoogle"
    },

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

}

searchGoogle.js

var myStr = window.location.href;
var googurl = 'https://www.google.com/search?q=';
var params = getmyuri('q', myStr);
window.open(googurl+params, '_blank');
window.focus();
window.alert(googurl+params);

function getmyuri(n,s){
n = n.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
var p = (new RegExp("[\\?&]"+n+"=([^&#]*)")).exec(s);
return (p===null) ? "" : p[1];
}

score 2 · Accepted Answer · answered Jan 17 '19 at 09:40

2

What you're currently doing is merely declaring a background script. A background script is loaded when the addon is loaded by the browser, but you need some code to react to other events.

Here's what I found in the MDN pages of browser_action :

If you don't supply a popup, then a click event is dispatched to your extension's background scripts when the user clicks the button. (...) The extension's background scripts can receive click events when the user clicks the icon using code like this: browser.browserAction.onClicked.addListener(function(){})

So in your case, you need to wrap your "on click" code into this browserAction.onClicked event handler, something like this:

// searchGoogle.js

browser.browserAction.onClicked.addListener(function(){
  var myStr = window.location.href;
  var googurl = 'https://www.google.com/search?q=';
  var params = getmyuri('q', myStr);
  window.open(googurl+params, '_blank');
  window.focus();
  window.alert(googurl+params);
});

And voilà, your code should be executed everytime you click the browserAction icon.

answered Jan 17 '19 at 09:40

Pierre-Adrien

2,836
29
30

I want to mark it as the answer. But I'm still struggling to get it to fire. *pulled out "window.alert(googurl+params);" *tried different combinations of wrapping the function with the event listener. *reloaded the extension in "about:debugging". *checked https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/*browser_action to confirm my manifest is correct: ... "browser_action": { "default_icon": "icons/48search-pointer-icon.png", "default_title": "SearchGoogle" }, "background": { "scripts": ["searchGoogle.js"] } ... – sadtank Jan 18 '19 at 17:26
1

Did you try to replace your code with a simple `console.log` to check if the event was triggered properly? That's what I did and the event was triggered every time. I ask this because maybe operations such as window.open or alert might be unauthorized by default (this is only a supposition). But then this is a different issue. – Pierre-Adrien Jan 19 '19 at 18:17
Actually I just tried it, `window.alert` is not authorized in a background script, and `window.open` does not trigger any error but simply does nothing. Which makes sense since `window` does not really mean anything in a background script, I guess. – Pierre-Adrien Jan 19 '19 at 18:20
Yes, I pulled out the alert. It also makes sense now that `window` doesn't mean anything, what else would I use instead? I'm looking into `browser.windows.create({url: ""yourUrl""});` now... – sadtank Jan 19 '19 at 18:22
It's firing now, marked your answer. Thank you. Now just trying to figure out why `browser.tabs.getCurrent();` returns null. – sadtank Jan 19 '19 at 19:07

score 0 · Answer 2 · answered Jan 19 '19 at 19:31

For anyone else who comes here with the same question. Here are lessons observed:

window.alert is not a thing in a background script. Instead, wrap things in console.log(). Logging to console from Firefox extension?
Event listeners can pass tab information already, see tabs.getCurrent() result is undefined?.
To fire on button click, DON'T supply a popup in the manifest, and DO wrap the code to be fired in browser.browserAction.onClicked.addListener(function(){}).

Here's the final working script.

Main stays the same.

JS is:

browser.browserAction.onClicked.addListener(function(tab){

    function getmyuri(n,s){
        n = n.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
        var p = (new RegExp("[\\?&]"+n+"=([^&#]*)")).exec(s);
        return (p===null) ? "" : p[1];
    }

    console.log(tab)
    var googurl = 'https://www.google.com/search?q=';
    var params = getmyuri('q', tab.url);
    browser.tabs.create({url: googurl+params});
});

Firefox addon button (browser_action) not calling js on click

2 Answers2