Расширение Chrome Web - без предварительного опыта программирования: 6 шагов

2025 Автор: John Day | [email protected]. Последнее изменение: 2025-01-23 15:04

Расширения Chrome - это небольшие программы, созданные для улучшения работы пользователей в Интернете. Для получения дополнительной информации о расширениях Chrome перейдите на

Чтобы создать расширение для Chrome Web Extension, требуется кодирование, поэтому очень полезно просмотреть HTML, JavaScript и CSS на следующем веб-сайте:

www.w3schools.com/default.asp (школы w3 - хороший сайт для ресурсов по кодированию)

Не умеете кодировать? Не волнуйтесь, это руководство поможет вам в этом.

Самое лучшее в расширениях Chrome то, что их можно настраивать. Это не просто одна конкретная вещь, которую можно сделать, так что проявите творческий подход.

Запасы

Необходимые материалы указаны ниже:

• Компьютер с текстовым редактором (я использую Блокнот)
• Гугл Хром

И это все!

Шаг 1. Создайте каталог

Сначала создайте папку, в которой будут храниться все файлы, и назовите ее «расширение». Имя может быть изменено позже при желании.

Шаг 2. Создайте файл манифеста и закодируйте его

Файл манифеста - очень важная часть расширения. Он сообщает расширению, что делать и чем быть. Файлы манифеста отформатированы в JSON. Первый шаг - открыть текстовый редактор и сохранить новый файл как manifest.json.

Затем введите следующий сценарий:

{

"name": "Первое расширение", "version": "1.0", "description": "Я могу закодировать расширение", "manifest_version": 2, "browser_action": {"default_title": "First Extension"}}

Помните запятые после значений!

После того, как это набрано, сохраните файл манифеста и перейдите в chrome: // extensions (для этого в качестве браузера следует использовать Chrome). Попав в chrome: // extensions, включите режим разработчика. После этого нажмите кнопку «Загрузить распакованный» и выберите папку «extension».

барабанная дробь, пожалуйста …

Ура! Это расширение, за исключением… своего рода скучного. На данный момент он буквально ничего не делает, но скоро он станет супер крутым.

Шаг 3. Создайте значки и обновите манифест

Один веб-сайт, который хорошо подходит для рисования значков, - это https://www.piskelapp.com/. Доступны и другие программы для рисования. Иконки должны быть квадратными. В этом проекте будут использоваться значки размером 16x16, 32x32, 48x48 и 128x128. После того, как значок будет создан, создайте папку под названием «изображения» в папке расширения и поместите значок в эту папку. Было бы неплохо дать изображению имя в соответствии с его размером. Например, icon32.png. Новый код приведен ниже:

{

"name": "Первое расширение", "version": "1.0", "description": "Я могу закодировать расширение", "manifest_version": 2, "browser_action": {"default_title": "Первое расширение", " default_icon ": {" 16 ":" images / icon16-p.webp

Для справки по коду манифеста перейдите на

Шаг 4. Добавьте всплывающее окно

У этого расширения будет всплывающее окно. Всплывающее окно представляет собой файл HTML (язык гипертекстовой разметки), поэтому сначала полезно изучить основы HTML, CSS и JavaScript.

Сначала сохраните документ как файл popup.html в папке расширения.

Затем отредактируйте файл манифеста, чтобы при щелчке по нему отображался «popup.html». Новый код приведен ниже:

{

"name": "Первое расширение", "version": "1.0", "description": "Я могу закодировать расширение", "manifest_version": 2, "browser_action": {"default_title": "Первое расширение", " default_icon ": {" 16 ":" images / icon16-p.webp

Не забывайте запятую!

Теперь, если следующий HTML-код добавлен в popup.html, при нажатии на него будет отображаться «Hello World».

Привет, мир

Шаг 5: Сделайте его красивым и интерактивным

Если набрана основная строка HTML, то выполняется минимум. Если добавить CSS (каскадные таблицы стилей), он будет выглядеть круче, а если добавлен JavaScript, он может быть более интерактивным. В этом руководстве не будут подробно рассказываться о HTML, JavaScript и CSS, но в Интернете есть множество ресурсов. Ниже приведен код простой программы Hello World, а затем более красочной программы, соответственно:

Привет, мир

Привет, мир

# привет {цвет фона: # 000000; цвет: # ff0000; граница: 8px outset # 86a3b2; радиус границы: 50 пикселей; преобразовать: повернуть (57 градусов); отступ: 10 пикселей; выбор пользователя: нет; курсор: перекрестие; переход: преобразовать 2с; } #hello: hover {преобразование: поворот (-417deg); }

Второй пример может сбить с толку новичка. Но это должно было показать вам, насколько важен CSS для программы / расширения. А сейчас самое время сделать перерыв, изучить код HTML5 и использовать developer.chrome.com в качестве справочной информации. Это может занять некоторое время, но можно сделать отличное расширение.

Шаг 6. Публикация в Интернет-магазине Chrome

Если кто-то сделал действительно отличное расширение и хочет поделиться им со всем миром, он может опубликовать его. В этом, в конце концов, и смысл расширения. В этом руководстве была сделана попытка объяснить файл манифеста и то, как его можно использовать, и в нем просто была программа «Hello World».

Первое, что нужно сделать, чтобы сделать расширение общедоступным, - это превратить папку расширения в zip-файл. Второе, что нужно сделать, это перейти на https://chrome.google.com/webstore/category/extensions и войти в учетную запись Google. Затем нажмите кнопку с шестеренкой настроек, а затем нажмите «Панель разработчика». Нажмите кнопку «Новый элемент», чтобы загрузить zip-файл. Оказавшись там, необходимо отредактировать описание магазина, конфиденциальность и цены. Расширение можно легко опубликовать, если оно отправлено на проверку.

Теперь, когда расширение завершено, продолжайте код!