Chrome extension development – After extension button is clicked

Concepts mentioned

* mainefest file
* browser action

Two cases

When extension button is clicked, two cases exist, depending on whether the “default_popup” option in manifest file is set or not.

case 1: “default_popup” option is set

If “default_popup” is pointed to a html file(e.g. popup.html), then this will be opened when button is clicked.

case 2: “default_popup” option is not set

If not set, then the behavior will depend on the callback we set using function “chrome.browserAction.onClicked.addListener()“.

For example, we can put “chrome.browserAction.onClicked.addListener()” in our background page/script , then in the callback we can do a variety of things we want using the chrome.* api including:
* access tabs opened currently using “chrome.tabs.getAllInWindow()” api;
* open some url in specified tab using “chrome.tabs.create()” api;
* store something in local storage using “chrome.storage.*” apis;

Note, the callback we set above will not be called if “default_popup” is pointed to a page either by editing manifest file or programmatically(which we’ll cover below).

Toggling the option in runtime

disable the popup (case 1 => case 2)

Just call chrome.browserAction.setPopup({popup: “”}) .This could be placed in the popup page(e.g. call it when user click a button in the popup). After this is set, the listener callback we set before is available which will be called when on user click event.

enable the popup (case 2 => case 1)

Just call chrome.browserAction.setPopup({popup: “somepage.html”}) .This could be placed in some custom pages. After this is set, the listener callback we set before will never be called as the behavior is overrided by popup page rendering.