Как отредактировать расширение для google chrome
Обновлено: 05.07.2024
Я не уверен, на каких языках эти расширения, я думаю, что они написаны в Html, Javascript или JSON. Насколько я знаю, они "сжаты" в a .Файл CRX.
можно напрямую изменить html, js, json расширения Chrome (или любой язык, который они используют)?
Я искал его в Google, и я нашел это:
тип файла расширения Google Chrome-CRX. Это по существу формат сжатия. Поэтому, если вы хотите увидеть, что стоит за расширением, скриптами и кодом, просто измените тип файла с "CRX" на "ZIP" .
распакуйте файл, и вы получите всю необходимую информацию. Таким образом, вы можете увидеть кишки, узнать, как написать расширение самостоятельно или изменить его для своих собственных нужд.
затем вы можете упаковать его обратно с помощью внутренних инструментов Chrome, которые автоматически создают файл обратно в CRX. Устанавливая ее просто необходимо.
скопируйте папку расширения, которое вы хотите изменить. (Имя в соответствии с идентификатором расширения, чтобы найти идентификатор расширения, перейдите в chrome://extensions/ ). После копирования необходимо удалить папку _metadata.
С chrome://extensions на режим разработчика выберите Загрузить распакованное расширение. и выберите скопированную папку расширения, если она содержит подпапки это называется версия, выберите эту папку где есть файл манифеста, этот файл необходим для Chrome.
внесите изменения, а затем выберите перезагрузить и обновить страницу для расширения, чтобы увидеть изменения.
- hexdump -C the_extension.crx | more
- посмотрите в выходных данных для начала zip-файла, которые являются ASCII байты "PK". В образце, который я пробовал, ПК был при смещении 0x132. (От чтения спецификации CRX, я думаю, что это число будет варьироваться от файла к файлу из-за разной длины подписи.) Это число мы будем использовать в следующем шаге.
- dd if=the_extension.crx of=the_extension.zip bs=1 skip=0x132 (для параметра skip подставьте смещение, найденное на предыдущем шаге.)
- теперь распаковать .zip, который вы только что создали.
- поиграйте с файлами в распакованном каталоге, затем либо установите неподписанное / распакованное расширение в свою установку Chrome, либо иначе переупакуйте его так же, как и любое другое расширение Chrome.
Я прочитал другие ответы и счел важным отметить несколько вещей:
1.) Для пользователей Mac: при нажатии кнопки " Загрузить распакованное расширение. ", папка библиотеки по умолчанию скрыта и (даже если опция Показать скрытые файлы включена на вашем Mac) она может не отображаться в окне поиска Chrome.
2.) Подпапка, содержащая расширение, является случайной буквенно-цифровой строкой, названной после идентификатора расширения, который можно найти в расширении Chrome страница разработчика, если флаг имеет значение true. (Верхний правый флажок на странице расширений)
(уже сказал) я узнал об этом, делая некоторые темы Chrome (которые уже давно ушли. :- P)
темы Chrome, расширений и т. д. это просто сжатые файлы. Получить 7-zip или WinRar распаковать ее. Каждое расширение/тема имеет манифест.файл json. Откройте манифест.файл JSON в блокноте. Затем, если вы знаете кодировку, измените код. Там будут и другие файлы. Если вы посмотрите в файле манифеста, вы можете понять, для чего они предназначены. Тогда вы можете изменить все.
.CRX файлы похожи .ZIP-файлы, просто измените расширение и щелкните правой кнопкой мыши > извлечь файлы, и все готово.
после того, как вы извлекли файлы --> изменить их и добавить в zip и изменить расширение обратно .crx.
другой способ -- > открыть Chrome -- > настройки -- > расширения --> включить параметры разработчика --> Загрузить распакованное расширение (папка с измененными извлеченными файлами), а затем нажмите кнопку pack extension.
источник
теперь Chrome является многопользовательским так Extensions должен быть вложен в профиль пользователя ОС, а затем Профиль пользователя Chrome, мой первый пользователь Chrome был вызван Profile 1 мой Extensions путь C:\Users\ username \AppData\Local\Google\Chrome\User Data\ Profile 1 \Extensions\ .
чтобы найти ваш перейдите к chrome://version/ (я использую about: из-за лени).
обратите внимание на Profile Path и просто добавить \Extensions\ и у вас есть свой.
надеюсь, что это приносит эту информацию по этому вопросу до настоящего времени больше.
Если вы установили портативную версию Chrome или установили ее в пользовательском каталоге - расширения не будут доступны в каталоге, указанном в приведенных выше ответах.
попробуйте щелкнуть правой кнопкой мыши на ярлыке Chrome и проверить каталог "Target". Оттуда перейдите в один каталог выше, и вы должны быть в состоянии увидеть User Data папка, а затем можно использовать ответы, упомянутые выше
Я не уверен, на каких языках эти расширения, я думаю, написаны в Html, Javascript или JSON. Насколько я знаю, они "сжаты" в a .Файл CRX.
можно напрямую изменить html, js, json расширения Chrome (или любой язык, который они используют)?
Я искал его в Google, и я нашел это:
тип файла расширения Google Chrome-CRX. Это по существу формат сжатия. Поэтому, если вы хотите увидеть, что стоит за расширением, скриптами и кодом, просто измените тип файла с "CRX" на "ZIP" .
распакуйте файл, и вы получите всю необходимую информацию. Таким образом, вы можете увидеть кишки, узнать, как написать расширение самостоятельно или изменить его для своих нужд.
затем вы можете упаковать его обратно с помощью внутренних инструментов Chrome, которые автоматически создают файл обратно в CRX. Устанавливая ее просто необходимо.
установленные каталоги расширений Chrome перечислены ниже:
скопируйте папку расширения, которое вы хотите изменить. ( Названы по ID расширения, чтобы найти идентификатор расширения, перейти к chrome://extensions/ ). После копирования необходимо удалить папку _metadata.
С chrome://extensions на режим разработчика выберите Загрузить распакованное расширение. и выберите скопированную папку расширения, если она содержит подпапка это называется версией, выберите эту папку версии, где есть файл манифеста, этот файл необходим для Chrome.
внесите изменения, а затем выберите перезагрузить и обновить страницу для расширения, чтобы увидеть изменения.
каталоги расширений Chrome
подписанный CRX файл имеет заголовок, который заставит большинство/все unzippers блевать. Это не самый простой способ сделать это, но вот как это сделать из командной строки bash.
основная идея состоит в том, чтобы найти, где начинается исходный неподписанный zipfile, а затем скопировать файл CRX в zip-файл, но исключить заголовок CRX.
- hexdump -C the_extension.crx | more
- посмотрите на выходе для начала zip-файла, который является ASCII-байтами "PK". В образце, который я пробовал, ПК был при смещении 0x132. (Читая спецификацию CRX, я думаю, что это число будет варьироваться от файла к файлу из-за разной длины подписи. Это число мы будем использовать на следующем этапе.
- dd if=the_extension.crx of=the_extension.zip bs=1 skip=0x132 (для параметра skip замените смещение, найденное на предыдущем шаге.)
- теперь распаковать .zip, который вы только что создали.
- поиграйте с файлами в распакованном каталоге, затем установите расширение без знака / распаковки в установку Chrome или иначе переупакуйте его так же, как и любое другое расширение Chrome.
Я уверен, что есть более лаконичный способ сделать это. Эксперты Bash, пожалуйста, улучшите мой ответ.
Я прочитал другие ответы и счел важным отметить несколько вещей:
1.) Для пользователей Mac: при нажатии кнопки " Загрузить распакованное расширение. ", папка библиотеки по умолчанию скрыта и (даже если опция Показать скрытые файлы включена на вашем Mac) она может не отображаться в окне finder Chrome.
2.) Подпапка, содержащая расширение, является случайной буквенно-цифровой строкой, названной в честь идентификатора расширения, который можно найти в расширении Chrome страница разработчика, если флаг имеет значение true. (Верхний правый флажок на странице расширений)
(уже сказал) я узнал об этом, делая некоторые темы Chrome (которые давно прошли. :- P)
темы Chrome, расширений и т. д. это просто сжатые файлы. Get 7-zip или в WinRAR распаковать ее. Каждое расширение/тема имеет манифест.файл json. Откройте манифест.файл JSON в блокноте. Затем, если вы знаете код, измените код. Будут и другие файлы. Если вы посмотрите в файле манифеста, вы можете понять, для чего они предназначены. Тогда ты сможешь все изменить.
.CRX файлы похожи .ZIP-файлы, просто измените расширение и щелкните правой кнопкой мыши > извлечь файлы, и все готово.
после того, как вы извлекли файлы --> изменить их и добавить в zip и изменить расширение обратно .что CRX.
другой способ - > открыть Chrome - > настройки -> расширения -> включить параметры разработчика -> Загрузить распакованное расширение (измененная папка извлеченных файлов), а затем нажмите кнопку пакет расширения.
теперь Chrome многопользовательский так Extensions должен быть вложен в профиль пользователя ОС, а затем Профиль пользователя Chrome, мой первый пользователь Chrome был вызван Profile 1 мой Extensions путь C:\Users\ username \AppData\Local\Google\Chrome\User Data\ Profile 1 \Extensions\ .
чтобы найти ваш перейдите к chrome://version/ (я использую about: из-за лени).
уведомления Profile Path и просто добавить \Extensions\ и у вас есть свой.
надеюсь, что это приносит эту информацию по этому вопросу в актуальном состоянии больше.
Если вы установили портативную версию Chrome или установили ее в пользовательский каталог - расширения не будут доступны в каталоге, указанном в приведенных выше ответах.
попробуйте щелкнуть правой кнопкой мыши на ярлыке Chrome и проверить каталог "Target". Оттуда перейдите в один каталог выше, и вы сможете увидеть User Data папка, а затем может использовать ответы, упомянутые выше
можно изменить код .Расширение CRX, потому что это просто .zip-архив. Вы можете загрузить расширение, извлечь его исходный код, изменить его (протестировать и отладить его, как он на вашей стороне) и упаковать обратно .Файл CRX.
все, что он делает, это анализирует .CRX формат файла и извлекает фактические .застежка-молния содержит исходный код.
Для работы с расширениями вам понадобится переключить канал обновлений на Dev или Beta.
Расширение будет иметь кнопку с иконкой на панели инструментов Chrome. При нажатии на кнопку будет появляться всплывающее окно (popup) со случайной картинкой из галлереи фотографий телескопа Hubble. В верхней части окна будут размещены кнопки: настроить (показать страницу настроек), обновить (показать другую фотографию), закрыть (закрыть всплывающее окно).
Расширение будет содержать страницу настроек (options), на которой можно будет выбрать язык интерфейса (русский, английский) и выбрать размер картинки (маленький, большой).
Создание расширения начинается с создания папки, в которой мы будет создавать все необходимы для работы расширения файлы. Созадим папку HubblePics. Далее создадим файл, который будет содержать описание нашего расширения — manifest.json. Данный файл является обязательным для каждого расширения. Именно из него Chrome получает всю необходимую информацию о расширении (название, версия, разрешения, страницы расширения и т.д.).
"name" : "Hubble pictures extension" , // Название расширения
"version" : "1.0" , // Номер версии
"description" : "Hubble pictures extension" , // Описание расширения
"permissions" : [
"tabs" , // Разрешить расширению работать с вкладками
"http://hubblesite.org/*" // Разрешить расширению обращаться к указанному адресу
],
"browser_action" : < // Элементы браузера
"default_title" : "Hubble" , // Название кнопки
"default_icon" : "images/icon.jpg" , // Иконка для кнопки
"popup" : "popup.html" // Всплывающее окно
>,
* This source code was highlighted with Source Code Highlighter .
Подробное описание файла manifest.json вы можете получить здесь
Настройки
Создадим страницу настроек — options.html. Приводить полный код страницы я не буду, только интересные, на мой взгляд моменты, а именно сохранение, извлечение настроек и локализация.
Сохранять настройки можно в объекте localStorage, который, по сути, представляет из себя ассоциативный массив, хранящий пары «название», «значение». Например, для сохранения состояния радиокнопки «Размер картинки — Маленький», используется код:
localStorage[ "previewSmall" ] = document .getElementById( "previewSmall" ). checked ;
Для восстановления состояния:
document .getElementById( "previewSmall" ). checked = (localStorage[ "previewSmall" ] == "true" ) ? true : false ;
В своем проекте я обернул обращение к localStorage в функцию readProperty чтобы избавится от лишних проверок и получить возможность получения значения по умолчанию:
function readProperty(property, defValue)
if (localStorage[property] == null )
return defValue;
>
// Пример вызова
document .getElementById( "previewSmall" ). checked = readProperty( "previewSmall" , true );
* This source code was highlighted with Source Code Highlighter .
Локализация
С настройками разобрались, приступим к локализации. Способ, который я предлагаю, возможно, не самый лучший, но на данный момент ничего лучше я придумать не смог. Если кто-то подскажет другой, более простой вариант — буду рад.
Идея простая — есть ряд элементов, которые нужно перевести. У них есть идентификаторы. Создается ассоциативный массив или объект, в котором идентификатору элемента соответствует локализованный текст. Функция, которая занимается локализацией «пробегает» по массиву, по идентификатору находит контрол и устанавливает ему текст.
Создадим файл с названием элементов и указанием языка. Язык «регистрируется», путем добавления элемента в выпадающий список «Язык». Например русский язык добавляет в список элемент с текстом «Russian» и значением «ru_RU».
Файл \locale\ru_RU\options.js
lang_ru_RU =
lngLanguage: "Язык" , // Пара - идентификатор (id) элемента, текст
lngPreviewSize: "Размер картинки" ,
lngPreviewSmall: "Маленький" ,
lngPreviewBig: "Большой" ,
lngSave: "Сохранить" ,
lngExit: "Выход"
>
function RegisterLang()
var ctrl = document .getElementById( "language" );
ctrl.add(createOption( "Russian" , "ru_RU" ));
>
* This source code was highlighted with Source Code Highlighter .
Этот скрипт добавляется на страницу настроек (options.html)
< script type ="text/javascript" src ="locale/ru_RU/options.js" ></ script >
На странице, все локализуемые элементы должны иметь соответствующие идентификаторы, например:
Локализацией занимается функция 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];
// Получить элемент с id
var ctrl = document .getElementById(ctrlId);
// Не найден, продолжаем перебор
if (ctrl == null )
continue ;
>
// Найден, определить тип и присвоить значение
if (ctrl.tagName == "SPAN" )
ctrl.innerText = value;
>
else if (ctrl.tagName == "INPUT" )
ctrl.value = value;
>
>
>
* This source code was highlighted with Source Code Highlighter .
Теперь, если нам необходимо добавить новый язык, например английский, мы просто создаем папку \locale\en_US, в ней создаем скрипт options.js
lang_en_US =
lngLanguage: "Language" ,
function RegisterLang()
var ctrl = document .getElementById( "language" );
if (ctrl != null )
ctrl.add(createOption( "English" , "en_US" ));
>
>
* This source code was highlighted with Source Code Highlighter .
И добавляем скрипт на страницу
< script type ="text/javascript" src ="locale/en_US/options.js" ></ script >
Всплывающее окно
Внутри файла popup.html простая разметка, в которой предусмотрено место для загружаемой картинки, кнопки управления и индикатор процесса загрузки.
< ul class ="menu" >
< li >< img src ="images/options.jpg" onclick ="showOptions();" />
</ li >
< li >< img src ="images/update.jpg" onclick ="getPicture();" />
</ li >
< li >< img src ="images/close.jpg" onclick ="closePopup();" />
</ li >
</ ul >
< div id ="loader" >
< img src ="images/loader.jpg" />
</ div >
* This source code was highlighted with Source Code Highlighter .
В общем ничего интересного. Все интересно вынесено в файл popup.js.
xhr.onreadystatechange = function () if (xhr.readyState == 4)
if (xhr.responseText)
var xmlDoc = xhr.responseText;
if (imgs.length > 0)
var randIdx = Math.floor(Math.random() * imgs.length);
var imgSize = "-wallpaper_thumb.jpg" ;
// Какую картинку показываем?
if (readProperty( "previewBig" , "false" ) == "true" )
imgSize = "-640_wallpaper.jpg" ;
>
showImage( "http://hubblesite.org/" + hrefs[randIdx], imgs[randIdx] + imgSize);
>
>
>
xhr.open( "GET" , "http://hubblesite.org/gallery/wallpaper/" , true );
xhr.send( null );
function showImage(url, imgSrc)
var imgPlace = document .getElementById( "imgPlace" );
imgPlace.setAttribute( "src" , imgSrc);
var hrefPlace = document .getElementById( "hrefPlace" );
hrefPlace.setAttribute( "href" , url);
* This source code was highlighted with Source Code Highlighter .
Установка и упаковка расширения
Расширение создано, теперь необходимо загрузить его в Chrome. Запускаем Chrome, нажимаем кнопку Настройка и управление , выбираем пункт меню Extensions.
На открывшейся вкладке нажимаем Load Extension. , указываем путь к папке и, если все сделано правильно, видим новую кнопку на панели инструментов.
А в списке расширений видим наше расширение.
Теперь упакуем наше расширение, для того, чтобы его можно было выложить на какой-нибудь ресурс и любой пользователь мог бы скачать и установить его в пару кликов. Для этого, на той же закладке Installed Extensions нажимаем кнопку Pack Extension. , указываем путь к папке, содержащей файлы расширения, поле Private key file в первый раз оставляем пустым.
Если мы собираемся выпускать обновленные версии расширения — сохраним созданный файл с ключем HubblePics.pem и будем указывать путь к нему при каждой последующей упаковке расширения, иначе, каждый раз будет генерироваться новый файл, что приведет к назначению нового идентификатора для нашего расширения, а это, в свою очередь приведет к тому, что вместо обновления, пользователь будет устанавливать новую копию расширения.
Практически вся информация, необходимая для разработки расширений сосредоточена на странице Google Chrome Extensions: Developer Documentation. Если этого покажется мало, то всегда можно взять готовое расширение, изменить расширение с crx на zip, распаковать и посмотреть как это сделано «у них».
Так же источником информации, так сказать, из первых рук, может стать список изменений при выходе новых версий Google Chrome.
Имейте в виду, что устанавливать стоит только те расширения, в которых вы уверены. Даже в 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, в конечном счёте, не так уж сильно отличаются от веб-приложений. Сегодня мы написали расширение с применением новейших технологий и практик в веб-разработке. Надеюсь, это руководство поможет вам немного ускорить разработку вашего расширения!
Читайте также: