javascript - 将浏览器 UI 按钮添加到 Firefox WebExtension

Question

我是新手。我制作了一个 Firefox WebExtension 附加组件。这很简单。该插件会更改所访问网站上的文字。

它有一个声明内容脚本的 list 文件。

我的问题是:如何向插件添加浏览器 UI 按钮？

最终，我的目的是让该按钮允许用户在查看交付的网站或由 WebExtension 修改的网站之间进行选择。但是，现在我只是坚持添加按钮。

这是我的manifest.json:

{
  "manifest_version": 2,
  "name": "Gordo",
  "version": "1.0",

  "description": "XXXXXX",

  "icons": {
    "48": "icons/img.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["background.js"]
    }
  ]
}

Answer 1

WebExtensions 可以将浏览器 UI 按钮添加为浏览器操作和/或页面操作。您最多可以拥有一个。对于每一个，您都可以有一个按钮，您的后台脚本中的代码会对其进行响应(接收 click 事件)，或者浏览器会显示您作为弹出窗口提供的 HTML 文件。您可以设置显示弹出窗口或点击的默认值。您可以使用 setPopup() 在两者之间动态切换(设置为 '' 会导致 click 触发；任何其他字符串和引用的 HTML 文件用作弹出窗口在不触发 click 事件的情况下显示)。

浏览器操作

您可以通过添加 browser_action 来向浏览器用户界面添加按钮。 manifest.json 的关键:

"browser_action": {
    "default_icon": "myIcon.png",
    "default_title": "Do my thing",
    "browser_style": true
}

然后您可以在后台脚本中添加一个监听器。但是，您首先必须有一个后台脚本。您可以通过向您的 manifest.json 添加 background 键来拥有一个:

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

然后，在 background.js 中，您可以使用 browserAction.onClicked.addListener() 添加按钮点击监听器。 :

chrome.browserAction.onClicked.addListener(function(tab) {
    //Do what you want to do when the browser UI button is clicked.
});

页面操作

或者，您可以使用页面操作而不是使用浏览器操作。 manifest.json 中的键和后台脚本中的用法非常相似:

在您的 manifest.json 中使用 page_action :

"page_action": {
    "default_icon": "myIcon.png",
    "default_title": "Do my thing",
    "browser_style": true
}

然后，在 background.js 中，您可以使用 pageAction.onClicked.addListener() 添加按钮点击监听器。

chrome.pageAction.onClicked.addListener(function(tab) {
    //Do what you want to do when the browser UI button is clicked.
});

MDN says the following关于页面操作:

Page actions are like browser actions, except that they are associated with particular web pages rather than with the browser as a whole. If an action is only relevant on certain pages, then you should use a page action and display it only on relevant pages. If an action is relevant to all pages or to the browser itself, use a browser action.

While browser actions are displayed by default, page actions are hidden by default. They can be shown for a particular tab by calling pageAction.show(), passing in the tab's ID.

显示弹出窗口

您可以通过将 default_popup 键添加到 browser_action 键或 page_action 键来默认显示弹出窗口。上面的 browser_action 可能看起来像下面的弹出窗口:

"browser_action": {
    "default_icon": "myIcon.png",
    "default_title": "Do my thing",
    "browser_style": true
    "default_popup": "myPopup.html"
}