CODEWITHSUNDEEP
javascriptfirefoxfirefox-addonmanifestfirefox-addon-webextensions
rafael1138
rafael1138

Reputation: 81

Add a Browser UI button to a Firefox WebExtension

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"]
    }
  ]
}

Upvotes: 3

Views: 781

Answers (1)

Makyen
Makyen

Reputation: 33296

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"
}

Upvotes: 1

Related Questions