MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

注释器使用内容脚本(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.

下一步,我们将实现控件

文档标签和贡献者

 此页面的贡献者: GrayLight, Cat
 最后编辑者: GrayLight,