Вы когда-нибудь были недовольны функциями, которые поставляются с вашим веб-браузером? Даже если вы часами просматриваете Google Web Store за плечами, не всегда просто нажать «скачать», чтобы улучшить работу в Интернете.

Здесь на помощь приходят расширения для браузера. В этой статье мы рассмотрим процесс создания собственного расширения для Google Chrome «сделай сам» с нуля.

Что такое расширение Google Chrome?

Современное веб-браузеры, такие как Google Chrome поставляются с набором функций, которые делают их простыми в использовании и способными удовлетворить потребности большинства пользователей. Однако расширение этих стандартных функций может дать множество различных преимуществ. Вот почему разработчики браузеров обычно позволяют создавать для них расширения, надстройки и плагины.

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

instagram viewer

В отличие от веб-сайта, расширения могут работать в фоновом режиме во время просмотра, иногда даже взаимодействуя с посещаемыми вами сайтами.

Что будет делать наше расширение Google Chrome?

Мы собираемся создать простое расширение для Chrome, которое позволит вам посещать веб-сайт Make Use Of и выполнять случайный поиск на основе категорий статей, найденных на сайте. Это быстрый и простой проект, но вы все равно многому научитесь.

Вы узнаете, как

  • Создайте расширение Google Chrome
  • Вставьте пользовательский код на веб-страницы с помощью расширения Chrome.
  • Создание прослушивателей событий и имитация кликов
  • Генерация случайных чисел
  • Работа с массивами и переменными

Создание собственного расширения для Chrome своими руками

Google на удивление упростил создание собственного Расширения Chrome, так что это не займет много времени, прежде чем у вас что-то заработает. Выполнение приведенных ниже шагов займет всего 10–15 минут, но мы рекомендуем вам поэкспериментировать и со своим собственным кодом.

Шаг 1: Создание файлов

Вы можете хранить расширение на своем локальном компьютере, если не планируете его распространять. Нам нужно всего лишь создать четыре разных файла, чтобы создать наше расширение; файл HTML, файл CSS, файл JavaScript и файл JSON.

Мы назвали наши файлы index.html, style.css, script.js и manifest.json. Файл манифеста должен иметь это имя для правильной работы, но вы можете дать другим имена, которые вам нравятся, если вы соответствующим образом измените свой код.

Вы должны поместить эти файлы в одну и ту же корневую папку.

Шаг 2: Создание файла манифеста

Файл манифеста поставляется с каждым расширением Google Chrome. Он предоставляет информацию о расширении для Chrome, а также устанавливает некоторые основные настройки. Этот файл должен содержать имя, номер версии, описание и версию манифеста. Мы также включили разрешения и действие, которое загружает index.html как всплывающее окно, которое появляется для расширения.

{
"название": "MakeUseOf.com Автоматический поиск",
"версия": "1.0.0",
"описание": "Инструмент поиска, чтобы найти интересные статьи",
"manifest_version": 3,
"автор": "Сэмюэл Гарбетт",
"разрешения": ["хранилище", "декларативный контент", "активтаб", "сценарий"],
"host_permissions": [""],
"действие":{
"default_popup": "index.html",
"default_title": "МУО Автопоиск"
 }
}

Шаг 3: Создание HTML и CSS

Прежде чем мы сможем начать писать наш сценарий, нам нужно создать базовый пользовательский интерфейс с использованием HTML и CSS. Вы можете использовать Библиотека CSS, такая как Bootstrap чтобы не создавать свои собственные, но нам нужно всего несколько правил для нашего расширения.

Наш файл index.html содержит теги html, head и body. Тег head содержит заголовок страницы и ссылку на нашу таблицу стилей, а body содержит тег h1, кнопка, которая приведет вас на MakeUseOf.com, и еще одна кнопка, которую мы будем использовать в качестве триггера для сценарий. Тег скрипта в конце документа включает в себя script.js файл.

<HTML>
<голова>
<заглавие>МУО Автопоиск</title>
<мета кодировка ="утф-8">
<ссылка отн="таблица стилей" ссылка="стиль.css">
</head>
<тело>
<h1>МУО Автопоиск</h1>
<ссылка ="https://www.makeuseof.com/" цель="_пустой"><идентификатор кнопки ="кнопкаОдин">Перейти на MakeUseOf.com</button></ а>
<идентификатор кнопки ="кнопкаДва">Начать случайный поиск</button>
</body>
<источник сценария ="script.js"></script>
</html>

Наш файл CSS еще проще, чем наш HTML, изменив стиль всего пяти элементов. У нас есть правила для наших тегов html и body, а также для тегов h1 и обеих наших кнопок.

HTML {
 ширина: 400 пикселей;
}
тело {
 семейство шрифтов: Helvetica, без засечек;
}
ч1 {
 выравнивание текста: по центру;
}
#кнопкаОдин {
 радиус границы: 0px;
 ширина: 100%;
 отступ: 10px 0px;
}
#кнопкаДва {
 радиус границы: 0px;
 ширина: 100%;
 отступ: 10px 0px;
 поле сверху: 10px;
}

Шаг 4: Создание JavaScript

В качестве последнего шага в этом процессе пришло время создать наш файл script.js.

Первая функция в этом файле, называемая вставить скрипт (), для вставки другой функции (автопоиск()) на текущую страницу. Это позволяет нам манипулировать страницей и использовать функции поиска, которые уже присутствуют на сайте MakeUseOf.com.

За этим следует прослушиватель событий, который ждет, пока не будет нажата кнопка «Начать случайный поиск», прежде чем вызывать функцию, которую мы рассмотрели выше.

автопоиск() функция немного сложнее. Он начинается с массива, содержащего 20 категорий на веб-сайте MUO, что дает нам хорошую выборку для случайного поиска. Вслед за этим мы используем Math.random() функция для генерации случайного числа от 0 до 19, чтобы выбрать запись из нашего массива.

Имея в руках наш поисковый запрос, теперь нам нужно имитировать нажатие кнопки, чтобы открыть панель поиска MUO. Сначала мы используем консоль разработчика Chrome, чтобы найти идентификатор кнопки поиска, а затем добавляем его в наш код JavaScript с помощью щелчок() функция.

Как и в случае с кнопкой поиска, нам также необходимо найти идентификатор отображаемой панели поиска, что позволит нам вставить выбранный нами случайный поисковый запрос. После этого достаточно просто отправить форму, чтобы выполнить поиск.

// Эта функция вставляет нашу функцию автопоиска в код страницы
функциявставить скрипт() {
// Это выбирает сфокусированную вкладку для операции и передает функцию автопоиска
 chrome.tabs.query({активный: истинный, текущее окно: истинный}, вкладки => {
хром.скриптинг.executeScript({цель: {tabId: вкладки[0].я бы}, функция: автопоиск})
 })
// Это закрывает всплывающее окно расширения для выбора панели поиска по сайту
окно.Закрыть();
}


// Это прослушиватель событий, который обнаруживает клики на нашем "Начинать Случайный Поиск" кнопка
документ.getElementById('кнопкаДва').addEventListener('нажмите', вставить скрипт)


// Эта функция выбирает случайную тему из массива и 
функцияавтопоиск() {
// Это массив для хранения условий поиска
 константа searchTerms = ["ПК и мобильный", "образ жизни", "Аппаратное обеспечение", "Окна", "Мак",
"линукс", "Андроид", "Яблоко", "Интернет", "Безопасность",
"Программирование", "Развлекательная программа", "Производительность", "Карьера", "творческий",
"Игры", "Социальные сети", "Умный дом", "сделай сам", "Рассмотрение"];


// Это генерирует случайное число от 0 до 19
позволять селекторномер = Математика.пол(Математика.случайный() * 20);


// Это использует случайное число для выбора записи из массива
позволять selection = searchTerms[номер_селектора];


// Это имитирует щелчок по значку поиска на веб-сайте MUO
 документ.getElementById("js-поиск").щелчок();


// Это устанавливает панель поиска веб-сайта MUO как переменную
вар панель поиска = документ.getElementById("js-поиск-ввод");


// Это вставляет наш случайный поисковый запрос в панель поиска
 searchBar.value = searchBar.value + выбор;
// Это завершает процесс, активируя форму веб-сайта
 документ.getElementById("форма поиска2").Отправить();
}

Шаг 5. Добавление ваших файлов в Chrome://extensions

Затем пришло время добавить файлы, которые вы только что создали, на страницу расширений Chrome. Как только вы это сделаете, расширение будет доступно в Chrome и будет обновляться всякий раз, когда вы вносите изменения в свои файлы.

Откройте Google Chrome, перейдите на chrome://extensions и убедитесь, что ползунок режима разработчика в правом верхнем углу находится во включенном положении.

Нажмите Загрузить без упаковки в верхнем левом углу, затем выберите папку, в которой вы сохранили файлы расширения, и нажмите Выберите папку.

Теперь, когда ваше расширение загружено, вы можете щелкнуть значок кусочка головоломки в правом верхнем углу и закрепить расширение на главной панели задач для более удобного доступа.

Теперь вы сможете получить доступ к завершенному расширению в своем браузере. Стоит иметь в виду, что это расширение будет работать только на веб-сайте MUO или веб-сайтах с одинаковым идентификатором для кнопки поиска и панели.

Создание расширения Google Chrome

Эта статья лишь поверхностно описывает возможные функции, которые вы можете встроить в собственное расширение Google Chrome. Стоит изучить собственные идеи после того, как вы изучите основы.

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

6 сомнительных расширений Google Chrome, которые вы должны удалить как можно скорее

Читать дальше

ДелитьсяТвитнутьДелитьсяЭл. адрес

Похожие темы

  • Программирование
  • Расширения браузера
  • Веб-разработка
  • JavaScript

Об авторе

Сэмюэл Л. Гарбетт (опубликовано 44 статьи)

Сэмюэл — британский писатель, который обожает все, что можно сделать своими руками. Начав бизнес в области веб-разработки и 3D-печати, а также много лет работая писателем, Сэмюэл предлагает уникальное понимание мира технологий. Сосредоточившись в основном на технических проектах DIY, он любит делиться забавными и захватывающими идеями, которые вы можете попробовать дома. Вне работы Сэмюэля обычно можно встретить на велосипеде, за компьютерными видеоиграми или отчаянно пытающимся общаться со своим домашним крабом.

Другие работы Сэмюэля Л. Гарбетт

Подпишитесь на нашу рассылку

Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!

Нажмите здесь, чтобы подписаться