页面加载时显示 Firefox WebExtension 页面操作答案

【问题标题】：Display Firefox WebExtension Page Action when page loads页面加载时显示 Firefox WebExtension 页面操作
【发布时间】：2017-09-24 09:24:28
【问题描述】：

我一直在尝试通过阅读以下文档来了解如何使用 WebExtension 页面操作：

当来自example.com 的页面已加载时，我无法找到如何配置我的扩展程序以在 URL 栏中显示页面操作按钮。所有文档似乎都假定页面操作图标已经可见，并显示了如何处理对其的点击。

首先我认为我可以通过清单配置它，但它似乎不像内容脚本那样受支持。然后我试图找到一个从background.js调用的API，但没有找到。

如何在example.com 上显示我的页面操作图标？

【问题讨论】：

developer.mozilla.org/en-US/Add-ons/WebExtensions/API/…?
@melpomene 谢谢，看来我忘了把它添加到我的列表中。当用户加载example.com 时，我仍然不明白如何在 url 栏中显示我的页面操作图标。这些示例显示了一些我不想使用的上下文菜单。

标签： firefox-addon-webextensions

【解决方案1】：

从Firefox 59 开始，会有一个更简单的解决方案。在manifest.json，只需使用page_action的show_matches属性：

"page_action": {
    "show_matches": ["*://*.example.com/*"],
    ...
}

【讨论】：

【解决方案2】：

在the samples 周围挖掘，我发现以下内容可以监听所有选项卡中的页面加载，并使用清单中配置的弹出窗口更新图标。

background.js

/*
Initialize the page action: set icon and title, then show.
Only operates on tabs whose URL's protocol is applicable.
*/
function initializePageAction(tab) {
  if (tab.url.includes("example.com")) {
    browser.pageAction.show(tab.id);
  }
}


/*
When first loaded, initialize the page action for all tabs.
*/
var gettingAllTabs = browser.tabs.query({});
gettingAllTabs.then((tabs) => {
  for (let tab of tabs) {
    initializePageAction(tab);
  }
});

/*
Each time a tab is updated, reset the page action for that tab.
*/
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
  initializePageAction(tab);
});

manifest.json

"permissions": [
    "tabs",
    "activeTab"
  ],

  "content_scripts": [{
        "matches": ["*://*.example.com/*"],
        "js": ["content_scripts/download.js"]
      }
  ],

  "page_action": {
    "browser_style": true,
    "default_icon": {
      "19": "icons/download-19.png",
      "38": "icons/download-38.png"
    },
    "default_title": "Some title",
    "default_popup": "popup/popup.html"
  },

  "background": {
      "scripts": ["background.js"]
  }

【讨论】：