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

Интернет 5 4 986 Жалоба

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



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



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


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


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



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


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



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



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



<! 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 в текстовом редакторе и скопируйте / вставьте следующее:



{

"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 и вставьте следующий код. Это то, что украшает всплывающее меню, чтобы сделать его намного более привлекательным и даже более простым в использовании.



#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.



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



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


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


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


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


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

Вернуться

Похожие новости


Google Chrome, что это за браузер?

Google Chrome, что это за браузер?

20-сен-2019, 20:52

Google Chrome - это бесплатный веб-браузер, разработанный Google, который используется для доступа

Как изменить разрешения расширений Chrome

Как изменить разрешения расширений Chrome

24-июн-2019, 12:28

Когда в сентябре 2008 года впервые был выпущен Chrome, единственной вещью, которая удерживала

Google запускает расширение Chrome Password Checkup

Google запускает расширение Chrome Password Checkup

06-фев-2019, 16:05

Вчера был день безопасного интернета, и в ознаменование этого события компания Google выпустила

Не устанавливается расширения для Google Chrome

Не устанавливается расширения для Google Chrome

04-дек-2017, 01:47

Пишу эту тему для тех людей, которые повседневно пользуются браузером Google Chrome, сам по себе

Комментарии (5)

    1. {title}

      17-июл-2020, 23:36 Класс написал (а): Ответить

      Большое спосибо за статью очень помогли!

    2. {title}

      21-фев-2020, 08:13 Андрей написал (а): Ответить

      А можете написать статью про создание простого приложения Android? Они ведь тоже как расширения, работают в виртуальной машине.

      1. {title}

        21-фев-2020, 08:19 alik2039 написал (а): Ответить

        Появится лишнее время, обязательно напишу. С уважением к Вам!

    3. {title}

      21-фев-2020, 08:07 Андрей написал (а): Ответить

      Расширение даже подписывать не надо? То есть, я могу взять любое расширение из магазина Google Chrome, удалить из манифеста какие-то разрешения и установить его?

      1. {title}

        21-фев-2020, 08:16 alik2039 написал (а): Ответить

        Я не знаю как насчет какого-то расширения, но создать своё и установить его для браузера Google Chrome, да.

Добавить комментарий

1. Добавленные комментарии проходят проверку.
2. Если Вы задаете вопрос, то постарайтесь описать проблему подробнее с указанием всех деталей. Напишите как можно точнее о проблеме.
3. Комментарии с оскорблениями и ненормативной лексикой, а так же комментарии, не имеющие смысла, будут удалены.
4. Не пытайтесь разместить рекламу, своих или сторонних сайтов, различные ссылки из социальных групп и сетей, спам и так далее. Для этого есть раздел «Реклама».
5. Давайте учится писать грамотно. Пишем текст не только большими буквами.
6. Если Вы отвечаете кому-то на комментарий, пожалуйста, жмите кнопочку «Ответить».
7. Помог материал решить Вашу проблему, поддержите проект поделитесь им в социальных сетях или просто скажите спасибо. С уважением к Вам!