Document

Расширения для Google Chrome. Часть первая. Getting started

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

В первой (этой, то бишь) статье, на примере простейшего расширения, будут рассмотрены все основные моменты, связанные с разработкой, отладкой и использованием расширения, конфигурационный файл manifest.json и начала chrome.* API. Первая же статья, думаю, будет не очень полезна опытным разработчикам (это дисклеймер).

Hello world

Лучшая теория — практика, а поэтому, не откладывая в долгий ящик, создаём папку hello_world, а в ней текстовый документ manifest.json и печатаем туда следующий код:

Это — программа минимум. Если зайти в «Гаечный ключ → Инструменты → Расширения», установить галку «Режим разработчика», нажать кнопку «Загрузить распакованное расширение. » и указать нашу папку «Hello world», то расширение появится в списке установленных, но делать, естественно, оно пока ничего не будет, потому как не умеет.

Учим и отлаживаем

И создадим файл background.html в котором будет написан сценарий, выполняемый в фоновом режиме. Например, такой:

Сценарий в background.html будет выполнен один раз, при старте браузера и расширения, то есть, при открытии ещё одной вкладки или окна, повторное исполнение сценария не произойдёт. В нашем случае он каждые 10 секунд будет писать в консоль сакраментальную фразу, и это, кстати, надо бы проверить.

Для отладки удобно использовать служебную страницу chrome://extensions/ со включённым режимом разработчика.

В принципе, она дублирует функционал страницы управления расширениями из «Гаечного ключа», но мне, субъективно, нравится больше. Как-то компактнее, что ли?

Здесь нас интересуют две позиции: строка «ID» с внутренним идентификатором расширения и подраздел «Проверить активные режимы просмотра» в котором мы видим созданный нами background.html и, щёлкнув по нему, можем проконтролировать исполняемый сценарий.

Смотрим и убеждаемся, что сценарий исправно пишет в консоль хэллоуворлды:

Обратите внимание на заголовок формата chrome-extension://ID/filename. Зная идентификатор расширения таким образом можно добраться до любого его файла. Опять же удобно в процессе отладки расширения.

Взаимодействие с браузером

Пока наше расширение представляет эдакую вещь в себе, исполняя в фоне некий сценарий. Для того, чтобы оно начало взаимодействовать с браузером и его компонентами нужно познакомиться с chrome.* API. Так, например, для взаимодействия с окном браузера используются методы chrome.browserAction, а значения по умолчанию задаются в manifest.json следующим образом:

Не забываем создать popup.html (пока оставим его пустым) и положить иконку в папку img, щёлкаем на «Перезагрузить» на странице chrome://extensions/ и смотрим на результат. Иконка нашего расширения появилась на панели расширений, а при клике на неё возникает пустое всплывающее окошко.

Иконка для тех, кто проходит по шагам:

Всё это управлябельно с помощью методов chrome.browserAction из сценариев:

Для практике давайте заставим background.html сделать что-нибудь полезное, вместо того, чтобы просто гадить в консоль. Вот, хотя бы часы. Поверх иконки будет отображаться количество минут, при наведении — время в формате ЧЧ: ММ: СС, а во всплывающем окошке — часы со стрелками.

    * < margin: 0; padding: 0; border: 0; >body    

Сохраняем, перезапускаем, проверяем — красота!

Собственно, мы сделали простое расширение (а заодно и canvas припомнили). Для Getting Started, во всяком случае, достаточно. Осталось только привести его к годному для распространения виду — упаковать. Для этого на той же странице chrome://extensions/ давим на «Упаковка расширений. », указываем корневой каталог (тот, где лежит manifest.json), давим «Ок» и получаем файл формата *.crx на выходе. Это и есть наше упакованное расширение. Открыв его с помощью Хрома, мы установим расширение.

В следующей статье цикла я планирую подробно разобрать chrome.* API, а в дальнейшем — взаимодействие с различными сайтами и использование локальных хранилищ данных. Если вы считаете, что я что-то упустил в азах или у вас есть пожелания по поводу следующих статей цикла — прошу изложить их в комментариях.

Источник

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

Расширения 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.

       
Hello World!
 Show it in Spanish!   

popup.js

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

document.getElementById('btn').addEventListener("click", function()< document.getElementById('body').innerHTML ; >);

style.css

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

Иконка

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

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

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

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

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

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

Источник