Како направити једноставно проширење за Цхроме

Прављење Цхроме(Chrome) екстензије је прилично једноставан процес. Када завршите, моћи ћете да га користите на рачунару да бисте побољшали рад прегледача.

Постоје неке основне компоненте које су потребне претраживачу да би проширење могло да буде у потпуности оперативно. У наставку ћемо проћи кроз све ово, укључујући како да натерате ваше прилагођено проширење да ради у Цхроме(Chrome) -у без потребе да га отпремате или делите са било ким другим.

Прављење сложеног Цхроме(Chrome) проширења је процес који је много детаљнији од онога што ћете видети у наставку, али општи процес је исти. Наставите да читате да бисте сазнали како да направите проширење за Цхроме(Chrome) које можете да почнете да користите већ данас.

Савет(Tip) : Да бисте видели колико би ваше сопствено проширење могло бити сјајно, погледајте ова невероватна проширења за Цхроме(these amazing Chrome extensions) .

Како направити проширење за Цхроме

Користећи овај водич, направићете једноставно проширење за Цхроме(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”,

“манифест_версион”: 2, (“manifest_version”: 2,)
“наме”: “Омиљене локације”, ( “name”: “Favorite Sites”,)
“опис”: “Све моје омиљене веб локације.”, ( “description”: “All my favorite websites.”,)
“версион”: “1.0”, ( “version”: “1.0”,)
“ицонс”: { ( “icons”: {)
“16”: “ицон.пнг”, ( “16”: “icon.png”,)
“32”: “ицон.пнг”, ( “32”: “icon.png”,)
“48”: “ицон.пнг”, ( “48”: “icon.png”,)
“128”: “ицон.пнг” ( “128”: “icon.png”)
},

   “бацкгроунд”: {  (   “background”: { )
        “паге”:”бацкгроунд.хтмл” (        “page”:”background.html”)
},

    “бровсер_ацтион” : { (    “browser_action” : {)
        “дефаулт_ицон” : “ицон.пнг”, (        “default_icon” : “icon.png”,)
        “дефаулт_титле” : “Омиљени сајтови”, (        “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;)
   ширина: 300пк; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  маргин-топ: -1пк; (  margin-top: -1px;)
  background-color: #f6f6f6;
  паддинг: 12пк; (  padding: 12px;)
  текст-декорација: нема; (  text-decoration: none;)
  фонт-сизе: 18пк; (  font-size: 18px;)
  боја Црна; (  color: black;)
  дисплеј блок; (  display: block;)
  породица фонтова: 'Ното Санс', санс-сериф; (  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 has more information) о прављењу Цхроме(Chrome) екстензија. Постоје и други примери и напредне опције које превазилазе једноставне кораке које смо овде приказали.

Како додати прилагођено проширење(Custom Extension) у Цхроме

Сада када сте направили проширење за Цхроме(Chrome) , време је да га додате у прегледач како бисте заправо могли да користите све датотеке које сте управо направили. Инсталирање прилагођеног проширења укључује процедуру која се разликује од начина на који бисте инсталирали нормално проширење за Цхроме(how you’d install a normal Chrome extension) .

  • Из Цхроме менија идите на Још алата(More tools ) > Екстензије(Extensions) . Или унесите chrome://extensions/ у траку за адресу.
  • Изаберите дугме поред Режима програмера(Developer mode) ако већ није изабрано. Ово ће укључити посебан режим који вам омогућава да увезете сопствена проширења за Цхроме(Chrome) .

  • Користите дугме Учитај распаковано(Load unpacked ) на врху те странице да бисте изабрали фасциклу коју сте направили током 1. корака(Step 1) изнад.

  • Прихватите(Accept) све упите ако их видите. У супротном, ваше прилагођено проширење за Цхроме(Chrome) ће се појавити заједно са свим осталим које имате у горњем десном углу прегледача.

Уређивање Цхроме екстензије

Сада када је проширење за Цхроме(Chrome) употребљиво, можете да унесете измене да бисте га учинили својим. 

Датотека стилес.цсс контролише како се екстензија појављује, тако да можете да прилагодите укупан стил листе и промените боју или тип фонта. В3Сцхоолс(W3Schools) је један од најбољих ресурса за учење о свим различитим стварима које можете да урадите са ЦСС(CSS) -ом .

Да бисте променили редослед у коме су веб локације наведене, или да бисте додали или више сајтова или уклонили постојеће, измените попуп.хтмл датотеку. Само будите сигурни да своје измене задржите само на УРЛ(URL) -у и имену. Сви остали знакови, као што су <li> и <html> , су обавезни и не би требало да се мењају. ХТМЛ водич за В3Сцхоолс(HTML Tutorial on W3Schools) је добро место да научите више о том језику.



Palmer Murphy

About the author

Ја сам веб програмер са искуством у Фирефок-у и Гоогле документима. Дипломирао сам пословну администрацију на Универзитету Флорида. Моје вештине укључују: развој веб сајта, систем за управљање садржајем (ЦМС), анализу података и дизајн корисничког интерфејса. Ја сам искусан консултант који може помоћи вашем тиму да изгради ефикасне веб странице и апликације.


Related posts