page\_action
============

|  |  |
| --- | --- |
| Type | `Object` |
| Mandatory | No |
| Manifest version | 2 or higher |
| Example | 
```json
"page\_action": {
  "default\_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default\_title": "Whereami?",
  "default\_popup": "popup/geo.html"
}
```
 |

A page action is an icon that your extension adds inside the browser's URL bar.

Your extension may optionally also supply an associated popup whose content is specified using HTML, CSS, and JavaScript.

If you supply a popup, then the popup is opened when the user clicks the icon, 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 icon.

You can also create and manipulate page actions programmatically using the `pageAction API`.

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`. You can also change this default behavior using the `show_matches` property.

Syntax
------

The `page_action` key is an object that may have any of three properties, all optional:

| Name | Type | Description |
| --- | --- | --- |
| `browser\_style`Optional
Deprecated
 in Manifest V3. | `Boolean` | Optional. Defaults to `false`.

Do not set `browser_style` to true: its not support in Manifest V3 from 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.


 The
 latest-download
 example extension uses `browser_style` in its popup.
  |
| `default_icon` | `Object` or `String` | Use this to specify an icon for the action.

 It's recommended that you supply two icons here (19×19 pixels and
 38×38 pixels), and specify them in an object with properties named
 `"19"` and `"38"`, like this:


```json
    "default\_icon": {
      "19": "geo-19.png",
      "38": "geo-38.png"
    }
```

 If you do this, then the browser will pick the right size icon for the
 screen's pixel density.

You can just supply a string here:

```json
"default\_icon": "geo.png"
```

 If you do this, then the icon will be scaled to fit the toolbar, and
 may appear blurry.
  |
| `default_popup` | `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, don't use
 `<script>`
 with embedded code, because you'll get a Content Violation Policy
 error. Instead,
 `<script>`
 must use the
 `src`
 attribute to load a separate script file.


 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` | `String` | 
 Tooltip for the icon, displayed when the user moves their mouse over
 it.


 This is a
 localizable property.
  |
| `hide_matches` | `Array` of `Match Pattern` except
 `<all_urls>` | 
 Hide the page action by default for pages whose URLs match any of the
 given
 match patterns.


 Note that page actions are always hidden by default unless
 `show_matches` is given. Therefore, it only makes sense to
 include this property if `show_matches` is also given, and
 will override the patterns in `show_matches`.

For example, consider a value like:

```json
"page\_action": {
  "show\_matches": ["https://\*.mozilla.org/\*"],
  "hide\_matches": ["https://developer.mozilla.org/\*"]
}
```

 This shows the page action by default for all HTTPS URLs under the
 `"mozilla.org"` domain, except for pages under
 `"developer.mozilla.org"`.
  |
| `show_matches` | `Array` of `Match Pattern` | 
 Show the page action by default for pages whose URLs match any of the
 given patterns.

See also `hide_matches`. |
| `pinned` 
Deprecated
 | `Boolean` | Optional. Defaults to `true`.

 Controls whether or not the page action should appear in the location
 bar by default when the user installs the extension. This property is
 no longer supported since Firefox 89.
  |

Example
-------


```json
"page\_action": {
  "default\_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  }
}
```


A page 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:


```js
browser.pageAction.onClicked.addListener(handleClick);
```



```json
"page\_action": {
  "default\_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default\_title": "Whereami?",
  "default\_popup": "popup/geo.html"
}
```


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

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `browser_action`
* `sidebar_action`
* Browser styles