Как сделать простое расширение для Google Chrome

Как сделать расширение для Google Chrome

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

Для меня всем этим критериям соответствует Chrome от Google, но и его функциональности мне не всегда хватает. Именно для повышения функциональности и существуют расширения. На https://chrome.google.com/webstore можно найти сотни расширений для любых нужд, но сделать что то самому куда приятнее.

В данной статье я опишу процесс создания простого расширения для браузера Google Chrome. Я постараюсь как можно короче и понятнее объяснить, как писать расширения под этот браузер.

В качестве примера рассматривается очень простой вариант, но потренировавшись и изучив дополнительную литературу можно написать довольно солидные продукты. Итак начнем:

Идея. Мое расширение – это подборка ссылок на популярные социальные сети в графическом виде.

Манифест. Создаем файл manifest.json.Мой файл имеет следующее содержание:

{
    &quot;name&quot; : &quot;SochialHub&quot;, // Название расширения
    &quot;version&quot; : &quot;1.0&quot;, // Номер версии
    &quot;description&quot; : &quot;Быстрай переход к самым популярным социальным сервисам&quot;, // Описание расширения
&quot;browser_action&quot; :
{
        &quot;default_title&quot; : &quot;SochialHub&quot;,
        &quot;default_icon&quot; : &quot;icon.jpg&quot;,
        &quot;popup&quot;: &quot;popup.html&quot; //Страничка расширения
    },
&quot;icons&quot;: //Иконки
{
&quot;32&quot;:&quot;32.png&quot;,
    &quot;48&quot;:&quot;48.png&quot;,
    &quot;128&quot;:&quot;128.png&quot;

  },
&quot;permissions&quot;:
[
  &quot;tabs&quot;// Разрешить расширению работать с вкладками
]
}

Страница.Теперь создаем страничку popup.html, которая и станет самим расширением. Моя выглядит так:

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;SochialHub&lt;/title&gt;
&lt;/head&gt;
&lt;body background=&quot;fon.jpg&quot;&gt;
&lt;div align=&quot;center&quot;&gt;
&lt;img src=&quot;SochialHub.png&quot; usemap=&quot;#Карта&quot;&gt;
&lt;map name=&quot;Карта&quot;&gt;
&lt;area href=&quot;http://vk.com&quot; shape=&quot;rect&quot; coords=&quot;6,7,290,70&quot; title=&quot;Вконтакте&quot; target=&quot;_blank&quot;&gt;
&lt;area href=&quot;http://www.myspace.com/&quot; shape=&quot;rect&quot; coords=&quot;297,7,485,70&quot; title=&quot;MySpace&quot; target=&quot;_blank&quot;&gt;
&lt;area href=&quot;https://twitter.com/&quot; shape=&quot;rect&quot; 	coords=&quot;6,77,164,236&quot; title=&quot;Twitter&quot; target=&quot;_blank&quot;&gt;
&lt;area href=&quot;http://www.facebook.com/&quot; shape=&quot;rect&quot; coords=&quot;174,79,488,180&quot; title=&quot;facebook&quot; target=&quot;_blank&quot;&gt;
&lt;area href=&quot;http://www.mail.ru/&quot; shape=&quot;rect&quot; coords=&quot;6,243,163,280&quot; title=&quot;Mail.ru&quot; target=&quot;_blank&quot;&gt;
&lt;area href=&quot;http://www.odnoklassniki.ru/&quot; shape=&quot;rect&quot; coords=&quot;172,190,263,281&quot; title=&quot;Одноклассники&quot; target=&quot;_blank&quot;&gt;
&lt;area href=&quot;http://www.linkedin.com/home&quot; shape=&quot;rect&quot; coords=&quot;6,290,263,351&quot; title=&quot;Linkedin&quot; target=&quot;_blank&quot;&gt;
&lt;area href=&quot;https://plus.google.com/?hl=ru&quot; shape=&quot;rect&quot; coords=&quot;273,190,488,351&quot; title=&quot;Google+&quot; target=&quot;_blank&quot;&gt;
&lt;area href=&quot;https://delpix.ru&quot; shape=&quot;rect&quot; coords=&quot;1,1,6,6&quot; title=&quot;DELPIX.RU&quot; target=&quot;_blank&quot;&gt;
&lt;/map&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Иконки. Мне хотелось сделать красивое расширение, но таланта и фантазии у меня маловато, так что иконки выглядят так:
Итог. Вот в принципе и все. Мы получили универсальное расширение для Google Chrome Вконтакте, facebook, myspace, mail.ru, Одноклассники, linkedin, Google+ и twitter.

Расширение можно подключить через Настройки -> Расширения, ставим галочку напротив Режим разработчика и жмем Загрузить распакованное расширение.

просмотреть SochialHub

Постовой: мобильный агент

Как сделать простое расширение для Google Chrome |

Рубрики

lf

Архивы