界面组件

这是一个扩展程序中提供的界面元素的目录。每个条目都包含:

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

这些元素是调用扩展程序功能的不同方式。您无需实现所有这些元素。实际上,某些用例可能不会使用任何这些元素。例如,链接缩短器可以使用键盘快捷键对显示的网址执行操作,并以编程方式将缩短的链接放入剪贴板。

操作

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

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

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

操作图标

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

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

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

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

徽章

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

没有徽章和有徽章的扩展程序图标。
图 3:没有徽章(左)和有徽章(右)的扩展程序图标。

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

命令

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

上下文菜单

上下文菜单会在鼠标的替代点击(通常称为右键点击)时显示。使用 Context Menus API 定义上下文菜单。

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

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

多功能框

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

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

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

替换页面

扩展程序可以替换以下内置 Chrome 页面之一:

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

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

弹出式窗口

弹出式窗口是一种操作,用于显示一个窗口,让用户调用多个扩展程序功能。如果用户点击操作图标、使用键盘快捷键或调用chrome.action.openPopup(),则可以打开弹出式窗口。

弹出式广告示例。
图 7:弹出式窗口的示例。

如需了解如何构建弹出式窗口,请参阅添加弹出式窗口。您还可以下载其中一个操作示例的逐步说明。

侧边栏

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

定义字词的字典扩展程序
图 8:词典扩展程序定义了“Extensions”一词。

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

提示

提示是一种方式,用于在用户将鼠标悬停在操作图标上时显示扩展程序操作的作用。默认情况下,提示会显示扩展程序的名称。

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

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

DevTools

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

通知

使用扩展程序 Notifications API 或 Web 平台 Notifications API 向用户的系统任务栏发布消息。

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

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

主题

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

图 11:示例主题。

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

与其他用户互动的方式

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

无障碍

对于许多用户来说,无障碍功能实际上就是用户界面,其功能通常对那些不需要将无障碍功能作为与扩展程序互动的主要方式的用户也很有用。了解使扩展程序具有无障碍功能的基础知识 。

国际化

用用户自己的语言与用户交流。了解如何对界面进行国际化