web-dev-qa-db-fra.com

Extension Chrome permettant de modifier le script de page, y compris JS

Je travaille sur une bibliothèque javascript que les clients incluent sur leur site pour intégrer un widget d'interface utilisateur. Je veux un moyen de tester les versions dev de la bibliothèque en direct sur le site du client sans lui demander de modifier leur code. Cela faciliterait le débogage des problèmes et le test de nouvelles versions.

Pour ce faire, je dois modifier le script include pour qu'il pointe vers mon serveur dev, puis écraser la méthode load () appelée dans la page pour lui ajouter un paramètre supplémentaire lui indiquant le serveur à désigner lors des appels distants.

Il semble que je puisse ajouter JS à la page en utilisant une extension chrome, mais je ne vois aucun moyen de modifier la page avant son chargement. Y-a-t-il quelque chose qui me manque ou les extensions de chrome ne sont-elles pas autorisées à faire ce genre de chose?

javascriptgoogle-chromegoogle-chrome-extension
22
Herms

J'ai effectué pas mal de développement d'extension Chrome et je ne pense pas qu'il soit possible de modifier une source de page avant qu'elle ne soit rendue par le navigateur. Les deux options les plus proches sont:

  • Les scripts de contenuvous permettent d'ajouter des fichiers JavaScript et CSS supplémentaires. Vous pourrez peut-être utiliser ces scripts pour réécrire les balises de script existantes dans la page, mais je ne suis pas sûr que cela fonctionnerait, car toutes les balises de script visibles par votre script via le DOM sont déjà chargées ou sont en cours de chargement.

  • WebRequestvous permet de détourner des demandes HTTP afin qu'une extension redirige une demande de library.js à library_dev.js.

En supposant que votre site est www.monsite.com et que vous conserviez vos scripts dans le répertoire/js:

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        if( details.url == "http://www.mysite.com/js/library.js" )
            return {redirectUrl: "http://www.mysite.com/js/library_dev.js" };
    },
    {urls: ["*://www.mysite.com/*.js"]},
    ["blocking"]);

La source HTML aura le même aspect, mais le document extrait par <script src="library.js"></script> sera désormais un fichier différent. Cela devrait réaliser ce que vous voulez.

26
apsillers

Voici un moyen de modifier le contenu avant son chargement sur la page à l’aide de WebRequest API. Cela nécessite que le contenu soit chargé dans une variable chaîne avant le retour de l'écouteur onBeforeRequest. Cet exemple concerne le javascript, mais il devrait également fonctionner pour d'autres types de contenu.

chrome.webRequest.onBeforeRequest.addListener(
    function (details) {
        var javascriptCode = loadSynchronously(details.url);
        // modify javascriptCode here
        return { redirectUrl: "data:text/javascript," 
                             + encodeURIComponent(javascriptCode) };
    },
    { urls: ["*://*.example.com/*.js"] },
    ["blocking"]);

loadSynchronously () peut être implémenté avec un XMLHttpRequest normal. Le chargement synchrone bloquera la boucle d'événement et est deprecated in XMLHttpRequest, mais il est malheureusement difficile à éviter avec cette solution.

2
Lars Christian Jensen

Vous pourriez être intéressé par les points d'ancrage disponibles dans le navigateur Opera. Auparavant, Opera disposait de * crochets très puissants , disponibles à la fois pour les fichiers JavaScript de l’utilisateur (fichiers uniques, très facile à écrire et à déployer) et pour les extensions. Certains d'entre eux sont:

BeforeExternalScript:

Cet événement est déclenché lorsqu'un élément de script avec un attribut src est rencontré. Vous pouvez examiner l'élément, y compris son attribut src, le modifier, y ajouter des écouteurs d'événements plus spécifiques ou tout simplement annuler son chargement.

Une bonne astuce consiste à annuler son chargement, à charger le script externe dans un appel AJAX, à le remplacer, puis à le réinjecter dans la page Web en tant que balise de script ou à l'aide de eval.

window.opera.defineMagicVariable:

Cette méthode peut être utilisée par l'utilisateur JavaScripts pour remplacer les variables globales définies par des scripts standard. Toute référence au nom global en cours de substitution appelle les fonctions de lecture et de définition fournies.

window.opera.defineMagicFunction:

Cette méthode peut être utilisée par l'utilisateur JavaScripts pour remplacer les fonctions globales définies par des scripts standard. Toute invocation du nom global remplacé est appelée l'implémentation fournie.

*: Opera est récemment passé au moteur Webkit et semble avoir supprimé certains de ces points d'ancrage. Vous pouvez toujours trouver Opera 12 en téléchargement sur leur site Web.

1
Tobia