Chrome 扩展程序 - 页面操作：定义页面

Question

我正在尝试构建一个以某种方式虚拟的 Chrome 扩展程序。我希望它仅在特定页面中运行，因此我使用的是页面操作。

假设我希望页面操作在 Instagram 网站上运行，那么（根据文档），我的manifest.json右边需要这样的东西吗？

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

虽然内容脚本仅在 Instagram 页面上运行，但浏览器扩展程序不可点击（灰色外观，当我点击时，大多数选项不可点击）。

这使得无法对扩展按钮点击采取行动。在我的background.js我有：

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

chrome.pageAction.onClicked.addListener(click);

永远不会被调用。

那么，是什么问题导致无法对某些页面上的扩展点击采取行动？

注意：我看到了这个问题/答案，但找不到问题/解决方案如何为 pageAction 添加点击？

Answer 1

您必须调用pageAction.show才能启用您的 pageAction 按钮（可点击）。

该pageAction文件说，（重点煤矿）：

您可以分别使用pageAction.show和pageAction.hide方法使页面操作出现并变灰。默认情况下，页面操作显示为灰色。当您显示它时，您指定图标应出现的选项卡。该图标一直可见，直到选项卡关闭或开始显示不同的 URL（例如，因为用户单击了链接）。

使用manifest.json content_scripts条目

因为您已经有一个内容脚本运行在您希望拥有此功能的页面上，所以可能最简单的方法是让您的内容脚本向您的后台脚本发送一条消息，告诉它show的页面操作按钮标签。

您的内容脚本可能类似于：

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

您的后台脚本可能如下所示：

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

没有manifest.json content_scripts条目

如果您没有内容脚本，您可能希望使用webNavigation.onCompleted侦听器或tabs.onUpdated侦听器来侦听选项卡 URL 中的更改，以确定应显示页面操作按钮。显然，调用的触发器pageAction.show()不一定是当前显示在选项卡中的 URL，但这是最常见的。