I'm trying to build a somehow dummy Chrome extension. I want it to run only in specific pages, so I'm using a Page Action.

Let's say I want the page action to run on the Instagram website, then (accordingly the docs), I would need something like this on my manifest.json right?

{
  "manifest_version": 2,
  "name": "Some name",
  "version": "0.0.3",
  "description": "Some description",
  "content_scripts": [
    {
      "matches": [
        "/*"
      ],
      "js": ["content.js"]
    }
  ],
  "page_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["background.js"]
  }
}

while the content script runs only on instagram pages as one would expect, the browser extension is not clickable (gray look, and when I click most options are not clickable).

this makes impossible to act upon extension button click. In my background.js I have:

function click(tab) {
  console.log('click from ' + tab);
}

chrome.pageAction.onClicked.addListener(click);

that never gets called.

So, what's wrong that makes impossible to act upon extension click on some pages?

Note: I saw this question/answer, but couldn't find the problem/solution How can I add a click for pageAction?

I'm trying to build a somehow dummy Chrome extension. I want it to run only in specific pages, so I'm using a Page Action.

Let's say I want the page action to run on the Instagram website, then (accordingly the docs), I would need something like this on my manifest.json right?

{
  "manifest_version": 2,
  "name": "Some name",
  "version": "0.0.3",
  "description": "Some description",
  "content_scripts": [
    {
      "matches": [
        "https://www.instagram./*"
      ],
      "js": ["content.js"]
    }
  ],
  "page_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["background.js"]
  }
}

while the content script runs only on instagram pages as one would expect, the browser extension is not clickable (gray look, and when I click most options are not clickable).

this makes impossible to act upon extension button click. In my background.js I have:

function click(tab) {
  console.log('click from ' + tab);
}

chrome.pageAction.onClicked.addListener(click);

that never gets called.

So, what's wrong that makes impossible to act upon extension click on some pages?

Note: I saw this question/answer, but couldn't find the problem/solution How can I add a click for pageAction?

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

• The documentation has a link to sample extensions. – woxxom Commented Apr 18, 2017 at 22:17

1 Answer 1

You have to call pageAction.show in order for your pageAction button to be enabled (clickable).

The pageAction documentation says (emphasis mine):

You make a page action appear and be grayed out using the pageAction.show and pageAction.hide methods, respectively. By default, a page action appears grayed out. When you show it, you specify the tab in which the icon should appear. The icon remains visible until the tab is closed or starts displaying a different URL (because the user clicks a link, for example).

With a manifest.json content_scripts entry

Because you already have a content script that runs on the page you desire to have this function on, probably the easiest way to do this is to have your content script send a message to your background script telling it to show the page-action button for that tab.

Your content script could look something like:

chrome.runtime.sendMessage({type: showPageAction});

Your background script could look something like:

chrome.runtime.onMessage(function(message, sender, sendResponse) {
    if(typeof message === 'object' && message.type === 'showPageAction') {
        chrome.pageAction.show(sender.tab.id);
    }
});

Without a manifest.json content_scripts entry

If you did not have a content script, you would probably want to use a webNavigation.onCompleted listener, or tabs.onUpdated listener, to listen for a change in the tab's URL in order to determine that the page-action button should be shown. Obviously, the trigger for calling pageAction.show() does not have to be the URL which is currently displayed in the tab, but that is the most mon.