Как да направите просто разширение за 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”: “Любими сайтове”, ( “name”: “Favorite Sites”,)
“description”: “Всички мои любими уебсайтове.”, ( “description”: “All my favorite websites.”,)
“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_title” : “Favorite Sites”,)
        “default_popup”: “popup.html”
    }
}

Ядливите области на този код включват име(name) , описание(description) и default_title .

  • Отворете styles.css и поставете следния код. Това е, което украсява изскачащото меню, за да го направи много по-привлекателно за гледане и дори по-лесно за използване.

#myUL {
list-style-type: none;
   допълване: 0; (   padding: 0;)
   марж: 0; (   margin: 0;)
   ширина: 300px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  допълване: 12px; (  padding: 12px;)
  текст-украса: няма; (  text-decoration: none;)
  размер на шрифта: 18px; (  font-size: 18px;)
  цвят черен; (  color: black;)
  дисплей: блок; (  display: block;)
  семейство шрифтове: 'Noto Sans', sans-serif; (  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 адреса(URL) и името. Всички останали знаци, като <li> и <html> , са задължителни и не трябва да се променят. HTML урок за W3Schools(HTML Tutorial on W3Schools) е добро място да научите повече за този език.



Иванка Шкембова

About the author

аудиофил инженер и специалист по аудио продукти с повече от 10 години опит. Специализирам се в създаването на качествени музикални високоговорители и слушалки от началото до края. Аз съм експерт в отстраняването на аудио проблеми, както и в проектирането на нови високоговорители и системи за слушалки. Моят опит надхвърля просто правенето на добри продукти; Също така имам страст да помагам на другите да бъдат възможно най-добрите, независимо дали това е чрез образование или общественополезен труд.


Related posts