Как разобрать расширение chrome

Обновлено: 03.07.2024

Всем доброго времени суток. Как перенести расширения Google Chrome из одного профиля в другой. Или из Chrome на одном компьютере в Chrome на компьютере другом, а может быть вообще в другой браузер на базе Chromium (вот это двинул речь). Самый простой способ перенос расширений Google Chrome с помощью режима разработчика – это подключить свой Google — аккаунт, и расширения синхронизируются вместе с прочими данными. Но этот способ не будет работать с другими Chromium — браузерами. И он не подойдёт, если нам нужно перенести расширения в профиль не свой, а другого человека.

Можно зайти в настройки каждого из расширений. Там по ссылкам перейти на страничку их загрузки в интернет — магазине Chrome и по этим ссылкам установить их в другом профиле или браузере. Для массового переноса можно использовать специальные расширения. Формирующие HTML — файлы экспорта со ссылками установки всех имеющиеся в браузере расширений. Но как быть, если в магазине Chrome больше нет возможности установки расширения. Тем не менее оно годное и рабочее. В таком случае можно использовать имеющийся в Chromium — браузерах функционал упаковки и распаковки расширений в режиме разработчика.

Перенос расширений Google Chrome с помощью режима разработчика

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

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

Этот идентификатор мы также можем получить на страничке настроек расширения, соответственно, в разделе браузера «Расширения», но только после активации режима разработчика.

Далее в этом режиме разработчика нам нужно упаковать расширение и перенести файлы упаковки в другое место или на другой компьютер. В другом профиле Chrome или другом браузере впоследствии также нужно будет активировать режим разработчика и извлечь файлы упаковки.

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

Как упоминалось, расширения из Chrome можно перенести в другой браузер. Это должен быть Chromium — браузер с поддержкой расширений из магазина Chrome. Этому условию соответствуют многие Chromium — браузеры, однако не все из них поддерживают режим разработчика. Например, он есть в Opera, Vivaldi, в новом Microsoft Edge. А вот в передовом отечественном веб — обозревателе Яндекс.Браузере режима разработчика нет (а жаль).

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

Для упаковки расширения нам нужно отыскать его папку в профиле Google Chrome. Собственно, для этого мы и копировали идентификатор. Жмём клавиши Win+R и вводим путь:

%userprofile%\AppData\Local\Google\Chrome\User Data\Default\Extensions

Это путь к папке расширений нашего профиля Chrome. Откроется проводник с этой папкой, и в поле поиска мы вставляем скопированный идентификатор расширения, которое хотим упаковать. Жмём «Enter».

Заходим в найденную поиском папку расширения с названием его идентификатора.

Далее, открываем папку с версией расширения, но открываем с помощью контекстного меню проводника в отдельном окне.

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

Далее, снова обращаемся к Chrome и в разделе расширений жмём кнопку вверху окна «Упаковать расширение».

Указываем скопированный путь к папке с версией расширения. Жмём «Упаковать расширение».

Теперь снова обращаемся к папке в профиле Chrome с идентификатором расширения. В ней теперь уже будет не только папка с версией расширения, но два дополнительных файла с расширениями «.crx» и «.pem».

Копируем всё, что находится внутри папки с названием идентификатора, куда — то в надёжное место. Ну а если расширение нужно перенести в браузер на другом компьютере, то, соответственно, переносим скопированное на диск другого компьютера.

Распаковка расширения

Как распаковать расширение в другом профиле Chrome или в другом Chromium — браузере. В последних идём в раздел расширений, включаем там режим разработчика. Жмём кнопку «Загрузить распакованное расширение».

Указываем путь к папке с названием версии расширения, там, где мы её перенесли вместе с двумя дополнительными файлами в надёжное место или на другой компьютер.

И всё, расширение будет распаковано.

Оно будет работать точно так же, как если бы мы его установили из магазина Chrome. А в списке расширений числиться будет как распакованное.

Заключение

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

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

В первой (этой, то бишь) статье, на примере простейшего расширения, будут рассмотрены все основные моменты, связанные с разработкой, отладкой и использованием расширения, конфигурационный файл manifest.json и начала chrome.* API. Первая же статья, думаю, будет не очень полезна опытным разработчикам (это дисклеймер).

Hello world

Лучшая теория — практика, а поэтому, не откладывая в долгий ящик, создаём папку hello_world, а в ней текстовый документ manifest.json и печатаем туда следующий код:

Это — программа минимум. Если зайти в «Гаечный ключ → Инструменты → Расширения», установить галку «Режим разработчика», нажать кнопку «Загрузить распакованное расширение. » и указать нашу папку «Hello world», то расширение появится в списке установленных, но делать, естественно, оно пока ничего не будет, потому как не умеет.

Учим и отлаживаем

А раз не умеет — надо научить. Отредактируем manifest.json:

И создадим файл background.html в котором будет написан сценарий, выполняемый в фоновом режиме. Например, такой:

Сценарий в background.html будет выполнен один раз, при старте браузера и расширения, то есть, при открытии ещё одной вкладки или окна, повторное исполнение сценария не произойдёт. В нашем случае он каждые 10 секунд будет писать в консоль сакраментальную фразу, и это, кстати, надо бы проверить.

Для отладки удобно использовать служебную страницу chrome://extensions/ со включённым режимом разработчика.

В принципе, она дублирует функционал страницы управления расширениями из «Гаечного ключа», но мне, субъективно, нравится больше. Как-то компактнее, что ли?

Здесь нас интересуют две позиции: строка «ID» с внутренним идентификатором расширения и подраздел «Проверить активные режимы просмотра» в котором мы видим созданный нами background.html и, щёлкнув по нему, можем проконтролировать исполняемый сценарий.

Смотрим и убеждаемся, что сценарий исправно пишет в консоль хэллоуворлды:

Обратите внимание на заголовок формата chrome-extension://ID/filename. Зная идентификатор расширения таким образом можно добраться до любого его файла. Опять же удобно в процессе отладки расширения.

Взаимодействие с браузером

Пока наше расширение представляет эдакую вещь в себе, исполняя в фоне некий сценарий. Для того, чтобы оно начало взаимодействовать с браузером и его компонентами нужно познакомиться с chrome.* API. Так, например, для взаимодействия с окном браузера используются методы chrome.browserAction, а значения по умолчанию задаются в manifest.json следующим образом:

Не забываем создать popup.html (пока оставим его пустым) и положить иконку в папку img, щёлкаем на «Перезагрузить» на странице chrome://extensions/ и смотрим на результат. Иконка нашего расширения появилась на панели расширений, а при клике на неё возникает пустое всплывающее окошко.

Иконка для тех, кто проходит по шагам:

Всё это управлябельно с помощью методов chrome.browserAction из сценариев:

Для практике давайте заставим background.html сделать что-нибудь полезное, вместо того, чтобы просто гадить в консоль. Вот, хотя бы часы. Поверх иконки будет отображаться количество минут, при наведении — время в формате ЧЧ: ММ: СС, а во всплывающем окошке — часы со стрелками.

background.html

Сохраняем, перезапускаем, проверяем — красота!

Собственно, мы сделали простое расширение (а заодно и canvas припомнили). Для Getting Started, во всяком случае, достаточно. Осталось только привести его к годному для распространения виду — упаковать. Для этого на той же странице chrome://extensions/ давим на «Упаковка расширений. », указываем корневой каталог (тот, где лежит manifest.json), давим «Ок» и получаем файл формата *.crx на выходе. Это и есть наше упакованное расширение. Открыв его с помощью Хрома, мы установим расширение.

В следующей статье цикла я планирую подробно разобрать chrome.* API, а в дальнейшем — взаимодействие с различными сайтами и использование локальных хранилищ данных. Если вы считаете, что я что-то упустил в азах или у вас есть пожелания по поводу следующих статей цикла — прошу изложить их в комментариях.

Имейте в виду, что устанавливать стоит только те расширения, в которых вы уверены. Даже в Chrome Web Store можно наткнуться на вредоносный аддон.

Как установить расширение в Google Chrome

Как установить расширение из Chrome Web Store

Главный источник расширений для вашего браузера — официальный магазин Chrome Web Store. Тут они доступны для установки бесплатно. Чтобы установить расширение, сделайте следующее.

Найдите нужное расширение. Можно воспользоваться строкой «‎Поиск по магазину» в левом верхнем углу экрана или выбрать что‑нибудь в категориях на главной странице. Щёлкнув нужное расширение, вы увидите его страничку. Справа будет большая синяя кнопка «‎Установить». Нажмите её.

Нажмите «‎Установить расширение» во всплывающем окне и подождите немного. Когда установка закончится, Chrome покажет уведомление в левом верхнем углу окна. Опционально может открыться страничка расширения с инструкциями.

Теперь расширение готово к работе.

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

А если решите убрать расширение обратно в меню, щёлкните его значок правой кнопкой мыши и выберите «‎Открепить из Быстрого запуска».

Как установить расширение в формате ZIP

Иногда нужного расширения нет в Chrome Web Store, но разработчик позволяет скачать его на своём сайте. В этом случае его придётся добавить в браузер вручную. В прошлом достаточно было скачать расширение в формате CRX и перетянуть в окно Chrome. Теперь Google убрала эту возможность по соображениям безопасности. Тем не менее установить сторонние расширения всё ещё можно.

Загрузите нужное расширение. Как правило, оно запаковано в архив ZIP. Распакуйте его в новую пустую папку в любом удобном для вас месте.

В Chrome нажмите «‎Меню» → «‎Дополнительные инструменты» → «‎Расширения».

Щёлкните переключатель «‎Режим разработчика».

Нажмите «‎Загрузить упакованное расширение» и выберите вашу папку. Готово, расширение установлено.

Как установить стороннее расширение в формате CRX

Некоторые расширения по старинке содержатся не в архиве ZIP, а в формате CRX. Их браузер позволяет установить, только если они были скачаны из Chrome Web Store. Иначе он просто откроет страничку магазина. Вот как обойти это ограничение.

Загрузите расширение формате CRX. Откройте сайт CRX Extractor и перетащите скачанный файл в поле справа.

Распакуйте полученный архив в новую папку и установите расширение, как показано в предыдущем пункте.

Как настроить расширение в Google Chrome

Нажмите «‎Меню» → «‎Дополнительные инструменты» → «‎Расширения» и найдите нужный вариант.

Щёлкните кнопку «Подробнее‎» рядом с ним — откроется окно параметров. Тут можно включить или выключить расширение, не удаляя его. В разделе «‎Доступ к сайтам» вы можете указать, нужно ли запускать расширение на всех сайтах, или на некоторых (их адреса нужно будет ввести вручную), или активировать его только при щелчке по значку аддона. А в «‎Разрешить использование в режиме инкогнито» — включить расширение для приватного режима.

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

Наконец, раздел «‎Параметры расширений» открывает меню настроек самого аддона.

У каждого расширения оно своё. Доступные для редактирования параметры, находящиеся тут, зависят от разработчика аддона.

Открыть параметры расширения также можно, щёлкнув по его значку на панели инструментов правой кнопкой мыши и выбрав «‎Параметры».

Кстати, не у всех расширений имеются настройки, открытые для редактирования, так что иногда эта кнопка недоступна.

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

Нажмите «‎Меню» → «‎Дополнительные инструменты» → «‎Расширения», найдите расширение, от которого хотите избавиться, и нажмите «‎Удалить». Ещё быстрее это можно сделать, щёлкнув правой кнопкой мыши по значку аддона на панели инструментов и выбрав в контекстном меню «‎Удалить из Chrome». Либо нажмите на значок пазла, отыщите нужное расширение там, нажмите на кнопку с тремя точками рядом с ним и щёлкните «‎Удалить из Chrome».

Подтвердите вашу команду, когда браузер переспросит вас, повторным нажатием кнопки «‎Удалить». Готово, расширение удалено.

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

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

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

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

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

Скрипты содержимого. Наиболее распространённый тип. Они запускаются в контексте веб-страницы и могут изменять её. Именно такое расширение мы и будем создавать.
Выпадающее окно (popup). Использует иконку справа от адресной строки, чтобы открыть окно с каким-то HTML.
UI с опциями. Пользовательский интерфейс для настройки параметров в качестве расширения. Получить доступ к нему можно, щелкнув правой кнопкой мыши по значку расширения и выбрав пункт “Параметры” или перейдя на страницу расширения из списка расширений Chrome: chrome://extensions .
Расширение DevTools. Добавляет функциональность в инструменты разработчика. Оно может добавлять новые панели интерфейса, взаимодействовать с проверяемой страницей, получать информацию о сетевых запросах и многое другое — документация Google Chrome.

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

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

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

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

Они нужны, чтобы добавить префиксы поставщиков к стилям и иметь возможность писать конструкции @import "tailwindcss/base" , импортируя файлы Tailwind прямо из node_modules .

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

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

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

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

Теперь у нас есть tailwind.config.js . Чтобы удалить неиспользуемый CSS, добавляем пути ко всем нашим файлам JS в поле конфигурации purge :

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

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

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

Наконец, добавим указатель на background.js в manifest.json , чтобы он мог работать с нашим расширением: горячая перезагрузка в продакшне отключена по умолчанию:

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

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

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

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

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

Создадим файл content-script.js в папке src . И добавим HTML-форму в только что созданный файл:

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

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

Теневой хост — это любой элемент DOM, к которому мы хотели бы присоединить теневое дерево. Теневой корень — это то, что возвращается из attachShadow , а его содержимое — то, что визуализируется.

Будьте осторожны: единственный способ стилизовать содержимое теневого дерева — встроить стили. Parcel V2 из коробки есть функция, благодаря которой вы можете импортировать содержимое одного пакета и использовать его в качестве скомпилированного текста внутри ваших файлов JavaScript. Именно это мы и сделали со своим пакетом style.css . Parcel заменит его во время упаковки.

Теперь мы можем автоматически встроить CSS в Shadow DOM во время сборки. Конечно, мы должны сообщить браузеру о файле content-script.js , в котором встраивается style.css . Для этого включаем скрипт содержимого в манифест. Обратите внимание на секцию content-scripts ниже первого блока:

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

Наконец, запускаем yarn watch , переходим в chrome://extensions и убеждаемся, что в правом верхнем углу страницы включен режим разработчика. Нажмите на кнопку “Загрузить распакованный” и выберите папку dist в разделе demo-extension .

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

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

На MacOS: brew install zip .
На Linux: sudo apt install zip .
На Windows: powershell Compress-Archive -Path .\\dist\\ -Destination .\\chrome-extension.zip .

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

Читайте также: