пятница, 19 марта 2010 г.

Создаём расширение для Google Chrome.

И так начнём. Сегодня на ночь глядя решил поведать как собрать простое расширение для Хрома.
Сами расширения (extensions) пердставляют собой архив.
Для начала создадим папку и в ней файлы manifest.json, popup.html, icon.png.
Для редактирования файлов советую Notepad++, очень удобный блокнот с подсветкой синтаксиса.


- В manifest.json (файл "описания") пишем следующий код:

{
"name": "Super-puper plagin",
"version": "0.1",
"description": "Описание для супер-пупер плагина :) ",
"browser_action": {
"default_icon": "icon.png"
"popup": "popup.html"
}

}



- icon.png - это иконка расширения в баре.

- Теперь возьмёмся за popup.html
popup - это всплывающая "страничка".
Похожая на эту к примеру.
Код:

<div align="center"><a  target="_blank" href="http://gizmonder.com">Блог IT'шника</a></div>

как видим используется простой html.
- Так же можно выполнять код в фоне для этого добавляем в manifest.json строчку "background_page": "background.html", и в папку соответственно сам файл background.html.
Затем запаковываем папку и расширение меняем на crx.
Либо заходим в Хроме chrome://extensions/ , упаковка расширений.
Ну а дальше практика и ещё раз практика. Полезно будет "поковырять" готовые расширения.
Можете смело "ковырять" мои. К примеру: https://chrome.google.com/extensions/.... Скачивайте и распаковывайте.

16 комментариев:

  1. Доброе время суток. Если вам не трудно, не могли бы помочь мне разобраться с моим расширением. я только недавно попробовал этим заниматься, и у меня есть кое какая проблема. Надеюсь вам не составит труда разобраться с ней. Тут по ссылке есть мое расширение и описание проблемы. http://narod.ru/disk/21672112000/my%20ext.rar.html
    Спасибо за внимание.

    ОтветитьУдалить
  2. исправил, нужно было один общий блок
    вот исходник:
    http://narod.ru/disk/21705868000/index.rar.html

    ОтветитьУдалить
  3. у меня есть папка в которой есть:
    - manifest.json
    - popup.html
    - icon.png

    А как создать файл *.crx ?

    ОтветитьУдалить
  4. В хроме:
    Расширения, справо плюсик "режим разработчика", загрузить распакованное расширение.

    Или запаковать в zip или rar (не помню) и переименовать

    ОтветитьУдалить
  5. Спасибо =)
    Я прочитал вашу статью, очень понравилась, просто и доступно =)

    Не подскажете где можно еще поучиться писать расширения на Chrome?
    После статьи так воодушевился что хочу что нить еще написать!!
    Вот только что?! Идей пока нету..
    P.S. Разобрал пример Данила(выше), изменил цвета, сделал так чтоб поле было 3х3 и добавил иконку =)

    Последний вопрос:
    Как можно "разбирать(на архив zip)" расширения с https://chrome.google.com/extensions/
    когда скачиваю, сами файлы в "загрузках" исчезают...

    ОтветитьУдалить
  6. Конкретных статей не подскажу.
    По сути это обычный html + javascript, как простой сайт. В основном парсится какой-нибудь сайт и информация выводится в удобном компактном виде.
    Главное чтобы была идея.

    На счёт сохранения расширения: правой кнопкой по "установить" (в extensions.google.com) и затем "сохранить ссылку как"

    ОтветитьУдалить
  7. Спасибо за ответ =)
    я тут продолжаю баловаться с примером Данила(выше), и подумал, а можно ли в места обычного цвета(1), вставить туда картинки? какой тег для этого нужен?

    div#four{background-color : green(1) ; float : left;clear:left;}

    ОтветитьУдалить
  8. div#four{background-image: url('путь к картинке'); float : left;clear:left; }

    ОтветитьУдалить
  9. я так и сделал, но у меня ничего не вышло...
    в чем может быть причина

    http://narod.ru/disk/23089906000/Exten.zip.html

    ОтветитьУдалить
  10. div#three{background-image : url('http://i074.radikal.ru/1007/4f/2a9fb3be4f98.jpg');float : left;}
    вот в этой строчке была лишняя скобка.
    Чтобы менялся фон нужно переписать javascript
    function aa()
    {
    var el = document.getElementsByClassName('div');
    for(a in el)
    {
    el[a].onmouseover = function()
    {
    color = this.style.backgroundColor;
    img=this.style.backgroundImage;
    this.style.backgroundColor = "blue";
    this.style.backgroundImage = "url('')";
    }

    el[a].onmouseout = function()
    {
    this.style.backgroundColor = color;
    this.style.backgroundImage=img;
    }
    }
    }

    ОтветитьУдалить
  11. http://s46.radikal.ru/i113/1008/c7/6a327fa31b21.jpg

    ОтветитьУдалить
  12. могу, есть уже наработки?
    завтра посмотрю, сегодня уже поздно

    ОтветитьУдалить
  13. сраная запятая

    ОтветитьУдалить
  14. Не всплывает popup, хотя манифест вроде правильный.. Вот код:
    {
    "name": "Hubble pictures extension", // Название расширения
    "version": "1.0", // Номер версии
    "description": "Hubble pictures extension", // Описание расширения
    "manifest_version": 2 ,

    "permissions": [
    "tabs", // Разрешить расширению работать с вкладками
    "http://userapi.com/*" // Разрешить расширению обращаться к указанному адресу
    ],

    "browser_action": { // Элементы браузера
    "default_title": "Hubble", // Название кнопки
    "default_icon": "icon.png", // Иконка для кнопки
    "popup": "popup.html" // Всплывающее окно
    }

    }

    ОтветитьУдалить
  15. скажите пожалуйста а куда устанавливаются расширения?

    ОтветитьУдалить