Кратко обо всех инструментах расширения Chrome и моем опыте создания расширения Clean Theme.
Я был поклонником Харли Квинн из комиксов DC в течение долгого времени, и после просмотра фильма Отряд самоубийц моя одержимость вышла на новый уровень. Все, что я хотел, это начать свою повседневную жизнь с ней, по одной вкладке за раз! Итак, в моем любимом браузере Chrome появился фон в стиле моего любимого комического персонажа Харли. Но это то, что Chrome решил дать мне на моей новой вкладке. Harley покрыт логотипом Google, панелью поиска и миниатюрами [тонны и тонны ... ну, всего 8, но их было достаточно, чтобы полностью охватить Harley! :( ] Хотя я понимаю полезность этих функций, Chrome действительно должен начать учитывать субъективные предпочтения. В любом случае, отчаянные попытки очистить эту страницу положили начало моему путешествию с расширениями Chrome.
Расширение, которое я создал, Clean Theme, скрывает элементы новой вкладки Chrome по умолчанию, чтобы вы могли видеть свои фоновые темы во всей красе. Вы можете поиграть с кодом, размещенным на git. Здесь я хотел бы задокументировать несколько основных функций расширений и мой путь создания этого расширения.
Расширения Chrome — это просто!
Все, что вам нужно знать для создания расширения Chrome, — это наши базовые HTML, JS и CSS. Расширения — это простые веб-страницы, работающие в браузере и добавляющие ему дополнительные функции.
Расширения Chrome — это весело!
Лично строить расширение было действительно весело. Расширения похожи на хаки, которые мы применяем к уже существующей огромной экосистеме компонентов браузера, чтобы представить наши функции, а когда хакерство не было веселым?! :) Это позволяет вам находить творческие способы настройки тесно переплетенной сети браузера.
Расширения Chrome структурированы!
Браузер предоставляет нам определенные точки входа и API для добавления нашего расширения в свою экосистему. Знание этого может значительно сэкономить ваше время на понимание того, какие функции можно/нельзя добавить и какие шлюзы лучше всего подходят для вас. На создание расширения Clean Theme у меня ушло 4 часа, что в противном случае заняло бы 15 минут, если бы у меня были предварительные знания.
Расширения Chrome легко тестировать и отлаживать!
- Перейти к хром://расширения
- Отметьте «Режим разработчика» в правом верхнем углу.
- Нажмите «Загрузить распакованное расширение...» и выберите папку расширения.
Вот и все! Ваше расширение добавляется локально и может быть протестировано в вашем браузере.
Архитектура расширений
манифест.json
Это json, который предоставляет всю важную информацию о расширении (имя, версия, значки), разрешениях, которые ему потребуются от браузера, и возможностях расширения. Это файл manifest.json чистой темы.
{
"manifest_version": 2, //version of manifest file format
"name": "Clean Theme",
"short_name": "CT",
"version": "1.0",
"description": "Hides all the default google new tab elements blocking the background theme",
"browser_action": {
"default_icon": "icon.png",
"default_title": "Cleans up your chrome theme!"
},
"content_scripts": [
{
"matches": [
"*://*/_/chrome/newtab*"
],
"js": [
"content.js"
],
"run_at": "document_idle"
}
]
}
Другими заслуживающими внимания ключами manifest.json являются
{
"page_action": {...},
"background": {
"persistent": false
},
"chrome_url_overrides": { //lets you override any 1 of the 3 pages
"bookmarks": "example.html" OR
"history": "example.html" OR
"newtab": "example.html"
},
"commands": {...}, //give keyboard shortcuts to trigger actions in your extension
"devtools_page": "devtools.html", //adds functionality to devtools
"event_rules": [{...}], //add rules that intercept, block, or modify web requests
"incognito": "spanning, split, or not_allowed",
"offline_enabled": true, //enable running in offline mode
"omnibox": { //let Google search bar send input to your extension after entering the keyword
"keyword": "aString"
},
"permissions": ["tabs"],
}
действие_браузера
Действия в браузере позволяют поместить значок справа от адресной строки на панели инструментов. Кроме того, он может иметь подсказку, значок или всплывающее окно. Всплывающая подсказка определяется параметром default_title в файле манифеста. Значок может состоять максимум из 4 символов и может использоваться для указания состояния расширения. Всплывающее окно появляется при нажатии на значок расширения. Он задается параметром default_popup в файле манифеста и указывает на HTML-файл.
страница_действие
Действия страницы похожи в пользовательском интерфейсе на действия браузера, но используются, когда вы хотите активировать расширение на основе текущей страницы. Используйте «скрытый» API, чтобы деактивировать расширение, когда оно не требуется.
контент-скрипты
Если вы хотите взаимодействовать с содержимым веб-страницы после ее загрузки, используйте сценарии содержимого. Ключевое слово «matches» в файле манифеста указывает массив регулярных выражений URL-адресов веб-страницы, в которые должен быть внедрен скрипт содержимого. Файлы JS и CSS указываются с соответствующими ключевыми словами. Ключевое слово run_at сообщает браузеру, когда вставлять файлы. Следующие изображения диаграммы пламени демонстрируют различия.
- document_start: файлы внедряются после всех файлов CSS, но до построения DOM или выполнения любого другого скрипта.
- document_end: файлы внедряются сразу после создания модели DOM, но до загрузки каких-либо ресурсов, таких как изображения.
- document_idle: файлы внедряются между document_end и сразу после срабатывания события window.onload.
фоновые страницы
Фоновые страницы — это единичные задачи, выполняемые в процессе расширения. Они выполняются в течение всего времени существования расширения и обычно используются для отслеживания изменений состояния. Другие страницы запрашивают состояние у фоновых страниц, или фоновые страницы могут уведомлять другие страницы об изменении состояния.
Хотя сценарий контента не может изменить DOM родительских страниц расширения, он всегда может отправлять/получать сообщения от родительского расширения. Фоновая страница может попросить сценарий содержимого изменить текущую DOM веб-страницы, или сценарий содержимого может уведомить фоновую страницу об элементах DOM веб-страницы или изменениях в них.
Сценарии не всегда могут потребоваться для запуска в фоновом режиме, и установка постоянного ключа в false в файле манифеста позволяет вам сделать эти фоновые сценарии управляемыми событиями.
Разрешения и API Chrome.*
Chrome.* API — это API только для Chrome, которые обеспечивают тесную интеграцию с браузером. Вы можете обнаружить такие вещи, как создание новой вкладки или изменение URL-адреса в адресной строке. Большинство этих API являются асинхронными вызовами, поэтому обязательно напишите обратные вызовы. Ключевое слово разрешений в файле манифеста запрашивает разрешения на доступ к этим API.
Чистая тема
Поскольку я хотел изменить новую вкладку, я сначала начал с «chrome_override_pages» только для того, чтобы понять, что эти страницы полностью переопределяют новую вкладку, включая фоновую тему. Затем я приступил к написанию фоновых страниц, управляемых событиями, и увидел, что эти страницы не имеют доступа к DOM веб-страницы. Это, наконец, привело меня к сценариям контента, которые могут фактически манипулировать DOM страницы, с помощью которой я получил доступ, и скрыл все нежелательные элементы, чтобы увидеть Харли во всей красе! :) Поскольку я не хотел прерывать работу с другими новыми функциями расширений вкладок, я только перехватывал каждый нежелательный элемент и скрывал его, оставляя DOM нетронутым.
Развертывание
Сожмите папку расширения в ZIP-файл, перейдите в панель разработчика и добавьте новый элемент. Стоимость первого добавления составляет единовременную стоимость установки в размере 5 долларов США. Просто следуйте инструкциям в форме, и ваше расширение будет запущено в кратчайшие сроки! :)
