Add a Browser UI button to a Firefox WebExtension

Question

I'm kind of a newbie. I made a Firefox WebExtension add-on. It is very simple. The add-on changes words on the visited websites.

It has a manifest file that declares a content script.

My question is: How can I add a Browser UI button to the add-on?

Ultimately, my intent is to have the button allow the user to choose between seeing the website as delivered, or as modified by the the WebExtension. However, right now I'm just stuck on adding the button.

This is my manifest.json:

{
  "manifest_version": 2,
  "name": "Gordo",
  "version": "1.0",

  "description": "XXXXXX",

  "icons": {
    "48": "icons/img.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["background.js"]
    }
  ]
}

I'm aware that my Answer does not fully answer the question which you have asked. The problem is that your question, as stated, is significantly too broad for this format. It is really *at least* three different questions: "How to add a button to the browser UI?" (this question), "How to make a browser UI button look and act like a toggle button?", and "How do I turn on and off changes my add-on is making to a webpage?". The last question is quite possibly/probably too broad in and of itself (because there are too many ways to do it).(continued) — Makyen, Nov 15 '16 at 05:47
(continued) Because this question is really too broad, I should have just voted to close rather than answer. I would suggest that you [edit] this question to be only about adding a UI button and [ask a new quesion](http://stackoverflow.com/questions/ask) about how to make the button look and act like a toggle. Once you have an answer for that one, you could ask the third one. Depending on how the third one is worded, it might be answerable in this format. I'm contemplating how I would answer it. I'm thinking it might be glossed over in a single answer, but an in-depth answer would be too long. — Makyen, Nov 15 '16 at 05:48
If *any* answer (on any question, but particularly your own) was helpful, you should up-vote it. For your own questions, if someone has provided an answer which you used to answer your question, you [should accept it](http://stackoverflow.com/help/someone-answers). — Makyen, Nov 15 '16 at 10:11
@Makyen While you make fair points, you also make assumptions (fair, but nonetheless) about what the button is intended to do. That is probably another symptom of too broad a question. It is probably the easiest thing to add a button which does nothing. But a 4th (2nd, in order) question is to ask what the button is for? Maybe a toggle, a context menu, a popup, a combination. Maybe on/off, maybe open config, select new words to change, change style of changed words, etc. But the basic question, to add a button, no action defined so no action taken, is fairly clear and simple, no? — , May 25 '17 at 09:12
@user314159, Yes, it's helpful to know more. It's possible the OP was wanting something else. However, for a WebExtension, there are only two types of "Browser UI button": Browser Action buttons and Page Action buttons. Yes, you can add a menu selection to a context menu, add an options page (which adds a button to open it from *about:addons*), add a button to a popup (normally opened with a Browser, or Page Action), or even add a button to an in-page, add-on UI (and now you can also have a UI in a sidebar). However, *none* of those are considered to be adding a button to the "Browser UI". — Makyen, May 25 '17 at 15:51
@user314159, It appears I removed some text from the original version of the question which, if re-worded, provides some of the context you're looking for. I removed the text because, as it was worded, it made the question too broad. I did this, rather than voting to close, because I felt having a question about "how to add a Browser UI button" would be helpful to future readers. I hoped the OP would post additional questions, with more context, for the further issues, as suggested in prior comments. I've edited the text back in, which is fine reworded to just provide some additional context. — Makyen, May 25 '17 at 15:52
wrt. The desire to have a toggle button: In my answer to [In a Firefox WebExtension, how I can make a button that looks and acts like a toggle](http://stackoverflow.com/a/40604386) I provide a generalized solution to having multi-state buttons. The simplest case of a multi-state button is a toggle button (a button with two states). — Makyen, May 25 '17 at 16:40

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

WebExtensions can add a browser UI button as either a Browser Action and/or a Page Action. You can have a maximum of one of each. For each, you can either have a button which code in your background script responds to (receives a click event), or the browser with show an HTML file you provide as a popup. You can set a default as to showing a popup, or getting a click. You can dynamically switch between the two by using setPopup() (setting to '' causes the click to fire; any other string and the referenced HTML file is used as the popup which is shown without triggering a click event).

Browser Action

You can add a button to the browser user interface by adding a browser_action key to your manifest.json:

"browser_action": {
    "default_icon": "myIcon.png",
    "default_title": "Do my thing",
    "browser_style": true
}

You can then add a listener in your background script. However, you first have to have a background script. You can have one by adding a background key to your manifest.json:

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

Then, in background.js you can add a listener for the button click by using browserAction.onClicked.addListener():

chrome.browserAction.onClicked.addListener(function(tab) {
    //Do what you want to do when the browser UI button is clicked.
});

Page Action

Alternately, instead of using a browser action, you can use a page action. The keys in the manifest.json and usage in your background script are very similar:

In your manifest.json use page_action:

"page_action": {
    "default_icon": "myIcon.png",
    "default_title": "Do my thing",
    "browser_style": true
}

Then, in background.js you can add a listener for the button click by using pageAction.onClicked.addListener()

chrome.pageAction.onClicked.addListener(function(tab) {
    //Do what you want to do when the browser UI button is clicked.
});

MDN says the following about page actions:

Page actions are like browser actions, except that they are associated with particular web pages rather than with the browser as a whole. If an action is only relevant on certain pages, then you should use a page action and display it only on relevant pages. If an action is relevant to all pages or to the browser itself, use a browser action.

While browser actions are displayed by default, page actions are hidden by default. They can be shown for a particular tab by calling pageAction.show(), passing in the tab's ID.

Showing a popup

You can have the default be to show a popup by adding a default_popup key to either the browser_action key, or the page_action key. The above browser_action could look like the following with a popup:

"browser_action": {
    "default_icon": "myIcon.png",
    "default_title": "Do my thing",
    "browser_style": true
    "default_popup": "myPopup.html"
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 15 '16 at 02:50

Makyen

31,849
12
86
121

Ok, let me try to re-do all the code and then I let you know. I get so confuse and mix it up all – rafael1138 Nov 15 '16 at 05:38
Ok, here my manifest.jason [link] https://github.com/rafael1138/Gordo-Comunista/blob/master/Working%20Next%20Update/manifest.json – rafael1138 Nov 15 '16 at 05:59
Here thebackground.js [link] https://github.com/rafael1138/Gordo-Comunista/blob/master/Working%20Next%20Update/background.js – rafael1138 Nov 15 '16 at 06:02
I can't get this work. (sorry I dont know how post code here, I tried every combination I know and nothing) – rafael1138 Nov 15 '16 at 06:03
The *manifet.json* file works by itself (with a blank background.js) and valid icon files. I have not looked at/tried you *background.js* file yet. Doing that now. – Makyen Nov 15 '16 at 06:07
Your *background.js* has a few issues. You use a `case` statement without a [`switch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch). You will need a way to be checking against `'turn-on'` and `'turn-off'` (I personally use the button's title, which I change along with the other properties to indicate the state of the button (or actually the title I use to indicate to the user what the action will be when the button is pressed, which is the next state)). If using a popup, it is an HTML file, not JS. If you set a popup file, you will not get a click event. – Makyen Nov 15 '16 at 06:18
So I have to change the popup.js to html in the background.js right? – rafael1138 Nov 15 '16 at 06:26
I really apreciate if you can help me with this – rafael1138 Nov 15 '16 at 06:27
For what you appear you are wanting to do, you should not be setting a popup at all. What you are generally doing in your code indicates you want to do this without using a popup. Thus, don't set the popup. We are rapidly getting beyond what would normally be done in comments. As I mentioned, in my comments on your question, you should really ask another question about how to make a button that looks and acts like a toggle. If you do, I can/will provide complete code for a browser button that is a toggle. – Makyen Nov 15 '16 at 06:33
Thanks I appreacite you help – rafael1138 Nov 15 '16 at 06:36
@rafael1138, I'm happy to help. If you do make another question, please leave me a comment, including `@Makyen` in the comment (and a link to the new question), so I am notified that it exists. – Makyen Nov 15 '16 at 06:41
http://stackoverflow.com/questions/40603655/in-a-firefox-webextension-how-i-can-make-a-button-that-looks-and-acts-like-a-tog – rafael1138 Nov 15 '16 at 06:46

Add a Browser UI button to a Firefox WebExtension

1 Answers1

Browser Action

Page Action

Showing a popup