Расширение Chrome кажется загадочной технологией, пока я не посмотрел учебное видео от Брэда Трэверси. Так интересно узнавать что-то новое, связанное с Интернетом.

Я следил за видео шаг за шагом. Вы получаете собственное расширение Chrome только с html и css, без Javscript, как ни странно.

Github-файл

Чтобы создать небольшой сайт, нам нужен файл 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/"],
...
}