Sådan laver du en simpel Chrome-udvidelse

At lave en Chrome- udvidelse er en ret ligetil proces. Når du er færdig, vil du være i stand til at bruge den på din computer til at forbedre, hvordan browseren fungerer.

Der er nogle grundlæggende komponenter, som browseren kræver, før udvidelsen kan være fuldt operationel. Vi gennemgår alt dette nedenfor, inklusive hvordan du får din tilpassede udvidelse til at fungere i Chrome uden at skulle uploade den eller dele den med andre.

Opbygning af en kompleks Chrome -udvidelse er en proces, der er meget mere detaljeret end det, du vil se nedenfor, men den generelle proces er den samme. Fortsæt med at læse for at lære, hvordan du laver en Chrome- udvidelse, som du kan begynde at bruge i dag.

Tip : For at se, hvor fantastisk din egen udvidelse kunne være, tjek disse fantastiske Chrome-udvidelser(these amazing Chrome extensions) .

Sådan laver du en Chrome-udvidelse

Ved hjælp af denne vejledning laver du en simpel Chrome- udvidelse, der viser nogle af dine yndlingswebsteder. Det er fuldt tilpasseligt og virkelig nemt at opdatere.

Her er hvad du skal gøre:

  • Lav en mappe, der indeholder alle de filer, der udgør udvidelsen.
  • Opret de basisfiler, som denne udvidelse kræver: manifest.json , popup.html , background.html , styles.css .
  • Åbn popup.html i en teksteditor, og indsæt derefter alt det følgende der, og sørg for at gemme det, når du er færdig.
<!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>

Du(Feel) er velkommen til at redigere links og linktekst, eller hvis du vil gøre Chrome- udvidelsen præcis, som vi er, skal du bare holde det samme.

  • Åbn manifest.json i teksteditoren og kopier/indsæt følgende:

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

“manifest_version”: 2,
“name”: “Favoritwebsteder”, ( “name”: “Favorite Sites”,)
“description”: “Alle mine yndlingswebsteder.”, ( “description”: “All my favorite websites.”,)
“version”: “1.0”,
“ikoner”: { ( “icons”: {)
“16”: “icon.png”,
"32": "icon.png",
"48": "icon.png",
"128": "icon.png"
},

   "baggrund": {  (   “background”: { )
        "side":"baggrund.html" (        “page”:”background.html”)
},

    “browser_action” : {
        “default_icon” : “icon.png”,
        “default_title” : “Favoritwebsteder”, (        “default_title” : “Favorite Sites”,)
        “default_popup”: “popup.html”
    }
}

De spiselige områder af denne kode inkluderer navn(name) , beskrivelse(description) og default_title .

  • Åbn styles.css og indsæt følgende kode. Det er det, der dekorerer popup-menuen for at gøre den meget mere tiltalende at se på og endnu nemmere at bruge.

#myUL {
liste-stil-type: ingen; (list-style-type: none;)
   polstring: 0; (   padding: 0;)
   margin: 0;
   bredde: 300px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  polstring: 12px; (  padding: 12px;)
  tekst-dekoration: ingen; (  text-decoration: none;)
  skriftstørrelse: 18px; (  font-size: 18px;)
  farve: sort; (  color: black;)
  display: blok; (  display: block;)
  font-family: 'Noto Sans', sans-serif;
}

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

Der er meget, du kan ændre i CSS -filen. Leg med disse muligheder efter at have lavet din Chrome- udvidelse for at tilpasse den til din smag.

  • Opret(Create) et ikon for udvidelsen og navngiv det icon.png . Placer den i din Chrome- udvidelsesmappe. Som du kan se i koden ovenfor, kan du lave et separat ikon for disse størrelser: 16×16 pixels, 32×32, og så videre.

Tip: Google har flere oplysninger(Google has more information) om oprettelse af Chrome- udvidelser. Der er andre eksempler og avancerede muligheder, der går ud over de enkle trin, vi har vist her.

Sådan tilføjes en tilpasset udvidelse(Custom Extension) til Chrome

Nu hvor du har lavet Chrome -udvidelsen, er det tid til at tilføje den til browseren, så du rent faktisk kan bruge alle de filer, du lige har lavet. Installation af en tilpasset udvidelse involverer en procedure, der er anderledes end den måde, du ville installere en normal Chrome-udvidelse(how you’d install a normal Chrome extension) .

  • Fra Chrome-menuen skal du gå til Flere værktøjer(More tools ) > Udvidelser(Extensions) . Eller skriv chrome://extensions/ i adresselinjen.
  • Vælg knappen ved siden af ​​Udviklertilstand,(Developer mode) hvis den ikke allerede er valgt. Dette aktiverer en speciel tilstand, som lader dig importere dine egne Chrome - udvidelser.

  • Brug knappen Indlæs udpakket(Load unpacked ) øverst på siden for at vælge den mappe, du lavede under trin 1(Step 1) ovenfor.

  • Accepter(Accept) alle meddelelser, hvis du ser dem. Ellers vil din specialbyggede Chrome - udvidelse dukke op sammen med alle andre, du har i øverste højre hjørne af browseren.

Redigering af din Chrome-udvidelse

Nu hvor din Chrome- udvidelse er brugbar, kan du foretage ændringer for at gøre den til din egen. 

Styles.css-filen styrer, hvordan udvidelsen vises, så du kan justere den overordnede listestil og ændre skrifttypefarven eller -typen. W3Schools er en af ​​de bedste ressourcer til at lære om alle de forskellige ting, du kan gøre med CSS .

Rediger popup.html-filen for at ændre den rækkefølge, som webstederne er opført i, eller for at tilføje eller flere websteder eller fjerne eksisterende. Bare sørg for at beholde dine redigeringer til kun URL'en(URL) og navnet. Alle de andre tegn, såsom <li> og <html> , er påkrævet og bør ikke ændres. HTML Tutorial på W3Schools(HTML Tutorial on W3Schools) er et godt sted at lære mere om det sprog.



Hanne Fransson

About the author

audiofil ingeniør og audio produktspecialist med mere end 10 års erfaring. Jeg har specialiseret mig i at skabe kvalitets musikhøjttalere og høretelefoner fra start til slut. Jeg er ekspert i fejlfinding af lydproblemer samt design af nye højttalere og hovedtelefonsystemer. Min erfaring rækker ud over blot at lave gode produkter; Jeg har også en passion for at hjælpe andre til at være deres bedst mulige jeg, uanset om det er gennem uddannelse eller samfundstjeneste.


Related posts