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

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

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

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

Подсказка: Чтобы увидеть, насколько крутым может быть ваше собственное расширение, ознакомьтесь с эти удивительные расширения Chrome.

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

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

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

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

Компьютерщик службы поддержки
Онлайн-технические советы
Техника задней комнаты

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

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

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

«Manifest_version»: 2,
«Name»: «Любимые сайты»,
«Description»: «Все мои любимые сайты.»,
«Версия»: «1.0»,
«Icons»: {
«16»: «icon.png»,
«32»: «icon.png»,
«48»: «icon.png»,
«128»: «icon.png»
},

"задний план": { 
«Страница»: «background.html»
},

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

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

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

#myUL {
тип-стиль-список: нет;
отступ: 0;
маржа: 0;
ширина: 300 пикселей;
}
#myUL li a {
граница: 1px solid #ddd;
маржа сверху: -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.

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

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

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

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

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

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

Подпишитесь на Help Desk Geek.

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