Maison > interface Web > js tutoriel > le corps du texte

Comment établir une communication du script d'arrière-plan au script injecté via le script de contenu ?

DDD
Libérer: 2024-10-18 11:06:03
original
401 Les gens l'ont consulté

How to Establish Communication from Background Script to Injected Script through Content Script?

Envoi d'un message d'un script d'arrière-plan à un script de contenu, puis à un script injecté

Problème :
Malgré la tentative d'envoi de messages depuis la page d'arrière-plan vers un script de contenu puis vers un script injecté, le processus n'a pas fonctionné comme prévu. Le script de contenu ne peut pas recevoir de messages du script d'arrière-plan.

Solution :
Le problème vient de la manière dont les scripts de contenu sont injectés. Lorsqu'une extension est chargée, elle n'injecte pas automatiquement de scripts de contenu dans les onglets existants. L'injection ne se produit que lorsqu'un nouvel onglet est créé ou qu'un onglet existant est parcouru après le chargement de l'extension.

Solution 1 : Injection de script conditionnelle
Pour assurer la communication entre l'arrière-plan et le contenu scripts, une injection de script conditionnelle peut être utilisée. Le script d'arrière-plan peut vérifier si l'onglet est prêt à recevoir des messages et injecter le script de contenu uniquement s'il n'est pas déjà injecté.

Code :

<code class="javascript">// Background script
function ensureSendMessage(tabId, message, callback) {
  chrome.tabs.sendMessage(tabId, { ping: true }, function (response) {
    if (response && response.pong) { // Content script ready
      chrome.tabs.sendMessage(tabId, message, callback);
    } else { // No listener on the other end
      chrome.tabs.executeScript(tabId, { file: "content_script.js" }, function () {
        if (chrome.runtime.lastError) {
          console.error(chrome.runtime.lastError);
          throw Error("Unable to inject script into tab " + tabId);
        }
        // OK, now it's injected and ready
        chrome.tabs.sendMessage(tabId, message, callback);
      });
    }
  });
}</code>
Copier après la connexion

Script de contenu :

<code class="javascript">chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.ping) {
    sendResponse({ pong: true });
    return;
  }
  // Content script action
});</code>
Copier après la connexion

Solution 2 : Prévention de la double exécution
Une autre solution consiste à injecter le script de contenu dans l'onglet mais à mettre en œuvre des mesures pour empêcher son exécution plus de une fois.

Code :

<code class="javascript">// Background script
function ensureSendMessage(tabId, message, callback) {
  chrome.tabs.executeScript(tabId, { file: "content_script.js" }, function () {
    if (chrome.runtime.lastError) {
      console.error(chrome.runtime.lastError);
      throw Error("Unable to inject script into tab " + tabId);
    }
    // OK, now it's injected and ready
    chrome.tabs.sendMessage(tabId, message, callback);
  });
}</code>
Copier après la connexion

Script de contenu :

<code class="javascript">var injected;

if (!injected) {
  injected = true;
  // Your toplevel code
}</code>
Copier après la connexion

Solution 3 : Indiscrimination Injection de script
Enfin, vous pouvez choisir d'injecter le script de contenu dans tous les onglets lors de l'initialisation de l'extension. Ceci n'est conseillé que si votre script n'interfère pas avec lui-même lorsqu'il est exécuté plusieurs fois ou après le chargement de la page.

Code :

<code class="javascript">chrome.tabs.query({}, function (tabs) {
  for (var i in tabs) {
    // Filter by URL if needed
    chrome.tabs.executeScript(tabs[i].id, { file: "content_script.js" }, function () {
      // Now you can use normal messaging
    });
  }
});</code>
Copier après la connexion

Une fois l'un des ces solutions sont implémentées, les messages peuvent être relayés avec succès du script d'arrière-plan vers le script de contenu, et éventuellement vers le script injecté.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal