Рубрики
Без рубрики

Как создать хромированное расширение

Erika Tan Как создать Chrome Extenderin в этой статье, я буду преподавать вам, как сделать его собственное расширение Chrome. Я насадив его из извлеченных уроков при создании TalktOME, расширение Chrome, которое помогает визуально нарушено, чтение содержимого веб-сайта и навигации по

Автор оригинала: FreeCodeCamp Community Member.

Эрика Тан

В этой статье я буду преподавать вам, как Сделайте хромированное расширение вашего собственного Отказ Я навязываю его из извлеченных уроков при создании Talktome , расширение Chrome, которое помогает визуально нарушено, чтение содержимого веб-сайта и навигации на другие веб-страницы.

Я собираюсь покрыть основы настройки вашего расширения, в том числе:

  • Настройка файлов для настройки
  • Готов к магазину Chrome

Настройка файлов для настройки

Во-первых, перейдите к Chrome://Расширения В вашем браузере или просто нажмите «Дополнительные инструменты» и «Расширения» в меню Chrome. Это должно привести вас к странице управления расширением, где вы можете Включите режим разработчика (Это должно быть в правом верхнем углу).

Тогда вам нужно сделать манифест .json Файл в новом каталоге для вашего расширения. Этот файл предоставляет важной информации для вашего расширения для функции, например, разрешений и файлы сценариев, к которым вы будете связывать ваш проект. Это то, что должно выглядеть содержимое вашего манифеста:

{    "name": "Chrome Extension Example",    "version": "1.0",    "description": "Build an Extension!",    "manifest_version": 2}

Чтобы загрузить свой каталог на страницу управления расширением, нажмите кнопку «Загрузить распакованный» и выберите свой каталог. Это свяжет ваши файлы на веб-интерфейс на основе веб.

Еще один важный файл, который вам придется настроить background.js , который является фоновым скриптом вашего проекта.

Образец фонового скрипта имеет этот тип структуры:

chrome.runtime.onInstalled.addListener(function() {    // add an action here});

Он всегда будет работать, пока ваше расширение включено, и полезно для прослушивания разных событий, таких как навигации клавиатуры или для навигации на разные страницы.

Вы даже можете иметь несколько фоновых сценариев. Вам просто нужно сначала зарегистрировать все в файле манифеста. Для этого просто структура Mainesest.js Подобно этому, какой файл манифеста выглядит следующим образом:

{    "name": "Chrome Extension Example",    ...
    "background": {        "scripts": [            "js/es6-promise.auto.min.js",            "js/defaults.js",            "js/speech.js",            "js/document.js",            "js/events.js",            "js/stt.js",            "js/listen.js"        ],        "persistent": false    }}

Теперь вам понадобится файл для не только функции вашего расширения, но и пользовательского интерфейса. Для этого сделать файл под названием popup.html Отказ Всплывающее окно – это небольшое окно, которое появляется после нажатия значка расширения. Например, вот всплывающее окно для расширения Cookie Manager Firefox.

popup.html Файл может быть довольно простым. Ниже приведен некоторый код, чтобы сделать всплывающее окно одной кнопкой. Это так же легко, как добавление бирки кнопки открытия и закрытия в корпус документа и несколько правил стилей.


                ;

Конечно, popup.html Код для нашего расширения имеет много более компонентов, чем это. Не стесняйтесь добавлять больше кнопок, таблиц стилей, и что-то еще, что вы видите подходящие для вашей идеи расширения.

Время настроить всплывающийся код и значок. Однако для значка вам нужно добавить код в два места, «Default_icon» и «Icons». Свойство «Default_icon» используется для значков панели инструментов, а «Icons» используется для изображений, отображаемых на странице управления расширением.

Вернитесь к манифест .json И добавьте следующие строки кода, заменив пути изображения для значка по умолчанию на ваши собственные изображения. Вы также можете поставить те же изображения для как «Default_icon», так и «значки». И ты не нужно поставить на изображения тех же измерений, что и те, которые указаны ниже. Например, если у вас есть только изображения, которые являются только 16 х 16 и 48 х 48, не стесняйтесь удалить две другие линии, которые указывают 32 и 128 пикселей.

{   "name": "Chrome Extension Example",    ...
    "page_action": {        "default_popup": "popup.html",        "default_icon": {            "16": "images/img16.png",            "32": "images/img32.png",            "48": "images/img48.png",            "128": "images/img128.png"        }    },    "icons": {        "16": "images/img16.png",        "32": "images/img32.png",        "48": "images/img48.png",        "128": "images/img128.png"    }}

Таким образом, это файлы, которые необходимы для построения расширения Chrome:

  • Файл манифеста,
  • Фоновые скрипты, а также
  • всплывающее файл

Некоторые другие файлы, которые вы можете настроить:

  • Опции .html а также
  • Options.js.

options.js Даст своим пользователям более широкое разнообразие параметров, когда речь идет об использовании вашего расширения. Это позаботится о том, как выглядит ваша страница параметров (очень похоже на Popup.html ), пока options.js будет обрабатывать функциональность.

Эти файлы являются необязательными, но если вы решите их добавить, не забудьте настроить Опции .html в манифесте и связать ваш options.js Файл, добавив

Читайте ещё по теме: