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

6

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


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

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

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

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

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

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

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

1. Создайте папку, в которой будут храниться все файлы, составляющие расширение.

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

2. Создайте базовые файлы, необходимые для этого расширения: manifest.json, popup.html, background.html, styles.css.

3. Откройте popup.html в текстовом редакторе, а затем вставьте туда все следующее, обязательно сохранив его, когда закончите.

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

<! DOCTYPE html>

<html>

   <head>

      <meta name = “viewport” content = “width = device-width, initial-scale = 1”>

      <title> Избранные сайты </title>

      <link rel = “stylesheet” href = “styles.css”>

   </ head>

<body>

   <ul id = “myUL”>

      <li> <a href = ” https://kaknastroit.com/” target = “_blank”> kaknastroit.com</a></li>

      <li> <a href=” https://www.youtube.com/channel/UCP3gZhdx0L_lDoCxdDVk8jg” target=”_blank”> youtube.com/channel/kaknastroit</a></li>

   </ul>

</body>

</html>

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

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

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

{

“manifest_version”: 2,

“name”: “Избранные сайты”,

“description”: “Мои избранные сайты.”,

“version”: “1.0”,

“icons”: {

“16”: “icon.png”,

“32”: “icon.png”,

“48”: “icon.png”,

“128”: “icon.png”

},

   “background”: {

        “page”:”background.html”

},

    “browser_action” : {

        “default_icon” : “icon.png”,

        “default_title” : ” Избранные сайты “,

        “default_popup”: “popup.html”

    }

}

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

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

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

#myUL {

list-style-type: none;

   padding: 0;

   margin: 0;

   width: 300px;

}

 

#myUL li a {

  border: 1px solid #ddd;

  margin-top: -1px;

  background-color: #f6f6f6;

  padding: 12px;

  text-decoration: none;

  font-size: 18px;

  color: black;

  display: block;

  font-family: ‘Noto Sans’, sans-serif;

}

 

#myUL li a:hover:not(.header) {

   background-color: #eee;

}

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

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

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

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

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

В меню Chrome выберите Дополнительные инструменты > Расширения. Или введите chrome://extensions в адресной строке.

1. Нажмите кнопку рядом с режимом разработчика, если она еще не выбрана. Это включит специальный режим, который позволит вам импортировать ваши собственные расширения Chrome.

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

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

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

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

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

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

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

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

Источник