Come creare un'estensione cross-browser utilizzando JavaScript e le API del browser

Questo tutorial tratterà come creare un'estensione web che funzioni su più browser. Ti mostrerà come strutturare un progetto e scrivere codice JavaScript per interagire con le schede del browser, a seconda del browser in uso. Ciò significa che è possibile codificare e quindi distribuire un pacchetto di estensione ai negozi Web di più browser.

Questo post si concentrerà sui browser Chrome e Firefox, oltre alla distribuzione delle estensioni tramite il Chrome Web Store e i siti Web dei componenti aggiuntivi di Firefox. Altri browser e opzioni di distribuzione sono disponibili anche per le estensioni web.

Inizia con un modello: copia, modifica e pubblica!

Per vedere un esempio completo, ecco un collegamento a un'estensione che ho creato chiamata Link Formatter, con il JavaScript cross-browser all'interno di popup.js. Lo stesso pacchetto è elencato negli store Web di Chrome e Firefox.

Estensioni del browser

Le estensioni sono un modo fantastico per estendere le funzionalità del tuo browser e ti consentono di migliorare la tua esperienza online. Se stai costruendo il tuo primo o vuoi saperne di più su di loro, ti consiglio i seguenti tutorial:

  • Estensioni del browser - Mozilla | MDN
  • Cosa sono le estensioni? - Google Chrome
  • Anatomia di un'estensione - Mozilla | MDN

Carica la tua estensione localmente sul tuo computer

Quando sviluppi la tua estensione, puoi caricarla localmente senza doverla pubblicare e scaricare da un sito web esterno. Il modo in cui lo fai dipende dal browser che stai utilizzando.

Cromo

  • Visita chrome://extensions/nel tuo browser Chrome
  • Clic Load Unpacked
  • Seleziona la cartella dell'estensione

Firefox

  • Visita about:debugging
  • Clicca su Load Temporary Add-on
  • Seleziona manifest.jsonall'interno della cartella dell'estensione

Suggerimento per il debug : per visualizzare la console, (ad esempio per vedere gli errori), fare clic con il tasto destro / fare clic sull'icona dell'estensione web o sul popup e selezionareinspect

Scrivere JavaScript per l'estensione del browser

Esistono molte API JavaScript che possono essere utilizzate nell'estensione del browser. Questo post si concentrerà sull'API delle schede.

Per ulteriori informazioni sulle API delle estensioni Web, vedere API JavaScript - Mozilla | MDN.

Un'estensione del browser che include una pagina HTML popup quando l'utente fa clic sull'icona nella barra degli strumenti del browser potrebbe avere una struttura di progetto come questa:

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

La popup.htmlpagina eseguirà quindi lo js/popup.jsscript nella parte inferiore della pagina. Dovresti aggiungere il tuo JavaScript qui.

Nota : altre strutture del progetto potrebbero avere una cartella per il codice della libreria, oltre a file JavaScript che vengono eseguiti in altre aree dell'estensione. Ad esempio, negli script in background dell'estensione e in qualsiasi altro documento in bundle con l'estensione, inclusi popup di azione del browser o di azione della pagina, barre laterali, pagine di opzioni o pagine di nuove schede.

API della scheda del browser

Quando si scrive un'estensione web, è necessario utilizzare l'API delle schede per interagire con le schede nel browser. È inoltre necessario richiedere l'autorizzazione all'utente per farlo.

Richiesta di autorizzazioni per accedere alle schede

Le autorizzazioni devono essere impostate in manifest.json. Quando un utente tenta di installare l'estensione, chiederà all'utente di confermare che questa azione è consentita.

"permissions": [ "tabs" ]

Interrogare le schede con l'API del browser

I browser, come Firefox, utilizzano l' browser.tabsAPI per interagire con le schede del browser. Per richiedere informazioni sulle schede della finestra, si utilizza il querymetodo, che restituisce una promessa con una serie di schede.

browser.tabs.query( queryInfo // object)

Maggiori informazioni su browser.tabs.query su tabs.query () - Mozilla | MDN

Per richiedere la scheda attiva per la finestra del browser, scrivere il seguente JavaScript:

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

Per ottenere la scheda corrente, si recupera la prima scheda dalla matrice di schede restituita. Seguendo questa struttura, puoi ottenere i dati dalla scheda del browser.

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

Tuttavia, quando provi ad aprire l'estensione in Chrome ...

Interrogare le schede con l'API di Chrome

Chrome ha una propria API per le query di tabulazioni. Segue la sintassi chrome.tabs→ la tua query

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

Maggiori informazioni sull'API delle schede di Chrome qui: 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

Read more from Medium

  • How to link to a specific paragraph in your Medium article (2018 Table of Contents method) by Quincy Larson in freeCodeCamp
  • Improving the Medium Experience: One browser extension at a time by in cedric amaya in freeCodeCamp

Read more from ryanwhocodes

  • How you can make a progressive web app in an hour
  • Mind your programming language: How to use Github Linguist and gitattributes to detect your app’s code type accurately
  • Make your terminal more colourful and productive with iTerm2 and Zsh!