javascript - 页面操作和浏览器操作有什么区别？

Question

我做了一个浏览器操作，但我只是尝试测试一个页面操作。按钮放置在同一个位置，但无法单击页面操作按钮(图标为灰色)。我认为页面操作按钮位于地址栏上，而不是工具栏中。为什么它位于同一个地方？

我的浏览器操作按钮:


我的页面操作按钮:

Answer 1

浏览器操作和页面操作按钮都位于“地址栏的右侧”，如扩展 API 文档中所述。这两种类型的按钮有很多相似之处。使用哪个在很大程度上取决于您的扩展程序是打算在大部分时间使用，还是仅在一小部分页面上可用。

浏览器操作按钮适用于大多数时间或大多数页面上可以使用您的扩展程序的情况。它们还允许您通过在图标上放置一个包含几个/几个字符的徽章并更改用于该徽章的背景颜色来向用户提供一些立即可见的状态信息。

页面操作按钮适用于您的扩展程序经常/通常不可用时使用。例如，如果它只能在几个域或 URL 上使用。

Browser action纽扣

当您的按钮在大多数情况下都有效时，应该使用浏览器操作按钮，无论是在大多数页面上，还是与事件选项卡中显示的页面无关/不依赖。 默认情况下，所有选项卡/URL 上都会启用浏览器操作按钮。 您必须调用 browserAction.disable()禁用您希望禁用的每个选项卡中的按钮(或通常在所有选项卡上禁用)。 The browser action button does not change enabled/disabled state when the tab displays a different URL.

Chrome 的 browser action button页面说(我的一些重点):

Use browser actions to put icons in the main Google Chrome toolbar, to the right of the address bar. In addition to its icon, a browser action can also have a tooltip, a badge, and a popup.

• Do use browser actions for features that make sense on most pages.
• Don't use browser actions for features that make sense for only a few pages. Use page actions instead.
• Do use big, colorful icons that make the most of the 16x16-dip space. Browser action icons should seem a little bigger and heavier than page action icons.
• Don't attempt to mimic Google Chrome's monochrome menu icon. That doesn't work well with themes, and anyway, extensions should stand out a little.
• Do use alpha transparency to add soft edges to your icon. Because many people use themes, your icon should look nice on a variety of background colors.
• Don't constantly animate your icon. That's just annoying.

浏览器操作具有以下 API:

类型

ColorArray

ImageDataType 1

方法

disable - browserAction.disable(integer tabId)

enable - browserAction.enable(integer tabId)

getBadgeBackgroundColor - browserAction.getBadgeBackgroundColor(object details, function callback)

getBadgeText - browserAction.getBadgeText(object details, function callback)

getPopup 1 - browserAction.getPopup(object details, function callback)

getTitle 1 - browserAction.getTitle(object details, function callback)

setBadgeBackgroundColor - browserAction.setBadgeBackgroundColor(object details)

setBadgeText - browserAction.setBadgeText(object details)

setIcon 1 - browserAction.setIcon(object details, function callback)

setPopup 1 - browserAction.setPopup(object details)

setTitle 1 - browserAction.setTitle(object details)

事件

onClicked 1

Page action纽扣

当您的扩展程序按钮的使用能力取决于事件选项卡中显示的 URL 并且通常无法使用(即仅在某些条件下或某些 URL 上可用)时，应使用页面操作按钮。 默认情况下，所有 URL 上的页面操作按钮都被禁用/变灰(“隐藏”)。 您必须调用 pageAction.show()为您希望启用的每个 URL/选项卡启用按钮。如果选项卡显示不同的 URL，页面操作按钮会自动变为禁用/隐藏。

Chrome 的 page action button页面说(我的一些重点):

Use the chrome.pageAction API to put icons in the main Google Chrome toolbar, to the right of the address bar. Page actions represent actions that can be taken on the current page, but that aren't applicable to all pages. Page actions appear grayed out when inactive.

Like browser actions, page actions can have an icon, a tooltip, and popup; they can't have badges, however. In addition, page actions can be grayed out. You can find information about icons, tooltips, and popups by reading about the browser action UI.

You make a page action appear and be grayed out using the pageAction.show and pageAction.hide methods, respectively. By default, a page action appears grayed out. When you show it, you specify the tab in which the icon should appear. The icon remains visible until the tab is closed or starts displaying a different URL (because the user clicks a link, for example).

• Do use page actions for features that make sense for only a few pages.
• Don't use page actions for features that make sense for most pages. Use browser actions instead.
• Don't constantly animate your icon. That's just annoying.

页面操作具有以下 API:

类型

ImageDataType 1

方法

getPopup 1 - pageAction.getPopup(object details, function callback)

getTitle 1 - pageAction.getTitle(object details, function callback)

hide - chrome.pageAction.hide(integer tabId)

setIcon 1 - pageAction.setIcon(object details, function callback)

setPopup 1 - pageAction.setPopup(object details)

setTitle 1 - pageAction.setTitle(object details)

show - pageAction.show(integer tabId)

事件

onClicked 1

1. 此 API 可用于浏览器操作和页面操作。它对两者的作用基本相同。