Как создать расширение?

Как создать расширение?

Основано на видео с канала «Traversy Media»

Расширения и плагины — полезные дополнения к уже существующим функциям на сайте и в браузере. С их помощью можно записывать аудио и видео с экрана, включать поиск ошибок, а также многое другое.
В этой статье мы рассмотрим создание самого простого расширения — запускатора избранных сайтов. Хотя приложение и будет примитивным, оно всё-таки раскроет процесс создания и загрузки расширения для google Chrome.

Желательно знать HTML, CSS и JS (если придётся расширить набор функций) на самом базовом уровне, чтобы понимать материал лучше, но в любом случае мы будем объяснять код.

В каждом расширении для Chrome должен быть файл manifest.json. Он служит только для описания функций приложения, общего описания, номера версии и разрешений. Более подробно вы сможете ознакомиться с этим файлом в блоге команды разработчиков Chrome.

Давайте же внесём свой вклад в развитие web

Здесь всё очень просто:

{ «manifest_version»: 2, «name»: «Tproger Launcher», «description»: «Запускатор представительств Tproger», «version»: «1.0.0», «icons»: {«128»: «icon_128.png»}, «browser_action»: { «default_icon»: «icon.png», «default_popup»: «popup.html» }, «permissions»: }

После того как мы описали наше расширение в файле manifest.json, можно благополучно переходить к следующему этапу, а именно к разметке.

Для начала давайте напишем базовый HTML-код:

<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>

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

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Tproger Media Quick Launcher</title> <!—ссылаемся на шрифты, используемые в документе—> <link href=»https://fonts.googleapis.com/css?family=Open+Sans» rel=»stylesheet» type=»text/css»> <!—здесь мы ссылаемся на стили, которые будем использовать в документе, а именно стиль иконок—> <link href=»https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css» rel=»stylesheet» integrity=»sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN» crossorigin=»anonymous»> </head> <body> </body> </html>

Не забывайте указывать кодировку, иначе не отобразятся кириллические буквы.

Перейдём ко второму блоку кода, а именно к тегу body и его содержимому.

Так как наше расширение — модальное окно, давайте соответствующим образом назовём контейнеры. Сначала добавим контейнер шапки расширения, в которой укажем ссылку к иконке, напишем название и добавим номер версии.

<!—объяснение тега—> <body> <!—контейнер, содержащий название, логотип и номер версии—> <div class=»modal-header»> <h1 class=»logo»> <img class=»logo-icon» src=»images/tproger-logo.png»> Запускатор Tproger <span class=»version»>(1.0.0)</span> </h1> </div> <!—Конец контейнера—>

Переходим к следующему контейнеру. Он содержит описание функций расширений.

<!—контейнер, содержащий описание функций расширения—> <div class=»modal-content»> <p>Быстрый доступ к контентным площадкам Типичного Программиста</p> </div> <!—Конец контейнера—>

Далее следует контейнер modal-icons, внутри которого ещё 5 контейнеров.

<!—контейнер, содержащий контейнеры с иконками—> <div class=»modal-icons»> <div class=»flex-container»> <div class=»flex»> <!—target=»_blank» — это служит для открытия новой вкладки при клике по иконке—> <a href=»#» target=»_blank»> <i class=»fa fa-globe»></i> </a> </div> <div class=»flex»> <a href=»#» target=»_blank»> <i class=»fa fa-telegram»></i> </a> </div> <div class=»flex»> <a href=»#» target=»_blank»> <i class=»fa fa-facebook»></i> </a> </div> <div class=»flex»> <a href=»#» target=»_blank»> <i class=»fa fa-vk»></i> </a> </div> </div> </div>

Для каждой иконки мы выделили отдельный контейнер с классом flex, чтобы знать, к каким элементам будем применять Flexbox.

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

Стили

Чтобы расширение выглядело красивее и было удобнее, чем сейчас, нужно добавить стили на CSS.

<style> /* Модальная структура документа */ /*общие настройки для всего документа*/ html, body { font-family: ‘Open Sans’, sans-serif; font-size: 14px; margin: 0; min-height: 180px; padding: 0; width: 380px; } /*задаём настройки для заголовков первого уровня*/ h1 { font-family: ‘Menlo’, monospace; font-size: 22px; font-weight: 400; margin: 0; color: #2f5876; } a:link, a:visited { color: #000000; outline: 0; text-decoration: none; } /*задаём ширину картинки*/ img { width: 30px; /*ширина изображений*/ } .modal-header { align-items: center; /*выравнивание элементов по центру*/ border-bottom: 0.5px solid #dadada; /*свойства нижней разделительной линии*/ height: 50px; } .modal-content { padding: 0 22px; /*отступы сверху и снизу, сверху и слева*/ } .modal-icons { border-top: 0.5px solid #dadada; /*свойства верхней разделительной линии*/ height: 50px; width: 100%; } .logo { padding: 16px; /*отступы со всех сторон*/ } .logo-icon { vertical-align: text-bottom; /*выравнивание по нижней части текста*/ margin-right: 12px; /*задётся отступ элементов от изображения*/ } .version { color: #444; font-size: 18px; }

Основные настройки документа заданы, давайте перейдём к следующему фрагменту кода, в котором как раз и будет применён Flexbox, о котором шла речь в начале статьи.

.flex-container { display: flex; /*отображает контейнер в виде блочного элемента*/ justify-content: space-between; /*равномерное выравнивание элементов*/ padding: 10px 22px; } /*задаём настройки для контейнеров с иконками*/ .flex { opacity: 1; /*параметр непрозрачности иконок*/ width: 120px; } .flex:hover { opacity: 0.4; /*уровень непрозрачности при наведении курсора на элемент*/ } .flex .fa { font-size: 40px; color: #2f5876; } </style> <!—конец объяснения блока со стилями—>

Мы постарались как можно подробнее объяснить в комментариях относительно сложные моменты. А сейчас нам нужно лишь загрузить наше расширение в браузер Chrome и оно будет работать, а если пройдёт модерацию, то появится в магазине расширений (плагинов).

Теперь давайте добавим файл с расширением .js, если вдруг потребуется расширить функции дополнения для браузера.

<head> <meta charset=»utf-8″> <title>Tproger Media Quick Launcher</title> <link href=»https://fonts.googleapis.com/css?family=Open+Sans» rel=»stylesheet» type=»text/css»> <link href=»https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css» rel=»stylesheet» integrity=»sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN» crossorigin=»anonymous»> <style type=»text/css»> /*здесь мы прописали стили*/ </style> <!—конец объяснения блока со стилями—> <!—здесь ссылаемся на файл .js в нашей папке с кодом и изображениями—> <script src=»popup.js»></script> </head>

Проверка кода и публикация

Прежде чем опубликовать, проверьте ещё раз весь код. Если вы делали всё так, как мы, то у должно было получиться следующее:

<!DOCTYPE html> <html> <!—Начало первого блока объяснения кода—> <head> <meta charset=»utf-8″> <title>Запускатор Tproger</title> <!—ссылаемся на шрифты, используемые в документе—> <link href=»https://fonts.googleapis.com/css?family=Open+Sans» rel=»stylesheet» type=»text/css»> <!—здесь мы ссылаемся на стили, которые будем использовать в документе, а именно стиль иконок—> <link href=»https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css» rel=»stylesheet» integrity=»sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN» crossorigin=»anonymous»> <!—начало блока со стилями для страницы—> <style> /* Модальная структура документа */ /*общие настройки для всего документа*/ html, body { font-family: ‘Open Sans’, sans-serif; font-size: 14px; margin: 0; min-height: 180px; padding: 0; width: 380px; } /*задаём настройки для заголовков первого уровня*/ h1 { font-family: ‘Menlo’, monospace; font-size: 22px; font-weight: 400; margin: 0; color: #2f5876; } a:link, a:visited { color: #000000; outline: 0; text-decoration: none; } /*задаём ширину картинки*/ img { width: 30px; /*ширина изображений*/ } .modal-header { align-items: center; /*выравнивание элементов по центру*/ border-bottom: 0.5px solid #dadada; /*свойства нижней разделительной линии*/ height: 50px; } .modal-content { padding: 0 22px; /*отступы сверху и снизу, сверху и слева*/ } .modal-icons { border-top: 0.5px solid #dadada; /*свойства верхней разделительной линии*/ height: 50px; width: 100%; } .logo { padding: 16px; /*отступы со всех сторон*/ } .logo-icon { vertical-align: text-bottom; /*выравнивание по нижней части текста*/ margin-right: 12px; /*задётся отступ элементов от изображения*/ } .version { color: #444; font-size: 18px; } .flex-container { display: flex; /*отображает контейнер в виде блочного элемента*/ justify-content: space-between; /*равномерное выравнивание элементов*/ padding: 10px 22px; } /*задаём настройки для контейнеров с иконками*/ .flex { opacity: 1; /*параметр непрозрачности иконок*/ width: 120px; } .flex:hover { opacity: 0.4; /*уровень непрозрачности при наведении курсора на элемент*/ } .flex .fa { font-size: 40px; color: #2f5876; } </style> <!—конец объяснения блока со стилями—> <script src=»popup.js»></script> </head> <!—объяснение тега <body>—> <body> <!—контейнер, содержащий название, логотип и номер версии—> <div class=»modal-header»> <h1 class=»logo»> <img class=»logo-icon» src=»images/tproger-logo.ico»>Запускатор Tproger <span class=»version»>(1.0.0)</span> </h1> </div> <!—Конец контейнера—> <!—контейнер, содержащий описание функций расширения—> <div class=»modal-content»> <p>Быстрый доступ к контентным площадкам Типичного Программиста</p> </div> <!—Конец контейнера—> <!—контейнер, содержащий контейнеры с иконками—> <div class=»modal-icons»> <div class=»flex-container»> <div class=»flex»> <!—target=»_blank» — это служит для открытия новой влкадки при клике по иконке—> <a href=»#» target=»_blank»> <i class=»fa fa-globe»></i> </a> </div> <div class=»flex»> <a href=»#» target=»_blank»> <i class=»fa fa-telegram»></i> </a> </div> <div class=»flex»> <a href=»#» target=»_blank»> <i class=»fa fa-vk»></i> </a> </div> <div class=»flex»> <a href=»#» target=»_blank»> <i class=»fa fa-facebook»></i> </a> </div> </div> </div> </body> </html>

После проверки можно приступать к публикации расширения. Для этого у вас должны быть следующие файлы и папки:

И далее следуем инструкциям на скриншотах ниже.

Для загрузки расширения в магазин нам нужно зайти в меню, навести мышку на «дополнительные настройки», а затем выбрать «расширения» или ввести в адресной строке chrome://extensions/.

Далее нажимаем на «загрузить распакованное расширение» и выбираем папку с файлами.

После того, как вы выбрали папку с файлами, она загрузится в браузер и превратится в расширение, которое будет доступно за пределами правой части адресной строки.

Надеемся, что всё работает правильно и вы понимаете структуру расширений для Chrome.

Хинт для программистов: если зарегистрируетесь на соревнования Huawei Honor Cup, бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.

В поисках новых площадок для деятельности, я обратил внимание на «виджеты» хрома, которыми пользуюсь давно, но никогда не придавал им значения. Тут же захотелось попробовать что-нибудь реализовать.
Идеей стало создание таск-менеджера для разработчика (и не только), который был бы всегда под рукой. В нем должны были отобразиться актуальные тикеты trello и jira, реквесты в gitlab и т.п. Это те вещи, которые я обычно искал, набирая ключевые слова в адресную строку браузера, типа «jira PM-20».

Расширение для хрома
Я точно знал, что расширения в браузерах — это обычные html-странички, подпитанные js-скриптами. Но при этом не имел представления, как их создавать. Первое, что выдал мне гугл по этому вопросу — статью на medium, а не официальную документацию. Это было даже лучше, т.к. это была обзорная статья простейшего виджета от идеи до публикации.
Статья дала мне представление о том, что разработка «виджета» — дело не слишком хитрое. Я тут же приступил к созданию «hello world!».

Структура


Оказалось, что нужно создать mainfest.json в корне проекта. Он описывает расширение: название, описание, автора, иконки, разрешения и т.п. Первую версию я сделал без изучения документации.

Первый manifest.json
Расширения позволяют запускать js-скрипты в фоне, которые делают что-то даже когда пользователь ими не пользуется. Этот функционал я пощупал очень поверхностно, просто, чтобы понять, как он может работать. Он просто менял заголовок в <h1> «виджета».
Интерес для меня представляла сама страничка html, которая показывается, при нажатии на иконку в браузере, она называется popup.html в моем манифесте.
Эту страничку, кстати, можно открыть в браузере как и любой сайт, только в качестве «протокола» будет chrome-extension, например chrome-extension://id-виджета-в-webstore/popup.html. Таким образом, вы можете просмотреть исходники любого расширения, что у вас установлено.
Работает она точно так же, как и любой веб-сайт, за исключением пары возможностей, например: переходы по ссылкам работают только с target=»_blank». Есть и технические ограничения, управляемые разработчиком, например Content Security Policyили permissions к функционалу браузера, которые запрашиваются у пользователя.

Запустить расширение

После создания папки с manifest.json и popup.html внутри, можно уже запустить её как виджет. На служебной страничке хрома chrome://extensions есть кнопка Загрузить распакованное расширение. С помощью нее выбираем папку

и расширение тут же отображается в списке «виджетов” рядом с адресной строкой.
С этого момента расширение уже можно тестировать: изменять popup.html, и видеть изменения, переоткрыв «виджет” нажатием на его иконку.

Публикация в webstore

Начнем с того, что возможность публикации первых 20 расширений стоит 5$. Происходит она в dashboard вебстора, для этого потребуется залить zip-архив содержимого папки расширения и поработать над рекламными текстами и картинками.

Подготовка к публикации расширения

Первая часть описания расширения будет отображаться из свойства description манифеста расширения, остальное дописывается в Detailed description в управлении расширением на webstore.
Расширение имеет гибкие настройки публикации: можно выбрать регионы мира для публикации, а также видимость расширения.

Нужно помнить, что если вы выбираете для публикации только РФ, то в остальных странах расширение не появится. Я наткнулся на это находясь в Таиланде: не мог понять почему, спустя 2 дня, расширение не ищется в сторе даже по прямому названию.

Продвинутые опции

Я описал необходимые шаги для публикации простейшего расширения, чтобы процесс был понятен. Теперь хочу осветить некоторые детали для написания более сложного «виджета».

Суть моего расширения в использовании чужих API для получения информации. Для этого мне нужен как минимум localStorage, чтобы запоминать токены авторизации.
Я воспользовался «permissions»: в своем манифесте.

OAuth2

В большинстве случаев разработчики API предлагают OAuth2 протокол для авторизации.
Если вы не знакомы с этим протоколом: он предлагает безопасный процесс аутентификации и авторизации приложения от лица пользователя без доступа к логину/паролю со стороны этого приложения.
Протокол описывает несколько способов для авторизации. В идеале нужно использовать Authorization Code Flow, которое предполагает наличие бэкенда у приложения; API редиректит пользователя с Auth-кодом на приложение, а приложение на бэкенде обменивает его на токен.
Есть также упрощенный Implicit Flow, позволяющий авторизовываться без бэкенда: API после авторизации редиректит пользователя на приложение с токеном в URL.
Как же пользоваться этой «редиректной” авторизацией в расширении хрома? Заводить веб-сайт? Оказывается, что не обязательно.

Мои костыли

Изначально я взялся интегрироваться с Gitlalb и Trello. С Gitlab все оказалось «просто”: отправляешь пользователя в админку к его Gitlab, чтобы он сделал токен и передал его тебе. С таким подходом долго возиться не пришлось, я просто сделал поле для ввода токена и описал как его получить.
Trello же предоставил OAuth2, я сразу же заметил, что в нем есть implicit flow, но немного странный: токен отображается на их странице /approve в таком виде

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

Правильный способ

Как обычно, хорошее решение приходит не сразу. Я на него наткнулся, когда начал интеграцию с Jira, которая имеет только Authorization Code Flow.
Как-то случайно я наткнулся на chrome.identity: функционал браузера, уже реализовавший все «костыли” для авторизации. Этот функционал требует включения identityв разрешениях манифеста. Я дополнил свой манифест: «permissions»: .
Как я уже и говорил: у каждого расширения есть URL типа chrome-extension://<id>/. Такой адрес ни для чего не годится, но chrome.identity предоставляет настоящий URL https://<app-id>.chromiumapp.org/*, который можно передать в API с OAuth2 в качестве redirectUrl. API, после авторизации, отправит пользователя на него с дополнительными параметрами, будь то authCode или token, а хром их подхватит и передаст в ваш js-callback расширения.
Для этого нужно воспользоваться chrome.identity.launchWebAuthFlow(), которое открывает страницу авторизации API в новом окне:
chrome.identity.launchWebAuthFlow( { ‘url’: JiraApi.url(), ‘interactive’: true }, jira.callback() );
Сразу же скажу: это окно выглядит не совсем как окно основного браузера, что у меня вызвало бы вопросы, будь я обычным пользователем, т.к. оно похоже на какой-то фишинговый блок, а не окно. Может быть это только мое восприятие, может быть так только в моей операционке.
Окно авторизации chrome.identity.launchWebAuthFlow

Другие опции

Когда появляется идея реализовать какой-либо функционал, рекомендую гуглить chrome API, т.к. в нем уже достаточно много подобных фич, которые облегчат вам работу. Например полный manifest.json впечатляет:
{ // Required «app»: { «background»: { // Optional «scripts»: } }, «manifest_version»: 2, «name»: «My App», «version»: «versionString», // Recommended «default_locale»: «en», «description»: «A plain text description», «icons»: {…}, // Optional «action_handlers»: , «author»: …, «automation»: …, «bluetooth»: { «uuids»: }, «commands»: {…}, «current_locale»: …, «event_rules»: , «externally_connectable»: { «matches»: }, «file_handlers»: {…}, «file_system_provider_capabilities»: { «configurable»: true, «multiple_mounts»: true, «source»: «network» }, «import»: , «key»: «publicKey», «kiosk»: { «always_update»: …, «required_platform_version»: … }, «kiosk_enabled»: true, «kiosk_only»: true, «kiosk_secondary_apps»: …, «minimum_chrome_version»: «versionString», «nacl_modules»: , «oauth2»: …, «offline_enabled»: true, «optional_permissions»: , «permissions»: , «platforms»: …, «requirements»: {…}, «sandbox»: , «short_name»: «Short Name», «signature»: …, «sockets»: { «tcp»: { «connect»: «*» }, «udp»: { «send»: «*» } }, «storage»: { «managed_schema»: «schema.json» }, «system_indicator»: …, «update_url»: «http://path/to/updateInfo.xml», «url_handlers»: {…}, «usb_printers»: { «filters»: }, «version_name»: «aString», «webview»: {…} }
Предварительно разбираться со всеми возможностями может оказаться слишком расточительным, т.к. их огромное количество.
К тому же только js-сторона расширения сама по себе может увеличиться до больших размеров.
Моя текущая схема

Продвижение

Немного стоит упомянуть продвижение своего расширения. Особенностью «виджетов” является то, что они направлены на пользователей десктопов, которые в последние годы успели стать меньшинством.
Я попробовал контекстную рекламу и рекламу в социальных сетях. Получил небольшой опыт и нулевую конверсию.

Контекстная реклама

Мой опыт пока ограничился одной площадкой, не могу говорить за остальные, но думаю, там то же самое.
Оказывается, что в контекстной рекламе яндекса нельзя настраивать таргетинг по устройствам и браузерам. Так что если ваше расширение только для хрома, показывать рекламу придется и людям, сидящим на других браузерах, переходы которых принесут только лишние убытки.
Я не хотел делать отдельный сайт для своего расширения, поэтому рекламировал его страницу в webstore. Минус этого подхода в том, что ты можешь доверять только статистике рекламного кабинета и не можешь увидеть как пользователи ведут себя на рекламируемой странице.

Социальные сети

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

Мысли напоследок

Я считаю, что расширения это мощный инструмент для людей, работающих в интернете, т.к. в браузере мы проводим много времени, которое иногда хочется оптимизировать. Например виджет гугл-переводчика, переводящий текст при выделении, хороший пример оптимизации. Решение проблемы огромного количества открытых вкладок «на попозже” я тоже решил с помощью виджета.
Написание расширений дает опыт в изучении подводной части айсберга «Chrome” и написании «фронтенда” (особенно если вы бэкенд-разработчик). Расширения можно писать на том же React JS с которого можно перекинуться на написание приложений под мобильные устройства. Процесс написания и того и того очень похожий.

На хабре уже есть несколько статей о создании расширений для хрома, поделюсь своим опытом, затронув основные вещи и места, в которых у меня возникли трудности.
Что понадобится для создания расширения в двух словах:
1) Базовые знания Javascript
2) Базовые знания HTML
3) 5$
Покажу создание расширения для хрома на примере своего, созданного для подсчета «потерянного времени» в интернете. То есть это расширение считает время, проведенное на сайтах с возможностью определения посещенных сайтов по категориям: полезное время, либо потерянное время.
Итак, я начинаю создание расширения с создания папки самого расширения, в которую будем класть все создаваемые нами файлы. Назову её «losttime». Далее, я создаю файл manifest.json, выглядит он следующим образом:
manifest.json

{ «manifest_version»: 2, «name»: «Lost Time», «version»: «1.0», «icons»: { «128»: «» }, «content_scripts»: , «js»: } ], «background»: { «scripts»: }, «permissions»: , «browser_action»: { «default_title»: «LostTime», «default_icon»: «», «default_popup»: «popup.html» } }
Некоторые из строк должны быть интуитивно понятны, но что обязательно нужно знать:
— Значение manifest_version должно быть обязательно «2»;
— В content_scripts пишем, какой скрипт будет запускаться на всех страницах отдельно;
— В background пишем общий скрипт(фоновый скрипт), который запускается при запуске браузера;
— В permissions пишем адрес сайта, с которого будет браться информация.
Все, что буду использовать я, не обязательно использовать Вам, если вам это по логике просто не нужно. .
То самое окошко, которое Вы можете видеть по клику на иконку расширения — это страница: popup.html.

Она у меня выглядит следующим образом:
popup.html
<!doctype html> <html> <head> <title>Потерянное время LostTime</title> <script src=»jquery.js» type=»text/javascript»></script> <!— Подключаю jquery —> <link href=»css.css» rel=»stylesheet» type=»text/css»/><!— Подключаю стили—> </head> <body> <div id=»options»><!— меню —> <a href=»/popup.html»><img class=’img’ src=»» Title = «Короткая статистика за сегодня»></a> <a href=»/options.html»><img class=’img’ src=»images/options.png» Title=»Настройки программы»></a> <a href=»/stat.html»><img class=’img’ src=»images/stat.png» Title=»Подробная статистика о посещаемости»></a> </div> <div id=»dannie»></div> <!— в этот блок буду загружать данные, которые будут показываться пользователю—> <script src=»popup.js»></script><!— скрипт, выполняющийся при нажатии на иконку расширения—> </body> </html>
Чтобы было понятнее, описание кода вставил в самом HTML. Меню я организую просто: на картинку ставлю внутреннюю ссылку расширения.
Раз уж начал про popup.html, то расскажу сразу и о popup.js
Выглядит он у меня весьма просто:
popup.js
var xhr = new XMLHttpRequest(); xhr.open(«GET», «http://losttime.su/?tmpl=login&token=»+localStorage, true); // тут происходит ГЕТ запрос на указанную страницу xhr.onreadystatechange = function() { if (xhr.readyState == 4) // если всё прошло хорошо, выполняем, что в скобках { var dannie = document.getElementById(‘dannie’); dannie.innerHTML = xhr.responseText; // добавляем в блок с id=dannie полученный код } } xhr.send();
Описание кода также вставил.
Именно описанная выше конструкция позволяет вытащить и вывести содержание с Вашего, а может и не с Вашего сайта. Но, что важно знать:
— В файле манифеста обязательно в поле permissions пишем адрес сайта, с которого будет браться информация.
— Файл popup.js связан с фоновым скриптом background.js, т.к. данные, занесенные в локальное хранилище на background.js, видны и на popup.js.
Перед тем, как рассмотреть файл фонового скрипта background.js, рассмотрим файл скрипта, который запускается на каждой странице отдельно: content.js
У меня он выглядит так:
content.js
function onBlur() { // окно теряет фокус chrome.runtime.sendMessage({site:sait,time:localStorage}); // отправка сообщения на background.js localStorage = ‘0’; } window.onblur = onBlur; // если окно теряет фокус function sec() //выполняется каждую секунду { if(document.webkitVisibilityState == ‘visible’)//если страница активна { localStorage = parseInt(localStorage,10) +1; // обновляем данные о сайте в локальном хранилище } } var sait=location.hostname; // на каком сайте находится скрипт localStorage = ‘0’; setInterval(sec, 1000);// запускать функцию каждую секунду
Наиболее интересный момент из моего скрипта, я считаю, должен быть:
chrome.runtime.sendMessage({site:sait,time:localStorage});
Тут происходит отправка сообщения background скрипту, а именно две переменные: site:sait — содержит адрес сайта, на котором скрипт
time:localStorage — количество времени, проведенное на этом скрипте.
Далее, рассмотрим фоновый скрипт background.js, где и происходит приём данных, а точнее рассмотрим саму функцию приёма данных.
background.js
chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { var a = request.site; // данные о сайте var b = request.time; // данные о проведенном времени // тут делаем с этими данными что хотим. });
Вот, собственно, и она. Разбирать подробно ничего не стану, т.к. это в принципе и не нужно. Достаточно знать наглядный пример, чтобы осуществить задуманное. Если в скрипте background.js добавить какие-либо данные в локальное хранилище( а также куки, web sql), то эти же данные можно будет использовать и в popup.js скрипте.
Вот собственно всё, что я хотел поведать о создании расширения, но я затрону еще один момент, в котором у меня возникли трудности.
На странице настроек мне необходимо было организовать перетаскивание сайтов в разные колонки.

Т.к. данные вставляются посредством InnerHtml, то данная возможность просто так не появится. Вот, что пришлось организовать:
$(‘#dannie’).on(‘mouseover’, ‘.sait’, function( ) { $(this).css({‘border’:’3px solid #ffffff’}); }); $(‘#dannie’).on(‘mouseout’, ‘.sait’, function( ) { $(this).css({‘border’:’3px solid black’}); }); $(‘#dannie’).on(‘mousedown’, ‘.sait’, function( ) { $(this).css({‘border’:’3px solid black’}); }); $(‘#dannie’).on(‘mouseover’, ‘.sait’, function( ) { $(‘.sait’).draggable({ helper:’clone’ }); });
вместо привычного:
$(‘.sait’).mouseover(function(){ $(‘#’+this.id).css({‘border’:’3px solid #ffffff’}); }); $(‘.sait’).mouseout(function(){ $(‘#’+this.id).css({‘border’:’3px solid black’}); }); $(‘.sait’).mousedown(function(){ $(‘#’+this.id).css({‘border’:’0px solid black’}); }); $(‘.sait’).draggable( { helper:’clone’, });
Думаю, объяснять не нужно. Почитать подробнее можете по
Тестирование расширения
Заходим в Настройки — Инструменты — Расширения, жмем на «Загрузить распакованное расширение»
Публикация расширения
Заходим на страницу оплачиваем 5$, публикуем.
Я не останавливаюсь на моментах, с которыми у меня не возникли трудности. А трудности возникли при оплате карточкой:
— В моём случае должен быть подключен 3д пароль.
Если Вам при оплате пишет ошибку, звоните своему банку и узнавайте. Мне за минуту помогли и всё гуд.


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *