«В нашей текущей жизни мы больше стремимся использовать приложения социальных сетей и поисковую систему Google для наших развлекательных и поисковых целей, то есть исследовать какую-либо образовательную тему через поисковую систему «Google», а также получать общие знания. Чтобы использовать поисковую систему Google для поиска чего-либо, у нас должен быть установлен какой-либо браузер на наших мобильных телефонах, ноутбуках или персональных компьютерах. Одним из наиболее используемых и эффективных браузеров сегодняшнего века является браузер «Google Chrome», который предлагает множество хороших функций, а также полезность расширения. «Расширение» — это подключаемый модуль, который можно найти в любом браузере для ограничения или разрешения доступа к веб-сайтам и различным функциям. Эти расширения обычно не являются встроенными; вы должны добавлять каждое расширение в свой браузер отдельно, когда это необходимо. Если вы немного разбираетесь в технологиях, вы можете знать, как использовать JSON-файлы манифеста для создания и добавления расширения за несколько шагов. Следовательно, в этой статье будут рассмотрены все эти шаги по созданию нового расширения в браузере Google Chrome.
Прежде чем взглянуть на метод создания расширения, вам необходимо убедиться, что ваш браузер Google Chrome уже запущен, а поисковая система «Google» не содержит никаких фоновых данных. Вы можете видеть, что изображение, прикрепленное ниже, не имеет фона для поисковой системы «Google.com», то есть только белый фон».
Добавить папку расширения
Быстро откройте инструмент Visual Studio Code из приложений вашей системы Windows. Чтобы правильно открыть код Visual Studio и включить его для нашего использования, может потребоваться до 1 минуты. После того, как он был запущен должным образом и готов к использованию, мы добавили в него уже созданную папку «Расширение» через список меню «Файл» на верхней панели задач, показанной ниже. После создания папки «Расширение» мы добавили в нее еще одну папку с именем «изображение», содержащую изображения, которые будут использоваться в качестве значка для расширения в браузере. Наряду с этим мы добавили один файл «manifest.json» и один файл javascript с именем «script.js», чтобы создать новое расширение и добавить его в браузер. Давайте начнем с файла manifest.json, дважды щелкнув по нему, чтобы начать работу в JSON, чтобы создать и использовать расширение для изменения фона «Google».
Создать файл манифеста
В файл manifest.json вы должны добавить показанный ниже код «JSON». Этот код является фактическим сценарием конфигурации для создания и добавления расширения в наш браузер Google Chrome. Этот код JSON был запущен с инициализацией версии манифеста переменной как «2» и именем создаваемого расширения, т. е. «Изменить фон». После этого мы добавили краткое описание нашего расширения в переменную «description».
Наряду с этим мы добавили версию расширения «1.0». После того, как все основные конфигурации для «расширения» созданы, нам нужно добавить путь к значку изображения, который будет использоваться в качестве значка для расширений. Переменная «browser» была определена для установки значка расширения для верхней панели задач браузера Google Chrome, т. е. там, где отображаются все расширения после включения их для использования в будущем для определенных или всех сайтов. После этого мы добавили путь к трем файлам изображений разного размера, чтобы браузер мог каждый раз использовать разные файлы.
Наряду с этим, переменная «page_action» использовалась для отображения того, какое изображение должно отображаться после нажатия на значок «расширения» на верхней панели задач Google Chrome. Внутри него использовалась переменная «Default_icon» вместе с тремя разными значениями пути для изображений, которые будут использоваться в качестве значков при каждой перезагрузке. Для этой цели используются три разных файла изображений. Последняя переменная content_scripts принимает в себя в общей сложности 2 новые переменные, то есть совпадения и CSS. Переменная «matches» содержит путь к веб-сайту, который будет изменен после создания этого нового расширения. При этом переменная «CSS» содержит имя CSS-файла, который будет использоваться для стилизации Google.com после подачи заявки на расширение, т. е. стилизации Google.com после каждой перезагрузки при включении расширения. Теперь, когда этот код завершен и готов к использованию, просто быстро сохраните его и перейдите к файлу «main.css».
В файле CSS main.css мы добавили стили для создаваемого расширения файла манифеста. Стиль будет применяться с использованием html-тега «body», т. Е. Для применения ко всей области «тела» файла манифеста. Мы установили новый фон для Google.com, используя «URL» файла изображения из поисковой системы. Теперь сохраните свой код прежде всего.
После ввода необходимых кодов, то есть файлов manifest.json и main.css, нам нужно открыть утилиту расширений в браузере Google Chrome по URL-адресу chrome://extensions» на новой вкладке. Откроется служебная область расширений. В режиме разработчика вам необходимо загрузить распакованную папку «Расширение» из вашей локальной системы, чтобы сделать ее расширением с помощью кнопки «загрузить без упаковки», показанной на изображении ниже. Расширение было эффективно добавлено в браузер Chrome, как показано на рисунке. Удалите ошибки, чтобы заставить его работать полностью.
Из значка «расширение» выберите расширение «Изменить фон», чтобы отобразить его на панели задач, то есть расширение значка «C».
После перезагрузки Google.com его фон обновился с помощью этого расширения.
Вывод
Начиная с объяснения использования браузеров в системе Windows, мы также обсудили важность расширений в любом браузере. После краткого объяснения расширений мы объяснили, как использовать JSON-файл манифеста для создания расширения для браузера Google Chrome и как использовать его для изменения фона для поисковой системы «Google.com». После загрузки расширения в Google Chrome мы использовали его на Google.com, чтобы изменить его фон.