Comment transmettre des paramètres aux scripts de contenu injectés avec `chrome.tabs.executeScript()` ?

Passer des paramètres aux scripts de contenu injectés avec chrome.tabs.executeScript()

Lors de l'injection d'un fichier de script de contenu à l'aide de chrome.tabs.executeScript ({file : "content.js"}), une question courante se pose : comment transmettre des paramètres au JavaScript dans le fichier de script de contenu ?

Erreur de transmission des paramètres

Il est important de préciser que vous ne pouvez pas transmettre directement des paramètres à un fichier. Au lieu de cela, vous disposez de deux options pour réaliser cette fonctionnalité :

1. Définition des paramètres avant l'exécution du fichier

Nestz les appels chrome.tabs.executeScript pour définir les variables avant d'injecter le fichier :

<code class="javascript">chrome.tabs.executeScript(tab.id, {
    code: 'var config = 1;'
}, function() {
    chrome.tabs.executeScript(tab.id, {file: 'content.js'});
});</code>

Pour les variables complexes, envisagez d'utiliser JSON.stringify pour convertir un objet dans une chaîne :

<code class="javascript">var config = {somebigobject: 'complicated value'};
chrome.tabs.executeScript(tab.id, {
    code: 'var config = ' + JSON.stringify(config)
}, function() {
    chrome.tabs.executeScript(tab.id, {file: 'content.js'});
});</code>

Dans content.js, vous pouvez accéder à ces variables :

<code class="javascript">// content.js
alert('Example:' + config);</code>

2. Définition des paramètres après l'exécution du fichier

Exécutez d'abord le fichier, puis utilisez l'API de transmission de messages pour envoyer les paramètres :

<code class="javascript">chrome.tabs.executeScript(tab.id, {file: 'content.js'}, function() {
    chrome.tabs.sendMessage(tab.id, 'whatever value; String, object, whatever');
});</code>

Dans content.js, écoutez ces messages à l'aide de Chrome. runtime.onMessage et gérez le message :

<code class="javascript">chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    // Handle message.
    // In this example, message === 'whatever value; String, object, whatever'
});</code>

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!