В этой инструкции я покажу, как создать расширение для браузера Google Chrome и при желании опубликовать его в открытом доступе.
33 931 просмотров
Расширение или плагин для Chrome – это приложение, которое добавляет новые возможности браузеру. В магазине Chrome порядка 200 тысяч расширений для разработчиков, маркетологов, дизайнеров и других пользователей браузера.
Больше года назад я заметил, что ссылки «Входящие» и «Написать письмо» на главной странице почты, которой я часто пользуюсь, стали открываться в новом окне. По ответу эксперта стало понятно, что придется привыкать к этому спорному нововведению.
Я привыкнуть не смог: каждый раз возвращаться и закрывать вкладку браузера неудобно. Так появилась идея простого расширения для Chrome, которое вернет прежнее поведение при открытии Входящих и написании нового письма.
SimilarWeb показывает 1,141 млрд посещений главной страницы за август. Если хотя бы 10% из них приходится на десктопный браузер и целевое действие, то это 141 млн открытых вкладок в месяц. На возврат и закрытие вкладки уходит не меньше секунды. Получается, мы собираемся сэкономить 31,5 тысячи человеко-часов в месяц.
Пишем расширение для Chrome, Часть 1 (Программирование вживую)
Шаг 1. Подготовка расширения
Приготовим минимальный стартовый набор.
1. Создайте папку проекта. Назовите ее именем вашего расширения.
2. Создайте javascript-файл, в котором будет реализована логика приложения. Я назвал его app.js.
3. Добавьте в созданный файл команду для тестирования: вывод строки в консоль или в диалоговое окно браузера.
alert(‘Hello from my extension!’);
4. Создайте manifest.json – служебный файл, который должен быть в каждом расширении.
< «manifest_version»: 2, «name»: «Mail link healer», «version»: «1.0», «description»: «Ссылка «Входящие» и «Написать письмо» снова открываются в той же вкладке!», «icons»: < «128»: «128.png» >, «content_scripts»: [ < «matches»: [ «» ], «js»: [ «app.js» ] > ] >
Обязательные параметры, должны быть в каждом manifest.json:
- manifest_version – целое число, обозначает версию формата манифеста. Для современных версий браузера значение равно 2;
- name – название расширения, до 45 символов. К названию стоит подойти ответственно – оно отображается в магазине, при установке и на странице управления расширениями (chrome://extensions); version – строка с версией расширения. Содержит до четырех чисел, разделенных точками, например 2.19.7.0.
- description – простой текст, до 132 символов. Отображается в магазине и на странице управления расширениями;
- icons – список из иконок расширения;
- content_scripts – скрипты, которые загружает приложение. Мы прописали запуск app.js на всех веб-страницах. Позже мы изменим этот параметр, чтобы запускать скрипт только на целевой странице. Строго говоря, в нашем случае content_scripts – обязательный параметр. Если его не задать, расширение не сделает ничего полезного.
5. Подготовьте иконку в формате png размером 128х128 пикселей и положите ее в папку проекта. Эта версия отображается при установке и в магазине расширений. Рекомендуют также добавить иконку размером 48х48 пикселей – она отображается на странице управления расширениями. И можно добавить версию 16х16 пикселей, которая будет использоваться как фавикон.
К этому моменту в нашем проекте есть иконка расширения, manifest.json со служебной информацией и app.js, в котором позже появится код приложения.
. ├── 128.png ├── app.js ├── manifest.json
Примечание: расширение может состоять из нескольких JS-файлов, HTML-верстки и CSS-стилей.
Теперь можно проверить, что мы выполнили минимальные требования к расширению.
Шаг 2. Промежуточное тестирование
1. Войдите в свой аккаунт в браузере Chrome.
2. Перейдете на страницу chrome://extensions.
3. В правом верхнем углу включите Режим разработчика.
4. Нажмите Загрузить распакованное расширение и выберите папку проекта. В результате вы увидите похожую картинку:
Расширение после загрузки в браузер.
5. В новой вкладке браузера откройте любую веб-страницу. Отлично, работает!
alert из app.js сработал. Можно двигаться дальше.
Теперь мы готовы добавить полезное действие.
Шаг 3. Код приложения
Проверим код ссылок «Входящие» и «Написать письмо» на странице почты с помощью инструментов разработчика браузера. Нажимаем правую кнопку на ссылке и выбираем Посмотреть код. Видно, что ссылки открываются в новой вкладке из-за атрибута target=”_blank”.
Кусочек кода в этой рамке доставляет столько неудобств. Избавимся от него!
Получается, с помощью javascript нам нужно выбрать две ссылки и удалить этот атрибут.
1. В app.js сохраните ссылки в переменные:
const inboxLink = document.getElementById(‘mailbox:unreadEmails:link’); // ссылка на Входящие const composeLink = document.getElementById(‘mailbox:write_letter’); // ссылка «Написать письмо»
Здесь мы выбираем элементы по их идентификатору (id).
2. Если такие ссылки найдены, удалите у них атрибут target.
if (inboxLink composeLink) < // если ссылки есть на странице // удаляем у них атрибут ‘target’ inboxLink.removeAttribute(‘target’); composeLink.removeAttribute(‘target’); >
Похоже, этого кода достаточно для решения проблемы.
Заодно давайте пропишем в manifest.json правило, по которому расширение будет запускать наш скрипт только на целевой странице. Для этого в параметре content_scripts в ключе matches пропишем конкретный URL:
«content_scripts»: [ < «matches»: [ «https://mail.ru/*» ], «js»: [ «app.js» ] >]
Звездочку в конце URL я поставил, чтобы скрипт срабатывал на всех страницах, начинающихся с https://mail.ru/.
Кстати, после обновления расширения стоит обновить версию и в manifest.json:
«version»: «1.1»,
После внесения правок важно обновить расширение в браузере. Для этого нажмите на стрелку на странице управления расширениями (chrome://extensions/).
Быстрый способ обновить расширение.
Готово! Проверим расширение в боевых условиях.
Шаг 4. Финальное тестирование
Открываем целевую страницу и переходим по ссылкам «Входящие» и «Написать письмо». Победа! Ссылки открываются в той же вкладке, как в старые добрые времена.
Шаг 5. Публикация расширения
Этот шаг необязательный. Во-первых, возможно, вы не хотите делать доступным для всех свое расширение. А во-вторых, возможно, не захотите платить за это $5. Такой регистрационный сбор должен оплатить разработчик Chrome Web Store.
- Создайте zip-архив с файлами проекта.
- Зарегистрируйтесь как разработчик Chrome Web Store. Для этого войдите в консоль разработчика под своим аккаунтом Chrome, примите условия соглашения и Политику конфиденциальности.
- Оплатите регистрационный сбор $5. Оплатить можно картой, как в обычных интернет-магазинах.
- На дашборде разработчика в разделе Аккаунт добавьте адрес электронной почты. Без этого не получится отправить расширение на проверку.
- В личном кабинет разработчика нажмите Добавить продукт и загрузите zip-архив проекта.
- В разделе Описание продукта заполните описание расширения, выберите категорию и язык. Добавьте хотя бы один скриншот расширения.
- В разделе Конфиденциальность коротко опишите единственное назначение расширения, обоснование для использования разрешения и отметьте, что не используете разрешение «удаленный код».
- В разделе Цель и распространение задайте, кому будет доступно расширение.
- Нажмите Отправить на проверку в правом верхнем углу.
Это всё. Остается ждать результат проверки, которая может занять несколько недель.
Я отправил расширение на проверку параллельно с публикацией статьи. Как только получу ответ, добавлю комментарий со ссылкой на опубликованное расширение.
Надеюсь, эта инструкция была вам полезной. Буду рад обсудить детали в комментариях.
8 комментариев
Написать комментарий.
И всё это ради 5 (3) строк кода?
По поводу самой идеи, а не инструкции по написанию расширений:
Чтобы не создавать каждый раз новое расширение для незначительных правок для каждого сайта, на котором Вам что-то захочется подправить под себя, достаточно один раз установить расширение Tampermonkey и делать это для сотни сайтов быстро и удобно в три клика (открыть меню -> создать скрипт -> сохранить).
Развернуть ветку
И всё это ради 5 (3) строк кода?
Всё это ради решения проблемы. В данном случае получилось решить её с помощью нескольких строк кода.
один раз установить расширение Tampermonkey
Вы правы, это можно делать и так. Или можно было просто написать сниппет и сохранить его в браузере. Подозреваю, что есть еще несколько вариантов. Но мне хотелось самому написать расширение для браузера и показать в инструкции, как это сделать. Писать под эту задачу сложное приложение, кажется, излишне.
Развернуть ветку
мне хотелось самому написать расширение
Вот это уже другой вопрос. Поэтому я сознательно опустил тему непосредственно написания расширений, а комментарий относился именно к самой идеи/мотивации (читать: проблеме) и описал максимально быстрый и эффективный способ решения таких проблем (создание правок для сайтов).
Развернуть ветку
Да, понимаю.
Кстати, если бы вы описывали пошагово создание расширения, какую задачу выбрали бы для иллюстрации?
У меня было несколько идей, в итоге победила та, что связана с реальной «болью» и не требует долгих объяснений, чтобы не раздувать инструкцию.
Развернуть ветку
Скорее всего я бы выбрал вариант автономного приложения с использованием сетевого API бесплатных сервисов (чтобы это смог повторить каждый), либо просто парсинга, с информативной иконкой с числовым показателем и уведомлениями (Notifications API).
Идеальным вариантом для демонстрации, как мне кажется, было бы расширение для мониторинга конкретной информации (входящие e-mail, доступные билеты, баланс на счёте, начало трансляций и так далее) с информативными image/text-уведомлениями.
Это не требует много кода, но функционал используемых API очень показателен и информативен, который в последствии можно универсально применить под свои нужды.
Развернуть ветку
UPD. Расширение опубликовано в Chrome Web Store. На почту никакое уведомление не приходило, поэтому сложно сказать, сколько времени заняла проверка.
Ссылка «Входящие» и «Написать письмо» снова открываются в той же вкладке!
chrome.google.com
Развернуть ветку
Ага, примерно так я первое расширение для Pyrus написал в 2013 году )))
Развернуть ветку
Спасибо
Хорошая инструкция
Просто и доступно
До этого перелопатил 5 других инструкций по этой теме, и только здесь мне дошло что и как
Спасибо
Источник: vc.ru
Как выучить JavaScript с нуля?
В этой статье вы узнаете, как быстро и просто выучить JavaScript самостоятельно. Что учить в первую очередь, какие навыки нужны для получения работы. Получите обзор бесплатных курсов по языку Java Script и много другой полезной информации.
Где используют язык JavaScript и для чего?
Java Script (Ява или Джава скрипт или сокращенно JS) – один из самых популярных языков программирования в мире. Чаще всего на нем создают интерактивные элементы на сайтах, с помощью которых сайты «оживают», начинают реагировать на действия пользователей. Примеры таких элементов:
- Кнопки.
- Формы.
- Слайдеры.
- Фотогалереи.
- Виджеты и многое другое.
Однако данный язык востребован не только в создании сайтов. Его используют для разработки прикладных программ, например, браузеров, приложений для SMART-телевизоров, фитнес-трекеров, умных часов, приставок, в макросах для офисных программ. Подробно о сфере применения Джава скрипт можно прочитать в описании профессии JavaScript-разработчика.
Зачем учить JavaScript? Преимущества языка для новичков
- Специалисты отмечают, что данный язык достаточно простой для новичков.
- Самостоятельно изучить основы JavaScript можно за 3-4 месяца. После этого вам будет проще осваивать другие языки, в частности, PHP.
- Ява скрипт имеет широкое применение и популярность в интернете. Выучив его, вы сможете зарабатывать на создании и доработке скриптов для сайтов.
- Он содержит все фундаментальные вещи: алгоритмы, объектно-ориентированную модель и структуры данных.
- Писать программы на Джава скрипт можно в любой текстовом редакторе, даже Блокноте.
- Актуальность и востребованность языка вряд ли будет снижаться в ближайшее время.
С чего начать изучение JavaScript и сколько времени это займет?
Как в любом языке, в JavaScript имеются определенные команды и правила их составления. Начать изучение этого языка можно со следующих вещей:
- Структура кода (как составляется программа, с чего начинается, в какой последовательности задаются команды и т.д.).
- Переменные (что это такое, для чего нужны, как задаются и используются в скриптах).
- Типы данных, например: число, строка, логический тип, и преобразование типов.
- Операторы, например, как производится сложение. Приоритет операторов (какие действия выполняются в первую очередь, какие – во вторую и т.д.). Бывают операторы сравнения, условные операторы, логические.
- Выучить, как использовать циклы (что это такое, для чего нужны, как их задавать). Говоря простыми словами, циклы позволяют производить одну и ту же операцию несколько раз (пока не наступит условие, которое завершит цикл).
- Функции.
- Объекты и их свойства.
- Прототипы, наследование.
- Классы и наследование классов.
- Интерфейсные события (обработка движения курсора, кликов мышки, нажатия кнопок на клавиатуре).
- Программирование элементов интерфейса: кнопок, форм и других.
- Выучить, как писать асинхронный код на JavaScript.
- Отладка программ в браузере, написанных на JS.
- Обработка ошибок.
- Качество кода: как писать программу правильно, чтобы в ней было легко и просто ориентироваться как автору, так и другому разработчику.
Изучить основы можно самостоятельно, например, пользуясь самоучителем Learn.javascript.ru или Html5css.ru. На втором сайте курс интерактивный. Можно прямо в браузере смотреть пример кода и как он работает (какие события обрабатывает и как).
Выучить простейшие азы можно за срок от 2-3 недель до 1,5 месяцев в зависимости от времени, которое вы сможете уделять программированию каждый день. Далее вам потребуется более глубоко погружаться в предметную область, о чем поговорим ниже.
Для изучения JavaScript пригодится знание HTML и CSS. Если вы еще не знаете эти технологии, то освоить их можно на бесплатном курсе в Нетологии. На нем расскажут, что такое HTML-теги, для чего они нужны и покажут основные теги и их атрибуты.
В какой последовательности можно учить язык JavaScript?
1. Изучите основы языка. Список того, что нужно знать, описан выше. Все это можно выучить самостоятельно, пользуясь бесплатным учебником Learn.javascript.ru. Он написан на русском языке просто и понятно.
Если вам нужен наставник, то можно пойти на курсы. Например:
- Курс по frontend-разработке в Нетологии – включает изучение JavaScript и других технологий, применяемых в разработке сайтов.
- Курс по JavaScript в Geekbrains – включает не только обучение, но и стражировку в компаниях-партнерах, например, Майл.ру.
- Fullstack-разработчик на JavaScript в Skillbox – посвящен исключительно одному языку программирования и позволяет изучить его на хорошем уровне с нуля.
2. Изучите библиотеки, например, jQuery и React. Это наборы готовых решений, которые можно использовать для ускорения работы. Нет смысла писать все скрипты с нуля, когда есть множество готовых решений.
3. Будет полезно изучить Node.JS – это технология расширяет область применения Джава-скрипт. Например, при помощи Node.JS можно создавать приложения и полноценные программы для ПК.
4. Освойте фрймворки, например, Angular и Vue.js. Фреймворк – это некая основа, фундамент, на котором можно создавать различные программы. Он включает набор готовых решений, на базе которых можно быстрее собрать ИТ-продукты (лендинг, сайт, интернет-магазин, приложение).
Например, фреймворк Angular используется для создания одностраничных приложений, Vue.js – для создания пользовательских интерфейсов.
5. Научитесь использовать системы контроля версий. Самая популярная из них — это GIT. О нем поговорим ниже.
6. Учитесь писать грамотный и правильно структурированный код.
Что такое GIT и для чего он нужен?
GIT – это система контроля версий. Она позволяет команде разработчиком совместно работать над кодом и при необходимости возвращаться к версиям программ, созданным ранее. Также GIT синхронизирует работу с сайтом, сохраняет и обновляет изменения в файлах со скриптами.
Эта система позволяет избегать ошибок и систематизировать работу над программным кодом. При необходимости можно быстро откатить изменения, если в программе нашлись баги (ошибки).
Бесплатные курсы и материалы для новичков
В этой части статьи на Kadrof.ru вы найдете видео, а также ссылки на обзоры бесплатных уроков и мастер-классов, которые помогут выучить JS с нуля. Вы сможете использовать их для самообучения.
1. Полный курс по Java Script для новичков. За 6 часов в этом видео простым и понятным языком описываются основы языка:
2. Что такое Node.JS: история создания, простейшие скрипты и основные возможности. Видео с канала Разработка от Яндекса продолжительностью 3 часа:
3. Еще один бесплатный урок по Node.JS, который можно посмотреть в том числе начинающим разработчикам:
4. Полный курс по React. Примеры и практика для новичков:
Также вы можете посмотреть бесплатные видео уроки, собранные в группе Клуб фриланеров, в том числе:
- JavaScript для новичков (13 уроков)
- jQuery для начинающих (11 уроков)
- Учим jQuery на примерах (8 видео)
- Зачем нужен Node.js и что на нем можно делать (4 видео)
Где учиться программировать на JavaScript?
- Можно учиться самостоятельно по бесплатным урокам, которые есть в сети интернет. Этот вариант подойдет людям, которые уже сталкивались с веб-разработкой, имеют какой-либо опыт или сильное желание учиться. Выше в статье мы собрали ссылки на такие уроки, посмотрите их. Если вы решили учить JavaScript самостоятельно, постарайтесь системно подходить к освоению знаний.
- Можно пойти на курсы, где вас научат программировать на Джава-скрипт с нуля, помогут с практикой и стажировками. Если вы решите пойти на курсы, то вначале рекомендую какие-то основы изучить самостоятельно, написать простейшие скрипты, чтобы в процессе обучения задавать больше вопросов и глубже освоить программу.
Среди курсов можно выделить:
- Fullstack-разработчик на JavaScript в Skillbox –данный курс посвящен верстке сайтов и программированию на JS. Осваивается язык, фреймворк (один на выбор – Vue, React или Angular), серверные технологии (Node.js). После обучения вы сможете не только работать с сайтами, но и создавать приложения на JS.
- Курс по frontend-разработке в Нетологии. Уровень обучения – с нуля. Занятия проходят онлайн. Есть практика и диплом. Здесь вы освоите не только JS, но и библиотеку React, а также получите другие необходимые знания для работы front-end программистом. Если вы в дальнейшем хотите заниматься разработкой сайтов, этот курс для вас.
- Обучение JavaScript в Geekbrains – здесь студенты проходят HTML, CSS, JavaScript, React, а также – основы баз данных и Node.js. Предусмотрена стажировка у партнеров.
Как быстро выучить JavaScript с нуля? Советы для новичков
- Старайтесь системно подходить к обучению. Если осваиваете Ява скрипт самостоятельно, то начинайте с основ, затем переходите к более глубокому материалу. Параллельно учите теорию. Что такое алгоритмы, какие они бывают и т.д.
- Постоянно практикуйтесь. Начинайте писать свои скрипты или переделывать или дорабатывать скрпиты других разработчиков (их можно найти в интернете). Старайтесь разобраться, как работает чужой код и как он сделан.
- Сделайте свой сайт, например, на WordPress и добавляйте на него различные функции. Это будет хорошей практикой.
- Если вам что-то не понятно, берите консультации программистов или заказывайте услугу code-review (проверку кода у опытного разработчика с комментариями, что нужно доработать, переделать и почему). Найти опытных разработчиков для code-review можно в каталоге веб-программистов на Kadrof.ru. Данная услуга стоит денег, поэтому заранее уточняйте у людей, которые согласятся проверить ваш код, сколько это будет стоить.
- Много полезной информации можно найти на сайте Хабр Qhttps://www.kadrof.ru/articles/57463″ target=»_blank»]www.kadrof.ru[/mask_link]
Как написать приложение для браузера
Основано на видео с канала «Traversy Media» Расширения и плагины — полезные дополнения к уже существующим функциям на сайте и в браузере. С их помощью можно записывать аудио и видео с экрана, включать поиск ошибок, а также многое другое.
В этой статье мы рассмотрим создание самого простого расширения — запускатора избранных сайтов. Хотя приложение и будет примитивным, оно всё-таки раскроет процесс создания и загрузки расширения для google Chrome. Желательно знать HTML, CSS и JS (если придётся расширить набор функций) на самом базовом уровне, чтобы понимать материал лучше, но в любом случае мы будем объяснять код. В каждом расширении для Chrome должен быть файл manifest.json . Он служит только для описания функций приложения, общего описания, номера версии и разрешений. Более подробно вы сможете ознакомиться с этим файлом в блоге команды разработчиков Chrome.Давайте же внесём свой вклад в развитие web
После того как мы описали наше расширение в файле manifest.json , можно благополучно переходить к следующему этапу, а именно к разметке. «Дата 3 Консалтинг», удалённо, до 250 000 ₽ Для начала давайте напишем базовый HTML-код: Выше мы написали каркас для плагина, сейчас он полностью пуст и нужно указать название, ссылки на иконки и шрифт. Это можно сделать с помощью тега link , обратите внимание, он не закрывается: Не забывайте указывать кодировку, иначе не отобразятся кириллические буквы. Перейдём ко второму блоку кода, а именно к тегу body и его содержимому. Так как наше расширение — модальное окно, давайте соответствующим образом назовём контейнеры. Сначала добавим контейнер шапки расширения, в которой укажем ссылку к иконке, напишем название и добавим номер версии.
Переходим к следующему контейнеру. Он содержит описание функций расширений. Далее следует контейнер modal-icons , внутри которого ещё 5 контейнеров. Для каждой иконки мы выделили отдельный контейнер с классом flex , чтобы знать, к каким элементам будем применять Flexbox. Кроме того, мы указали названия иконок для каждого ресурса.
Более детально со всеми доступными элементами можно ознакомиться на сайте Bootstrap.
Стили
Чтобы расширение выглядело красивее и было удобнее, чем сейчас, нужно добавить стили на CSS. Мы постарались как можно подробнее объяснить в комментариях относительно сложные моменты. А сейчас нам нужно лишь загрузить наше расширение в браузер Chrome и оно будет работать, а если пройдёт модерацию, то появится в магазине расширений (плагинов). Теперь давайте добавим файл с расширением .js, если вдруг потребуется расширить функции дополнения для браузера.
Проверка кода и публикация
Прежде чем опубликовать, проверьте ещё раз весь код. Если вы делали всё так, как мы, то у должно было получиться следующее: После проверки можно приступать к публикации расширения. Для этого у вас должны быть следующие файлы и папки:
И далее следуем инструкциям на скриншотах ниже. Для загрузки расширения в магазин нам нужно зайти в меню, навести мышку на «дополнительные настройки», а затем выбрать «расширения» или ввести в адресной строке chrome://extensions/ . 
Далее нажимаем на «загрузить распакованное расширение» и выбираем папку с файлами.
После того, как вы выбрали папку с файлами, она загрузится в браузер и превратится в расширение, которое будет доступно за пределами правой части адресной строки. 
Надеемся, что всё работает правильно и вы понимаете структуру расширений для Chrome.Хинт для программистов: если зарегистрируетесь на соревнования Huawei Honor Cup, бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании. Перейти к регистрации
Источник статьи: http://tproger.ru/articles/how-to-build-a-chrome-extension/
Создаём своё расширение для Google Chrome
На хабре уже есть несколько статей о создании расширений для хрома, поделюсь своим опытом, затронув основные вещи и места, в которых у меня возникли трудности.
Что понадобится для создания расширения в двух словах:
1) Базовые знания Javascript
2) Базовые знания HTML
3) 5$ Покажу создание расширения для хрома на примере своего, созданного для подсчета «потерянного времени» в интернете. То есть это расширение считает время, проведенное на сайтах с возможностью определения посещенных сайтов по категориям: полезное время, либо потерянное время. Итак, я начинаю создание расширения с создания папки самого расширения, в которую будем класть все создаваемые нами файлы. Назову её «losttime». Далее, я создаю файл manifest.json, выглядит он следующим образом: Некоторые из строк должны быть интуитивно понятны, но что обязательно нужно знать:
— Значение manifest_version должно быть обязательно «2»;
— В content_scripts пишем, какой скрипт будет запускаться на всех страницах отдельно;
— В background пишем общий скрипт(фоновый скрипт), который запускается при запуске браузера;
— В permissions пишем адрес сайта, с которого будет браться информация. Все, что буду использовать я, не обязательно использовать Вам, если вам это по логике просто не нужно. Подробнее о манифесте. То самое окошко, которое Вы можете видеть по клику на иконку расширения — это страница: popup.html.
Наиболее интересный момент из моего скрипта, я считаю, должен быть:
chrome.runtime.sendMessage( );
Тут происходит отправка сообщения background скрипту, а именно две переменные: site:sait — содержит адрес сайта, на котором скрипт
time:localStorage[sait] — количество времени, проведенное на этом скрипте. Далее, рассмотрим фоновый скрипт background.js, где и происходит приём данных, а точнее рассмотрим саму функцию приёма данных. Вот, собственно, и она. Разбирать подробно ничего не стану, т.к. это в принципе и не нужно. Достаточно знать наглядный пример, чтобы осуществить задуманное.Если в скрипте background.js добавить какие-либо данные в локальное хранилище( а также куки, web sql), то эти же данные можно будет использовать и в popup.js скрипте. Вот собственно всё, что я хотел поведать о создании расширения, но я затрону еще один момент, в котором у меня возникли трудности. На странице настроек мне необходимо было организовать перетаскивание сайтов в разные колонки.
Т.к. данные вставляются посредством InnerHtml, то данная возможность просто так не появится. Вот, что пришлось организовать: Думаю, объяснять не нужно. Почитать подробнее можете по ссылке Заходим в Настройки — Инструменты — Расширения, жмем на «Загрузить распакованное расширение» Публикация расширения
Заходим на страницу оплачиваем 5$, публикуем.
Я не останавливаюсь на моментах, с которыми у меня не возникли трудности. А трудности возникли при оплате карточкой:
— В моём случае должен быть подключен 3д пароль.
Если Вам при оплате пишет ошибку, звоните своему банку и узнавайте. Мне за минуту помогли и всё гуд. Источник статьи: http://habr.com/ru/post/198652/Как создать расширение для Google Chrome
В Хроме уже присутствует огромная библиотека дополнений, которые добавляют в браузер те или иные функции. Причем в большинстве случаев их разработкой занималась не компания Гугл, а сторонние разработчики, иногда и в единственном лице. То есть это не слишком сложная задача для знающих людей. Если вам интересно, как создать расширение для Google Chrome, то прочтите нашу статью. В ней собрана вся базовая информация по этой теме.
Руководство
В начале небольшое предупреждение: пытаться сделать своими силами тот или иной плагин стоит в двух случаях:
- У вас есть базовые навыки программирования, хотя бы с JavaScript, HTML и основы работы с CSS.
- Или же огромное желание со всем разобраться.
Плюс ко всему, в рамках одной статьи все нюансы не распишешь, так что снизу мы разместим ссылки на официальные материалы с сайта Google, где информация подана более детально, но «сухо» и на техническом английском языке.
А сейчас же мы разберем процедуру более кратко.
Начало
Первоочередная задача – описание плагина. То есть вы должны у себя в голове, а лучше – на бумаге (или в текстовом документе) обозначить, какую задачу он будет решать. Затем нужно придумать средства, которыми он будет оперировать.
Когда базовые условия поставлены, нужно их записать на том языке, что будет понят Гугл Хромом. А он в случае с расширениями оперирует JSON. Так что итоговый вариант нужно сохранять в файле manifest.json. Правильность исходного кода следует проверить с помощью сервиса JSONLint.
Теперь разберем все на конкретном примере. В качестве задаче возьмем такую установку: переход на главную страницу нашего сайта (CHROMEUM.RU) по одному клику. Код будет выглядеть следующим образом:
- manifest_version – подключенная версия скрипта.
- name – заголовок для расширения
- description – подробное описание для него
- version – текущая версия.
- icons – ссылки на иконки. В данном случае используется только стандартная, с размером 128х128.
- permissions – предоставляемые расширения.
Файл manifest.json готов, можно переходить к сборке плагина. Для этого:
- Создайте на компьютере отдельный каталог, в названии только английские буквы, цифры или символы.
- Переместите туда файл.
- Дополнительно закиньте иконку. В данном случае она идет с расширением .png и названием 128.png. В коде можно прописать и другой вариант.
Следующий этап – отладка. Для этих целей нужно установить дополнение в Гугл Хром:
- Запускаем браузер и кликаем на значок вызова меню управления.
- Наводим курсор мыши на пункт «Дополнительные инструменты».
- В подменю выбираем пункт с названием «Расширения».
- В верхней панели на открывшейся страничке нужно включить ползунок «Режим разработчика».
- Теперь щелкните ЛКМ по пункту «Загрузить распакованное…».
- В файловом обозревателе выберите каталог, где хранится manifest.json.
- Кликните на кнопку подтверждения.
В результате в разделе «Приложения Chrome» появится новый элемент. Самое время проверить работоспособность нашей разработки. Для этого:
- Переходим на страницу «Приложения» (ссылка – chrome://apps/).
- Кликаем по картинке с подписью AccesstoChromeum.ru.
- Дожидаемся загрузки нашего сайта.
Как видите, все работает, а значит, дополнение готово для публикации в общем магазине.
Итоги
Предложенная нами инструкция – очень простая и не слишком функциональная, поскольку сложно все описать в рамках небольшой по размерам статьи. Но все же со своей задачей она справляется на отлично. Если же вы заинтересовались в разработке дополнений, то ознакомьтесь с материалами ниже.
Прикрепляем ссылки, которые будут полезны в случае написания плагина для интернет-обозревателя Chrome:
Getting Started Tutorial – вводная информация по тому, как следует структурировать json-скрипт. Все описано на конкретных примерах и максимально детально. Есть инструкции по внедрению базовых инструкций, подключению пользовательского интерфейса, логике кода и установке своего плагина в браузер от Гугл.
Overview – детальные сведения по структуре и архитектурным особенностям расширений для Chrome, интеграции API, доступу к тем или иным функциям программы (приватный просмотр, сохранение трафика и т. д.).
Debugging Extensions – основы отладки, распространенные ошибки исполнения для аддонов, просмотр логов и многое другое.
Publish in the Chrome Web Store – подготовка расширения к публикации в интернет-магазине Chrome, создание аккаунта разработчика и так далее.
Develop Extensions – статья с огромным количеством ссылок на материалы и инструкции от Google, которые будут полезны при разработке.
Источник: poisk2.ru