Sådan oprettes en udvidelse på tværs af browsere ved hjælp af JavaScript og browser-API'er

Denne vejledning vil dække, hvordan du opretter en webudvidelse, der fungerer på tværs af flere browsere. Det viser dig, hvordan du strukturerer et projekt og skriver JavaScript-kode for at interagere med browserens faner, afhængigt af hvilken browser der bruges. Dette betyder, at du kan kode og derefter distribuere en udvidelsespakke til flere browsers webbutikker.

Dette indlæg vil fokusere på Chrome- og Firefox-browserne sammen med distribution af udvidelser via Chrome Webshop og Firefox-tilføjelseswebsteder. Andre browsere og distributionsmuligheder er også tilgængelige for webudvidelser.

Kom godt i gang med en skabelon - kopier, rediger og udgiv!

For at se et udført eksempel, her er et link til en udvidelse, jeg lavede, kaldet Link Formatter, med JavaScript på tværs af browseren inden for popup.js. Den samme pakke er angivet i både Chrome og Firefox webbutikker.

Browserudvidelser

Udvidelser er en fantastisk måde at udvide funktionaliteten i din browser på, og de giver dig mulighed for at forbedre din oplevelse online. Hvis du bygger din første eller vil lære mere om dem, anbefaler jeg følgende tutorials:

  • Browserudvidelser - Mozilla | MDN
  • Hvad er udvidelser? - Google Chrome
  • Anatomi af en udvidelse - Mozilla | MDN

Læg din udvidelse lokalt på din computer

Når du udvikler din udvidelse, kan du indlæse den lokalt uden at skulle offentliggøre og downloade den fra et eksternt websted. Den måde, du gør dette på, afhænger af hvilken browser du bruger.

Chrome

  • Besøg chrome://extensions/i din Chrome-browser
  • Klik på Load Unpacked
  • Vælg udvidelsens mappe

Firefox

  • Besøg about:debugging
  • Klik på Load Temporary Add-on
  • Vælg manifest.jsoni udvidelsens mappe

Fejlretningstip : for at se konsollen (for eksempel for at se fejl), højreklik / kontrol klik på webudvidelsesikonet eller pop op og vælginspect

Skrivning af JavaScript til din browserudvidelse

Der er mange JavaScript API'er, der kan bruges i din browserudvidelse. Dette indlæg vil fokusere på fanebladet API.

For mere om webudvidelses-API'er, se JavaScript API'er - Mozilla | MDN.

En browserudvidelse, der inkluderer en popup-HTML-side, når brugeren klikker på ikonet i browserens værktøjslinje, kan have en projektstruktur som denne:

extension├── css│ └── style.css├── js│ └── popup.js├── manifest.json└── popup.html

Den popup.htmlside vil derefter køre js/popup.jsscriptet nederst på siden. Du tilføjer dit JavaScript her.

Bemærk : andre projektstrukturer kan have en mappe til bibliotekkode samt JavaScript-filer, der kører i andre områder af udvidelsen. For eksempel i udvidelsens baggrundsskripter og i andre dokumenter, der følger med udvidelsen, herunder browserhandling eller pop op-vinduer til sider, sidepaneler, indstillingssider eller nye fanesider.

API'er til browserfanen

Når du skriver en webudvidelse, skal du bruge fanen API til at interagere med fanerne i browseren. Du skal også anmode om tilladelse fra brugeren til at gøre dette.

Anmoder om tilladelse til adgangsfaner

Tilladelser skal angives manifest.json. Når en bruger forsøger at installere udvidelsen, vil den bede brugeren om at bekræfte, at denne handling er tilladt.

"permissions": [ "tabs" ]

Forespørgsel om faner med browserens API

Browsere, såsom Firefox, bruger browser.tabsAPI'en til at interagere med browserens faner. For at anmode om info om vinduets faner bruger du querymetoden, som returnerer et løfte med en række faner.

browser.tabs.query( queryInfo // object)

Læs mere om browser.tabs.query på tabs.query () - Mozilla | MDN

For at anmode om den aktive fane til browservinduet, skal du skrive følgende JavaScript:

browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData)

For at få den aktuelle fane skal du hente den første fane fra den returnerede række af faner. Efter denne struktur kan du hente dataene fra browserfanen.

const logCurrentTabData = (tabs) => { currentTab = tabs[0] console.log(currentTab.title); console.log(currentTab.url);}

Men når du prøver at åbne udvidelsen i Chrome ...

Forespørgsel om faner med Chrome API

Chrome har sin egen API til forespørgsler om faner. Dette følger syntaksen chrome.tabs→ din forespørgsel

chrome.tabs.query(object queryInfo, function callback)

Læs mere om Chrome's faneblad API her: chrome.tabs - Google Chrome.

So to use this method call, you would write the following in your browser extension:

chrome.tabs.query( {active: true, currentWindow: true}, (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) });

Combining tab queries

Detect which API to use

You can then include both types of browser queries in your extension by using a conditional statement to determine which one to use.

if(chrome) { chrome.tabs.query( {active: true, currentWindow: true}, (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) } );} else { browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData)}

Adding more code for each browser type

Within each side of the condition, you can then add other pieces of code that depend on the different APIs, for example to create new tabs.

chrome.tabs.create()browser.tabs.create()

Here is the code with the extra methods added in that opens a link in a new tab.

if(chrome) { chrome.tabs.query( {active: true, currentWindow: true}, (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) } ); $('a').click( (event) => { chrome.tabs.create({url:event.target.href}) } )} else { browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData) $('a').click( (event) => { browser.tabs.create({url:event.target.href}) } )}

Publishing your extension

With this code in place, you can now interact with the current browser without having to write two or more different web extension projects. You can now package your extension and publish to multiple web stores with the same file!

  • Publish in the Chrome Web Store — Google Chrome
  • Developer Hub :: Add-ons for Firefox

Læs mere fra Medium

  • Sådan linkes til et bestemt afsnit i din Medium-artikel (2018 Indholdsfortegnelsesmetode) af Quincy Larson i freeCodeCamp
  • Forbedring af Medium Experience: En browserudvidelse ad gangen af ​​i cedric amaya i freeCodeCamp

Læs mere fra ryanwhocodes

  • Hvordan du kan lave en progressiv webapp på en time
  • Vær opmærksom på dit programmeringssprog: Sådan bruges Github Linguist og gitattributter til at registrere din apps kodetype nøjagtigt
  • Gør din terminal mere farverig og produktiv med iTerm2 og Zsh!