Главная » Блогосфера » Обзоры расширений » 2014 » Февраль » 15
Инструменты для создания и отладки расширений
Опубликовано: Бармалей · 15.02.2014 · 02:00 ••• Обновление: 22.12.2022 · 17:15 1

Актуализированный репринт авторской статьи с форума Ru-Board • [веб-архив]
Дата публикации: 15.02.2014. Последнее изменение на форуме: 10.09.2021.
★ Материал репринта обновлён, дополнен и исправлен по состоянию на 22.12.2022.

Разработка и отладка браузерных расширений

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

В этой подборке:

Обозначения: [⚓] анонс [©] источник [®] исходник [✻] описание [☰] обзор [1.0] версия [✇] архив [⚒] форк [Ru] форум

О ручной правке файлов расширений

Как говорится, "перед тем как вы начнёте", хотелось бы сказать о некоторых основных моментах.

1. Чаще всего "пациент" (исходное расширение для доработки или изучения) попадает "на стол" в упакованном виде – либо в формате стандартного zip-архива с исходным кодом, либо в формате установщика (crx-файл, модифицированный zip-архив). В этом случае следует сначала распаковать архив (или установщик) с помощью любого архиватора (zip, rar, 7Zip или встроенными средствами системы) в отдельную папку, с содержимым которой вы и будете работать.

2. Основное "полезное" содержание любого аддона состоит из (фактически) текстовых файлов, содержащих собственно код расширения. Простейшим средством редактирования кода расширений в Windows является стандартный Блокнот.) Для простой правки кода его более чем достаточно, но, если планируется всерьёз разобраться во "всей этой кухне", лучше использовать редакторы с расширенными возможностями (подсветка синтаксиса, автозавершение тегов, проверка кода и т.д.). Классическим примером достаточно лёгкого и мощного редактора является Notepad++.

3. Чтобы ваши эксперименты были успешными, следуйте самому главному правилу:
Если вы что-либо редактируете в текстовых файлах расширения или темы (напр., скрипты, манифест, html), помните, что исправленные файлы необходимо сохранять только в формате UTF-8! В противном случае ваше расширение/тема не будет нормально упаковываться и/или, в дальнейшем, не будет устанавливаться и/или работать! Особенно это касается файла манифеста и файлов, содержащих буквенные символы, отличные от латиницы (OEM/Unicode).

4. Не пытайтесь редактировать установленные в браузер расширения, модифицируя их ресурсы непосредственно в папке установки (в вашем профиле) – это однозначно приводит к ошибке при проверке браузером хэша установленных аддонов с последующим отключением таких "повреждённых" расширений и/или их восстановлением из репозитория (естественно, при этом все ваши изменения будут потеряны).

5. Во избежание лишних вопросов – внимательно читаем эти статьи:

Расширения и для разработчиков

Дополнения для облегчения отладки аддонов и скриптов, настройки стилей и дизайна в целом.

Загрузка и изучение расширений
  • Загрузка расширений из репозитория Chrome WebStore
    Известные методы и перечень инструментов для загрузки и онлайн просмотра CRX-файлов.
  • Get CRX RU ★ Рекомендуется к применению
    Загрузка расширений из Chrome WebStore, AMO, Opera Addons, MS Edge, загрузка скриптов с сайтов GreasyFork, OpenUserJS, UserScriptsMirror, загрузка APK-файлов из Google PlayStore, автоматическое получение описания со страниц дополнений, просмотр исходного кода, поиск в архиве.
  • Управление установленными расширениями
    Подборка менеджеров расширений, инструменты штатного управления дополнениями.
  • CRX4Chrome.com
    Архив оригинальных расширений CWS с историей версий, прямые ссылки на загрузку.
  • Rob Wu CRX-viewer
    Онлайн просмотр исходного кода аддонов из CWS/OWS/AMO, загрузка CRX/XPI-файла в формате ZIP.
  • Chrome Apps & Extensions Developer Tool [☰ ☰ ☰]
    Управление + отладка + анализатор активности аддонов. Как замена chrome:/extensions.
  • Advanced Extensions Control Tool ★ Рекомендуется к применению
    Осовремененный русский мод предыдущего приложения, допилен под текущие API, расширен функционал.
  • Chrome extension source viewer [⚓]
    Просмотр исходника CRX + скачивание ZIP (CWS/OWS/AMO)
    Cм. также: архивные версии 1.2.4+ этого расширения (если текущая не работает в вашем браузере)
  • CRX Inspector Просмотр содержимого CRX-файла прямо со страницы WebStore
    Корректная работа не гарантируется (версия не обновлялась с 2014 года).
  • Old extension log
    Отслеживание деинсталляции расширений, удобно для их последующей переустановки.
  • JSONView • JSON Formatter
    Просмотр и проверка содержимого файла манифеста.
  • JSON-handle [© ⚓]
    Продвинутый вьювер/форматтер/редактор файлов в формате JSON (тестовая страница).
  • Extension Source Locator [⚓]
    Вывод списка расширений, пути к папкам их установки.
Работа со скриптами (JS)
Работа со стилями (CSS)
  • Управление стилями отображения веб-страниц и сайтов
    Подборка менеджеров стилей, инструменты управления внешним видом веб-страниц.
  • CSS Shapes Editor [☰ ☰]
    Дополнение к Инструменту разработчика, обтекание изображения тестом с помощью CSS.
  • CSSViewer
    Просмотр стиля любого элемента страницы.
  • CSS Diff
    Сравнение CSS-кода двух различных HTML-элементов.
  • CSS Reloader
    Перезагрузка только CSS, без полной перезагрузки всей страницы.
  • Clean CSS
    Отладка и оптимизация CSS-кода.
  • Custom Web • RWeb • dotjs (Win) (MacOS)
    Кастомизация внешнего вида сайтов через подстройку CSS/JS.
  • MagiCSS Live CSS Editor • Live CSS Editor • Code Cola
    Редактирование CSS "на лету" + предпросмотр (работает до перезагрузки страницы).
  • Alt CSS
    Подмена/переключение CSS "на лету" (работает до перезагрузки страницы).
Редакторы кода (HTML/JS/CSS)
  • PageEdit
    Онлайн WYSIWYG HTML-редактор + валидатор кода.
  • Zed Code Editor • Instrumente
    Текстовый редактор, поддержка CSS, HTML, JavaScript, JSON, XML.
  • Text • Caret
    Удобный текстовый редактор, MDI, подсветка синтаксиса и пр.
  • Quick source viewer
    Показывает ресурсы страницы: HTML, Javascript и CSS, есть подсветка кода.
  • XML Tree • XV XML Viewer
    Удобный просмотр XML-файлов (в т.ч. локальных) + подсветка синтаксиса.
  • Tailor
    Оффлайн редактор кода, + автодополнение + подсветка.
  • Code Formatter
    Форматирование кода HTML/CSS/JS/C/PHP.
Визуализация и дизайн
Дополнительно

DevTools: встроенный в браузер инструмент разработчика

Вызов: F12 или Ctrl+Shift+I/J на любой просматриваемой странице.

Расширение встроенных функций
  • DevTools Extensions Gallery
    Официальная подборка расширений для встроенного DevTools'а.
  • Accessibility Developer Tools • Event Spy
    Дополнение встроенных в хром-браузер средств разработчика.
  • DevTools Autosave
    Сохраняет изменения в CSS/JS при редактировании через Chrome DevTools.
Дополнительные возможности

Онлайн инструменты, сайты и сервисы

Полезные сайты и онлайн-сервисы для разработчиков расширений.

Аддоны-кнопки быстрого вызова онлайн-сервисов
Для перехода на сайты, можно заменить закладками.

Работа с pak-файлами ресурсов браузера

Обсуждение особенностей распаковки/упаковки для браузеров версий 62+: читаем отсюда и далее.

  • Magister/pak-tools [☰ ⚓ ⚓]
    Разборка и сборка PAK-файлов для Opera 15+ и Chromium (скрипт на Python'е, требуется сам питон).
    Вариации python-скриптов распаковки и упаковки: здесь и тут.
  • O+ pak scripts [✇ ⚓]
    Аналогично, vbs-скрипты для Оперы, подходят и для хром-браузеров.
  • ChromePAK [® ⚓ ⚓]
    Консольный распаковщик/упаковщик ресурсов Хрома (интерфейс на китайском).
  • chrome-pak-customizer [⚓]
    Распаковка/упаковка файлов ресурсов, поддерживает 4 и 5 версии форматов pak-файлов.
  • Grit7z [⚓]
    Плагин для архиватора 7-Zip, может открывать, модифицировать и создавать PAK архивы.

Документация и полезные статьи

Если у вас есть что добавить к этому списку – просьба отписаться в комментариях к статье.
…не забываем смотреть в "похожих" у понравившихся аддонов, чтоб "два раза не вставать"…))
…и кроме того – другие подходящие расширения ищем самостоятельно в разделе для разработчиков.

Смотрим также: другие статьи рубрики "Тематические подборки расширений".

Обзоры расширений
Так держать! :)
 Бармалей 15.02.2014 22.12.2022 598 0.0
Поделиться
Всего комментариев: 1
0
1 Бармалей 05.03.2021 • 09:19
..добавил: LocalStorage Manager - есть функция экспорта/импорта данных.
Войдите:
close