¿Cómo compartir código entre el script de contenido y el complemento?

Question

Estoy escribiendo una extensión para Firefox 4+.

Tengo un código en un archivo llamado utils.js que me gustaría llamar tanto desde el main.js del complemento como desde el script de contenido page-mod.

¿Es posible hacer referencia desde ambos al mismo utils.js? ¿Si es así, cómo?

Editar: Aún mejor sería una solución que me permite usar el mismo código en una extensión de Google Chrome, también.

Answer 1

Como no pude encontrar una solución existente, ahora solo estoy copiando el mismo archivo en varios directorios (como parte del proceso de compilación/depuración).

Esto parece funcionar mejor por el momento, especialmente porque la mayor parte del código fuente se reutiliza en una implementación de Google Chrome de la extensión, también.

Para hacer utils.js utilizables en los guiones de contenido Firefox y en Chrome (ambos tienen ningún CommonJS) Estoy importando así:

var Utils = Utils || require('utils').Utils; 

Las partes pertinentes de utils.js tener este aspecto:

function initUtils() { 
    var result = { 
     // ..define exported object... 
    }; 
    return result; 
}; 

// Chrome 
var Utils = initUtils(); 
var exports = exports || {}; 
// Firefox 
exports.Utils = Utils; 

Answer 2

Me he encontrado con este mismo problema. Uno pensaría que habría una solución obvia. Esto es lo que he estado haciendo para firefox (no he trabajado con Chrome):

Tengo un archivo lib/dbg.js que contiene mis funciones básicas de depuración que quiero usar en todas partes.

En cada módulo de scripts contenidos en mis main.js, tengo esto:

contextMenu.Item({ 
... 
contentScript: export_internals(require('dbg')), 
contentScriptFile: my-actual-scripts.js 
... 

y luego en el principal Tengo una función

function export_internals(module) { 
    var code = ''; 
    for (name in module) { 
     var val = module[name]; 
     if (val.constructor === String) 
      code += name + ' = "' + val + '";'; 
     else 
      code += val; 
    } 
    return code; 
} 

que básicamente sólo cambia entre las propiedades exportados (variables, funciones, etc.) y hace uso de cosas como Function.toString() para básicamente construir una versión en cadena del módulo dbg y pasarlo como un script de contenido en línea. Esta función probablemente no es enormemente general que acabo de escribir es para manejar las funciones y las cadenas simples (los dos únicos tipos de datos que necesitan) pero el principio debe aplicarse fácilmente incluso si tuviera que acaba de hacer algo como

contentScript: require('dbg').my_function.toString() 

Claramente es un hack pero es bastante confiable hasta ahora. ¿Es eso lo que estabas buscando?

Answer 3

Mi solución fue

1. poner toda la "lógica" (y mis "utilidades" del módulo) en el código de complemento
2. mantener el guión de contenido tan simple como sea posible
3. y siempre que el contenido de la escritura necesita información que requiera el módulo utils. Uso el sistema de comunicación asíncrono entre el script de contenido (self.port.emit, self.on ...) y el código de complemento (worker.port.on ...)

La solución ha llevado a un mejor diseño de mi complemento. Pero no sé si el enfoque asíncrono funcionaría en su situación.

Answer 4

Gracias por el puntero a Implementing Reusable Modules en el sitio de referencia del SDK complementario de Mozilla. Todavía no estoy del todo claro sobre cómo hacer la invocación exports. En su ejemplo, usan el mismo nombre para la función y el archivo. Entonces, en la línea exports.translate = translate;, ¿el translate a la izquierda se refiere a la función translate() mientras que el de la derecha se refiere al archivo translate.js, o quizás viceversa?

La respuesta anterior de magnoz (en la cual el nombre de la función y el nombre del archivo difieren debido a la SENSIBILIDAD DE LA CAJA) parece sugerir que debería usar el nombre de la función dos veces e ignorar el nombre del archivo. ¿Es este el caso?