Быстрый старт

Традиционное Hello world! выводить не будем, возьмем для начала примерчик посложнее, такой чтоб маломальски иллюстрировал возможности. Если хотите, можете изучить его в оригинале, на английском.

Что у нас получится в результате:  добавится кнопочка в панели инструментов, при нажатии на которую появится панель с картинками сомнительной художественной ценности, загруженными из фликра. В оригинале были котята, но что ж делать… впрочем у вас будут котята, а дальше как хотите.

Профессиональное качество программистов – лень стремление к повторному использованию кода. Поэтому скачиваем готовые файлы проекта и разбираемся, вместо того чтобы набивать их самостоятельно:

• manifest.json
• popup.html
• popup.js
• icon.png

Все файлы скидываем в одну папку и подключаем ее к браузеру:

1. Заходим в Настройки/Расширения
2. Ставим справа вверху галочку “Режим разработчика”
3. Жмем кнопку “Загрузить распакованное расширение” и выбираем папку в которую мы все сохранили.

В дальнейшем, при любых изменениях исходных файлов заходим туда же и обновляем, или просто жмем Ctrl+R

Если вы все сделали правильно, то расширение сразу начнет работу – появится кнопка и при нажатии откроется панель со скотятами. Теперь можно вникнуть, а как же оно устроено.

Первый файл – манифест. Он описывает компоненты входящие в ваше расширение , необходимые права доступа и как минимум одну точку входа – как ваше приложение будет запускаться. Возможны варианты, но это приложение запускается только по нажатию кнопки. Файл в формате JSON, все достаточно просто и очевидно

{
    "manifest_version": 2,
    "name": "One-click Kittens",
    "description": "This extension demonstrates a browser action with kittens.",
    "version": "1.0",

    "permissions": [
        "https://secure.flickr.com/"
        ],
   
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
        }
}

Версия манифеста 2, первый устарел. Магическое число, которое ничего не означает, оно просто должно быть. Когда-нибудь гугл может потребовать заменить его на другое.

Имя, описание, версия – это то что вы будете видеть в списке расширений браузера и, если до этого дойдет, в гугловском магазине расширений. Чтобы ваше расширение туда попало, кроме 5$ за девелоперский аккаунт оно должно соответствовать различным требованиям, и наверняка –  пройти модерацию. Добавить то его добавят, но появится ли оно в поиске по магазину, это вопрос отдельный и преждевременный.

Разрешения: приложение не ограничено “same origin policy”, хотя бы в силу того, что сложно сказать, какой же у него origin. Но все сайты к которым оно обращается с запросами должны быть явно указаны.

Ну и наконец browser_action указывает браузеру что на панель нужно добавить иконку и при нажатии на нее открыть указанный html-файл в popup окне под ней.

Как уже было сказано – это не единственная возможность запустить расширение, и не обязательно открытие отдельного окна.

popup.html и popup.js – это совершенно обычный HTML и JavaScript, если вы знаете и то и другое, то ничего вам объяснять и не надо. Слава богу, разработчикам хватило ума не изобретать велосипед и не умножать сущностей. Обратите внимание – скрипт в манифесте указан не был. Все необходимые библиотеки, css-файлы и статические картинки можно просто сложить в каталог расширения и они будут для него доступны без каких-то специальных ухищрений.

Вот собственно и все для первого раза. Однако если не просто пробежаться глазами по тексту исходников, а немножко их поковырять, то немедленно оказывается, что все не так просто. Например я попробовал снабдить картинки ссылками, и все как бы получилось: указатель над картинкой меняет форму, и просмотр кода элемента показывает что все в порядке – это самая настоящая ссылка. Но при нажатии ничего не происходит. Дальнейшие эксперименты показали что открыть ее можно только в новой вкладке, указав target=”_blank”. Варианты _top, _self, _parent игнорируются напрочь, что наводит на мысль что подводных камней хватает