I am new to Google Chrome extension development. I am having the two following queries

1. Popup is not appearing when I use page_action in manifest.json but appearing when I used browser_action. I would like to know why? Or am I doing wrong

2. Also the icon is showing inactive state. Where as when I use browser_action, the icon is showing in active state (means I could see the color if active, or I could see as black and white icon, when inactive)

Manifest.json

{
  "manifest_version": 2,

  "name": "Getting started example",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",

  "page_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title":"getStarted Extension"
  },
  "permissions": [
    "activeTab",
    "/"
  ]
}

UPDATE:

Thanks to Teepemm . Followed his explanation and added the answer with code

I am new to Google Chrome extension development. I am having the two following queries

1. Popup is not appearing when I use page_action in manifest.json but appearing when I used browser_action. I would like to know why? Or am I doing wrong

2. Also the icon is showing inactive state. Where as when I use browser_action, the icon is showing in active state (means I could see the color if active, or I could see as black and white icon, when inactive)

Manifest.json

{
  "manifest_version": 2,

  "name": "Getting started example",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",

  "page_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title":"getStarted Extension"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}

UPDATE:

Thanks to Teepemm . Followed his explanation and added the answer with code

• javascript
• google-chrome
• google-chrome-extension

2 Answers 2

Thanks to Teepemm for guiding me with proper explanation, so in order to make the icon active and inactive, you have to use chrome.pageAction.show(tabId) (to activate the icon) and chrome.pageAction.hide(tabId) (to deactivate the icon) => https://developer.chrome.com/extensions/pageAction#method-show

You need to call this method from background.js by invoking it from client.js

//background.js
chrome.extension.onMessage.addListener(
    function(request, sender, sendResponse) {
    if (request.message === "activate_icon") {
        chrome.pageAction.show(sender.tab.id);
    }
});

//content-script.js
chrome.runtime.sendMessage({"message": "activate_icon"});

So once your extension icon is active, on click of the icon, popup will appear. So the popup will appear only when icon is active.

Hope this helps

You need to use a background page (or better, event page) to call chrome.pageAction.show.

You've chosen an unfortunate time to develop a chrome page action. Google recently changed how page actions work, and the documentation hasn't really caught up. Previously, page actions appeared in the address bar, and only appeared on tabs where you had called show. Now, page actions appear to the right of the address bar (unless you move them into the chrome menu), are always present, but are only active when you call show. So the functions are still called show and hide, even though their effect is more akin to enable and disable.