chrome исходный код расширения chrome

Создание расширения для Google Chrome

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

Для работы с расширениями вам понадобится переключить канал обновлений на Dev или Beta.

Расширение будет иметь кнопку с иконкой на панели инструментов Chrome. При нажатии на кнопку будет появляться всплывающее окно (popup) со случайной картинкой из галлереи фотографий телескопа Hubble. В верхней части окна будут размещены кнопки: настроить (показать страницу настроек), обновить (показать другую фотографию), закрыть (закрыть всплывающее окно).

Расширение будет содержать страницу настроек (options), на которой можно будет выбрать язык интерфейса (русский, английский) и выбрать размер картинки (маленький, большой).

Создание расширения начинается с создания папки, в которой мы будет создавать все необходимы для работы расширения файлы. Созадим папку HubblePics. Далее создадим файл, который будет содержать описание нашего расширения — manifest.json. Данный файл является обязательным для каждого расширения. Именно из него Chrome получает всю необходимую информацию о расширении (название, версия, разрешения, страницы расширения и т.д.).

«options_page» : «options.html» // Страница настроек
>

Подробное описание файла manifest.json вы можете получить здесь

Настройки

Создадим страницу настроек — options.html. Приводить полный код страницы я не буду, только интересные, на мой взгляд моменты, а именно сохранение, извлечение настроек и локализация.

Сохранять настройки можно в объекте localStorage, который, по сути, представляет из себя ассоциативный массив, хранящий пары «название», «значение». Например, для сохранения состояния радиокнопки «Размер картинки — Маленький», используется код:

Для восстановления состояния:

В своем проекте я обернул обращение к localStorage в функцию readProperty чтобы избавится от лишних проверок и получить возможность получения значения по умолчанию:

function readProperty(property, defValue)
<
if (localStorage[property] == null )
<
return defValue;
>

Локализация

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

Идея простая — есть ряд элементов, которые нужно перевести. У них есть идентификаторы. Создается ассоциативный массив или объект, в котором идентификатору элемента соответствует локализованный текст. Функция, которая занимается локализацией «пробегает» по массиву, по идентификатору находит контрол и устанавливает ему текст.

Создадим файл с названием элементов и указанием языка. Язык «регистрируется», путем добавления элемента в выпадающий список «Язык». Например русский язык добавляет в список элемент с текстом «Russian» и значением «ru_RU».

Этот скрипт добавляется на страницу настроек (options.html)

script type =»text/javascript» src =»locale/ru_RU/options.js» > script >

На странице, все локализуемые элементы должны иметь соответствующие идентификаторы, например:

span id =»lngPreviewSmall» > Small span >

Локализацией занимается функция localize

function getSelectedLanguage()
<
var lang = getSelectedValue( «language» ); // Возвращает значение выбранного элемента в выпадающем списке «Language»
return eval( «lang_» + lang);
>

function localize()
<
var lang = getSelectedLanguage();

// Перебираем все элементы объекта lang_ru_RU
for ( var ctrlId in lang)
<
var value = lang[ctrlId];

// Не найден, продолжаем перебор
if (ctrl == null )
<
continue ;
>

// Найден, определить тип и присвоить значение
if (ctrl.tagName == «SPAN» )
<
ctrl.innerText = value;
>
else if (ctrl.tagName == «INPUT» )
<
ctrl.value = value;
>
>
>

Теперь, если нам необходимо добавить новый язык, например английский, мы просто создаем папку \locale\en_US, в ней создаем скрипт options.js

И добавляем скрипт на страницу

script type =»text/javascript» src =»locale/en_US/options.js» > script >

Всплывающее окно

Внутри файла popup.html простая разметка, в которой предусмотрено место для загружаемой картинки, кнопки управления и индикатор процесса загрузки.

ul class =»menu» >
li > img src =»images/options.png» onclick =»showOptions();» /> li >
li > img src =»images/update.png» onclick =»getPicture();» /> li >
li > img src =»images/close.png» onclick =»closePopup();» /> li >
ul >

div id =»loader» >
img src =»images/loader.gif» />
div >

div id =»image» style =»display: none;» >
a href =»#» id =»hrefPlace» onclick =»return openImage();» > img id =»imgPlace» /> a >
div >

В общем ничего интересного. Все интересно вынесено в файл popup.js.

Данный скрипт, используя XMLHttpRequest загружает страницу hubblesite.org/gallery/wallpaper, находит ссылки на изображения, выбирает случайное и отображает в popup-е.

xhr.onreadystatechange = function () <
if (xhr.readyState == 4)
<
if (xhr.responseText)
<
var xmlDoc = xhr.responseText;

var imgs = xmlDoc.match(/http:\/\/imgsrc.hubblesite.org\/hu\/db\/images\/hs-6<4>-2<2>-[a-z]/g);
var hrefs = xmlDoc.match(/gallery\/wallpaper\/pr8<4,>[a-z]/g);

if (imgs.length > 0)
<
var randIdx = Math.floor(Math.random() * imgs.length);

var imgSize = «-wallpaper_thumb.jpg» ;

showImage( «http://hubblesite.org/» + hrefs[randIdx], imgs[randIdx] + imgSize);
>
>
>

Установка и упаковка расширения

Расширение создано, теперь необходимо загрузить его в Chrome. Запускаем Chrome, нажимаем кнопку Настройка и управление , выбираем пункт меню Extensions.

А в списке расширений видим наше расширение.

Нажимаем OK, видим сообщение о том, что расширение упаковано.

Если мы собираемся выпускать обновленные версии расширения — сохраним созданный файл с ключем HubblePics.pem и будем указывать путь к нему при каждой последующей упаковке расширения, иначе, каждый раз будет генерироваться новый файл, что приведет к назначению нового идентификатора для нашего расширения, а это, в свою очередь приведет к тому, что вместо обновления, пользователь будет устанавливать новую копию расширения.

Практически вся информация, необходимая для разработки расширений сосредоточена на странице Google Chrome Extensions: Developer Documentation. Если этого покажется мало, то всегда можно взять готовое расширение, изменить расширение с crx на zip, распаковать и посмотреть как это сделано «у них».

Так же источником информации, так сказать, из первых рук, может стать список изменений при выходе новых версий Google Chrome.

Источник

Разработка простого расширения для google chrome

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

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

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

Данный пост будет более продвинутой версией.

Приступим.

Не хочется вдаваться в самые основы и поэтому рекомендую для начала прочесть эту статью.

Скачайте мое расширение и смотрите код параллельно чтению.

Мы уже примерно знаем, что такое manifest.json и для чего он нужен.
Если кратко, то это основной файл расширения, который сообщает браузеру какими вещами расширение будет пользоваться, и основные параметры (название, описание и тд).

Перейдем непосредственно к моему расширению.
Это простой скрипт, который удаляет со страницы фриланса те объявления, которые мешают искать интересные мне объявления (если точнее, то я ищу лишь долгосрочные проекты). Дополнение к существующему встроенному фильтру.

Рассмотрим.
Имя, версия — это всем понятно.

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

Иконки нужны разных размеров для отображения в адресной строке, в списке расширений, возле адресной строки.

page_action — важный объект. Он сообщает браузеру, что наше расширение будет индивидуально для каждой вкладки, то есть значок будет выводиться в адресной строке, а не на панели (например gmail checker). Такие расширения как gmail checker не считаются индивидуальными, они открываются один раз для всего браузера (для них в манифесте используется вместо объекта page_action объект browser_action, на картинках соответственно).

default_title, default_icon — название, иконка соответственно.
default_popup — имя html-страницы расширения, которая будет всплывать при нажатии на иконку. Посмотрите предыдущий топик, если не все ясно.

permissions — массив с разрешениями. Нам пригодиться общаться с системным объектом tabs и обращаться к адресу фриланса (имеется в виду не ajax запросы, а js работа со страницей).

content_scripts — важный для нас объект, именно он разрешает пользоваться js на странице фриланса. Мы указываем адрес страницы и указываем js-файлы, которые будут исполнены сразу после загрузки body. Я использую jQuery и определяю свои функции. Порядок имеет значение.
Важно знать, что скрипты расширения не могу видеть объекты/переменные скриптов самой страницы. Это значит, что если у страницы уже есть свой jQuery мы не сможем его использовать, обязательно надо подгрузить свой. Это называется изолированными мирами и это иногда удобно. Скрипты из расширения, конечно же, могут манипулировать DOM.

Идем далее.
Если Вы все верно представили себе то видите, что наше расширение состоит из 3х основных объектов: фоновая страница (одна для всех), окошко с фильтром (для каждой страницы), и скрипты на каждой странице.

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

chrome.tabs.onUpdated.addListener( function (id,info,tab) <
if (info.url)
if (/free-lance.ru/.test(info.url))
chrome.pageAction.show(id);
>);

Приведен только js код (только он и нужен).
chrome.tabs — системный объект с которым приходится больше всего работать, как Вы догадались, он отвечает за вкладки.

Мы вешаем свою функцию на событие onUpdated (обновление вкладки, переход по ссылке). В качестве параметров приходят идентификатор вкладки, информация о обновлении, объект самой вкладки. Нам понадобиться информация — она содержит адрес текущей страницы. Мы проверяем фриланс ли это и если да, то у объекта chrome.pageAction вызываем метод show передавая туда идентификатор этой вкладки.

chrome.pageAction — объект отвечающий за расширения внутри адресной строки, и мы просим показать иконку в нужной нам вкладке (где только что открылся фриланс).

Все действия фоновой страницы окончены, сайт открылся, иконка появилась, теперь можно на нее кликнуть и появится popup.html.

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

Вообще, в документации сразу предлагают этот способ:

Но подумайте, как туда передавать параметры? Только строковые? (к слову говоря, null — это значит, что мы хотим исполнить скрипт на текущей вкладке)
Это мне подходило, я искал способ передать объекты. И такой способ нашелся, но он был спрятан в документации.
port — специальный объект в chrome, с помощью которого можно общаться от скрипта к фоновой странице и popup, или от фоновой страницы и popup к скрипту.

Что бы подключиться к скрипту нужно соединяться через табы:

где id номер нужной вкладки со скриптом. port — возвращенный объект транспорта.

Что бы подключиться к фоновой странице или всплывающему окну нужно обратиться к объекту расширения:

Расширение одно — идентификатор указывать не надо.
Прослушивать эти подключения можно одинаково и там и там:

chrome.extension.onConnect.addListener( function (port) <
port.onMessage.addListener(MyFunc);
>);

Для чего onMessage станет понятнее позже.

chrome.windows.getCurrent( function (w) <
chrome.tabs.getSelected(w.id, function (t) <
port = chrome.tabs.connect(t.id);
>)
>);

Мы просим сказать какое окно сейчас активно, и нам в callback возвращают объект окна. Далее мы просим сказать текущую вкладку в этом окне и нам ее возвращают тоже в callback. И только тогда мы открываем соединение со скриптом.
Это работает, но мне кажется, что это неправильно — должен быть способ проще.

Когда все данные фильтра собраны, по нажатию на кнопку мы отправляем в этот порт объект с помощью метода:

И в этот момент начинает работать script.js

В script.js важно это:

chrome.extension.onConnect.addListener( function (port) <
port.onMessage.addListener(Filtr);
>);

Прослушиваем порт и дожидаемся входящего подключения с объектом port.
У этого объекта есть событие onMessage — событие когда сюда присылают сообщение. Мы вешаем свою функцию Filtr, которая примет все аргументы, которые пришлют с помощью port.postMessage() на другом конце. Функция Filtr удалит все объявления, которые указаны в объекте.

Вот и все. Это работает и помогает мне в поиске заработка.
Было сложно разбираться без знания английского.
Надеюсь Вам пригодится.

Источник

Получить любой исходный код расширения Chrome с помощью CRX Extractor

Лучший способ научиться программировать – это практиковать и изучать работу других. GitHub делает это достаточно простым для любого языка программирования, который вы можете себе представить. Но для многоязычных проектов, таких как расширения Chrome, вы не найдете столько ресурсов.

Читайте также: 30+ полезных расширений Chrome для веб-дизайнеров

Если вы нажмете кнопку «Начать» и ничего не произойдет, попробуйте отключить блокировщик рекламы.

Многое происходит за кулисами, чтобы это приложение работало гладко. Можно получить код самостоятельно но это займет гораздо больше работы.

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

Вы должны использовать это веб-приложение главным образом, чтобы узнать, как создаются расширения Chrome и что обеспечивает их безопасность. Просмотрите через Google Руководство по началу работы узнать больше о создании расширений с нуля.

Но ничто не сравнится с опытом поиска исходного кода, чтобы узнать, как профессионалы создают свои расширения. С CRX Extractor вам будет гораздо легче получить этот исходный код для изучения, изучения и тиражирования у лучших разработчиков.

Читайте также: 30 расширений Chrome для повышения производительности в 2017 году

Источник

Создаём расширение для Chrome

Aug 4, 2020 · 7 min read

Хотите написать расширение для Chrome, но не знаете, с чего начать? Читайте это руководство с нуля до подготовки к публикации скрипта содержимого. Здесь применяются фреймворк CSS TailWind и универсальный упаковщик Parcel.js, решаются проблемы переопределения стиля страницы и перезагрузки расширения. Весь код вы найдёте в конце.

Написать расширение для Chrome непросто. Это не то же самое, что разработка веб-приложения: не хочется перегружать браузер оверхедом JS, ведь расширения работают одновременно с сайтами. Более того, у нас нет инструментов упаковки или отладки из привычных фреймворков.

Когда я решил заня т ься созданием расширения для Chrome, то обнаружил: блог-постов и статей об этом довольно мало. И информации оказывается даже ещё меньше, если вам захочется использовать новые инструменты, например TailwindCSS.

В этом руководстве мы напишем расширение для Сhrome с помощью Parcel.js для упаковки и просмотра результатов, а также TailwindCSS для оформления. Кроме того, мы отделим стилизацию расширения от веб-сайта, чтобы избежать конфликта CSS.

Есть несколько типов расширений для Chrome, достойных упоминания:

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

Упаковываем расширение с Parcel.js V2

Добавляем манифест

Каждому браузерному расширению необходим файл манифеста. Именно там мы определяем версию и метаданные расширения, а также скрипты, которые в нём работают. Контент, фон, всплывающее окна, разрешения, если они нужны и так далее. Вы найдёте полное описание файла манифеста в документации Chrome: https://developer.chrome.com/extensions/manifest. Давайте двинемся дальше и добавим в src файл manifest.json с такими строками:

Прежде чем углубиться в детали работы расширения Chrome, установим и настроим TailwindCSS.

Подключаем TailwindCSS

TailwindCSS — это CSS-фреймворк, применяющий служебные классы низкого уровня для создания переиспользуемых и настраиваемых компонентов интерфейса. Tailwind устанавливается двумя способами, самый распространённый — установка с помощью NPM. Кроме того, сразу же стоит добавить autoprefixer и postcss-import :

Теперь, когда всё установлено, давайте создадим файл postcss.config.js в корневом каталоге. Этот файл — конфигурация для PostCSS. Вставим в него такой код:

Порядок плагинов здесь имеет значение! Это всё, что нужно, чтобы начать использовать TailwindCSS в вашем расширении. Начинаем. Создадим файл style.css в папке src и импортируем в него стили Tailwind:

Очищаем CSS с помощью PurgeCSS

Убедимся, что мы импортируем только те стили, которые используем, включив очистку. Создадим конфигурационный файл Tailwind, запустив такую команду:

Теперь CSS будут очищены, а неиспользуемые стили удалены при сборке для продакшна.

Включаем горячую перезагрузку

Chrome не перезагружает файлы при внесении изменении, то есть нам нужно нажимать кнопку “Перезагрузить” на странице расширений каждый раз, когда мы хотим посмотреть на результат. К счастью, есть пакет NPM для автоматической перезагрузки:

Чтобы использовать его, создадим файл background.js в папке src и импортируем в этот файл crx-hotreload :

Достаточно конфигураций. Давайте создадим небольшую форму-скрипт в расширении.

Типы скриптов расширения Chrome

Как уже упоминалось, у расширений Chrome есть несколько типов скриптов:

Добавляем скрипт содержимого

Оформление стилей браузерного расширения сложнее, чем кажется. Нужно убедиться, что ваши стили не влияют на стили веб-сайта. Применим Shadow DOM для решения этой проблемы.

Теневой DOM — мощная техника инкапсуляции стилей: область применения стиля ограничивается теневым деревом. Таким образом ничего не просачивается на веб-страницу. Кроме того, внешние стили не переопределяют содержимое дерева, хотя переменные CSS всё ещё доступны.

Чтобы обслуживать наше расширение, добавим несколько скриптов к package.json :

Подготовка к публикации

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

Если у вас ещё не установлен zip, пожалуйста, выполните команду:

Теперь всё, что остается, — это отправиться в Chrome Web Store Developer Dashboard — панель управления разработчика, чтобы настроить учетную запись и опубликовать своё расширение.

Заключение

Расширения Chrome, в конечном счёте, не так уж сильно отличаются от веб-приложений. Сегодня мы написали расширение с применением новейших технологий и практик в веб-разработке. Надеюсь, это руководство поможет вам немного ускорить разработку вашего расширения!

Источник

Готовим расширение под Chrome, украшаем Хабр

Чтобы сделать расширение достаточно минимальных знаний Javasctipt, HTML и CSS. Давайте добавим на хабр догрузку следующей страницы, а также систематическую проверку новых постов на текущей. Примерно как на twitter.

Полностью готовый экстеншн можно установить и проверить в работе через Chrome Web Store, а здесь разберемся как написать основной код с нуля (полный занимает всего 6 KB).

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

Экстеншн будет активирован только на habrahabr.ru. Подгрузит из своей папки пока еще отсутствующие style.css, script.js и библиотеку jQuery. Chrome будет ругаться на отсутствие этих файлов, поэтому положим рядом пустые style.css и script.js, а также скачаем самый свежий jquery (который всегда находится по адресу http://code.jquery.com/jquery.js) и тоже положим в папку.

Теперь подключим наш экстеншн. Идем в настройки расширений хрома (chrome://settings/extensions), ставим там галочку «Developer mode» и нажам «Load unpacked extension. » указываем местоположение папки с нашими файлами. Модуль добавлен:

Перезагружаем хабр, убеждаемся что всё действительно работает. Точнее ничего, конечно, не изменится. Для проверки же добавим в style.css что-то вроде:

А в script.js, скажем:

Перезагрузите расширение кликнув на ссылку Reload (ее открывает треугольничек слева от иконки расширения). Затем перезагрузим хабр и убедимся что верстка стала резиновой, а под никнеймом добавились новые ссылки (если вы зарегистрированы).

Приступим к AJAX загрузке. Для начала навесим обработчик клика на ссылку «Туда»:

Теперь при клике по ссылке посты с новой страницы будут добавляться к постам на текущей (cнова не забываем перезагрузить экстеншн и хабр). Хорошим тоном считается показывать индикатор загрузки, здесь же опустим, простоты ради.

Далее делаем так чтобы ссылка нажимала сама себя когда мы доскроллим до конца страницы

И заодно заложили начало второй части скрипта — вызов checkForNewPosts() при скролле до начала страницы. Функция должна проверять наличие новых постов на текущей странице и сообщать бэйджиком:

Пока еще нет результата, потому что Tinycon.setBubble() не существует. Она должна выставлять бэйджик на фавиконке и реализована в библиотеке Tinycon. Чтобы ее подключить скачайте tinycon.js из github, положите в папку расширения и не забудьте подключить tinycon.js в manifest.json.

Чтобы проверить что бэйджик работает — зайдем на http://habrahabr.ru/posts/top/daily/ (вообще лучше тренироваться на страницах топа, они по всей видимости кэшируются и не создают большой нагрузки). Откроем инспектр кода (F12), удалим пару дивов внутри

и проскроллим на начало страницы. Бэйджик должен показать количество отсутствующих топиков.

Сделаем еще так, чтобы эта проверка происходила регулярно, раз в минуту:

Не так уж много кода осталось, но на этом закончу. Не охвачена эстетическая сторона вопроса, а также возможность дозагрузить найденные новые посты, отменить автоматическую дозагрузку следующей страницы (по кнопке и по ). Всё это реализовано в готовом экстеншне, а исходный код доступен после установки где-то в папке:
C:\Users\%USERNAME%\AppData\Local\Google\Chrome\User Data\Default\Extensions\glaccbllkhielccdhfbbpilnlbemgaji
(если там нет, ищите папку glaccbllkhielccdhfbbpilnlbemgaji где-то еще).

Осталось выложить расширение для публичного доступа. Для этого нужно получить приватный файл ключа, он требуется чтобы заливать эту и новые версии вашего экстеншна в дальнейшем. В настройках расширений кликаем кнопку «Pack extension», указываем путь к папке и оставляем путь к ключу пустым:

После упаковки хром создаст файл DemoExtension.crx и DemoExtension.pem, последний вам нужно переименовать в key.pem и кинуть в папку экстеншна (не теряйте его, а то не сможете обновлять это расширение). После чего всю папку расширения нужно заархивировать в DemoExtension.zip и залить в вашу панель управления. CRX файл при этом вообще не участвует.

Вот как выглядит залитый в Web Store модуль:

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

Теперь же вперед, делать сайты лучше, удобнее, красивее! 🙂

Источник