Om du vill lägga till eller ändra någon funktionalitet i Google Chrome måste du använda ett tillägg. Även om du kan ladda ner ett tillägg från Chrome virtuell butikmen ibland behöver du specifik funktionalitet som du inte kan hitta i någon befintlig tillägg.
Tja, de goda nyheterna är att du kan skapa ditt eget tillägg för att lägga till eller ändra den nödvändiga funktionaliteten eller skapa ett nytt plugin eller program för Google Chrome, som du sedan kan distribuera till andra användare med Chrome Web Store.
Nästa ska jag visa dig enklaste sättet att skapa en tillägg. Om du har viss kunskap om webbutveckling (HTML, CSS och JS) kommer du att känna dig som hemma. Om inte, titta först på dessa kanaler lär dig grunderna i webbutvecklingfortsätt sedan nedan.
Tidigare krav
Du måste ha fullgjort följande krav innan du påbörjar denna handledning.
- Du måste vara bekant med HTML, CSS och JavaScript. [Check resources]
- Du måste ha en kodredigerare för att skriva tillägget. [Compare editors]
- (Valfritt) Om du vill distribuera ditt tillägg till andra användare måste du ha en utvecklarkonto i Chrome Web Store. [Create an account]
Notera: Google ber dig att betala en liten avgift för att skapa ett utvecklarkonto i Chrome Web Store.
Skapa ett tillägg
I den här handledningen kommer jag att dela processen att skapa en att göra-förlängning för Google Chrome. Det kommer att vara ett verktyg (som visas nedan) för att visa de väsentliga komponenterna och funktionerna som tillhandahålls för tilläggen.
Steg 1. Skaffa en mall
Google Chrome, precis som alla andra plattformar, kräver din förlängningar för att ha en etablerad struktur, vilket kan verka komplicerat för nybörjare. Därför är det bra att skaffa en standardmall för en tillbyggnad som täcker alla dina behov.
Förlängare Det är den bästa repetitiva generatorn för kromtillägg. Låter dig välja en av de angivna tilläggstyperna: webbläsaråtgärd (en åtgärd för alla sidor eller webbläsaren), sidåtgärd (en åtgärd för den aktuella sidan), eller dold förlängning (en bakgrundsåtgärd som vanligtvis är dold i det främre gränssnittet).
Dessutom ger den flera justeringsalternativ för inkludera/uteslut nödvändiga plugins och behörigheteretc Du måste välja “Webbläsaråtgärd” som tilläggstyp och “Ingen bakgrund” som bakgrundssida för denna handledning.
När du är klar med att välja alternativen för att skapa ditt exempeltillägg, tryck på “Ladda ner det!” knappen i Extensionizr. Till sist, extrahera filen (.zip) till en katalog och öppna din kodredigerare för att börja skriva tillägget.
Steg 2. Koda tillägget
När du har laddat ner och extraherat mallen kommer du att se en katalogstruktur som visas i följande skärmdump. Mallen är perfekt organiserad och du bör veta att den viktigaste filen är “manifest.json“.
Låt oss också känna till andra filer och mappar i den här katalogen:
- _lokal: Den används för lagra språkinformation för en flerspråkig applikation.
- CSS: Det fungerar för att lagra externa bibliotek från tredje part som Bootstrap.
- ikoner: Den är utformad för att ha ikoner för din tillägg i olika storlekar.
- js: Den är väldigt bra att förvara tredje parts backend-bibliotek som jQuery.
- ursprung: Lagrar den faktiska koden som du kommer att skriva för din anknytning.
manifest.json
Innehåller grundläggande metadata om din applikation, som definierar detaljerna för din webbläsarapplikation. Du kan redigera den för att ställa in namn, beskrivning, webbplats, ikon, etc. av dess förlängning, tillsammans med detaljer som t.ex Webbläsaråtgärder och behörigheter.
Till exempel, i koden nedan kommer du att märka att jag ändrade namn, beskrivning och URL för hemsidan tillsammans med default_title i browser_action. Vad mer, jag lagt till “lagring” under behörigheter eftersom vi behöver lagra data i vårt tillägg.
{
"name": "Todoizr - To-do Simplified",
"version": "0.0.1",
"manifest_version": 2,
"description": "Simple to-do app for everyone.",
"homepage_url": "https://go.aksingh.net/todoizr",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"browser_action": {
"default_icon": "icons/icon19.png",
"default_title": "Todoizr - To-do Simplified",
"default_popup": "src/browser_action/browser_action.html"
},
"permissions": [
"storage"
]
}
src\browser_action
Denna katalog kommer att innehålla koden för webbläsaråtgärden. I vårt fall kommer vi att göra det koda popup-fönstret Den visas när du klickar på tilläggsikonen i webbläsaren. Vårt tillägg kommer att tillåta användare att lägga till och visa väntande uppgifter i popup-fönstret.
Initial kod för mallen.
Även om den här katalogen bara hade en HTML-fil som innehöll all kod, bestämde jag mig för att dela upp den i tre separata filer för tydlighetens skull. Med det sagt, HTML-filen heter “browser_action.html” du har nu följande kod:
<!doctype html> <html> <head> <link rel="stylesheet" href="https://www.hongkiat.com/blog/how-to-create-chrome-extensions-from-scratch/./browser_action.css"/> </head> <body> <div id="mainPopup"> </div> <script type="text/javascript" src="./browser_action.js"></script> </body> </html>
Dessutom, stilfilen som heter “navigator_action.css” har följande innehåll, medan JavaScript-filen med namnet “browser_action.js” är tom för närvarande.
#mainPopup {
padding: 10px;
height: 200px;
width: 400px;
font-family: Helvetica, Ubuntu, Arial, sans-serif;
}
h1 {
font-size: 2em;
}
Designa popup-fönstrets gränssnitt.
Efter att ha ställt in det första projektet, låt oss först designa popup-gränssnittet. Ha konfigurera gränssnittet med ett minimalistiskt tillvägagångssätt, som visar namnet högst upp följt av ett formulär för att lägga till att göra och ett område nedan för att se tillagda objekt. Den är inspirerad av den enkla designen av “Formstil 5“.
I koden nedan har jag lagt till två div:er: en för att visa formuläret för att lägga till en att göra och den andra för att visa listan över redan lagt till att göra. Som sagt, den nya koden för “browser_action.html“Det är som följer:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://www.hongkiat.com/blog/how-to-create-chrome-extensions-from-scratch/./browser_action.css"/>
</head>
<body>
<div id="mainPopup">
<!-- To-do item form -->
<div class="form-style-5" id="form">
<h1>Todoizr</h1>
<form>
<fieldset>
<input type="text" name="todo" placeholder="What to do?" id="txt">
<input type="button" value="Add" id="btn" />
</fieldset>
</form>
</div>
<!-- To-do item list -->
<div class="form-style-5">
<ul id="list">
</ul>
</div>
</div>
<script type="text/javascript" src="./browser_action.js"></script>
</body>
</html>
Och stilfilen”navigator_action.css” du har nu följande kod:
@import url("./form_style_5.css");
#mainPopup {
height: 200px;
width: 300px;
font-family: Helvetica, Ubuntu, Arial, sans-serif;
}
/* To-do item form */
.form-style-5 {
margin: auto;
padding: 0px 20px;
}
.form-style-5:first-child {
background: none;
}
.form-style-5 h1 {
color: #308ce3;
font-size: 20px;
text-align: center;
}
.form-style-5 input[type="text"] {
width: auto;
float: left;
margin-bottom: unset;
}
.form-style-5 input[type="button"] {
background: #308ce3;
width: auto;
float: right;
padding: 7px;
border: none;
border-radius: 4px;
font-size: 14px;
}
.form-style-5 input[type="button"]:hover {
background: #3868d5;
}
/* To-do item list */
.form-style-5:last-child {
height: inherit;
margin-bottom: 5px;
}
.form-style-5 ul {
padding: 20px;
}
.form-style-5 ul li {
font-size: 14px;
}
Slutligen, stilfilen från tredje part “form_style_5.css”har följande innehåll. Det är helt enkelt hämtat från deras hemsida för att inspirera till designen av vårt tillägg.
/* Form Style 5 by Sanwebe.com */
/* https://www.sanwebe.com/2014/08/css-html-forms-designs */
.form-style-5{
max-width: 500px;
padding: 10px 20px;
background: #f4f7f8;
margin: 10px auto;
padding: 20px;
background: #f4f7f8;
border-radius: 8px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset{
border: none;
}
.form-style-5 legend {
font-size: 1.4em;
margin-bottom: 10px;
}
.form-style-5 label {
display: block;
margin-bottom: 8px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255,255,255,.1);
border: none;
border-radius: 4px;
font-size: 16px;
margin: 0;
outline: 0;
padding: 7px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color:#8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 30px;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus{
background: #d2d9dd;
}
.form-style-5 select{
-webkit-appearance: menulist-button;
height:35px;
}
.form-style-5 .number {
background: #1abc9c;
color: #fff;
height: 30px;
width: 30px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 30px;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
border-radius: 15px 15px 15px 0px;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"]
{
position: relative;
display: block;
padding: 19px 39px 18px 39px;
color: #FFF;
margin: 0 auto;
background: #1abc9c;
font-size: 18px;
text-align: center;
font-style: normal;
width: 100%;
border: 1px solid #16a085;
border-width: 1px 1px 3px;
margin-bottom: 10px;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover
{
background: #109177;
}
Skriv popup-logiken.
När vi är klara med gränssnittet för tillägget, låt oss skriva logiken för dess funktion. Vi behöver vår förlängning för att kunna lägg till att göra och visa dem också i popup-fönstret. Därför kommer vi att lägga till en knappklickslyssnare för att lägga till inmatningstexten som ett att göra-objekt och en sidladdningslyssnare för att visa dessa objekt.
I följande kod kommer vi att använda två funktioner: sync.get() och sync.set()som är en del av “storage.chrome“. Vi behöver den andra för att spara väntande uppgifter till lagring och den första för att hämta och visa dem.
Med det sagt, nedan är den slutliga koden för “navigator_action.js“arkiv. Som du kan se nedan är koden kraftigt kommenterad för att hjälpa dig förstå dess syfte.
function loadItems() {
/* First get() the data from the storage */
chrome.storage.sync.get(['todo'], function(result) {
var todo = []
if (result && result.todo && result.todo.trim() !== '') {
/* Parse and get the array as it is saved as a string */
todo = JSON.parse(result.todo)
}
console.log('todo.length=" + todo.length)
for (var i = 0; i < todo.length; i++) {
item = todo[i]
if (item && item.trim() !== "') {
/* Append the items in the #list for showing them */
var list = document.getElementById('list')
var entry = document.createElement('li')
var text = document.createTextNode(item)
entry.appendChild(text)
list.appendChild(entry)
}
}
})
}
/* Load the to-do items upon popup load */
document.addEventListener('DOMContentLoaded', function(){
console.log('Inside doc.loaded()')
loadItems()
})
/* Save the to-do item upon button click */
document.getElementById('btn').addEventListener('click', function (ev) {
console.log('Inside btn.click()')
text = document.getElementById('txt').value
if (text && text.trim() !== '') {
/* First get() old data as calling set() will replace it */
chrome.storage.sync.get(['todo'], function(result) {
var todo = []
if (result && result.todo && result.todo.trim() !== '') {
/* Parse and get the array as it is saved as a string */
todo = JSON.parse(result.todo)
}
todo.push(text)
chrome.storage.sync.set({'todo': JSON.stringify(todo)}, function() {
/* Data is saved now */
var list = document.getElementById('list')
while (list.firstChild) {
list.removeChild(list.firstChild)
}
loadItems()
})
})
}
})
Steg 3. Ladda förlängningen
När du har skrivit klart ditt tillägg är det dags att testa det via Google Chrome-funktionen som erbjuder att ladda upp oförpackade tillägg som inte lagras. Men först måste du aktivera utvecklarläge i din webbläsare: klicka alternativ knapp > välj “Fler verktyg” > Tilläggoch aktivera sedan “utvecklarläge“.
Du kommer nu att se fler knappar under sökfältet. Klicka här “Lasten uppackad” knapp. Den kommer att fråga dig efter katalogen – hitta och välj din tilläggskatalog och den kommer att ladda tillägget. Om du redigerar eller uppdaterar din tilläggskod kan du klicka på reload-knappen för att ladda de senaste ändringarna.
I vårt exempel, Du kommer att se tilläggsikonen. bredvid profilikonen eftersom vi har lagt till en webbläsaråtgärd i vårt exempeltillägg. Du kan klicka på den ikonen för att lägga till och visa väntande uppgifter i vår förlängning eftersom det är den angivna åtgärden.
Dela ut en förlängning
även om det är lätt att ladda en förlängning till Chrome Web Store är processen för lång för att täcka alla detaljer. Kort sagt, du skapar ett utvecklarkonto, paketerar ditt tillägg och skickar sedan in det tillsammans med dess innehållsdetaljer (som namn, ikon, skärmdumpar, etc.); som det visas i din steg för steg guide.
Vad kommer härnäst? Läs och koda
Som du kan förvänta dig är syftet med denna handledning att hjälpa dig komma igång med att utveckla tillägg för Google Chrome. Jag har försökt täcka grunderna; dock, du behöver veta mycket mer för att göra seriös förlängningsutveckling.
Som sagt, nedan är några av mina favoritresurser Så här lär du dig hur du utvecklar tillägg för Google Chrome och andra Chromium-baserade webbläsare:
- Alla färdigheter, komponenter och egenskaper. av förlängningar.
- Exempel på tillägg av teamet bakom Google Chrome.
Om du har granskat dessa resurser och är redo för en utmaning, prova att lägga till följande funktioner i tillägget som du precis har utvecklat:
- Ett alternativ för att radera sparade uppgifter.
- En funktion för att visa aviseringar när du har lagt till ett objekt.
