Hur man gör en enkel Chrome-tillägg

Att göra ett Chrome- tillägg är en ganska enkel process. När du är klar kommer du att kunna använda den på din dator för att förbättra hur webbläsaren fungerar.

Det finns några grundläggande komponenter som webbläsaren kräver innan tillägget kan fungera fullt ut. Vi kommer att gå igenom allt detta nedan, inklusive hur du får ditt anpassade tillägg att fungera i Chrome utan att behöva ladda upp det eller dela det med någon annan.

Att bygga ett komplext Chrome- tillägg är en process som är mycket mer detaljerad än vad du ser nedan, men den allmänna processen är densamma. Fortsätt läsa för att lära dig hur du skapar ett Chrome- tillägg som du kan börja använda idag.

Tips(Tip) : För att se hur fantastiskt ditt eget tillägg kan vara, kolla in dessa fantastiska Chrome-tillägg(these amazing Chrome extensions) .

Hur man gör en Chrome-tillägg

Med hjälp av den här guiden skapar du ett enkelt Chrome- tillägg som listar några av dina favoritwebbplatser. Det är helt anpassningsbart och väldigt lätt att uppdatera.

Så här gör du:

  • Skapa en mapp som innehåller alla filer som utgör tillägget.
  • Skapa basfilerna som detta tillägg kräver: manifest.json , popup.html , background.html , styles.css .
  • Öppna popup.html i en textredigerare och klistra sedan in allt följande där, se till att spara det när du är klar.
<!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>

Redigera(Feel) gärna länkarna och länktexten, eller om du vill göra Chrome- tillägget precis som vi är, behåll bara allt detsamma.

  • Öppna manifest.json i textredigeraren och kopiera/klistra in följande:

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

“manifest_version”: 2,
“name”: “Favoritwebbplatser”, ( “name”: “Favorite Sites”,)
“description”: “Alla mina favoritwebbplatser.”, ( “description”: “All my favorite websites.”,)
“version”: “1.0”,
“ikoner”: { ( “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” : “Favoritwebbplatser”, (        “default_title” : “Favorite Sites”,)
        “default_popup”: “popup.html”
    }
}

De ätbara områdena i denna kod inkluderar namn(name) , beskrivning(description) och default_title .

  • Öppna styles.css och klistra in följande kod. Detta är vad som pryder popup-menyn för att göra den mycket mer tilltalande att titta på och ännu enklare att använda.

#myUL {
list-style-type: ingen; (list-style-type: none;)
   stoppning: 0; (   padding: 0;)
   marginal: 0; (   margin: 0;)
   bredd: 300px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  stoppning: 12px; (  padding: 12px;)
  text-dekoration: ingen; (  text-decoration: none;)
  teckenstorlek: 18px; (  font-size: 18px;)
  svart färg; (  color: black;)
  display: block;
  font-family: 'Noto Sans', sans-serif;
}

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

Det finns mycket du kan ändra i CSS -filen. Lek med dessa alternativ efter att du har skapat ditt Chrome- tillägg för att anpassa det efter dina önskemål.

  • Skapa(Create) en ikon för tillägget och döp det till icon.png(icon.png) . Placera den i din Chrome- tilläggsmapp. Som du kan se i koden ovan kan du skapa en separat ikon för dessa storlekar: 16×16 pixlar, 32×32, och så vidare.

Tips: (Tip: )Google har mer information(Google has more information) om hur du skapar Chrome- tillägg. Det finns andra exempel och avancerade alternativ som går utöver de enkla stegen vi har visat här.

Hur man lägger till ett anpassat tillägg(Custom Extension) till Chrome

Nu när du har skapat Chrome -tillägget är det dags att lägga till det i webbläsaren så att du faktiskt kan använda alla filer du just skapat. Att installera ett anpassat tillägg innebär en procedur som skiljer sig från hur du skulle installera ett vanligt Chrome-tillägg(how you’d install a normal Chrome extension) .

  • Från Chrome-menyn går du till Fler verktyg(More tools ) > Tillägg(Extensions) . Eller skriv chrome://extensions/ i adressfältet.
  • Välj knappen bredvid Utvecklarläge(Developer mode) om den inte redan är vald. Detta aktiverar ett speciellt läge som låter dig importera dina egna Chrome- tillägg.

  • Använd knappen Ladda uppackad(Load unpacked ) högst upp på sidan för att välja mappen du skapade under steg 1(Step 1) ovan.

  • Acceptera(Accept) alla uppmaningar om du ser dem. Annars kommer ditt specialbyggda Chrome - tillägg att dyka upp tillsammans med alla andra du har i webbläsarens övre högra hörn.

Redigera ditt Chrome-tillägg

Nu när ditt Chrome- tillägg är användbart kan du göra ändringar för att göra det till ditt eget. 

Filen styles.css styr hur tillägget visas, så att du kan justera den övergripande liststilen och ändra teckensnittets färg eller typ. W3Schools är en av de bästa resurserna för att lära dig om alla olika saker du kan göra med CSS .

Redigera popup.html-filen för att ändra ordningen på webbplatserna, eller för att lägga till eller fler webbplatser eller ta bort befintliga. Se bara till att bevara dina redigeringar till endast URL och namn. Alla andra tecken, som <li> och <html> , är obligatoriska och bör inte ändras. HTML-handledning på W3Schools(HTML Tutorial on W3Schools) är ett bra ställe att lära sig mer om det språket.



Martin Gustafsson

About the author

Jag är en webbutvecklare med över 10 års erfarenhet av att arbeta med webbläsarna Firefox och Google Docs. Jag är specialist på att skapa enkla men kraftfulla onlineapplikationer och har utvecklat webbaserade lösningar för både små företag och stora organisationer. Min kundbas inkluderar några av de största företagen, inklusive FedEx, Coca Cola och Macy's. Mina kunskaper som utvecklare gör mig till en idealisk kandidat för alla projekt som behöver slutföras snabbt och effektivt - från att utveckla anpassade webbplatser till att skapa robusta e-postmarknadsföringskampanjer.


Related posts