Примеры расширений

Чтобы проиллюстрировать, как использовать API WebExtension, мы поддерживаем репозиторий с примерами расширений по адресу https://github.com/mdn/webextensions-examples. Эта статья описывает, как запустить эти примеры, и перечисляет примеры вместе с API WebExtension, которые они демонстрируют.

Эти примеры работают в Firefox Nightly: большинство работают в более ранних версиях Firefox, но проверьте ключ strict_min_version в файле manifest.json расширения, чтобы убедиться.

Предупреждение: Некоторые примеры работают только на определённых доменах или страницах. Подробности любых ограничений приведены в файле readme каждого примера. По умолчанию ни один из примеров не работает в окнах приватного просмотра, см. Расширения в режиме приватного просмотра для получения подробностей.

Чтобы попробовать эти примеры, клонируйте репозиторий, а затем:

загрузите расширение из его исходной папки, используя функцию Загрузка временного дополнения. Расширение будет загружено до перезагрузки Firefox.
откройте папку с исходным кодом расширения в командной строке и используйте web-ext для запуска расширения. Расширение будет загружено до перезагрузки Firefox.
в Firefox используйте Файл > Открыть файл и найдите пример в папке build. Папка build содержит собранные и подписанные версии всех примеров. Это постоянно установит пример.

Предупреждение: Пожалуйста, не отправляйте эти примеры WebExtension на addons.mozilla.org (AMO); вам не нужно подписывать add-on WebExtension примеры для их запуска. Следуйте шагам выше.

Если вы хотите внести вклад в репозиторий, отправьте нам запрос на включение.

Имя	Описание	JavaScript API
annotate-page	Отображает боковую панель, которая позволяет делать заметки на веб-страницах.	`storage.local` `tabs.onActivated` `tabs.onUpdated` `tabs.query` `tabs.Tab` `windows.getCurrent` `windows.Window`
apply-css	Добавляет действие на панели инструментов. Нажав на кнопку, применяет красную границу с помощью внедренного CSS. Нажав на кнопку снова, удаляет CSS.	`pageAction.getTitle` `pageAction.onClicked` `pageAction.setIcon` `pageAction.setTitle` `pageAction.show` `tabs.insertCSS` `tabs.onUpdated` `tabs.query` `tabs.removeCSS` `tabs.Tab`
beastify	Добавляет значок действия браузера на панель инструментов. Нажав на кнопку, выбирает зверя. Затем содержимое тела активной вкладки заменяется изображением выбранного зверя.	`extension.getURL` `runtime.onMessage` `tabs.executeScript` `tabs.insertCSS` `tabs.query` `tabs.removeCSS` `tabs.sendMessage` `tabs.Tab`
bookmark-it	Добавляет кнопку закладки на панель инструментов. Нажав на кнопку, переключает закладку для текущей страницы.	`bookmarks.create` `bookmarks.onCreated` `bookmarks.onRemoved` `bookmarks.remove` `bookmarks.search` `browserAction.onClicked` `browserAction.setIcon` `browserAction.setTitle` `tabs.onActivated` `tabs.onUpdated` `tabs.query` `tabs.Tab` `windows.onFocusChanged`
borderify	Добавляет твёрдую красную границу ко всем веб-страницам, соответствующим mozilla.org.
chill-out	Отображает действие на странице после периода бездействия. При щелчке по действию на странице показываются GIF-картинки с кошками.	`alarms.clearAll` `alarms.create` `alarms.onAlarm` `pageAction.hide` `pageAction.onClicked` `pageAction.show` `tabs.get` `tabs.onActivated` `tabs.onUpdated` `tabs.query` `tabs.update`
commands	Демонстрирует использование API команд для настройки сочетания клавиш. Созданное сочетание клавиш доступно с помощью Ctrl+Shift+U (Command+Shift+U на Mac).	`commands.getAll` `commands.onCommand` `commands.reset` `commands.update` `tabs.create`
content-script-register	Иллюстрирует, как расширение может регистрировать скрипты содержимого с сопоставлением URL во время выполнения.	`contentScripts.register` `runtime.onMessage` `runtime.sendMessage`
context-menu-copy-link-with-types	Добавляет элемент контекстного меню для ссылок, чтобы скопировать ссылку в буфер обмена как обычный текст и ссылку в формате rich HTML.	`contextMenus.create` `contextMenus.onClicked` `tabs.executeScript`
contextual-identities	Список, создание и удаление контекстуальных идентификаторов.	`contextualIdentities.query` `tabs.create` `tabs.query` `tabs.remove`
cookie-bg-picker	Позволяет пользователю настраивать цвет фона и узор на сайтах, которые они посещают, а также сохраняет их настройки через cookie, повторно применяя их при повторном посещении сайта, который они ранее настраивали.	`cookies.get` `cookies.onChanged` `cookies.remove` `cookies.set` `extension.getURL` `runtime.onMessage` `tabs.onActivated` `tabs.onUpdated` `tabs.query` `tabs.Tab` `tabs.sendMessage`
devtools-panels	Демонстрирует некоторые из API инструментов разработчика.	`devtools.inspectedWindow` `devtools.panels` `runtime.getURL` `runtime.onMessage` `runtime.sendMessage` `tabs.executeScript`
discogs-search	Демонстрирует добавление пользовательского поискового движка с ключом chrome_settings_overrides.
dynamic-theme	Пример динамической темы	`alarms.create` `alarms.onAlarm` `theme.update`
emoji-substitution	Заменяет слова эмодзи.
eslint-example	Демонстрирует, как настроить расширение с помощью eslint.
export-helpers	Демонстрирует, как использовать вспомогательные функции экспорта, такие как cloneInto, для обмена объектами со скриптами страницы.	`notifications.create` `runtime.onMessage` `runtime.sendMessage`
favourite-colour	Пример страницы настроек, позволяющей хранить ваш любимый цвет.	`browserAction.onClicked` `runtime.openOptionsPage` `storage.managed` `storage.sync`
find-across-tabs	Демонстрация API поиска.	`browserAction.onClicked` `extension.getBackgroundPage` `find.find` `find.highlightResults` `runtime.getURL` `runtime.onMessage` `runtime.sendMessage` `tabs.create` `tabs.query` `tabs.Tab`
firefox-code-search	Демонстрация использования API omnibox.	`omnibox.onInputChanged` `omnibox.onInputEntered` `omnibox.setDefaultSuggestion` `tabs.create` `tabs.update`

forget-it	Демонстрирует использование API browsingData.	`browserAction.onClicked` `browsingData.remove` `notifications.create` `storage.local`
google-userinfo	Демонстрирует использование API identity.	`browserAction.onClicked` `identity.getRedirectURL` `identity.launchWebAuthFlow` `notifications.create`
history-deleter	Демонстрация API history: удаляет элементы истории для заданного домена	`history.deleteUrl` `history.search` `pageAction.show` `tabs.onUpdated` `tabs.query`
http-response	Демонстрирует, как переписывать HTTP-ответы с помощью API webRequest.filterResponseData().	`webRequest.filterResponseData` `webRequest.onBeforeRequest`
imagify	Используя боковую панель, демонстрирует использование выбора файла и перетаскивания. Скрипт контента заменяет содержимое текущей страницы выбранным изображением.	`extension.getURL` `runtime.onMessage` `tabs.executeScript` `tabs.query` `tabs.sendMessage`
latest-download	Показывает последний загруженный элемент и позволяет его открыть или удалить.	`downloads.erase` `downloads.getFileIcon` `downloads.open` `downloads.removeFile` `downloads.search`
list-cookies	Это расширение отображает cookie в активной вкладке.	`cookies.getAll` `tabs.query`
menu-accesskey-visible	Демонстрирует, как настроить однобуквенный доступ к элементу меню.	`i18n.getMessage` `menus.update` `menus.create` `menus.onClicked`
menu-demo	Демонстрирует добавление и изменение элементов меню с помощью API menus.	`i18n.getMessage` `menus.create` `menus.onClicked` `menus.remove` `menus.update` `runtime.lastError` `tabs.executeScript`
menu-labelled-open	Показывает, как расширение может прослушивать отображение меню и добавлять, удалять или обновлять элементы меню.	`menus.create` `menus.onClicked` `menus.onShown` `menus.refresh` `menus.update` `tabs.update`
menu-remove-element	Показывает, как обнаружить элемент страницы в позиции курсора и удалить этот элемент или родительский элемент со страницы. В этом примере используется полифилл, иллюстрируя кроссбраузерное развитие расширений.	`menus.create` `menus.onClicked` `menus.getTargetElement` `pageAction.openPopup` `pageAction.show` `tabs.executeScript`
menu-search	Демонстрирует, как получить список поисковых систем и отправить запрос поиска, используя сведения о поисковой системе, добавленные в контекстное меню для выбранного текста.	`search.search` `search.get` `menus.create` `menus.onClicked`
mocha-client-tests	Этот пример демонстрирует два способа тестирования расширения: выполнение тестов внутри расширения и выполнение тестов из командной строки с использованием Karma.	`runtime.onMessage` `runtime.sendMessage`
native-messaging	Пример native messaging, включая приложение Python и расширение, которые обмениваются сообщениями с ним.	`browserAction.onClicked` `runtime.connectNative`
navigation-stats	Демонстрация API webNavigation, показывающая основные статистические данные о посещенных вами страницах.	`storage.local` `webNavigation.onCommitted` `webNavigation.onCompleted`
notify-link-clicks-i18n	Показывает локализованное уведомление при нажатии пользователем на ссылки.	`extension.getURL` `i18n.getMessage` `notifications.create` `runtime.onMessage` `runtime.sendMessage`
open-my-page-button	Добавляет значок действия браузера в панель инструментов. При щелчке значка действия расширение открывает страницу, которая была упакована вместе с ним.	`browserAction.onClicked` `tabs.create`
page-to-extension-messaging	Демонстрирует, как веб-страница и скрипт контента могут обмениваться сообщениями. Посетите https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html для демонстрации.
permissions	Демонстрирует необязательные разрешения с помощью API permissions.	`browserAction.onClicked` `permissions.getAll` `permissions.remove` `permissions.request` `runtime.getURL` `tabs.create`
private-browsing-theme	Пример динамической темы: устанавливает тёмную тему для частных окон.	`theme.reset` `theme.update` `windows.getAll` `windows.onCreated`
proxy-blocker	Использует API proxy для блокировки запросов к хостам, указанным в списке.	`extension.getURL` `proxy.onRequest` `proxy.onError` `storage.local` `storage.onChanged`
quicknote	Позволяет пользователю быстро создавать заметки, нажав кнопку и введя текст в появившемся всплывающем окне. Заметки сохраняются в хранилище.	`storage.local`
root-cert-stats	Показывает, как получить сведения о TLS-соединении запроса.	`webRequest.getSecurityInfo`

runtime-examples	Демонстрация различных API выполнения.	`browserAction.onClicked` `notifications.create` `runtime.getManifest` `runtime.onInstalled` `runtime.reload`
selection-to-clipboard	Демонстрация записи в буфер обмена из скрипта содержимого.
session-state	Демонстрация получения состояния, определённого расширением, из восстановленных вкладок.	`menus.create` `menus.onClicked` `sessions.getTabValue` `sessions.setTabValue` `tabs.insertCSS` `tabs.onCreated` `tabs.onUpdated` `tabs.query`
store-collected-images	Демонстрация использования библиотеки idb-file-storage для хранения и обработки файлов в расширении.	`browserAction.onClicked` `contextMenus.create` `contextMenus.onClicked` `runtime.onMessage` `runtime.sendMessage` `tabs.create` `windows.create`
stored-credentials	Выполнение базовой аутентификации, используя сохранённые учётные данные.	`storage.local` `webRequest.onAuthRequired` `webRequest.onCompleted` `webRequest.onErrorOccurred`
tabs-tabs-tabs	Демонстрация управления вкладками: открытие, закрытие, перемещение, масштабирование.	`browserAction.setBadgeBackgroundColor` `browserAction.setBadgeText` `tabs.create` `tabs.duplicate` `tabs.getZoom` `tabs.move` `tabs.onCreated` `tabs.onMoved` `tabs.onRemoved` `tabs.query` `tabs.reload` `tabs.remove` `tabs.setZoom` `tabs.Tab` `tabs.update`
theme-integrated-sidebar	Боковая панель, интегрированная с текущей темой.	`theme.getCurrent` `theme.onUpdated` `windows.getCurrent`
theme-switcher	Пример использования API управления темами.	`management.getAll` `management.setEnabled`
themes	Коллекция тем, иллюстрирующая: weta_fade: базовая тема, использующая единственный образ, указанный в `theme_frame:`. weta_fade_chrome: тема weta_fade, реализованная с совместимыми с Chrome ключами манифеста. weta_tiled: тема, использующая черепичную картинку. weta_mirror: тема, использующая несколько изображений и выравнивающую их в заголовке. animated: использование анимированного PNG.
top-sites	Демонстрация API topSites.	`topSites.get`
user-agent-rewriter	Демонстрация использования API webRequest для переписывания заголовка User-Agent HTTP.	`extension.getBackgroundPage` `webRequest.onBeforeSendHeaders`
user-script-register	Иллюстрация того, как расширение может регистрировать пользовательские скрипты, соответствующие URL, во время выполнения.	`userScripts.register` `runtime.onMessage` `runtime.sendMessage`
webpack-modules	Демонстрация использования webpack для упаковки модулей npm в расширение.	`runtime.onMessage` `runtime.sendMessage`
window-manipulator	Демонстрация манипулирования окнами: открытие, закрытие, изменение размеров.	`windows.create` `windows.getAll` `windows.getCurrent` `windows.remove` `windows.update` `windows.Window`
open-irc-links	Демонстрация использования обработчиков протоколов.

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Examples