Оглавление:
2025 Автор: John Day | [email protected]. Последнее изменение: 2025-01-13 06:58
Расширения 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-файл. Оказавшись там, необходимо отредактировать описание магазина, конфиденциальность и цены. Расширение можно легко опубликовать, если оно отправлено на проверку.
Теперь, когда расширение завершено, продолжайте код!