CODEWITHSUNDEEP
google-chrome-extension
user1953366
user1953366

Reputation: 1611

Showing popup on page_action

What am I missing that popup is not being shown?

In an extension folder I have four files. I load that folder as extension. I can see the icon, but when I click on it popup is not shown. Why?

  1. content_script.js: empty (just added so that I can load the extension)
  2. icon.png: It is shown, when I load extension.
  3. manifest.json:
{
    "name": "Popup poc",
    "version": "1.4",
    "description": "Simple popup example",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content_script.js"]
        }
    ],
    "page_action": {
        "default_name": "Display Map",
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "manifest_version": 2
}
  1. popup.html:
<!doctype html>
<html>
<head>
    <title>Popup</title>
</head>

<body>
    This is body
</body>
</html>

Upvotes: 2

Views: 994

Answers (1)

Gergely Szabo
Gergely Szabo

Reputation: 899

Replace "page_action" with "browser_action" in your manifest.json. You should be able to see the popup on all pages this way.

It's possible duplicate of: Chrome extension popup not showing anymore But it seems like I don't have enough reputation points to flag it for that.

Popups only for certain hosts URL patterns

(Edit)

If you want your popup available only on certain sites (for example, only on Google), then you need to specify declarativeContent permissions in your manifest, and also a little setup in a background script.

So, your manifest.json would look something like this:

    {
        "name": "Popup poc",
        "version": "1.4",
        "description": "Simple popup example",
        "permissions": ["declarativeContent"],
        "content_scripts": [
            {
                "matches": ["https://www.google.com/*"],
                "js": ["content_script.js"]
            }
        ],
        "background": {
          "scripts": ["background.js"],
          "persistent": false
        },
        "page_action": {
            "default_name": "Display Map",
            "default_icon": "icon.png",
            "default_popup": "popup.html"
        },
        "manifest_version": 2
    }

Your background.js would look like this:

    chrome.runtime.onInstalled.addListener(function() {
        chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
          chrome.declarativeContent.onPageChanged.addRules([{
            conditions: [new chrome.declarativeContent.PageStateMatcher({
              pageUrl: {hostEquals: 'www.google.com'},
            })
            ],
                actions: [new chrome.declarativeContent.ShowPageAction()]
          }]);
        });
      });

This code is largely from the Getting Started Tutorial.

Upvotes: 6

Related Questions