browser.runtime.onMessage.addListener(listener);browser.runtime.onMessage.removeListener(listener);browser.runtime.onMessage.hasListener(listener);

Les événements ont trois fonctions :

addListener(listener)

Ajoute un écouteur à cet événement.

removeListener(listener)

Cesse d'écouter cet événement. L'argumentlistener est l'écouteur à supprimer.

hasListener(listener)

Vérifie si unlistener est enregistré pour cet événement. Retournetrue s'il écoute,false sinon.

listener

Une fonction d'écoute qui sera appelée lorsque cet événement se produira. La fonction recevra les arguments suivants :

message

Un objet qui est le message lui-même. C'est un objet sérialisable (voirl'algorithme de clonage de données).

sender

Un objetruntime.MessageSender représentant l'expéditeur du message.

sendResponse

Une fonction à appeler, au plus une fois, pour envoyer une réponse aumessage. La fonction prend un seul argument, qui peut être n'importe quel objet sérialisable (voirl'algorithme de clonage de données). Cet argument est renvoyé à l'expéditeur du message.

Si vous avez plus d'un écouteuronMessage() dans le même document, alors un seul peut envoyer une réponse.

Pour envoyer une réponse de manière synchrone, appelezsendResponse() avant le retour de la fonction d'écoute.

Pour envoyer une réponse de manière asynchrone :

• soit on gardera une référence à l'argumentsendResponse() et on retourneratrue depuis la fonction listenener.sendResponse() pourra être appelée après le retour de la fonction d'écoute.
• ou on retourneraPromise à partir de la fonction d'écoute et on résoudra la promesse lorsque la réponse sera prête. C'est la méthode à privilégier.

La fonctionlistener peut renvoyer un booléen ou unePromise.

Note :N'appelez pasaddListener() en utilisant une fonctionasync :

js

// ne faites pas çabrowser.runtime.onMessage.addListener(async (data, sender) => {  if (data.type === "handle_me") {    return "done";  }});

L'écouteur consommera ainsi chaque message qu'il reçoit, ce qui empêchera effectivement tous les autres écouteurs de recevoir et de traiter des messages.

Si vous souhaitez adopter une approche asynchrone, utilisez plutôt unePromise, comme ceci :

js

browser.runtime.onMessage.addListener((data, sender) => {  if (data.type === "handle_me") {    return Promise.resolve("done");  }});

Ce script de contenu écoute les événements clic dans la page web. Si le clic a eu lieu sur un lien, il envoie un message à la page d'arrière-plan avec l'URL cible :

// content-script.jswindow.addEventListener("click", notifyExtension);function notifyExtension(e) {  if (e.target.tagName != "A") {    return;  }  browser.runtime.sendMessage({ url: e.target.href });}

Le script d'arrière-plan écoute ces messages et affiche une notification à l'aide de l'APInotifications.

// background-script.jsbrowser.runtime.onMessage.addListener(notify);function notify(message) {  browser.notifications.create({    type: "basic",    iconUrl: browser.extension.getURL("link.png"),    title: "Vous avez cliqué sur un lien !",    message: message.url,  });}

Le script de contenu suivant envoie un message au script d'arrière-plan lorsque l'utilisateur ou l'utilisatrice clique sur la page. Il enregistre également toute réponse envoyée par le script d'arrière-plan :

// content-script.jsfunction handleResponse(message) {  console.log(`le script d’arrière-plan a répondu : ${message.response}`);}function handleError(error) {  console.log(`Erreur : ${error}`);}function sendMessage(e) {  var sending = browser.runtime.sendMessage({    content: "message du script de contenu",  });  sending.then(handleResponse, handleError);}window.addEventListener("click", sendMessage);

Voici une version du script d'arrière-plan correspondant, qui envoie une réponse de manière synchrone depuis l'intérieur de l'écouteur :

// background-script.jsfunction handleMessage(request, sender, sendResponse) {  console.log(`le script de contenu a envoyé un message : ${request.content}`);  sendResponse({ response: "réponse du script d’arrière-plan" });}browser.runtime.onMessage.addListener(handleMessage);

Et voici une autre version, qui utilisePromise.resolve() :

// background-script.jsfunction handleMessage(request, sender, sendResponse) {  console.log(`le script de contenu a envoyé un message : ${request.content}`);  return Promise.resolve({ response: "réponse du script d’arrière-plan" });}browser.runtime.onMessage.addListener(handleMessage);

Voici une autre version du script d'arrière-plan de l'exemple précédent. Il envoie une réponse de manière asynchrone, après le retour de l'écouteur. Remarquez lereturn true; dans l'écouteur : cela indique au navigateur que vous avez l'intention d'utiliser l'argumentsendResponse() après le retour de l'écouteur.

// background-script.jsfunction handleMessage(request, sender, sendResponse) {  console.log(`le script de contenu a envoyé un message : ${request.content}`);  setTimeout(() => {    sendResponse({ response: "réponse asynchrone du script d’arrière-plan" });  }, 1000);  return true;}browser.runtime.onMessage.addListener(handleMessage);

Ce script de contenu reçoit le premier lien<a> dans la page, et envoie un message demandant si l'emplacement du lien fait partie des marque-pages. Il attend comme réponse unbooléen :true si l'emplacement est dans les marque-pages,false sinon.

// content-script.jsconst firstLink = document.querySelector("a");function handleResponse(isBookmarked) {  if (isBookmarked) {    firstLink.classList.add("bookmarked");  }}browser.runtime  .sendMessage({    url: firstLink.href,  })  .then(handleResponse);

Voici le script d'arrière-plan. Il utilisebookmarks.search() pour voir si le lien est dans les marque-pages, ce qui renvoie unepromesse :

// background-script.jsfunction isBookmarked(message, sender, response) {  return browser.bookmarks    .search({      url: message.url,    })    .then(function (results) {      return results.length > 0;    });}browser.runtime.onMessage.addListener(isBookmarked);

Si le gestionnaire asynchrone ne renvoie pas de promesse, vous pouvez explicitement construire une promesse. Cet exemple plutôt artificiel envoie une réponse après un délai d'une seconde, en utilisantWindow.setTimeout() :

// background-script.jsfunction handleMessage(request, sender, sendResponse) {  return new Promise((resolve) => {    setTimeout(() => {      resolve({ response: "réponse asynchrone du script d’arrière-plan" });    }, 1000);  });}browser.runtime.onMessage.addListener(handleMessage);

• beastify
• content-script-register
• cookie-bg-picker
• devtools-panels
• export-helpers
• find-across-tabs
• imagify
• mocha-client-tests
• notify-link-clicks-i18n
• store-collected-images
• user-script-register
• userScripts-mv3
• webpack-modules