界面组件

这是扩展程序中可用的界面元素目录。每个条目均包含:

  • 元素的图片(如果适用)。
  • 用途说明。
  • 相关界面元素(如果适用)。
  • 指向实现说明和代码示例的链接。

这些元素是调用扩展程序功能的不同方式。您无需实现所有代码。事实上,一些用例可能不会使用其中任何一项。例如,较短的链接可以使用键盘快捷键对显示的网址执行操作,并以编程方式将缩短后的链接复制到剪贴板。

Action

操作是指用户点击扩展程序的操作图标时发生的情况。操作可以使用 Action API 调用扩展程序功能,也可以打开一个弹出式窗口,让用户能够调用多项扩展程序功能。使用提示告诉用户操作的用途。

固定的扩展程序和取消固定的扩展程序。
图 1:已固定(左侧)和未固定(右侧)的扩展程序。

要了解如何构建操作,请参阅实现操作或查看操作示例

操作图标

扩展程序至少需要一个图标来代表它。用户点击图标即可调用操作,无论该操作是通过 Action API 调用扩展程序功能,还是打开弹出式窗口

Google 字典扩展程序的图标。
图 2:Google 字典扩展程序的图标(红色)。

您还可以向图标添加标签(此处称为“标记”),用于传达扩展程序状态或用户需要执行的操作等信息。

要了解如何构建操作,请参阅实现操作或查看操作示例

徽章

标记是放置在操作图标上方的少量格式化文本,用于表示扩展程序状态或用户需要执行的操作等信息。您可以通过调用 chrome.action.setBadgeText() 来设置徽章文字,也可通过调用 chrome.action.setBadgeBackgroundColor() 来设置横幅颜色。

不带标志但带标志的扩展程序图标。
图 3:不带标志的扩展程序图标(左侧)和带标志的扩展程序图标(右侧)。

如需了解如何构建操作,请参阅实现操作饮水示例。

命令

命令是调用扩展程序功能的按键组合。在 manifest.json 文件中定义按键组合,并使用 Commands API 响应这些组合。 如需了解如何实现命令,请参阅 API 参考文档chrome.commands 示例。

上下文菜单

针对鼠标备用点击(通常称为右键点击)显示上下文菜单。使用 Context Menus API 定义上下文菜单。

嵌套上下文菜单。
图 4:上下文菜单和嵌套的子菜单。

如需了解如何实现上下文菜单,请参阅上下文菜单示例。

多功能框

您可以使用 Chrome 多功能框与用户互动。当用户在多功能框中输入由扩展程序定义的关键字时,您的扩展程序可控制用户在多功能框中看到的内容。在 manifest.json 中定义关键字并使用多功能框 API 对其进行响应。

浏览器的多功能框。
图 5:浏览器的多功能框。

要了解如何替换多功能框,请参阅多功能框中触发操作或快速 API 参考示例。

替换页面

扩展程序可覆盖以下某个内置 Chrome 页面:

  • 历史记录
  • 新建标签页
  • 书签
自定义历史记录页面示例。
图 6:自定义历史记录页面示例。

如需了解如何替换 Chrome 网页,请参阅替换 Chrome 网页替换示例。

弹出式窗口

弹出式窗口是一种操作,它会显示一个窗口,以便用户调用多项扩展程序功能。只有当用户点击操作图标时,才会打开弹出式窗口。扩展程序无法以程序化方式打开其弹出式窗口。

弹出式窗口示例。
图 7:弹出式窗口示例。

如需了解如何构建弹出式窗口,请参阅添加弹出式窗口。您还可以下载执行某个操作示例的步骤。

侧板

侧边栏可让用户在网页旁边调用扩展程序功能(见图片)。侧边栏可以附加到单个标签页或整个窗口。侧边栏使用 Side Panel API 进行控制。

定义字词的字典扩展
图 8:定义字词“Extensions”的字典扩展。

如需了解如何构建侧边栏,请参阅侧边栏用例,或查看侧边栏示例。

提示

通过提示,当用户将鼠标指针悬停在操作图标上时,扩展程序的操作将起作用。默认情况下,提示工具会显示扩展程序的名称。

操作图标的提示示例。
图 9:操作图标的提示示例。

如需了解如何添加提示,请使用清单文件 "action" 键的 "default_title" 成员。

DevTools

您可以使用 DevTools Panels API 将自定义面板(在开发者工具中称为标签)添加到开发者工具中。其他开发者工具 API 可让您监控窗口网络流量。您还可以自定义开发者工具记录器面板。Chrome 开发者工具自己的 Lighthouse 面板以开发者工具扩展程序的形式诞生。

通知

使用扩展程序 Notifications API 或网络平台 Notifications API 将消息发布到用户的系统任务栏。

mac 上的扩展程序通知。
图 10:Mac 上的扩展程序通知。

如需了解如何使用通知,请参阅通知用户

主题

主题是一种可以更改浏览器外观的特殊扩展程序。主题与常规扩展程序一样打包,但不包含 JavaScript 或 HTML 代码。

示例主题。
图 11:主题示例。

如需了解如何构建主题,请参阅什么是主题?

与用户交互的其他方式

本部分介绍了扩展程序与用户交互的其他方式。虽然基本扩展程序并不是绝对必需的,但它们却可能是扩展程序的重要组成部分。对于许多用户来说,其中一些功能对于使用此扩展程序来说必不可少。

无障碍功能

对于许多用户而言,无障碍功能实际上就是界面;对于那些不将无障碍功能用作与您的扩展程序互动的主要方式的用户,无障碍功能往往非常实用。了解使您的扩展程序可供访问的基础知识。

国际化

用自己的语言与用户交流。了解如何国际化接口