Краткий обзор

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Аннотатор использует контент-скрипты для реализации пользовательских интерфейсов, получения ввода, и для работы со страницами, посещаемыми пользователем.

Модуль main содержит логику приложения и производит операции между различными объектами SDK.

Операции между модулем main и различными контент-скриптами можно изобразить следующим образом:

Пользовательский интерфейс

Основной пользовательский интерфейс состоит из Виджета и трех панелей:

  • Виджет (widget) используется для активации Аннотатора и для отображения списка всех сохраненных заметок;
  • Панель (panel) annotation-editor позволит пользователю добавить новую заметку;
  • Панель annotation-list будет отображать список всех сохраненных заметок;
  • Панель annotation будет отображать одну заметку.

В дополнении, мы будем использовать модуль Оповещений (notifications), чтобы сообщать пользователю, когда в хранилище закончилось свободное место.

Работаем с DOM

Мы будем использовать два объекта page-mods для произведения операций над DOM веб-страниц, которые посещает пользователь:

  • Объект selector позволит пользователю выбрать элемент для добавления заметки к нему. Он идентифицирует элементы страницы, которые подходят для заметок, подсвечивает их при наведении курсора мыши и сообщает основному коду расширения когда пользователь кликает по подсвеченному элементу;

  • Объект matcher отвечает за поиск элементов с заметками: он инициализируется со списком заметок и осуществляет поиск веб-сраниц с элементами, ассоциированными с этими заметками. Он также подсвечивает все элементы, ассоциированные с заметками. Когда пользователь наводит курсор мыши на элемент с заметкой, matcher сообщает основному коду расширения, который, в свою очередь, отображает панель с одной заметкой.

Обработка данных

Мы будем использовать модуль simple-storage для хранения заметок.

Поскольку мы сохраняем потенциально секретную информацию, мы хотим оградить пользователя от создания заметок в приватном режиме браузера. Простейший способ решения этой проблемы, это удаление ключа "private-browsing" из файла "package.json" расширения. Если мы удалим этот ключ, то расширение не получит доступ к окнам в режиме приватного просмотра и Виджет Аннотатора не будет отображаться в приватных окнах.

Приступаем к работе

Давайте начнем с создания папки, с именем "annotator". Перейдите в эту папку и введите cfx init.

Далее мы разработаем Виджет.

Метки документа и участники

 Внесли вклад в эту страницу: kestik
 Обновлялась последний раз: kestik,