将浏览器UI按钮添加到Firefox web扩展中

Add a Browser UI button to a Firefox WebExtension

本文关键字：Firefox web 扩展 添加 浏览器 UI 按钮      更新时间：2023-09-26

我是个新手。我做了一个Firefox web扩展插件。这很简单。

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

我的问题是:我如何添加一个浏览器UI按钮的附加组件?

最终，我的意图是让按钮允许用户选择看到网站作为交付，或作为修改的web扩展。但是，现在我只是在添加按钮。

这是我的manifest.json: 
{
  "manifest_version": 2,
  "name": "Gordo",
  "version": "1.0",
  "description": "XXXXXX",
  "icons": {
    "48": "icons/img.png"
  },
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["background.js"]
    }
  ]
}

webeextensions可以将浏览器UI按钮添加为browser Action和/或Page Action。每个选项最多只能有一个。对于每一个，你可以有一个按钮，代码在后台脚本响应(接收一个click事件)，或浏览器显示一个HTML文件，你提供一个弹出。您可以设置默认值，以显示弹出窗口，或获得点击。您可以通过使用setPopup()(设置为"导致click着火;任何其他字符串和引用的HTML文件被用作弹出窗口，而不会触发click事件)。

浏览器动作

您可以通过在manifest.json:

中添加browser_action键来为浏览器用户界面添加按钮。
"browser_action": {
    "default_icon": "myIcon.png",
    "default_title": "Do my thing",
    "browser_style": true
}

你可以在后台脚本中添加一个监听器。然而，你首先必须有一个背景脚本。你可以添加一个background键到你的manifest.json:

"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.
});

页面动作

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

在清单中。json use 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对页面操作的说明如下:

页面操作类似于浏览器操作，只是它们与特定的网页相关联，而不是与整个浏览器相关联。如果一个操作只与某些页面相关，那么您应该使用一个页面操作，并只在相关的页面上显示它。如果一个操作与所有页面或浏览器本身相关，则使用浏览器操作。

浏览器操作默认显示，页面操作默认隐藏。它们可以通过调用pageAction.show()来显示特定选项卡，并传入选项卡的ID。

显示弹出窗口

您可以通过向browser_action键或page_action键添加default_popup键来默认显示弹出窗口。上面的browser_action可以像下面这样弹出:

"browser_action": {
    "default_icon": "myIcon.png",
    "default_title": "Do my thing",
    "browser_style": true
    "default_popup": "myPopup.html"
}
相关文章：