Udvikling af browserudvidelser til Chrome og Edge · Lektion

Integration af omnifeltets søgeord

Integrér Deres udvidelse med browserens omnifelt, så brugere kan udløse handlinger eller søgninger direkte fra adresselinjen.

Lektion 2 af 412 trin

Integration af omnifeltets søgeord er en gratis Udvikling af browserudvidelser til Chrome og Edge-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af browserudvidelser til Chrome og Edge, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af browserudvidelser til Chrome og Edge-kurset indeholder 4 lektioner i alt.

Hvad er Omnibox?

Omnibox er adresselinjen øverst i din browser. Den bruges ikke kun til at skrive webadresser; den håndterer også søgninger og kan være et kraftfuldt udgangspunkt for browserudvidelser!

Integration med Omnibox giver brugerne mulighed for hurtigt at interagere med din udvidelse direkte fra adresselinjen uden at skulle klikke på et ikon eller åbne en popup.

Gør adresselinjen mere effektiv

Hvorfor integrere din udvidelse med Omnibox?

Hurtig adgang: Brugere kan starte handlinger i udvidelsen med blot nogle få tastetryk.
Tilpassede søgninger: Opret genveje til bestemte søgninger i din udvidelses data.
Effektiv arbejdsgang: Udfør opgaver uden at afbryde brugerens browsing.

Indstilling af dit Omnibox-nøgleord

Hvis du vil aktivere integration med Omnibox, skal du erklære den i din udvidelses manifest.json-fil.

Du skal angive et entydigt nøgleord. Når en bruger skriver dette nøgleord i Omnibox efterfulgt af et mellemrum, overtager din udvidelse inputtet.

Eksempel på nøgleord i manifestet

Sådan erklærer du et nøgleord til Omnibox, for eksempel 'myext':

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

Registrering af brugerinput

Når dit nøgleord er indstillet, skal din baggrundsservice worker lytte efter brugerinput. Den vigtigste hændelse til dette er chrome.omnibox.onInputChanged.

Denne hændelse udløses, hver gang brugeren skriver et tegn efter dit nøgleord, så du kan vise forslag i realtid.

Visning af forslag i realtid

Lytteren onInputChanged stiller en suggest-tilbagekaldsfunktion til rådighed. Du bruger den til at sende et array af forslagsobjekter tilbage til Omnibox.

Hvert forslagsobjekt skal have et content (det, der indsættes, hvis det vælges) og en description (det, brugeren ser i rullemenuen).

Dynamiske forslag i praksis

Dette uddrag fra background.js viser, hvordan du lytter efter input og tilbyder grundlæggende forslag. Prøv at skrive 'myext hello' i din browsers Omnibox, efter at du har indlæst denne udvidelse.

// 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);
  }
);

Reaktion på brugerens valg

Når brugeren har skrevet sit input og eventuelt valgt et forslag, trykker vedkommende på Enter. Det udløser hændelsen chrome.omnibox.onInputEntered.

Det er her, din udvidelse udfører den endelige handling baseret på brugerens input, f.eks. ved at åbne en ny fane eller køre et script.

Udførelse af handlinger

I onInputEntered indeholder parameteren text den endelige tekststreng, som brugeren har indtastet eller valgt.

En almindelig handling er at åbne en ny fane med en bestemt URL ved hjælp af chrome.tabs.create({url: '...' }) eller udføre en søgning baseret på inputtet.

Fuld integration med Omnibox

Her er et mere komplet eksempel, der kombinerer håndtering af input med udførelse af handlinger. Dette eksempel giver brugerne mulighed for at søge direkte på Google fra Omnibox ved hjælp af '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}`});
    }
  }
);

Hurtig test af Omnibox

Du har lært, hvordan du integrerer din udvidelse med browserens Omnibox. Lad os teste din viden!

Besvar den i den interaktive lektion

Opsummering: Omnibox

Godt arbejde! Du har lært, hvordan du integrerer din udvidelse med browserens Omnibox.

Vi definerede et nøgleord i manifest.json.
Vi brugte chrome.omnibox.onInputChanged til at levere dynamiske forslag, mens brugeren skriver.
Vi håndterede den endelige handling ved hjælp af chrome.omnibox.onInputEntered, f.eks. ved at åbne en ny fane.

Denne kraftfulde funktion giver brugerne mulighed for hurtigt og effektivt at interagere med din udvidelse direkte fra adresselinjen!

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Integration af omnifeltets søgeord” gratis?

Ja — hele teksten til “Integration af omnifeltets søgeord” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af browserudvidelser til Chrome og Edge-kurset, skal du opgradere til CoddyKit PRO. Udvikling af browserudvidelser til Chrome og Edge-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Integration af omnifeltets søgeord”?

Integrér Deres udvidelse med browserens omnifelt, så brugere kan udløse handlinger eller søgninger direkte fra adresselinjen. Du øver dig i Udvikling af browserudvidelser til Chrome og Edge med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Udvikling af browserudvidelser til Chrome og Edge?

Der kræves ingen tidligere erfaring. Udvikling af browserudvidelser til Chrome og Edge på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Integration af omnifeltets søgeord”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Udvikling af browserudvidelser til Chrome og Edge-lektion?

Ja. Alle Udvikling af browserudvidelser til Chrome og Edge-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Udvikling af browserudvidelser til Chrome og Edge