Skip to content

Chrome Extension Browser Action

In the context of [[Chrome Extension]] development, the browser_action field in manifest.json configures an extension's icon in the browser's main toolbar^[600-developer-frontend-google-chrome-plugin-develop.md].

Configuration

The browser_action key is an object that allows developers to specify the icon displayed in the Chrome toolbar and the HTML file that acts as the popup interface[600-developer-frontend-google-chrome-plugin-develop.md].[600-developer-frontend-google-chrome-plugin-develop.md]

Key Properties

  • default_icon: Defines the image file (e.g., icon.png) used for the button in the toolbar^[600-developer-frontend-google-chrome-plugin-develop.md].
  • default_popup: Specifies the path to an HTML file (e.g., popup.html) that opens when the user clicks the extension icon^[600-developer-frontend-google-chrome-plugin-develop.md].

User Interface

When the extension icon is clicked, the interface defined by the default_popup is displayed^[600-developer-frontend-google-chrome-plugin-develop.md]. This popup is a standard HTML page that can include CSS and JavaScript to handle logic and user interactions^[600-developer-frontend-google-chrome-plugin-develop.md].

Interaction with Tabs

Extensions using browser_action can interact with the currently active tab using the chrome.tabs API^[600-developer-frontend-google-chrome-plugin-develop.md].

To manipulate the content of the active page (such as filling in forms or clicking buttons), the extension executes scripts directly in that tab[600-developer-frontend-google-chrome-plugin-develop.md].[600-developer-frontend-google-chrome-plugin-develop.md] This is achieved using the chrome.tabs.executeScript method^[600-developer-frontend-google-chrome-plugin-develop.md].

Example Manifest Configuration

Below is an example of how browser_action is defined within manifest.json^[600-developer-frontend-google-chrome-plugin-develop.md]:

"browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html"
}

Sources

^[600-developer-frontend-google-chrome-plugin-develop.md]