Chrome 扩展在页面操作中显示弹出窗口答案

【问题标题】：Chrome extension show popup in page actionChrome 扩展在页面操作中显示弹出窗口
【发布时间】：2019-06-08 02:28:00
【问题描述】：

我对 chrome 扩展浏览器和页面操作有点困惑。我的目标是为特定页面弹出一个窗口。

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>

问题来了：

如果我在清单中使用browser_action，它按预期工作。单击扩展图标后会显示弹出窗口。
但是当我将其更改为page_action 时，弹出窗口不再显示。（鼠标左键单击打开与鼠标右键单击相同的菜单，而不是显示我的弹出窗口。）

我是否需要以某种方式手动触发弹出窗口？我在清单中缺少一些权限吗？如有任何帮助或提示，我将不胜感激。

【问题讨论】：

标签： google-chrome-extension

【解决方案1】：

您为hostEquals 定义的条件不正确。它应该在hostEqual 和scheme 之间进行拆分，如下所示：

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

完成此操作后，它应该按定义工作。看看https://developer.chrome.com/extensions/declarativeContent中的规则部分

【讨论】：