Utveckling av webbläsartillägg (Chrome och Edge) · Lektion

Integrera sökordsfunktionen i omniboxen

Integrera ert tillägg med webbläsarens omnibox så att användare kan utlösa åtgärder eller sökningar direkt från adressfältet.

Lektion 2 av 412 steg

Integrera sökordsfunktionen i omniboxen är en gratis lektion i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Utveckling av webbläsartillägg (Chrome och Edge), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.

Vad är adressfältet?

Adressfältet är fältet högst upp i webbläsaren där URL:en visas. Det används inte bara för att skriva webbadresser, utan hanterar även sökningar och kan fungera som en kraftfull startpunkt för webbläsartillägg!

Genom att integrera med adressfältet kan användare snabbt interagera med ditt tillägg direkt från adressfältet, utan att behöva klicka på en ikon eller öppna ett popupfönster.

Ge adressfältet mer kraft

Varför integrera ditt tillägg med adressfältet?

Snabb åtkomst: Användare kan utlösa tilläggsåtgärder med bara några knapptryckningar.
Anpassade sökningar: Skapa genvägar för specifika sökningar bland tilläggets data.
Effektivare arbetsflöde: Utför uppgifter utan att avbryta användarens surfning.

Ange ett nyckelord för adressfältet

För att aktivera integrering med adressfältet måste du deklarera den i tilläggets fil manifest.json.

Du anger ett unikt nyckelord. När en användare skriver detta nyckelord i adressfältet, följt av ett mellanslag, tar ditt tillägg över inmatningen.

Exempel på nyckelord i manifestet

Så här deklarerar du ett nyckelord för adressfältet, till exempel 'myext':

{  "manifest_version": 3,
  "name": "My Omnibox Extension",
  "version": "1.0",
  "omnibox": {
    "keyword": "myext"
  },
  "background": {
    "service_worker": "background.js"
  }
}

Fånga användarens inmatning

När nyckelordet har angetts måste bakgrundstjänstens worker lyssna efter användarens inmatning. Den viktigaste händelsen för detta är chrome.omnibox.onInputChanged.

Denna händelse utlöses varje gång användaren skriver ett tecken efter nyckelordet, vilket gör att du kan visa förslag i realtid.

Visa förslag i realtid

Lyssnaren för onInputChanged tillhandahåller en återanropsfunktion med namnet suggest. Du använder den för att skicka en array med förslagsobjekt tillbaka till adressfältet.

Varje förslagsobjekt behöver en content-egenskap (det som infogas om förslaget väljs) och en description-egenskap (det som användaren ser i listan).

Dynamiska förslag i praktiken

Det här utdraget från background.js visar hur du lyssnar efter inmatning och erbjuder enkla förslag. Prova att skriva 'myext hello' i webbläsarens adressfält efter att du har läst in det här tillägget.

// background.js
chrome.omnibox.onInputChanged.addListener(
  function(text, suggest) {
    let suggestions = [];
    if (text.startsWith("hello")) {
      suggestions.push({content: "hello world", description: "Says Hello World"});
      suggestions.push({content: "hello there", description: "Greets you"});
    } else {
      suggestions.push({content: "type 'hello'", description: "Try typing 'hello'"});
    }
    suggest(suggestions);
  }
);

Agera när användaren väljer

När användaren har skrivit sin inmatning och eventuellt valt ett förslag trycker hen på Enter. Då utlöses händelsen chrome.omnibox.onInputEntered.

Här utför tillägget den slutliga åtgärden baserat på användarens inmatning, till exempel genom att öppna en ny flik eller köra ett skript.

Utföra åtgärder

I onInputEntered innehåller parametern text den fullständiga sträng som användaren skrev in eller valde.

En vanlig åtgärd är att öppna en ny flik med en specifik URL med hjälp av chrome.tabs.create({url: '...' }), eller att utföra en sökning baserat på inmatningen.

Fullständig integrering med adressfältet

Här är ett mer komplett exempel som kombinerar hantering av inmatning med körning av åtgärder. Exemplet låter användare söka på Google direkt från adressfältet med 'myext go [query]'.

// background.js
chrome.omnibox.onInputChanged.addListener(
  function(text, suggest) {
    let suggestions = [];
    if (text.startsWith("go ")) {
      const query = text.substring(3);
      suggestions.push({
        content: `https://www.google.com/search?q=${query}`,
        description: `Search Google for "${query}"`
      });
    } else {
      suggestions.push({
        content: "go [search_term]",
        description: "Type 'go' to search Google"
      });
    }
    suggest(suggestions);
  }
);

chrome.omnibox.onInputEntered.addListener(
  function(text, disposition) {
    if (text.startsWith("http://") || text.startsWith("https://")) {
      chrome.tabs.create({url: text});
    } else if (text.startsWith("go ")) {
      const query = text.substring(3);
      chrome.tabs.create({url: `https://www.google.com/search?q=${query}`});
    } else {
      console.log("Omnibox entered:", text);
      chrome.tabs.create({url: `https://www.google.com/search?q=${text}`});
    }
  }
);

Snabbtest: adressfältet

Du har lärt dig att integrera ditt tillägg med webbläsarens adressfält. Nu testar vi dina kunskaper!

Besvara frågan i den interaktiva lektionen

Sammanfattning: adressfältets möjligheter

Bra jobbat! Du har lärt dig att integrera ditt tillägg med webbläsarens adressfält.

Vi definierade ett nyckelord i manifest.json.
Vi använde chrome.omnibox.onInputChanged för att ge dynamiska förslag medan användaren skriver.
Vi hanterade den slutliga åtgärden med chrome.omnibox.onInputEntered, till exempel genom att öppna en ny flik.

Den här kraftfulla funktionen låter användare interagera med ditt tillägg snabbt och effektivt direkt från adressfältet!

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Integrera sökordsfunktionen i omniboxen” gratis?

Ja – hela texten till ”Integrera sökordsfunktionen i omniboxen” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Utveckling av webbläsartillägg (Chrome och Edge), kan Ni uppgradera till CoddyKit PRO. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.

Vad lär jag mig i ”Integrera sökordsfunktionen i omniboxen”?

Integrera ert tillägg med webbläsarens omnibox så att användare kan utlösa åtgärder eller sökningar direkt från adressfältet. Ni övar på Utveckling av webbläsartillägg (Chrome och Edge) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Utveckling av webbläsartillägg (Chrome och Edge)?

Du behöver inga förkunskaper. Utbildningen i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Integrera sökordsfunktionen i omniboxen”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Utveckling av webbläsartillägg (Chrome och Edge)-lektionen?

Ja. Varje Utveckling av webbläsartillägg (Chrome och Edge)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Utveckling av webbläsartillägg (Chrome och Edge)