diff options
Diffstat (limited to 'files/ru/mozilla/add-ons/sdk/tutorials/аннотатор/overview/index.html')
| -rw-r--r-- | files/ru/mozilla/add-ons/sdk/tutorials/аннотатор/overview/index.html | 34 |
1 files changed, 0 insertions, 34 deletions
diff --git a/files/ru/mozilla/add-ons/sdk/tutorials/аннотатор/overview/index.html b/files/ru/mozilla/add-ons/sdk/tutorials/аннотатор/overview/index.html deleted file mode 100644 index 08e4713b33..0000000000 --- a/files/ru/mozilla/add-ons/sdk/tutorials/аннотатор/overview/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Краткий обзор -slug: Mozilla/Add-ons/SDK/Tutorials/Аннотатор/Overview -translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Annotator/Overview ---- -<p>Аннотатор использует контент-скрипты для реализации пользовательских интерфейсов, получения ввода, и для работы со страницами, посещаемыми пользователем.</p> -<p>Модуль <code>main</code> содержит логику приложения и производит операции между различными объектами SDK.</p> -<p>Операции между модулем <code>main</code> и различными контент-скриптами можно изобразить следующим образом:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/6671/annotator-design.png" style="display: block; margin-left: auto; margin-right: auto;"></p> -<h2 id="Пользовательский_интерфейс">Пользовательский интерфейс</h2> -<p>Основной пользовательский интерфейс состоит из Виджета и трех панелей:</p> -<ul> - <li>Виджет (<code><a href="/en-US/Add-ons/SDK/High-Level_APIs/widget">widget</a></code>) используется для активации Аннотатора и для отображения списка всех сохраненных заметок;</li> - <li>Панель (<code><a href="/en-US/Add-ons/SDK/High-Level_APIs/panel">panel</a></code>) <strong>annotation-editor</strong> позволит пользователю добавить новую заметку;</li> - <li>Панель <strong>annotation-list</strong> будет отображать список всех сохраненных заметок;</li> - <li>Панель <strong>annotation</strong> будет отображать одну заметку.</li> -</ul> -<p>В дополнении, мы будем использовать модуль Оповещений (<a href="/en-US/Add-ons/SDK/High-Level_APIs/notifications"><code>notifications</code></a>), чтобы сообщать пользователю, когда в хранилище закончилось свободное место.</p> -<h2 id="Работаем_с_DOM">Работаем с DOM</h2> -<p>Мы будем использовать два объекта <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod"><code>page-mods</code></a> для произведения операций над DOM веб-страниц, которые посещает пользователь:</p> -<ul> - <li> - <p>Объект <strong>selector</strong> позволит пользователю выбрать элемент для добавления заметки к нему. Он идентифицирует элементы страницы, которые подходят для заметок, подсвечивает их при наведении курсора мыши и сообщает основному коду расширения когда пользователь кликает по подсвеченному элементу;</p> - </li> - <li> - <p>Объект <strong>matcher</strong> отвечает за поиск элементов с заметками: он инициализируется со списком заметок и осуществляет поиск веб-сраниц с элементами, ассоциированными с этими заметками. Он также подсвечивает все элементы, ассоциированные с заметками. Когда пользователь наводит курсор мыши на элемент с заметкой, matcher сообщает основному коду расширения, который, в свою очередь, отображает панель с одной заметкой.</p> - </li> -</ul> -<h2 id="Обработка_данных">Обработка данных</h2> -<p>Мы будем использовать модуль <a href="/en-US/Add-ons/SDK/High-Level_APIs/simple-storage"><code>simple-storage</code></a> для хранения заметок.</p> -<p>Поскольку мы сохраняем потенциально секретную информацию, мы хотим оградить пользователя от создания заметок в приватном режиме браузера. Простейший способ решения этой проблемы, это удаление ключа <a href="/en-US/Add-ons/SDK/Tools/package_json#permissions"><code>"private-browsing"</code></a> из файла "package.json" расширения. Если мы удалим этот ключ, то расширение не получит доступ к окнам в режиме приватного просмотра и Виджет Аннотатора не будет отображаться в приватных окнах.</p> -<h2 id="Приступаем_к_работе">Приступаем к работе</h2> -<p>Давайте начнем с создания папки, с именем "annotator". Перейдите в эту папку и введите <code>cfx init</code>.</p> -<p>Далее мы <a href="/en-US/Add-ons/SDK/Tutorials/Annotator/Implementing_the_widget">разработаем Виджет</a>.</p> |
