Cyril – Mes astuces

Aujourd’hui, j’ai cherché à injecter du code dans une page HTML depuis une extension Firefox. Ca permet de définir des objects dans le scope de la fenêtre, qui seront ensuite accessibles depuis le code javascript de la page. J’ai aussi cherché à communiquer dans l’autre sens : appeler des fonctions de mon extension depuis la page web.

Injection de script dans une page Web

L’injection se passe en deux étapes :

1. Il faut savoir sur quelle page intervenir : on peut donc se binder sur l’évènement DOMContentLoaded du navigateur ;
2. Il faut ensuite injecter le code à proprement parler, et qu’il soit visible.

Etape 1

Voici le code commenté (à inclure dans browser.xul) :

2. Injection de code

Et voici comment injecter :

Communiquer avec un script qui tourne dans le browser.xul

Communiquer dans l’autre sens a des intérêts : ça permet d’accéder à des fonctions plus avancée (accès à toutes les librairies XPCOM !).

La méthode est plutôt simple : on crée un élément dans le HTMLDocument (utile pour faire passer des données, en utilisant des attributs auxquels on aura ensuite accès), et on envoie alors un évènement personnalisé, sur lequel écoute notre Injector.

1. Ecoute des évènements de la page

On modifie le onPageLoad pour rajouter le bind sur les évènements, que l’on va ensuite traiter avec la méthode onEvent :

2. Envoi d’un évènement

Et voici le code à mettre dans votre page HTML :

Bibliographie

• Le code source de Firebug pour l’injection de code.
• Un post sur stackoverflow qui décrit la deuxième partie.