javascript - llamar - Inyectar funciones JS en la página desde un script de Greasemonkey en Chrome

llamar funcion javascript desde otro archivo. js

Question

Tengo un script de Greasemonkey que funciona bien en Firefox y Opera. Sin embargo, me cuesta hacerlo funcionar en Chrome. El problema es inyectar una función en la página que puede invocarse mediante el código de la página. Esto es lo que estoy haciendo hasta ahora:

Primero, obtengo una referencia de ayudante para la unsafeWindow para Firefox. Esto me permite tener el mismo código para FF y Opera (y Chrome, pensé).

var uw = (this.unsafeWindow) ? this.unsafeWindow : window;

Luego, inyecto una función en la página. En realidad, es una envoltura muy delgada que no hace más que invocar la función correspondiente en el contexto de mi script de GM:

uw.setConfigOption = function(newValue) {
    setTimeout(setConfigOption, 0, newValue);
}

Luego, está la función correspondiente en mi guión:

setConfigOption = function(newValue) {
    // do something with it, e.g. store in localStorage
}

Por último, inyecto algo de HTML en la página con un enlace para invocar la función.

var p = document.createElement(''p'');
p.innerHTML = ''<a href="javascript:setConfigOption(1)">set config option to 1</a>'';
document.getElementById(''injection-point'').appendChild(p);

Para resumir: en Firefox, cuando el usuario hace clic en el enlace inyectado, ejecuta la llamada de función en la ventana insegura, que luego activa un tiempo de espera que invoca la función correspondiente en el contexto de mi script GM, que luego realiza el procesamiento real. (Corrígeme si me equivoco aquí)

En Chrome, acabo de recibir un error de "Uncaught ReferenceError: setConfigOption no definido". Y de hecho, ingresar "window.setConfigOption" en la consola produce un "indefinido". En Firebug y la consola de desarrollador de Opera, la función está ahí.

Quizás haya otra forma de hacerlo, pero algunas de mis funciones son invocadas por un objeto Flash en la página, lo que creo que hace necesario que tenga funciones en el contexto de la página.

Eché un vistazo rápido a las alternativas a la ventana insegura en la wiki de Greasemonkey, pero todas se ven bastante feas. ¿Estoy completamente en el camino equivocado aquí o debería mirar más de cerca en estos?

RESOLUCIÓN: Seguí a Max S. '' consejo y funciona ahora en Firefox y Chrome. Debido a que las funciones que necesitaba estar disponibles para la página tenían que devolverlas a las normales, moví todo el script a la página, es decir, está completamente envuelto en la función que él llamó ''main ()''.

Para hacer que la fealdad adicional de ese truco sea un poco más llevadera, al menos podría abandonar el uso de ventanas inseguras y envolver JSObject ahora.

Todavía no he logrado que funcione el corredor de alcance de contenido de la wiki de Greasemonkey. Debería hacer lo mismo y parece funcionar bien, pero mis funciones nunca son accesibles para <a> elementos de la página, por ejemplo. Todavía no he descubierto por qué es eso.

Answer 1

Eché un vistazo rápido a las alternativas a la ventana insegura en la wiki de Greasemonkey, pero todas se ven bastante feas. ¿Estoy completamente en el camino equivocado aquí o debería mirar más de cerca en estos?

Deberías mirar, porque solo está disponible la opción. Prefiero usar localización pirateada .

myscript.user.js:

function myFunc(){
  alert(''Hello World!'');
}

location.href="javascript:(function(){" + myFunc + "})()"

example.com/mypage.html

<script>
myFunc() // Hello World!
</script>

Claro, es feo. Pero está funcionando bien.

El método Content Scope Runner, mencionado por Max S. es mejor que el hack de ubicación, porque es más fácil de depurar.

Answer 2

La única forma de comunicarse con el código que se ejecuta en la página en Chrome es a través del DOM, por lo que tendrá que usar un truco como insertar una etiqueta <script> con su código. Tenga en cuenta que esto puede resultar problemático si su secuencia de comandos debe ejecutarse antes que cualquier otra cosa en la página.

EDITAR: Así es como la extensión Nice Alert hace esto:

function main () {
  // ...
  window.alert = function() {/* ... */};
  // ...
}

var script = document.createElement(''script'');
script.appendChild(document.createTextNode(''(''+ main +'')();''));
(document.body || document.head || document.documentElement).appendChild(script);

Answer 3

Las otras respuestas le obligan a usar expresiones de función , importar un archivo adicional externo o usar un hack parcheado largo .

Esta respuesta agregará el javascript a la página directamente desde su código fuente. Utilizará literales de plantilla ECMAScript 6 (ES6) para obtener sin esfuerzo la cadena javascript multilínea en la página.

var script = document.createElement(''script''); 
script.type = "text/javascript"; 
script.innerHTML = ` 
   function test() {
      alert(1);
   }
`;
document.getElementsByTagName(''head'')[0].appendChild(script);

Tenga en cuenta los backticks `` que definen el comienzo y el final de una cadena de varias líneas.

Answer 4

Tengo esto :

contentscript.js:

function injectJs(link) {
var scr = document.createElement(''script'');
scr.type="text/javascript";
scr.src=link;
document.getElementsByTagName(''head'')[0].appendChild(scr)
//document.body.appendChild(scr);
}

injectJs(chrome.extension.getURL(''injected.js''));

injected.js:

function main() {
     alert(''Hello World!'');
}

main();