RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action below:

browser_action - Mozilla | MDN

browser_action Type Object Mandatory No Manifest version 2 Example

"browser_action": {
  "default_icon": {
    "16": "button/geo-16.png",
    "32": "button/geo-32.png"
  },
  "default_title": "Whereami?",
  "default_popup": "popup/geo.html",
  "theme_icons": [{
    "light": "icons/geo-16-light.png",
    "dark": "icons/geo-16.png",
    "size": 16
  }, {
    "light": "icons/geo-32-light.png",
    "dark": "icons/geo-32.png",
    "size": 32
  }]
}

A browser action is a button that your extension adds to the browser's toolbar. The button has an icon, and may optionally have a popup whose content is specified using HTML, CSS, and JavaScript.

This key is replaced by action in Manifest V3 extensions.

You must specify this key to include a browser toolbar button in your extension. When specified, you can manipulate the button programmatically using the browserAction API.

If you supply a popup, then the popup is opened when the user clicks the button, and your JavaScript running in the popup can handle the user's interaction with it. 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.

Syntax

The browser_action key is an object that may have any of the following properties, all optional:

Name Type Description browser_style
Optional Boolean

Optional, defaulting to false.

Do not set browser_style to true: it isn't supported in Manifest V3, starting with Firefox 118. See Manifest V3 migration for browser_style.

In Firefox, the stylesheet can be seen at chrome://browser/content/extension.css or chrome://browser/content/extension-mac.css on macOS. When setting dimensions, be aware that this stylesheet sets box-sizing: border-box (see box-sizing).

Browser styles describes the classes you can apply to elements in the popup to get particular styles.

The latest-download example extension uses browser_style in its popup.

Note: Setting browser_style to true prevents users from selecting text in an extension's popup or sidebar content. This is normal behavior. You can't select parts of the UI in the browser. However, you can work around this limitation to allow your users to select text in two ways:

Set browser_style to false.
Use CSS styling on the body of your sidebar or popup's HTML to allow text selection by adding the rule -moz-user-select with a value of all or text.

default_area
Optional String

Defines the part of the browser in which the button is initially placed. This is a string that may take one of four values:

"navbar": the button is placed in the main browser toolbar, alongside the URL bar.
"menupanel": the button is placed in a popup panel.
"tabstrip": the button is placed in the toolbar that contains browser tabs.
"personaltoolbar": the button is placed in the bookmarks toolbar.

This property is only supported in Firefox.

This property is optional, and defaults to "menupanel".

Firefox remembers the default_area setting for an extension, even if that extension is uninstalled and subsequently reinstalled. To force the browser to acknowledge a new value for default_area, the id of the extension must be changed.

An extension can't change the location of the button after it has been installed, but the user may be able to move the button using the browser's built-in UI customization mechanism.

default_icon
Optional Object or String

Use this to specify one or more icons for the browser action. The icon is shown in the browser toolbar by default.

Icons are specified as URLs relative to the manifest.json file itself.

You can specify a single icon file by supplying a string here:

"default_icon": "path/to/geo.svg"

To specify multiple icons in different sizes, specify an object here. The name of each property is the icon's height in pixels, and must be convertible to an integer. The value is the URL. For example:

    "default_icon": {
      "16": "path/to/geo-16.png",
      "32": "path/to/geo-32.png"
    }

You cannot specify multiple icons of the same sizes.

See Choosing icon sizes for more guidance on this.

default_popup
Optional String

The path to an HTML file containing the specification of the popup.

The HTML file may include CSS and JavaScript files using <link> and <script> elements, just like a normal web page. However, <script> must have src attribute to load a file. Don't use <script> with embedded code, because you'll get a confusing Content Violation Policy error.

Unlike a normal web page, JavaScript running in the popup can access all the WebExtension APIs (subject, of course, to the extension having the appropriate permissions).

This is a localizable property.

default_title
Optional String

Tooltip for the button, displayed when the user moves their mouse over it. If the button is added to the browser's menu panel, this is also shown under the app icon.

This is a localizable property.

theme_icons
Optional Array

This property enables you to specify different icons for themes depending on whether Firefox detects that the theme uses dark or light text.

If this property is present, it's an array containing at least one ThemeIcons object. A ThemeIcons object contains three mandatory properties:

"dark": A URL pointing to an icon. This icon displays when a theme using dark text is active (such as the Firefox Light theme, and the Default theme if no default_icon is specified).
"light": A URL pointing to an icon. This icon displays when a theme using light text is active (such as the Firefox Dark theme).
"size": The size of the two icons in pixels.

Icons are specified as URLs relative to the manifest.json file.

You should supply 16x16 and 32x32 (for retina display) ThemeIcons.

Choosing icon sizes

The browser action's icon may need to be displayed in different sizes in different contexts:

The icon is displayed in the browser toolbar. Older versions of Firefox supported the option of placing the icon in the browser's menu panel (the panel that opens when the user clicks the "hamburger" icon). In those versions of Firefox the icon in the menu panel was larger than the icon in the toolbar.
On a high-density display like a Retina screen, icons needs to be twice as big.

If the browser can't find an icon of the right size in a given situation, it will pick the best match and scale it. Scaling may make the icon appear blurry, so it's important to choose icon sizes carefully.

There are two main approaches to this. You can supply a single icon as an SVG file, and it will be scaled correctly:

"default_icon": "path/to/geo.svg"

Alternatively, you can supply several icons in different sizes, and the browser will pick the best match.

In Firefox:

The default height and width for icons in the toolbar is 16 * window.devicePixelRatio.
The default height and width for icons in the menu panel is 32 * window.devicePixelRatio.

So you can specify icons that match exactly, on both normal and Retina displays, by supplying three icon files, and specifying them like this:

"default_icon": {
  "16": "path/to/geo-16.png",
  "32": "path/to/geo-32.png",
  "64": "path/to/geo-64.png"
}

If Firefox can't find an exact match for the size it wants, then it will pick the smallest icon specified that's bigger than the ideal size. If all icons are smaller than the ideal size, it will pick the biggest icon specified.

Example

"browser_action": {
  "default_icon": {
    "16": "button/geo-16.png",
    "32": "button/geo-32.png"
  }
}

A browser action with just an icon, specified in 2 different sizes. The extension's background scripts can receive click events when the user clicks the icon using code like this:

browser.browserAction.onClicked.addListener(handleClick);

"browser_action": {
  "default_icon": {
    "16": "button/geo-16.png",
    "32": "button/geo-32.png"
  },
  "default_title": "Whereami?",
  "default_popup": "popup/geo.html"
}

A browser action with an icon, a title, and a popup. The popup will be shown when the user clicks the button.

For a simple, but complete, extension that uses a browser action, see the walkthrough tutorial.

Browser compatibility See also

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4