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

Question

我一直在尝试通过阅读以下文档来了解如何使用 WebExtension Page Actions：

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

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

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

Answer 1

四处挖掘 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"]
  }

Answer 2

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

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

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

Display Firefox WebExtension Page Action when page loads

firefox-addon-webextensions