页面操作和浏览器操作之间有什么区别？

Question

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

我的浏览器操作按钮:

我的页面操作按钮:

Answer 1

浏览器操作按钮

当您的按钮在大多数情况下有效使用时,应使用浏览器操作按钮,或者在大多数页面上使用,或者与活动选项卡中显示的页面无关/依赖于该页面.默认情况下,所有选项卡/ URL上都启用了浏览器操作按钮.您必须调用browserAction.disable()禁用每个选项卡中要禁用的按钮(或通常在所有选项卡上禁用).当选项卡显示不同的URL时,浏览器操作按钮不会更改启用/禁用状态.

Chrome的浏览器操作按钮页面显示(我的一些重点):

使用浏览器操作将图标放置在地址栏右侧的 Google Chrome主工具栏中.除了图标外,浏览器操作还可以包含工具提示,徽章和弹出窗口.

• 不要使用功能,在大多数网页意义的浏览器的行为.
• 不要将浏览器操作用于仅对几页有意义的功能.请改用页面操作.
• 不要使用大,色彩鲜艳的图标,使最16×16浸空间.浏览器操作图标应该比页面操作图标更大更重.
• 请勿尝试模仿Google Chrome的单色菜单图标.这不适用于主题,无论如何,扩展应该突出一点.
• 请使用Alpha透明度为图标添加柔化边缘.由于许多人使用主题,因此您的图标应该在各种背景颜色上看起来不错.
• 不要经常为您的图标设置动画.那太烦人了.

浏览器操作具有以下API:

• 类型
  • ColorArray
  • ImageDataType ¹
• 方法
  • 禁用 -browserAction.disable(integer tabId)
  • 启用 -browserAction.enable(integer tabId)
  • getBadgeBackgroundColor -browserAction.getBadgeBackgroundColor(object details, function callback)
  • getBadgeText -browserAction.getBadgeText(object details, function callback)
  • getPopup ¹ -browserAction.getPopup(object details, function callback)
  • getTitle ¹ -browserAction.getTitle(object details, function callback)
  • setBadgeBackgroundColor -browserAction.setBadgeBackgroundColor(object details)
  • setBadgeText -browserAction.setBadgeText(object details)
  • setIcon ¹ -browserAction.setIcon(object details, function callback)
  • setPopup ¹ -browserAction.setPopup(object details)
  • setTitle ¹ -browserAction.setTitle(object details)
• 活动
  • onClicked ¹

页面操作按钮

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

Chrome的页面操作按钮页面显示(我的一些重点):

使用chrome.pageActionAPI将图标放置在地址栏右侧的 Google Chrome主工具栏中.页面操作表示可以在当前页面上执行的操作,但不适用于所有页面.页面操作在不活动时显示为灰色.

与浏览器操作一样,页面操作可以有图标,工具提示和弹出窗口; 然而,他们不能拥有徽章.此外,页面操作可以显示为灰色.您可以通过阅读浏览器操作UI找到有关图标,工具提示和弹出窗口的信息.

使用pageAction.show和pageAction.hide方法分别显示页面操作并显示为灰色.默认情况下,页面操作显示为灰色.显示时,指定应显示图标的选项卡.图标保持可见,直到选项卡关闭或开始显示不同的URL(例如,因为用户单击链接).

• 对仅对几页有意义的功能使用页面操作.
• 不要将页面操作用于对大多数页面有意义的功能.请改用浏览器操作.
• 不要经常为您的图标设置动画.那太烦人了.

页面操作具有以下API:

• 类型
  • ImageDataType ¹
• 方法
  • getPopup ¹ -pageAction.getPopup(object details, function callback)
  • getTitle ¹ -pageAction.getTitle(object details, function callback)
  • 隐藏 -chrome.pageAction.hide(integer tabId)
  • setIcon ¹ -pageAction.setIcon(object details, function callback)
  • setPopup ¹ -pageAction.setPopup(object details)
  • setTitle ¹ -pageAction.setTitle(object details)
  • 秀 -pageAction.show(integer tabId)
• 活动
  • onClicked ¹

^{1.此API可用于浏览器操作和页面操作.两者基本相同.}

Answer 2

2022 年 1 月更新

在最新的 Manifest Version 3 中，两者browser_action都page_action统一为一个actionapi。

和sbrowser_action都page_action扮演类似的角色，主要区别是page_actions 只适用于选定的选项卡或 URL。

请注意，新的actionapi 与 类似，但您可以模拟使用该apibrowser_action的行为，即您可以将操作限制到特定站点。page_actionaction

Chrome 扩展程序文档中的此示例提供了有关如何在特定网站上启用操作的想法：

// background.js

// Wrap in an onInstalled callback in order to avoid unnecessary work
// every time the background script is run
chrome.runtime.onInstalled.addListener(() => {
  // Page actions are disabled by default and enabled on select tabs
  chrome.action.disable();

  // Clear all rules to ensure only our expected rules are set
  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    // Declare a rule to enable the action on example.com pages
    let exampleRule = {
      conditions: [
        new chrome.declarativeContent.PageStateMatcher({
          pageUrl: {hostSuffix: '.example.com'},
        })
      ],
      actions: [new chrome.declarativeContent.ShowAction()],
    };

    // Finally, apply our new array of rules
    let rules = [exampleRule];
    chrome.declarativeContent.onPageChanged.addRules(rules);
  });
});