Pasar parámetros a scripts de contenido inyectados con chrome.tabs.executeScript()

Al inyectar un archivo de script de contenido usando chrome.tabs.executeScript ({archivo: "content.js"}), surge una pregunta común: ¿cómo pasar parámetros a JavaScript dentro del archivo de secuencia de comandos de contenido?

Falacia de paso de parámetros

Es importante aclarar que no se pueden pasar parámetros directamente a un archivo. En su lugar, tiene dos opciones para lograr esta funcionalidad:

1. Configuración de parámetros antes de la ejecución del archivo

Nest chrome.tabs.executeScript llama para definir variables antes de inyectar el archivo:

chrome.tabs.executeScript(tab.id, {
    code: 'var config = 1;'
}, function() {
    chrome.tabs.executeScript(tab.id, {file: 'content.js'});
});

Para variables complejas, considere usar JSON.stringify para convertir un objeto en una cadena:

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'});
});

En content.js, puede acceder a estas variables:

// content.js
alert('Example:'   config);

2. Configuración de parámetros después de la ejecución del archivo

Primero ejecute el archivo, luego use la API de paso de mensajes para enviar parámetros:

chrome.tabs.executeScript(tab.id, {file: 'content.js'}, function() {
    chrome.tabs.sendMessage(tab.id, 'whatever value; String, object, whatever');
});

En content.js, escuche estos mensajes usando chrome.runtime.onMessage y maneje el mensaje:

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