Question

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

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

我的问题是：如何在附加组件中添加浏览器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 1}}事件）。

浏览器操作

您可以通过向 manifest.json 添加browser_action密钥向浏览器用户界面添加按钮：

"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：

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

默认情况下会显示浏览器操作，但默认情况下会隐藏页面操作。通过调用pageAction.show()，传入选项卡的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"
}

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

1 个答案:

浏览器操作

页面操作

显示弹出窗口