Chrome extension show popup in page action

Viewed 2486

I am a bit confused with chrome extension browser and page actions. My goal is to have a popup for a specific page.

manifest.json:

    {
      "name": "Basic extention",
      "version": "1.0",
      "description": "Extention",
      "permissions": [
        "activeTab", 
        "declarativeContent", 
        "storage",
        "tabs",
        "*://www.google.com/*"  ],  
      "background": {
        "scripts": ["background.js"],
        "persistent": false
      },  
      "page_action": {
        "default_popup": "popup.html",
        "default_icon": {
          "16": "images/icon16.png",
          "32": "images/icon32.png",
          "48": "images/icon64.png",
          "128": "images/icon128.png"
        }
      },
      "icons": {
        "16": "images/icon16.png",
        "32": "images/icon32.png",
        "48": "images/icon64.png",
        "128": "images/icon128.png"
      },
      "manifest_version": 2
    }

background.js:

'use strict';

chrome.runtime.onInstalled.addListener(function() {

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

popup.html:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body{
        background-color: green;
      }
    </style>      
    <title>Test extention</title>
  </head>
  <body>  
    Test
  </body>
</html>

Here’s the problem:

  • If I use browser_action in the manifest, it works as expected. The popup displays after a click on the extension icon.

  • But when I change it to page_action, the popup no longer displays. (A left mouse click opens the same menu as the right mouse click, rather than showing my popup.)


Do I need somehow manually trigger the popup? Am I missing some permissions in manifest? I would appreciate any help or tips.

1 Answers

You have defined the condition for hostEquals incorrectly. It should be split between hostEqual and scheme be the following:

pageUrl: { hostEquals: 'www.google.com', schemes: ['https'] }

After you do that, it should work as defined. Take a look at the rules section in https://developer.chrome.com/extensions/declarativeContent

Related