如果要给工具栏添加一个按钮，需要使用动作按钮或切换按钮模块。
新建一个目录，打开它，执行cfx init。
然后，把这三个图标保存到data文件夹：
 |
icon-16.png |
 |
icon-32.png |
 |
icon-64.png |
随后打开lib目录下的main.js文件，添加如下代码：
var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");
var button = buttons.ActionButton({
id: "mozilla-link",
label: "Visit Mozilla",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onClick: handleClick
});
function handleClick(state) {
tabs.open("https://www.mozilla.org/");
}
现在输入cfx run来执行附加组件。按钮添加到了浏览器顶部的工具栏上：
你无法设置按钮的初始位置，但是用回可以使用浏览器的自定义功能移动它。其中的id属性是必需的，用来记录按钮的位置，因此，你最好不要在后续版本中修改它。
单击按钮，https://www.mozilla.org/将会在新的标签页中加载。
设定图标
icon属性可以设定单个或是一组不同大小图标。如果你用的是一组不同大小的图标，浏览器将会自动选择最适合当前屏幕分辨率的，然后显示在浏览器界面的按钮上。更多内容，参考设定多个图标。
图标文件必须打包在附加组件内：它不可以指向一个远程文件。
你只要正确地设置了按钮的icon属性，它就会立刻生效。你可以改变全局的，在特定窗口的或者是特定标签页中显示的图标或者是其他状态属性。更多内容，参考更新状态。
附加一个面板
如果你想把一个面板附加到按钮上，使用切换按钮API。这就和动作按钮API类似，只不过多了一个boolean值属性，表示按钮是否被checked。附加面板，要把按钮传递给面板的show()方法。更多细节，参考切换按钮文档。
显示更多样的内容
添加按钮做不到的复杂界面功能，需要使用工具栏API。 使用工具栏API你可以得到一个用户界面内容的水平条。可以添加按钮或者是可以包含HTML，CSS，javaScript的frame到工具栏上。