Расширение для Google Chrome: JavaScript+HTML+CSS

Что такое расширения Google Chrome?

Расширения Google Chrome — это небольшие приложения, которые добавляют дополнительные функции в браузер Google Chrome. Они реализуются с использованием веб-технологий, таких как HTML, CSS и JavaScript.

Далее рассмотрим основную структуру простого расширения Google Chrome, которое будет показывать «hello world» и кнопку во всплывающем окне. После нажатия кнопки, всплывающее окно должно изменить цвет и язык текста. Разберём, как установить приложение в браузере.

Структура простейшего расширения для Google Chrome

Манифест

manifest.json — это очень важный файл, который должен быть у любого расширения. Он сообщает Google Chrome, что именно делает приложение. Как минимум, в манифест должны быть: имя и версия, а также версия манифеста. Ещё добавим: описание, иконки, действия для браузера, всплывающее окно и разрешения.

  • name: название приложения
  • version: версия приложения
  • manifest_version: будем использовать 2. Если хотите использовать другую версию, перейдите по этой ссылке для получения дополнительной информации
  • description: краткое описание приложения
  • icons: Можно добавить до 3-х значков для отображения в браузере и на странице расширения Google, здесь будем использовать только одно изображение. Google автоматически изменит размеры.
  • browser_action: Где будет происходить действие. В нашем случае действие будет происходить во всплывающем окне.
  • default_title: название приложения
  • default_popup: здесь надо выбрать HTML-файл
  • permissions: некоторые приложения созданы только для определенных веб-сайтов. Наше приложение будет работать на всех веб-сайтах, которые начинаются с http или https.

manifest.json

{
"manifest_version": 2,
"name": "Hello world extention",
"version": "1.0",
"description": "A hello wolrd app",
"icons": {
  "128": "icon.png"
},
"browser_action": {
  "default_title": "A hello wolrd app",
  "default_popup": "popup.html"
},
"permissions": [
  "http://*/*",
  "https://*/*"
]
}

popup.html

В popup.html напишем HTML и подключим файлы CSS и JavaScript.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document
    <link rel="stylesheet" href="/style-sheet.css">
  </head>
  <body id="body">
    <h1>Hello World!
    <button id="btn">Show it in Spanish!
    <script src="/popup.js">
  </body>
</html>

popup.js

В этом файле напишем JavaScript-функцию и слушатель событий, прикрепленный к кнопке.

document.getElementById('btn').addEventListener("click", function(){
document.getElementById('body').innerHTML = "<h1 class='h1'>Hola Mundo!</h1>";
});

style.css

Здесь стилизуем HTML-элементы.

h1 {
color: red
}
.h1 {
color: blue;
}

Иконка

Это просто PNG-файл.

Установка расширения в Google Chrome

В адресной строке браузера Google Chrome введите chrome://extensions/

В правом верхнем углу включите режим разработчика (developer mode).

Нажмите «Загрузить распакованный» (Load unpacked) и выберите папку, в которой расположен проект.

После этого в браузере должно появиться приложение, увидите его значок.

Теперь перейдите на любой веб-сайт и нажмите на расширение, чтобы увидеть, что получилось.