Сами расширения (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/.... Скачивайте и распаковывайте.
Доброе время суток. Если вам не трудно, не могли бы помочь мне разобраться с моим расширением. я только недавно попробовал этим заниматься, и у меня есть кое какая проблема. Надеюсь вам не составит труда разобраться с ней. Тут по ссылке есть мое расширение и описание проблемы. http://narod.ru/disk/21672112000/my%20ext.rar.html
ОтветитьУдалитьСпасибо за внимание.
исправил, нужно было один общий блок
ОтветитьУдалитьвот исходник:
http://narod.ru/disk/21705868000/index.rar.html
у меня есть папка в которой есть:
ОтветитьУдалить- manifest.json
- popup.html
- icon.png
А как создать файл *.crx ?
В хроме:
ОтветитьУдалитьРасширения, справо плюсик "режим разработчика", загрузить распакованное расширение.
Или запаковать в zip или rar (не помню) и переименовать
Спасибо =)
ОтветитьУдалитьЯ прочитал вашу статью, очень понравилась, просто и доступно =)
Не подскажете где можно еще поучиться писать расширения на Chrome?
После статьи так воодушевился что хочу что нить еще написать!!
Вот только что?! Идей пока нету..
P.S. Разобрал пример Данила(выше), изменил цвета, сделал так чтоб поле было 3х3 и добавил иконку =)
Последний вопрос:
Как можно "разбирать(на архив zip)" расширения с https://chrome.google.com/extensions/
когда скачиваю, сами файлы в "загрузках" исчезают...
Конкретных статей не подскажу.
ОтветитьУдалитьПо сути это обычный html + javascript, как простой сайт. В основном парсится какой-нибудь сайт и информация выводится в удобном компактном виде.
Главное чтобы была идея.
На счёт сохранения расширения: правой кнопкой по "установить" (в extensions.google.com) и затем "сохранить ссылку как"
Спасибо за ответ =)
ОтветитьУдалитья тут продолжаю баловаться с примером Данила(выше), и подумал, а можно ли в места обычного цвета(1), вставить туда картинки? какой тег для этого нужен?
div#four{background-color : green(1) ; float : left;clear:left;}
div#four{background-image: url('путь к картинке'); float : left;clear:left; }
ОтветитьУдалитья так и сделал, но у меня ничего не вышло...
ОтветитьУдалитьв чем может быть причина
http://narod.ru/disk/23089906000/Exten.zip.html
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;
}
}
}
http://s46.radikal.ru/i113/1008/c7/6a327fa31b21.jpg
ОтветитьУдалитьмогу, есть уже наработки?
ОтветитьУдалитьзавтра посмотрю, сегодня уже поздно
пока нету... думаю..
ОтветитьУдалитьсраная запятая
ОтветитьУдалитьНе всплывает 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" // Всплывающее окно
}
}
скажите пожалуйста а куда устанавливаются расширения?
ОтветитьУдалить