TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan lage Google Chrome -utvidelse?

3

Google Chrome er for tiden den mest populære nettleseren over hele verden på grunn av sine mange funksjoner og sikkerhet. Videre lar Chrome -utvidelser brukerne legge til flere eller endre funksjonalitet i Chrome uten å endre nettleserens opprinnelige kode. Du kan laste ned utvidelser fra Chrome Nettmarked for å utføre nesten alle handlinger på Chrome. Du kan imidlertid gå glipp av en utvidelse som gir spesifikk funksjonalitet du trenger fra biblioteket med utvidelser i nettbutikken. Heldigvis tillater Chrome brukere å lage sine egne utvidelser som de kan distribuere til andre Chrome -brukere. I denne artikkelen vil vi forklare hvordan du oppretter utvidelsen av Google Chrome og publiserer den i nettbutikken.

Relatert: Hvordan installere og avinstallere utvidelser på Google Chrome?

Forutsetninger

Her er de grunnleggende kravene for å lage en Chrome -utvidelse:

  • Grunnleggende kunnskap om webutviklingsteknologi – Chrome -utvidelsen er som en webside, så du trenger grunnleggende HTML-, JavaScript- og CSS -ferdigheter for å bygge en utvidelse.
  • Koderedigerer – Du trenger også en enkel kodeditor som Notisblokk ++ eller Brackets.
  • Utviklerkonto for Chrome Nettmarked – Denne er bare nødvendig hvis du vil distribuere utvidelsen til andre Chrome -brukere.

Elementer i en Chrome -utvidelse

Enhver nettleserutvidelse for Chrome må ha følgende grunnleggende komponenter:

  • Manifestfilen i JSON -format “manifest.json".
  • Innholdsskript.
  • Popup-side.
  • Hendelser Side.

Lag en katalog for Chrome -utvidelsen

Det første trinnet er å opprette en ny katalog (mappe) der du vil laste ned alle filtypene. Så du må opprette en ny mappe på PCen og gi den ditt foretrukne navn, i dette tilfellet "My Sample Ext".

Lag og lagre manifestfilen

Manifestfilen gir Chrome detaljert informasjon om utvidelsen, for eksempel navn, tillatelser og versjonsnummer blant andre detaljer.

  • For å opprette filen, åpner du en kodeditor og oppretter en ny fil med navnet "manifest.json".
  • Legg nå til innholdet i manifestfilen som vist på bildet og lagre filen i katalogen du opprettet ovenfor.

Hvordan lage Google Chrome -utvidelse?

Manifestfil

  • Du kan legge til flere detaljer i manifestfilen. For eksempel kan vi registrere popup- siden og ikonet for utvidelsen.
  • Den beste metoden er å lagre andre elementer i utvidelsene, for eksempel skript, HTML og bildefiler i forskjellige mapper og bruke en relativ URL for å referere til dem.
  • Legg til ikonet og popup-siden og lagre endringene.

Hvordan lage Google Chrome -utvidelse?

Detaljert manifest

  • Du kan også legge til tillatelser i manifestfilen.

Hvordan lage en popup-side

En popup-side er en HTML-fil som lastes inn når brukeren klikker på nettleserhandlingen. I vårt tilfelle har vi kalt filen "sample.html".

  • For å opprette en ny fil i kodeditoren og lagre filen i filtypen .html med filtypen.

Hvordan lage Google Chrome -utvidelse?

Popup-side

  • Som en standard HTML -fil kan du legge til alt du vil, inkludert knapper, tekster og så videre i filen.
  • HTML -filen inneholder en referanse til skriptet "sample.js", en bakgrunnsside som inneholder logikken for Chrome -utvidelsen.

Styling av popup-siden

Her vil vi bruke en .css-fil til å style popup-siden for utvidelsen. Du kan angi flere elementer, for eksempel skriftstørrelse og farge, popup-vindusdimensjoner og tekstjustering blant andre.

  • For å gjøre det må du opprette en ny fil og gi den en nytt navn med en .css filtype "sample.css" for saken vår. Vær oppmerksom på at dette er filen det refereres til. Css -filen som refereres til i HTML -filen ovenfor.
  • Legg til CSS -koden som vist på bildet, og lagre endringene.

Hvordan lage Google Chrome -utvidelse?

Styling forlengelse

Lag et innholdsscript/ bakgrunnsside

Dette er en .js -fil som definerer logikken bak utvidelsen. Den spesifiserer oppgaven/ funksjonene som utvidelsen skal utføre.

  • Legg til de fire filene i kodeditoren og lagre filen med en .js -utvidelse “sample.js” i katalogen.
  • Legg til kommandoer som vil utføres når brukeren klikker på knappen eller klikker på utvidelsesikonet som vist.
  • Du må også registrere innholdsskriptet i manifest.json -filen.

Merk: Du kan legge til flere oppgaver for å utføre en større oppgave i .js -filen.

Legger til utvidelsen din i Chrome

Når du oppretter alle de fire filene og lagrer dem i en katalog, er du nå klar til å laste inn utvidelsen i Chrome.

  • Åpne Chrome -nettleseren, skriv inn nettadressen "chrome: // extensions/" for å åpne utvidelsesadministrasjonssiden.
  • Vipp bryteren øverst til høyre på siden for å aktivere "Utviklermodus".

Hvordan lage Google Chrome -utvidelse?

Dev -modus

  • På venstre side klikker du på "Load Unpacked" -knappen og blar gjennom filene dine for å velge mappen der du lagrer utvidelsesfilene.
  • En ny utvidelse vil bli lagt til på listen. Du vil også legge merke til ikonet til utvidelsen din på verktøylinjen til høyre for adresselinjen.

Hvordan lage Google Chrome -utvidelse?

Ny utvidelse

  • For å teste utvidelsen, klikk på ikonet for å åpne popup-siden.

Hvordan lage Google Chrome -utvidelse?

Testforlengelse

Innpakning

Chrome -utvidelser hjelper brukerne med å legge til mer funksjonalitet for å utføre spesifikke oppgaver i Chrome. Selv om du kan laste ned en rekke ferdige Chrome -utvidelser, kan du følge de grunnleggende trinnene ovenfor for å lage tilpassede utvidelser for nettstedet ditt. Dessuten kan du dele utvidelsen din med andre Chrome -brukere over hele verden via Chrome Nettmarked, men du må betale for en utviklerkonto for å oppnå dette.

Opptakskilde: www.webnots.com

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg akseptererMer informasjon