Hur man hanterar manifestegenskaper i webbläsartillägg: En översikt för utvecklare

När man utvecklar webbläsartillägg är hantering av manifestfiler en central aspekt. Dessa filer beskriver tilläggets egenskaper och konfigurationer, och förståelsen för hur olika egenskaper fungerar på olika plattformar och webbläsare är avgörande för att skapa kompatibla och effektiva tillägg. Det är också viktigt att notera att manifestfiler inte är universella och kan variera beroende på vilken webbläsare eller version av manifestet som används.

En av de mest centrala egenskaperna som ändrats i Manifest V3 är hanteringen av ikoner i webbläsarens verktygsfält. I tidigare versioner använde man browser_action och page_action, men i Manifest V3 har dessa egenskaper ersatts av en gemensam action-egenskap.

Action-egenskapen

json
Copy code
"action": {
  "default_icon": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "64": "icons/icon-64.png"
  },
  "default_popup": "popup/popup.html",
  "default_title": "Min Exempel Tillägg",

  "browser_style": true,

  "theme_icons": [
    {
      "light": "icons/icon-16-light.png",
      "dark": "icons/icon-16.png",
      "size": 16
    },
    {
      "light": "icons/icon-32-light.png",
      "dark": "icons/icon-32.png",
      "size": 32
    }
  ]
}

I detta exempel kan vi se hur man definierar ikoner för olika upplösningar, popupens HTML-fil, samt en tooltip som visas när användaren håller muspekaren över ikonen. Det finns också en browser_style-flagga som säkerställer att tillägget får den visuella stilen som är specifik för webbläsaren (enbart för Firefox).

Hantering av ikoner

Egenskapen default_icon styr var webbläsaren ska hitta ikoner för verktygsfältet. Det är möjligt att antingen ange flera PNG- eller JPEG-filer med olika storlekar, eller använda en vektorfil som täcker alla visningskonfigurationer. Det rekommenderas att ange ikoner i storlekar som 16x16px, 32x32px och 64x64px för att täcka alla möjliga skärmupplösningar, inklusive högupplösta skärmar som t.ex. Apple Retina.

json
Copy code
"action": {

  "default_icon": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "64": "icons/icon-64.png"
  }
}

Alternativt, om du vill använda en vektorbild istället, kan du definiera en enda vektorfil som täcker alla skärmkonfigurationer:

json
Copy code
"action": {
  "default_icon": "icons/icon.svg"
}

Hantering av popup-fönster och titlar

json
Copy code
"action": {
  "default_popup": "components/popup/popup.html"
}

default_title är egenskapen som definierar den text som visas som en tooltip när användaren hovrar över ikonen. Om denna egenskap inte är definierad, används standardnamnet för tillägget som hovertext:

json
Copy code
"action": {

  "default_title": "Öppna Explorer-menyn"
}

Firefox-specifika egenskaper

För utvecklare som fokuserar på Firefox finns det ytterligare egenskaper som kan användas. En sådan egenskap är browser_style, som är en boolean som avgör om ett webbläsartillägg ska använda den specifika Firefox-stilen för popup-fönster. Detta gör att tillägget får ett mer inbäddat utseende i webbläsaren. Standardvärdet för denna egenskap är false, men om du vill aktivera den, ställer du in den som true:

json
Copy code
"action": {
  "browser_style": true
}

json
Copy code
"action": {
  "theme_icons": [
    {
      "light": "icons/icon-16-light.png",
      "dark": "icons/icon-16.png",
      "size": 16
    },
    {
      "light": "icons/icon-32-light.png",
      "dark": "icons/icon-32.png",
      "size": 32
    }
  ]
}

Författare och Automation

En annan egenskap som kan användas är author, där du kan definiera författarens namn som visas i webbläsaren:

json
Copy code
"author": "Matt Frisbie"

För utvecklare som arbetar med tillägg som har särskilda behov för tillgänglighetsfunktioner, kan egenskapen automation vara användbar. Den är endast tillgänglig i Chromium-baserade webbläsare och gör det möjligt för tillägg att komma åt webbläsarens tillgänglighetsträd, vilket är viktigt för utveckling av tillägg som är riktade mot assistivteknik och hjälpmedel.

När du utvecklar tillägg är det avgörande att noggrant förstå skillnaderna i hur olika webbläsare och versioner hanterar manifestfiler. Det krävs en noggrann balansgång för att säkerställa att ditt tillägg fungerar korrekt på alla plattformar, och det är viktigt att vara medveten om de tekniska skillnaderna, särskilt när du hanterar ikoner, popups, sidopaneler och teman. Att skapa en välstrukturerad och kompatibel manifestfil är en grundläggande aspekt för att skapa användarvänliga och funktionella tillägg som fungerar på olika webbläsare och system.

Hur egenskaper i manifestet för webbläsartillägg påverkar funktionalitet och kompatibilitet

I övergången från Chrome Apps till Progressive Web Applications 2016 var vissa egenskaper i tilläggsmanifestet för webbläsare nödvändiga för att säkerställa en smidig övergång för användarna. En sådan egenskap var installReplacementWebApp(), som hjälpte till att dirigera användare från Chrome Apps till deras ersättande PWA. Idag är denna egenskap inte längre relevant för moderna tillägg, då den har blivit föråldrad.

Tilläggens funktionalitet kan i många fall vara beroende av vilken teknologi som krävs för att köra tillägget på användarens enhet. Egenskapen requirements används för att definiera de specifika teknologier som en webbläsare måste stödja för att ett tillägg ska fungera korrekt. Ett exempel på detta är kravet på att WebGL ska vara tillgängligt för att stödja 3D-grafik, vilket är nödvändigt för många avancerade tillägg som kräver grafisk rendering.

En annan viktig egenskap är short_name, som används för att definiera ett kortare namn för tillägget. Detta namn visas i olika gränssnitt där det fulla namnet skulle vara för långt, som i sidopanelen eller Omnibox. Genom att använda denna egenskap kan utvecklare säkerställa att deras tillägg får ett kompakt och lätt igenkännbart namn, vilket gör det mer användarvänligt i olika delar av webbläsaren.

För att hantera data effektivt i tillägg används storage-egenskapen, som definierar ett schema för den hanterade lagringen. Detta kan vara avgörande för tillägg som behöver spara användardata på ett strukturerat sätt, särskilt i webbläsare som hanterar lagring på olika sätt.

Vid användning av text-till-tal-funktionalitet i Chrome-baserade webbläsare kan utvecklare använda egenskapen tts_engine för att deklarera de röster och röstkonfigurationer som deras tillägg vill använda. Detta ger tillägg som erbjuder ljuduppspelning eller text-till-tal-funktioner en större flexibilitet och kontroll över ljudupplevelsen.

Versionshantering är också en kritisk aspekt, och egenskapen version i manifestet gör det möjligt att definiera vilken version av tillägget som används. Det är viktigt att följa semantiska versionsstandarder för att säkerställa att alla webbläsare korrekt identifierar och behandlar olika versioner av tillägget.

Slutligen är egenskapen web_accessible_resources särskilt viktig för att definiera vilka filer i tillägget som kan göras åtkomliga för externa webbplatser eller andra tillägg. Detta kan inkludera bilder, JavaScript, CSS och HTML, och ger utvecklare möjlighet att tillåta externa källor att använda dessa resurser utan att kompromissa med säkerheten. Vid användning av Manifest V3 finns det ytterligare kontrollmekanismer för att hantera åtkomstkontroller för dessa resurser.

Det är avgörande att utvecklare förstår att varje egenskap i manifestet har en specifik funktion och kan påverka tilläggets prestanda och säkerhet. Det är inte bara viktigt att implementera rätt egenskaper utan också att säkerställa att tillägget är kompatibelt med olika webbläsare och versioner. Det är också viktigt att hålla sig uppdaterad om förändringar och föråldrade egenskaper som kan påverka tilläggets framtida funktionalitet.

Hur man skapar en webbläsartillägg för att hantera anteckningar och flikar

När vi arbetar med webbläsartillägg behöver vi först förstå hur man skapar och hanterar användarinteraktioner via kontextmenyer och flikhantering. Låt oss börja med att undersöka ett tillägg som gör det möjligt att spara text, webbadresser och länkar genom en kontextmeny.

Först definierar vi kontextmenyer i vårt tillägg. Genom att använda Chrome Extensions API, kan vi skapa olika alternativ i högerklicksmenyn. När en användare högerklickar på text eller en webbadress kan tillägget erbjuda alternativ som att spara den valda texten eller en URL till en lokal anteckningslista.

javascript
Copy code
chrome.contextMenus.create({

    id: MENU_ID_SELECTION,
    title: "Spara vald text till Anteckningar",
    contexts: ["selection"]
});
chrome.contextMenus.create({
    id: MENU_ID_URL,
    title: "Spara URL till Anteckningar",
    contexts: ["page"]
});
chrome.contextMenus.create({
    id: MENU_ID_LINK,
    title: "Spara länkens URL till Anteckningar",
    contexts: ["link"]
});

När en användare klickar på ett av dessa alternativ, kan vi extrahera den relevanta texten eller URL och lagra den i användarens anteckningslista. Detta görs genom att lyssna på onClicked-händelsen från kontextmenyn.

javascript
Copy code
chrome.contextMenus.onClicked.addListener((info, tab) => {
    let noteText = "";
    switch (info.menuItemId) {
        case MENU_ID_SELECTION:
            noteText = `[${tab.title}] ${info.selectionText}`;
            break;
        case MENU_ID_URL:
            noteText = info.pageUrl;
            break;
        case MENU_ID_LINK:
            noteText = info.linkUrl;
            break;
        default:
            return;
    }

    chrome.storage.local.get([STORAGE_KEY_NOTES], (res) => {

        const notes = res[STORAGE_KEY_NOTES] || [];
        notes.push(noteText);
        chrome.storage.local.set({ [STORAGE_KEY_NOTES]: notes });
    });
});

Denna kod sparar texten eller URL:en i en lokal lagring som kan komma åt genom att anropa chrome.storage.local. Detta gör att anteckningarna bevaras även om användaren stänger webbläsaren eller stänger ned tillägget. Efter att en anteckning har sparats, kan användaren öppna popup-fönstret och se alla sparade anteckningar. För att säkerställa att funktionaliteten är korrekt implementerad, kan följande steg användas för att testa tilläggets funktionalitet:

1. Skriv en testanteckning i popup-fönstret och klicka på spara för att lägga till den till listan.

2. Stäng och öppna popup-fönstret för att bekräfta att anteckningen bevaras över sessioner.

3. Markera text på en webbsida, högerklicka och välj “Spara vald text till Anteckningar” för att lägga till den som en anteckning.

4. Högerklicka på en länk och välj “Spara länkens URL till Anteckningar” för att spara länkens destination.

5. Bekräfta att varje åtgärd lyckades genom att öppna popup-fönstret och kontrollera att de nya anteckningarna finns.

Tillägget utnyttjar Chrome's tabs API för att få en lista över alla öppna flikar och visa dem i realtid. När en flik öppnas, uppdateras panelen automatiskt för att reflektera den aktuella statusen för flikarna. Panelen kan också filtrera flikarna baserat på en sökfråga som användaren skriver in.

För att skapa en sådan funktionalitet definierar vi en manifestfil och skapar de nödvändiga tillstånden för att använda tabs och sidePanel.

json
Copy code
{

    "manifest_version": 3,
    "name": "Flikhanterare",
    "version": "0.0.1",
    "permissions": ["tabs", "sidePanel"],
    "side_panel": {
        "default_path": "panel.html"
    },
    "background": {
        "service_worker": "background.js"
    },
    "action": {}
}

När användaren klickar på tilläggets ikon i verktygsfältet, öppnas sidopanelen som visar alla öppna flikar. Varje flik visas med sin titel och URL, och användaren kan söka efter flikar genom att skriva in en text i sökfältet.

javascript
Copy code
function updateTabList() {
    chrome.tabs.query({}, (tabs) => {
        allTabs = tabs;
        filterTabs();
    });
}

Denna funktion uppdaterar fliklistan och filtrerar flikarna baserat på användarens input. Flikarna uppdateras också när nya flikar öppnas, flikar stängs eller deras titlar/URL:er ändras. Allt detta sker automatiskt utan att användaren behöver uppdatera panelen manuellt.

För att testa flikhanteraren, kan användaren öppna sidopanelen och interagera med fliklistan. De kan söka efter flikar, klicka på en fliktitel för att aktivera den, eller stänga flikar direkt från panelen.

Hur utvecklas en webbläsartillägg med en chatbot som använder Gemini API?

En webbläsartillägg som integrerar en chatbot via Gemini API kan erbjuda användarna en kraftfull och flexibel interaktiv upplevelse direkt i webbläsarens sidopanel. Denna typ av tillägg använder avancerad artificiell intelligens för att bearbeta och förstå stora mängder textdata, vilket gör det möjligt för användare att få analyser, sammanfattningar och strukturerade insikter baserat på innehållet på en webbsida. Tillägget kan extrahera rå HTML, vidarebefordra den till en LLM (Large Language Model) och ta emot kontextuella svar. Denna metod ger en unik möjlighet att skapa intelligenta funktioner som klassificering av innehåll, datainsamling och automatiska sammanfattningar utan att behöva utveckla komplex logik.

Tillägget består av tre huvudsakliga delar: användargränssnittet i sidopanelen, en enkel inställningssida för att ange API-nyckeln och den logik som hanterar konversationer och kommunikation med Gemini API. När en användare öppnar sidopanelen för första gången, ombeds de att ange sin Gemini API-nyckel via tilläggets inställningssida. Denna nyckel lagras i tilläggets interna lagring och används för att kommunicera direkt med API:t.

Gemini API:t är ett utmärkt val för sådana tillägg, då det erbjuder en lättillgänglig gratisnivå och en snabb introduktion till LLM-teknik. Men det finns ett viktigt tekniskt krav att beakta: Gemini API:t lagrar inte någon samtalskontext på servern, vilket innebär att varje API-anrop måste innehålla hela chatthistoriken. För att bevara konversationens sammanhang och kontinuitet måste därför hela historiken sparas lokalt i tillägget och skickas med varje API-anrop.

I själva sidopanelen interagerar användaren med chatboten genom att skriva in meddelanden som lagras i tilläggets databas. När ett nytt meddelande läggs till, uppdateras sidopanelen automatiskt och den aktuella chatthistoriken skickas vidare till Gemini API, som svarar med sitt analyserade eller sammanfattade innehåll. Detta svar läggs sedan till i den lagrade historiken och visas omedelbart för användaren i sidopanelen.

För att hantera och visa svaren på ett lämpligt sätt, används Markdown-formatet, vilket gör att texten kan visas korrekt även i en enkel HTML-layout. För att konvertera Markdown-syntaxen till HTML används ett bibliotek som mark.js, vilket gör att de strukturerade svaren från API:t kan renderas korrekt.

I praktiken fungerar hela denna process på följande sätt:

1. Användaren anger en prompt i sidopanelen.

2. Tillägget lagrar prompten och uppdaterar sidopanelen.

3. Tillägget skickar hela konversationen till Gemini API.

4. API:t svarar och tillägget uppdaterar sidopanelen med det nya svaret.

Att förstå denna grundläggande struktur är avgörande för att skapa ett funktionellt och effektivt tillägg. Men för att tillägget verkligen ska leverera på användarens behov krävs också en noggrant designad användarupplevelse (UX). Användargränssnittet måste vara intuitivt nog för att säkerställa att alla användare, oavsett teknisk bakgrund, kan förstå och interagera med chatboten utan problem.

Det är också viktigt att förstå hur stor inverkan val av LLM API kan ha på både prestanda och kostnader. För att välja rätt API är det inte bara nödvändigt att förstå funktionerna, utan också att ta hänsyn till hastigheten, tillförlitligheten och kostnadsstrukturen för API:t. Eftersom LLM-teknologi fortsätter att utvecklas snabbt, kommer det troligtvis att komma nyare och mer avancerade modeller, vilket innebär att det är viktigt att hålla sig uppdaterad med de senaste trenderna och anpassa tillägget efter nya versioner av API:er och modeller.

Hur testar man webbläsartillägg effektivt och publicerar dem?

För att utveckla webbläsartillägg på en hög nivå måste man förstå både testning och publiceringsprocessen. När tillägget är klart för användning av allmänheten, är det viktigt att både kunna säkerställa dess funktionalitet genom rigorösa tester och att göra det tillgängligt för användare på rätt sätt. I denna process finns det många aspekter som måste beaktas för att undvika fel och säkerställa en smidig användarupplevelse.

En central del av testerna för tillägg är att verifiera att applikationen beter sig korrekt beroende på användarens data och inställningar. Ett vanligt problem som utvecklare möter är att Chrome Web Store har en strikt process för granskning av tillägg, vilket gör att eventuella kodändringar kan leda till en långsam granskning. Därför är det viktigt att utföra grundliga tester på varje aspekt av tillägget innan man skickar det för granskning.

För att säkerställa att tillägget fungerar korrekt i olika miljöer kan verktyg som Playwright eller Puppeteer användas för integrationstester. Dessa verktyg tillåter utvecklare att styra en Chromium-webbläsare och simulera användarinteraktioner på ett verkligt sätt, vilket gör att hela tillägget kan testas som en enhet, inklusive pop-up-sidor, bakgrundsskript och användargränssnitt. En särskild metod för att testa tillägg via Puppeteer innebär att man laddar tillägget från en lokal mapp med --load-extension och att man använder ett fullständigt Chromium-webbläsarfönster, där tester kan köras på alla tilläggssidor.

Trots de starka fördelarna med sådana tester, är det viktigt att komma ihåg att det finns vissa begränsningar. För att säkerställa högsta möjliga täckning bör därför både enhetstester och integrationstester användas i en testsvit. Med dessa tester kan utvecklare vara mer säkra på att tillägget fungerar som det ska innan det publiceras på Chrome Web Store.

När det gäller publicering av tillägg till Chrome Web Store finns det ett antal steg som måste följas för att processen ska vara framgångsrik. Först och främst måste utvecklaren skapa ett utvecklarkonto och betala en engångsavgift på $5. Därefter laddas tillägget upp till marknadsplatsen som en zip-fil eller via API. Vid uppladdning måste ett antal metadata specificeras, inklusive tilläggstitel, beskrivning, kategori och bilder.

Efter uppladdningen kommer tillägget att genomgå en manuell granskning av Chrome Web Store-teamet för att säkerställa att det följer alla riktlinjer. Denna granskning är obligatorisk vid första uppladdningen och kan ta ett antal dagar. Om det godkänns blir tillägget offentligt tillgängligt för alla användare.

Att uppdatera ett tillägg efter det har publicerats är enkelt och liknar den initiala uppladdningen. För varje uppdatering måste en ny zip-fil laddas upp med en ändrad versionsnummer i manifestet. Det är också viktigt att hålla koll på de rättigheter och behörigheter som tillägget använder, särskilt om nya funktioner tillkommer.