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

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

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

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

Совет(Tip) . Чтобы увидеть, насколько крутым может быть ваше собственное расширение, ознакомьтесь с этими замечательными расширениями для Chrome(these amazing Chrome extensions) .

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

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

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

  • Создайте папку, в которой будут храниться все файлы, составляющие расширение.
  • Создайте базовые файлы, которые требуются этому расширению: manifest.json , popup.html , background.html , styles.css .
  • Откройте popup.html в текстовом редакторе, а затем вставьте туда все приведенное ниже, обязательно сохранив его, когда закончите.
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

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

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

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

«manifest_version»: 2,
«имя»: «Избранные сайты», ( “name”: “Favorite Sites”,)
«описание»: «Все мои любимые сайты», ( “description”: “All my favorite websites.”,)
«версия»: «1.0», ( “version”: “1.0”,)
«значки»: { ( “icons”: {)
«16»: «icon.png»,
«32»: «icon.png»,
«48»: «icon.png»,
«128»: «icon.png»
},

   «фон»: {  (   “background”: { )
        «страница»: «background.html» (        “page”:”background.html”)
},

    «browser_action»: {
        «default_icon»: «icon.png»,
        «default_title»: «Избранные сайты», (        “default_title” : “Favorite Sites”,)
        «default_popup»: «popup.html»
    }
}

Редактируемые области этого кода включают name , description и default_title .

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

#myUL {
тип стиля списка: нет; (list-style-type: none;)
   заполнение: 0; (   padding: 0;)
   маржа: 0; (   margin: 0;)
   ширина: 300 пикселей; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  верхнее поле: -1px; (  margin-top: -1px;)
  background-color: #f6f6f6;
  отступ: 12px; (  padding: 12px;)
  текстовое оформление: нет; (  text-decoration: none;)
  размер шрифта: 18px; (  font-size: 18px;)
  черный цвет; (  color: black;)
  дисплей: блок; (  display: block;)
  семейство шрифтов: «Noto Sans», без засечек; (  font-family: ‘Noto Sans’, sans-serif;)
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

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

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

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

Как добавить пользовательское расширение(Custom Extension) в Chrome

Теперь, когда вы создали расширение для Chrome , пришло время добавить его в браузер, чтобы вы могли использовать все только что созданные файлы. Установка пользовательского расширения включает в себя процедуру, которая отличается от процедуры установки обычного расширения Chrome(how you’d install a normal Chrome extension) .

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

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

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

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

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

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

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



Нина Егорова

About the author

Я инженер-конструктор со стажем работы более 10 лет. Я специализируюсь на USB-контроллерах и кабелях, а также на обновлении BIOS и поддержке ACPI. В свободное время я также люблю вести блог на различные темы, связанные с технологиями и инженерией.


Related posts