Расширение Chrome кажется загадочной технологией, пока я не посмотрел учебное видео от Брэда Трэверси. Так интересно узнавать что-то новое, связанное с Интернетом.
Я следил за видео шаг за шагом. Вы получаете собственное расширение Chrome только с html и css, без Javscript, как ни странно.
Чтобы создать небольшой сайт, нам нужен файл html.
структура тела состоит из двух частей: заголовка и содержимого
заголовок включает логотип
контент имеет четыре ссылки на значок в моей демонстрации, в то время как вы можете добавить столько, сколько хотите.
Для шрифтов я обычно использую Google Fonts.
Для значка лучше всего выбрать Значок Font Awesome.
Итак, html-ссылки добавлены в шапку.
Затем css для макета окна.
Затем мы можем загрузить в расширение Chrome.
Откройте три точки в правой части браузера →дополнительные инструменты →расширение
Включите режим разработчика и загрузите распакованное
Манифест.json
Требуется установить версию манифеста, имя и версию
вы можете установить версию вашей работы и номер выше при обновлении
icons содержит все нужные вам значки с разными пиксельными изображениями
brower_action — это файл всплывающего окна по умолчанию, который изменен на «действие» в версии 3.
разрешения — это разрешение сайта, а activeTab
разрешение разрешить расширению временный доступ к текущей странице.
Для версии 3:
Если вы хотите показать в интернет-магазине Chrome, легко загрузить в магазин, следуя этому руководству, чтобы ваша работа могла отображаться в магазине. Но в первый раз, чтобы использовать магазин, вам нужно регистрационный взнос в размере 5 долларов США.
Для версии newst manifest.json, которая является V3, так что что-то меняется.
Как перейти с версии 2 на версию 3? проверьте эту ссылку
Для обычного обновления:
//Manifest v2 "manifest_version": 2
//Manifest v3 "manifest_version": 3
//Manifest v2 "browser_action": {...} "page_action": {...}
//Manifest v3 "action": {...}
//Manifest v2
"background": {
"scripts": ["js/background.js"]
}
//Manifest v3
"background": {
"service_worker": "js/background.js"
}
//Manifest v2
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
//Manifest v3
"content_security_policy": {
"extension_pages": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"sandbox": "..."
}
О разрешении с необязательными разрешениями и host_permissions для объявления: больше документ
{
"name": "My extension",
...
"optional_permissions": ["tabs"],
"host_permissions": ["https://www.google.com/"],
...
}