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

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

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

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

Для меня всем этим критериям соответствует Chrome от Google, но и его функциональности мне не всегда хватает. Именно для повышения функциональности и существуют расширения.

На https://chrome.google.com/webstore можно найти сотни расширений для любых нужд, но сделать что то самому куда приятнее.

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

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

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

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

  2. Манифест. Создаем файл manifest.json.Мой файл имеет следующее содержание:
    {
        "name" : "SochialHub", // Название расширения
        "version" : "1.0", // Номер версии
        "description" : "Быстрай переход к самым популярным социальным сервисам", // Описание расширения
    "browser_action" :
    {
            "default_title" : "SochialHub",
            "default_icon" : "icon.jpg",
            "popup": "popup.html" //Страничка расширения
        },
    "icons": //Иконки
    {
    "32":"32.png",
        "48":"48.png",
        "128":"128.png"
    
      },
    "permissions":
    [
      "tabs"// Разрешить расширению работать с вкладками
    ]
    }
    
  3. Страница.Теперь создаем страничку popup.html, которая и станет самим расширением. Моя выглядит так:
    <html>
    <head>
    <title>SochialHub</title>
    </head>
    <body background="fon.jpg">
    <div align="center">
    <img src="SochialHub.png" usemap="#Карта">
    <map name="Карта">
    <area href="http://vk.com" shape="rect" coords="6,7,290,70" title="Вконтакте" target="_blank">
    <area href="http://www.myspace.com/" shape="rect" coords="297,7,485,70" title="MySpace" target="_blank">
    <area href="https://twitter.com/" shape="rect" 	coords="6,77,164,236" title="Twitter" target="_blank">
    <area href="http://www.facebook.com/" shape="rect" coords="174,79,488,180" title="facebook" target="_blank">
    <area href="http://www.mail.ru/" shape="rect" coords="6,243,163,280" title="Mail.ru" target="_blank">
    <area href="http://www.odnoklassniki.ru/" shape="rect" coords="172,190,263,281" title="Одноклассники" target="_blank">
    <area href="http://www.linkedin.com/home" shape="rect" coords="6,290,263,351" title="Linkedin" target="_blank">
    <area href="https://plus.google.com/?hl=ru" shape="rect" coords="273,190,488,351" title="Google+" target="_blank">
    <area href="https://delpix.ru" shape="rect" coords="1,1,6,6" title="DELPIX.RU" target="_blank">
    </map>
    </div>
    </body>
    </html>
    
  4. Иконки. Мне хотелось сделать красивое расширение, но таланта и фантазии у меня маловато, так что иконки выглядят так: Как сделать простое расширение для Google Chrome
  5. Итог. Вот в принципе и все.

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

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

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

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

Запись опубликована в рубрике Без рубрики. Добавьте в закладки постоянную ссылку.