JS fonctions dans l'injection la page d'un script Greasemonkey sur Chrome

Question

J'ai un script Greasemonkey qui fonctionne très bien dans Firefox et Opera. Je lutte avec l'obtenir pour travailler dans Chrome, cependant. Le problème injecte une fonction dans la page qui peut être invoqué par le code de la page. Voici ce que je fais jusqu'à présent:

D'abord, je reçois une référence d'aide à la unsafeWindow pour Firefox. Cela me permet d'avoir le même code pour FF et Opera (et Chrome, je pensais).

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

Ensuite, j'injectent une fonction dans la page. Il est vraiment juste une enveloppe très mince qui ne fait rien, mais en invoquant la fonction correspondante dans le contexte de mon script GM:

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

Ensuite, il y a la fonction correspondante à droite dans mon script:

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

Enfin, j'injectent du code HTML dans la page avec un lien pour appeler la fonction.

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

Pour résumer: Dans Firefox, lorsque l'utilisateur clique lien qui injectaient, il exécutera l'appel de fonction sur le unsafeWindow, ce qui déclenche alors un délai d'attente qui invoque la fonction correspondante dans le contexte de mon script GM, qui fait alors le traitement proprement dit. (Corrigez-moi si je me trompe.)

Dans Chrome, je viens d'obtenir un "Uncaught ReferenceError: setConfigOption n'est pas défini" erreur. Et en effet, en entrant « window.setConfigOption » dans la console donne un « non défini ». Dans Firebug et la console développeur Opera, la fonction est là.

Peut-être sur la page, que je crois rend nécessaire que j'ai fonctions dans le contexte de la page il y a une autre façon de faire, mais quelques-unes de mes fonctions sont appelées par un objet Flash.

Je pris un coup d'œil sur les alternatives de la sur le wiki Greasemonkey, mais ils ont tous l'air assez laid. Suis-je complètement sur la mauvaise voie ici ou devrais-je examiner de plus près ces?

Résolution: je suivais Max S. » des conseils et cela fonctionne dans Firefox et Chrome maintenant. Parce que les fonctions dont je avais besoin d'être disponibles à la page devaient rappeler dans les réguliers, je déplacé mon script entier à la page, à savoir qu'il est complètement enveloppé dans la fonction qu'il a appelé «main ().

Pour la laideur supplémentaire de cette bidouille un peu plus supportable, je pourrais au moins laisser tomber l'utilisation de unsafeWindow et wrappedJSObject maintenant.

Je n'ai toujours pas réussi à obtenir le du travail wiki Greasemonkey. Il devrait faire la même chose et il semble exécuter très bien, mais mes fonctions ne sont jamais accessibles à <a> éléments de la page, par exemple. Je ne l'ai pas encore compris pourquoi.

Answer 1

La seule façon de communiquer avec le code en cours d'exécution sur la page en Chrome est à travers le DOM, vous devrez utiliser un hack comme l'insertion d'une balise <script> avec votre code. Notez que cela peut se révéler bogué si votre script doit exécuter avant tout le reste sur la page.

EDIT: Voici comment Nice alerte l'extension fait ceci:

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

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

Answer 2

J'ai ceci:

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();

Answer 3

  

Je pris un coup d'œil sur les à unsafeWindow sur le wiki Greasemonkey, mais ils ont tous l'air assez laid. Suis-je complètement sur la mauvaise voie ici ou devrais-je examiner de plus près ces?

Vous devriez regarder, parce que c'est seule option disponible. Je préfère utiliser emplacement pirater .

myscript.user.js:

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

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

example.com/mypage.html

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

Bien sûr, il est laid. Mais il fonctionne bien.

---

Méthode de contenu Portée Runner, mentionné par Max S. est mieux que l'emplacement hack, car il est plus facile à déboguer.

Answer 4

Les autres réponses, soit vous forcer à utiliser des expressions de fonction , importer un fichier externe supplémentaire ou utilisez un hack longue patché.

Cette réponse ajoutera le javascript dans la page directement à partir de votre code source. Il utilisera ECMAScript 6 (ES6) modèle littéraux pour obtenir la chaîne javascript multi-ligne sans effort sur la page.

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

S'il vous plaît noter la contre-apostrophes `` qui définissent le début et la fin d'une chaîne sur plusieurs lignes.