界面组件

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

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

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

操作

操作是指用户点击扩展程序的操作图标时所发生的情况。操作可以使用 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:上下文菜单和嵌套子菜单。

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

Omnibox

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

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

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

替换网页

扩展程序可以替换以下某个内置 Chrome 页面:

  • 历史记录
  • 新建标签页
  • 书签
。 <ph type="x-smartling-placeholder">
</ph> 自定义历史记录页面示例。
图 6:自定义历史记录页面的示例。

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

弹出式窗口

弹出式窗口是一种操作,用于显示一个窗口,以便用户调用多个扩展程序功能。当用户点击操作图标、通过键盘快捷键或调用 chrome.action.openPopup() 时,系统会打开弹出式窗口。

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

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

侧板

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

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

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

提示

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

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

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

开发者工具

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

通知

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

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

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

主题

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

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

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

与用户互动的其他方式

本部分介绍了扩展程序可与用户互动的其他方式。虽然基本扩展程序不需要严格遵循这些要求,但它们可能是扩展程序的重要组成部分。对于许多用户来说,其中一些功能对于使用该扩展程序至关重要。

无障碍

对于许多用户来说,无障碍功能就是界面,对于不需要将无障碍功能作为与您的扩展程序互动的主要方式的用户,无障碍功能的特性通常也很有用。了解基础知识 让扩展程序可供用户使用

国际化

使用用户的母语进行交流。了解将界面国际化