Вы знаете JavaScript? И хотите добавить что-то интересное в свой набор навыков и резюме! Что ж, сейчас самое время взглянуть на эту историю о том, как просто разработать свое первое собственное расширение для Chrome. Да, вы правильно прочитали. Ваше первое расширение, которым вы можете поделиться с коллегами, чтобы упростить их интернет-жизнь, а также для гибкости среди ваших разработчиков :)
Давайте закодируем это…
Во-первых, нам нужно подготовить файловую структуру, которая включает следующие файлы в общем родительском каталоге:
- manifest.json (определяет наше расширение и содержит некоторые метаданные)
- всплывающее окно.html
- стиль.css
- script.js
- фон.js
Мы рассмотрим каждый файл, создавая забавное расширение, которое возьмет ваше имя и URL-адрес изображения и сделает любую из ваших вкладок Chrome одержимой ею / ним. Интересно не так ли?
- manifest.json
Нам нужно определить все метаданные, которые потребуются нашему расширению, такие как имя расширения, описание, версия, manifest_version, разрешения и т. д.
Version сообщает о рабочем выпуске расширения, manifest_version определяет версию манифеста, выпущенного Google для разработки расширения, background (service_worker) содержит всю метаинформацию, которая требуется нашему расширению заранее, например загрузку исходных данных через API или локальное хранилище, разрешения сообщают расширению, какие chrome api(s) использовать, действие определяет вход нашего расширения через popup.html.
2. всплывающее окно.html
Этот файл представляет собой обычный html-файл, да, тот, который мы так долго писали, который отображает наше расширение в графическом виде, чтобы пользователь мог взаимодействовать с ним, то есть в пользовательском интерфейсе.
3. стиль.css
Хотя этот файл не является обязательным, вы можете использовать его, чтобы придать эстетичности вашему popup.html.
4. скрипт.js
Это файл, в котором лежит логика нашего расширения. Нам нужно связать этот файл в нашем файле popup.html. И он содержит обычные коды javascript, кроме некоторых явных функций chrome API для разработки расширений.
Так как он связан в файле popup.html. Так что, без сомнения, он может легко справиться с DOM popup.html. Но мы собираемся создать расширение, которое будет принимать наш вклад и делать некоторую магию «раздавливания» страницы веб-сайта, открытой на какой-либо вкладке Chrome, то есть манипулировать DOM других html-файлов.
Что ж, у гугл-бабы есть кое-что для нас. Это метод executeScript (из сценария API), который внедряет функцию (определенную нами) в конкретный файл веб-страницы вкладки. Наша работа начинается отсюда. Пожалуйста, посмотрите на изображение ниже для лучшего понимания.
5. фон.js
Это еще один файл .js с обычным кодом javascript. Этот файл содержит коды, которые понадобятся нашему расширению заранее. Например, загрузка/установка данных через API или локальное хранилище.
Привет, Выполнив описанные выше шаги, вы успешно разработали свое первое расширение для Chrome.
Теперь давайте посмотрим, как мы можем добавить наше расширение в браузер Chrome и, наконец, стать одержимыми влюбленностями.
Шаги по настройке расширения: –
- Перейти к «управлению расширениями»
- Нажмите «Загрузить распакованное».
- Перейдите в каталог файлов, где у вас есть файловая структура, выберите его и откройте.
Поздравляем!!!
Вы успешно разработали и добавили собственное расширение в браузер Chrome.
Если вы нашли это полезным и хотите присоединиться к моей работе — пожалуйста, не утруждайте себя просмотром их здесь:
