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

Есть несколько основных компонентов, которые требуются браузеру, прежде чем расширение сможет работать в полную силу. Мы рассмотрим все это ниже, в том числе о том, как заставить ваше собственное расширение работать в Chrome без необходимости загружать его или делиться им с кем-либо еще.

Создание сложного расширения Chrome — это процесс, намного более детальный, чем то, что вы увидите ниже, но общий процесс тот же. Продолжайте читать, чтобы узнать, как сделать расширение Chrome, которое вы можете начать использовать сегодня.

Совет: чтобы увидеть, насколько удивительным может быть ваше собственное расширение, посмотрите эти удивительные расширения Chrome,

Как сделать расширение Chrome

Используя это руководство, вы создадите простое расширение для Chrome, в котором перечислены некоторые из ваших любимых веб-сайтов. Это полностью настраиваемый и действительно простой в обновлении.

Вот что делать:

• Создайте папку, в которой будут храниться все файлы, составляющие расширение.
• Создайте базовые файлы, необходимые для этого расширения: manifest.json, popup.html, background.html, styles.css.
• Откройте popup.html в текстовом редакторе, а затем вставьте туда все следующее, обязательно сохранив его, когда закончите.

• Мастер службы поддержки
• Интернет Tech Советы
• Технология задней комнаты

Не стесняйтесь редактировать ссылки и текст ссылки, или, если вы хотите сделать расширение Chrome именно таким, как мы, просто оставьте все как есть.

• Откройте файл manifest.json в текстовом редакторе и скопируйте / вставьте следующее:

{
«Update_url»: «https://clients2.google.com/service/update2/crx»,

    «Manifest_version»: 2,<br/> «Name»: «Любимые сайты»,<br/>    «Description»: «Все мои любимые сайты».,<br/>    «Версия»: «1.0», <br/>    «Значки»: {<br/>        «16»: «icon.png»,<br/>        «32»: «icon.png»,<br/>        «48»: «icon.png»,<br/>        «128»: «icon.png»<br/> },

«фон»: {
«Страница»:»background.html»
},

«Browser_action»: {<br/>        «Default_icon»: «icon.png»,<br/>        «Default_title»: «Любимые сайты»,<br/>        «Default_popup»: «popup.html»<br/>    }<br/>}

Съедобные области этого кода включают имя, описание и default_title.

• Откройте styles.css и вставьте следующий код. Это то, что украшает всплывающее меню, чтобы сделать его намного более привлекательным и даже более простым в использовании.

myUL {
list-style-type: нет;
отступы: 0;
поле: 0;
ширина: 300 пикселей;
}

#myUL li a {
граница: 1px solid #ddd;
margin-top: -1px;
цвет фона: # f6f6f6;
набивка: 12 пикселей;
текстовое оформление: нет;
размер шрифта: 18 пикселей;
черный цвет;
дисплей: блок;
семейство шрифтов: «Noto Sans», без засечек;
}

#myUL li a: hover: not (.header) {
цвет фона: #eee;
}

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

• Создайте значок для расширения и назовите его icon.png. Поместите его в папку расширения Chrome. Как видно из приведенного выше кода, вы можете создать отдельный значок для этих размеров: 16 × 16 пикселей, 32 × 32 и т. Д.

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

Как добавить собственное расширение в Chrome

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

• В меню Chrome выберите Дополнительные инструменты> Расширения. Или введите chrome: // extensions / в адресной строке.
• Нажмите кнопку рядом с режимом разработчика, если она еще не выбрана. Это включит специальный режим, который позволит вам импортировать ваши собственные расширения Chrome.

• Используйте кнопку «Загрузить распакованный» в верхней части этой страницы, чтобы выбрать папку, созданную на шаге 1 выше.

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

Редактирование вашего расширения Chrome

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

Файл styles.css управляет отображением расширения, поэтому вы можете настроить общий стиль списка и изменить цвет или тип шрифта. W3Schools это один из лучших ресурсов, чтобы узнать обо всех различных вещах, которые вы можете сделать с помощью CSS.

Чтобы изменить порядок, в котором перечислены веб-сайты, добавить или добавить несколько сайтов или удалить существующие, отредактируйте файл popup.html. Только не забудьте сохранить ваши правки только по URL-адресу и имени. Все остальные персонажи, как