diff options
Diffstat (limited to 'files/ru/mozilla/add-ons/webextensions/your_second_webextension/index.html')
| -rw-r--r-- | files/ru/mozilla/add-ons/webextensions/your_second_webextension/index.html | 26 |
1 files changed, 13 insertions, 13 deletions
diff --git a/files/ru/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/ru/mozilla/add-ons/webextensions/your_second_webextension/index.html index 09f29a7532..53e30de86f 100644 --- a/files/ru/mozilla/add-ons/webextensions/your_second_webextension/index.html +++ b/files/ru/mozilla/add-ons/webextensions/your_second_webextension/index.html @@ -9,14 +9,14 @@ tags: translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension --- <div>{{AddonSidebar}} -<p>Если Вы уже прочитали статью <a dir="ltr" href="/ru/Add-ons/WebExtensions/Your_first_WebExtension" lang="ru-ru">Ваш первый WebExtension</a>, то уже представляете, как создавать WebExtension. В этой статье мы напишем более сложное дополнение, которое демонстрирует еще несколько API.</p> +<p>Если Вы уже прочитали статью <a dir="ltr" href="/ru/Add-ons/WebExtensions/Your_first_WebExtension" lang="ru-ru">Ваш первый WebExtension</a>, то уже представляете, как создавать WebExtension. В этой статье мы напишем более сложное дополнение, которое демонстрирует ещё несколько API.</p> <p>Дополнение добавляет новую кнопку на панель инструментов Firefox. Когда пользователь кликает по кнопке, мы показываем ему всплывающую панель с предложением выбрать животное. Когда животное выбрано, мы заменяем содержимое текущей страницы на изображение выбранного животного.</p> <p>Чтобы реализовать это, мы:</p> <ul> - <li><strong>определим <a href="/ru/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> - кнопку, прикрепленную к панели инструментов Firefox.</strong><br> + <li><strong>определим <a href="/ru/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> - кнопку, прикреплённую к панели инструментов Firefox.</strong><br> Для кнопки мы предоставим: <ul> <li>иконку с именем "beasts-32.png"</li> @@ -50,7 +50,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension <h2 id="Написание_WebExtension">Написание WebExtension</h2> -<p>Создайте новую директорию и перейдите в нее:</p> +<p>Создайте новую директорию и перейдите в неё:</p> <pre class="brush: bash">mkdir beastify cd beastify</pre> @@ -95,11 +95,11 @@ cd beastify</pre> <li><code><a href="/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/description">description</a></code> <code>и <a href="/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url">homepage_url</a></code> необязательны, но рекомендуемы: они предоставляют полезную информацию о дополнении.</li> <li><code><a href="/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> необязательный, но рекомендуемый: позволяет Вам определять иконку для дополнения, которая будет показана в Менеджере Дополнений.</li> <li><code><a href="/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> перечисляет разрешения для нужд дополнения. Здесь мы просто спрашиваем разрешения для <a href="/ru/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission"><code>activeTab</code> permission</a>.</li> - <li><code><a href="/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> задает кнопку на панели инструментов. Здесь мы предоставляем три вида информации: + <li><code><a href="/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> задаёт кнопку на панели инструментов. Здесь мы предоставляем три вида информации: <ul> <li><code>default_icon</code> это обязательная иконка для кнопки</li> <li><code>default_title</code> необязательный заголовок, будет показан в подсказке</li> - <li><code>default_popup</code> используется, если Вы хотите, чтобы всплывающая панель была показана когда пользователь кликает по кнопке. В нашем примере мы использовали этот ключ и он указывает на HTML файл, подключенный к дополнению.</li> + <li><code>default_popup</code> используется, если Вы хотите, чтобы всплывающая панель была показана когда пользователь кликает по кнопке. В нашем примере мы использовали этот ключ и он указывает на HTML файл, подключённый к дополнению.</li> </ul> </li> <li><code><a href="/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a></code> перечисляет файлы, которые мы хотим сделать доступными для веб-страниц. Поскольку дополнение заменяет содержимое страницы на изображения, которые мы упаковали вместе с дополнением, нам нужно сделать эти изображения доступными для страницы.</li> @@ -130,9 +130,9 @@ cd beastify</pre> <h3 id="Всплывающая_панель">Всплывающая панель</h3> -<p>Функция панели - позволить пользователю выбрать одного из трех зверей.</p> +<p>Функция панели - позволить пользователю выбрать одного из трёх зверей.</p> -<p>Создайте новую папку с именем "popup" в корневой папке дополнения. Здесь мы сохраним код для панели. Панель будет состоять из трех файлов:</p> +<p>Создайте новую папку с именем "popup" в корневой папке дополнения. Здесь мы сохраним код для панели. Панель будет состоять из трёх файлов:</p> <ul> <li><strong><code>choose_beast.html</code></strong> определяет содержимое панели</li> @@ -167,7 +167,7 @@ cd beastify</pre> <h4 id="choose_beast.css">choose_beast.css</h4> -<p>CSS фиксирует размер всплывающей панели, гарантирует что три варианта заполняют пространство и дает им основной стиль:</p> +<p>CSS фиксирует размер всплывающей панели, гарантирует что три варианта заполняют пространство и даёт им основной стиль:</p> <pre class="brush: css">html, body { width: 100px; @@ -200,7 +200,7 @@ cd beastify</pre> <h4 id="choose_beast.js">choose_beast.js</h4> -<p>В JavaScript для всплывающего окна мы обрабатываем события click. Если click был на одном из трех вариантов наших животных, мы добавляем content script в активную вкладку. После того, как content script загрузится, мы отправляем ему сообщение с выбранным животным:</p> +<p>В JavaScript для всплывающего окна мы обрабатываем события click. Если click был на одном из трёх вариантов наших животных, мы добавляем content script в активную вкладку. После того, как content script загрузится, мы отправляем ему сообщение с выбранным животным:</p> <pre class="brush: js">/* Учитывая имя зверя, получаем URL соответствующего изображения. @@ -286,7 +286,7 @@ function removeEverything() { } /* -Учитывая URL изображения зверя, создает и стилизует узел IMG, +Учитывая URL изображения зверя, создаёт и стилизует узел IMG, указывающий на это изображение, затем вставляет узел в документ. */ function insertBeast(beastURL) { @@ -307,7 +307,7 @@ browser.runtime.onMessage.addListener(beastify); <ul> <li>удаляет каждый элемент из <code>document.body</code></li> - <li>создает <code><img></code> элемент, указывающий на переданный URL, и вставляет элемент в DOM</li> + <li>создаёт <code><img></code> элемент, указывающий на переданный URL, и вставляет элемент в DOM</li> <li>удаляет обработчик сообщений.</li> </ul> @@ -344,13 +344,13 @@ browser.runtime.onMessage.addListener(beastify); manifest.json</pre> -<p>Начиная с Firefox 45 Вы можете временно установить дополнения с жесткого диска.</p> +<p>Начиная с Firefox 45 Вы можете временно установить дополнения с жёсткого диска.</p> <p>Откройте "about:debugging" в Firefox, кликните "Загрузить временное дополнение", и выберете Ваш файл manifest.json. После этого Вы должны увидеть иконку дополнения на панели инструментов Firefox:</p> <p>{{EmbedYouTube("sAM78GU4P34")}}</p> -<p>Откройте веб-страницу, затем щелкните иконку, выберите зверя и посмотрите как страница изменится:</p> +<p>Откройте веб-страницу, затем щёлкните иконку, выберите зверя и посмотрите как страница изменится:</p> <p>{{EmbedYouTube("YMQXyAQSiE8")}}</p> |