注释器使用内容脚本（content scripts）来构建用户界面，得到用户输入，并检查用户载入页面的DOM。
同时，主要模块包括程序逻辑和调节不同SDK对象的交互。
我们可以描述在主要模块和不同内容脚本的交互，像这样：
用户界面
注释器的主要用户界面由一个控件和三个面板组成。
- 控件（widget）用来选择打开或关闭注释器，显示所有已经储存的注释列表。
- 注释编辑器（annotation-editor）面板用来让用户输入注释。
- 注释列表（annotation-list）面板用来显示保存的注释清单。
- 注释（annotation）面板显示单条注释。
除此之外，我们使用 notifications 模块来告知用户附加组件的储存限额已满。
用DOM工作
我们将使用 page-mods 来和用户打开的网页的DOM进行交互。
-
选择器（selector）让用户选择一个元素来注释。它识别符合注释条件的页面元素，当鼠标在他们上方时高亮显示，并在用户点击高亮元素时通知主要的附加组件代码。
-
匹配器（matcher）用来寻找被注释的元素：它初始化注释列表并网页中和注释相关连的元素。高亮网页上找到的关联元素，并高亮显示。当鼠标移动到已注释元素的上面，匹配器将通知显示注释面板的主要附加组件代码。
处理数据
我们将使用simple-storage模块来储存数据。
由于我们将记录潜在的敏感信息，我们想阻止用户在隐私浏览模式下创建注释，最简单的方式是删除附加组件中“package.json“文件的”private-browsing"键。这样，附加组件就不能看见任何隐私浏览窗口，同时注释器的控件也将不再出现。
开始行动
现在让我们来创建叫“注释器”的目录。Navigate to it and type cfx init.
下一步，我们将实现控件。