该主题概括了所有你能用来创建你扩展的用户界面的组件。
浏览器行为是一个你能添加至浏览器工具栏的按钮，用户可以点击该按钮来与你的扩展交互。
有两种方式定义一个浏览器行为: 有一个 弹出菜单, 或者没有弹出菜单。
当你没有定义一个弹出菜单时，用户点击按钮会导致一个消息被分发至扩展，而你可以使用 browserAction.onClicked 来监听它:
browser.browserAction.onClicked.addListener(handleClick);如果你定义了弹出菜单，点击事件就不会被分发取而代之的是弹出菜单会显示出来。用户可以跟弹出菜单交互而当用户点击菜单外的区域时它会自动关闭。
值得注意的是你的扩展只能拥有一个浏览器行为。
你通过使用在manifest.json 文件中使用 browser_action 关键字定义浏览器行为的属性 - 图标, 标题, 弹出菜单 :
"browser_action": {
"default_icon": {
"19": "button/geo-19.png",
"38": "button/geo-38.png"
},
"default_title": "Whereami?",
"default_popup": "popup/geo.html"
}唯一必要的关键字是 default_icon.你可以使用 browserAction API 修改任何属性.
在GITHUB上的 webextensions-examples 资源包含了以下使用浏览行为的例子:
页面行为在很多方面类似于 browser actions , 除了:
为了强调页面行为只跟部分页面有联系，他们将其显示在地址栏内而不是工具栏:
不像浏览器行为，页面行为默认是关闭的, 调用 pageAction.show() 和pageAction.hide() 可以显示或隐藏页面行为。
通过在manifest.json中使用page_action 关键字来定义页面行为的属性 —— 图标, 标题, 弹出菜单:
"page_action": {
"browser_style": true,
"default_icon": {
"19": "button/geo-19.png",
"38": "button/geo-38.png"
},
"default_title": "Whereami?",
"default_popup": "popup/geo.html"
}default_icon 是唯一强制要求的关键字. 你可以使用 pageAction API 修改所有的属性或现实或隐藏页面行为。
chill-out 例子使用了一个页面行为。
一个弹出菜单是一个绑定至 browser action 或者 page action 的对话框。
当用户点击按钮弹出菜单显示，当用户点击弹出菜单外的任何区域弹出菜单关闭。可以使用 window.close() 来关闭弹出菜单。
你可以使用专门的在manifest.json中使用"_execute_browser_action" 和 "_execute_page_action" 来定义一个快捷键打开浏览器行为或页面行为. 详情请看 commands manifest.json 关键字。不过你不能在你的扩展脚本中通过编程打开弹出菜单 : 他只能通过用户的行为的被打开。
弹出菜单像普通网页一样通过HTML文件被定义，你当然也可以在里面包含CSS 和 javascript文件。 而且不像普通网页, 其包含的javascript可以使用所有的已经通过permissions获取了使用权限的 WebExtension APIs 。
你可以要求浏览器在你的弹出菜单中包含一个样式表以使其看起来与浏览器UI一致。为了达成这一目的，在你的 browser_action 或 page_action 关键字中包含 "browser_style": true 。
弹出菜单存在一个限制其可以加载资源的源地址的安全机制， 同时不允许类似 eval() 的做法的使用 查看 Content Security Policy 获取更多细节。
你可以使用Add-on Debugger来调试弹出菜单标记和脚本，但是你需要一些技巧来设置让弹出菜单不在自动关闭。 阅读关于调试弹出菜单。
弹出菜单自动根据其内容调整尺寸。其适应算法可能因浏览器而不同。
在火狐, 尺寸只再弹出菜单显示前被计算，而且在内容变化后至多进行每秒十次的计算。严格来说， 尺寸受 <body> 元素放置尺寸决定。 一种怪异的说法是, 他由 <html> 决定， Firefox 计算该元素的推荐宽度, 重新调整弹出菜单至其宽度， 然后完成尺寸调整所以这里没有上下滚动。 如果适应用户的屏幕他可能会增长到800X600px的尺寸。 如果用户 移动弹出菜单对应按钮到菜单面板 ，而后弹出菜单会在菜单栏内显示并具有合适的尺寸。
设置页面允许你定义你的扩展可以被用户修改的选项。 用户从浏览器扩展管理器中访问设置页面:
{{EmbedYouTube("02oXAcbUv-s")}}
每个浏览器访问该页面的方法存在区别。
你可以通过调用 runtime.openOptionsPage() 打开设置页面
设置页面存在一个限制其可以加载资源的源地址的安全机制， 同时不允许类似 eval() 的做法的使用 查看 Content Security Policy 获取更多细节。
创建一个设置页面有以下流程：
storage API 来保存设置。options_ui 关键字， 并给予设置页面的URL。favourite-colour 使用了设置页面。
使用 {{WebExtAPIRef("contextMenus")}} API, 你可以按你指定的情况向浏览器上下文菜单添加项目, 比如，你可以只在用户点击图片时显示一项，或者在一个可编辑的元素上，或者被选择的页面的一部份。
您可以使用{{WebExtAPIRef("contextMenus")}} API来 程序化地管理上下文菜单项。
context-menu-demo 创建了几种不同的上下文菜单项。
使用 {{WebExtAPIRef("notifications")}} API，你通过使用操作系统的通知系统可以创建短时通知:
使用{{WebExtAPIRef("notifications")}} API 可以程序化地管理通知。
notify-link-clicks-i18n 创建了通知。