Загрузка...Что такое расширения 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) и выберите папку, в которой расположен проект.
После этого в браузере должно появиться приложение, увидите его значок.
Теперь перейдите на любой веб-сайт и нажмите на расширение, чтобы увидеть, что получилось.
Building a Google Chrome Extension Using JavaScript, HTML, And CSS