Chrome-Erweiterung zum Ändern der Seite Skript enthält und JS

Question

Ich arbeite an einer Javascript-Bibliothek, die Kunden auf ihrer Website enthalten, um ein UI-Widget einzubetten. Ich möchte eine Möglichkeit, Live-Versionen der Bibliothek live auf der Website des Kunden zu testen, ohne dass sie Änderungen an ihrem Code vornehmen müssen. Dies würde es erleichtern, Probleme zu debuggen und neue Versionen zu testen.

Um dies zu tun, muss ich die Skript-Include auf meine Dev-Server zeigen, und überschreiben dann die load() -Methode, die auf der Seite aufgerufen wird, um einen zusätzlichen Parameter zu geben, welcher Server auf Remote zeigen Anrufe.

Es sieht so aus, als könnte ich JS mit einer Chrome-Erweiterung der Seite hinzufügen, aber ich sehe keine Möglichkeit, die Seite vor dem Laden zu ändern. Gibt es etwas, das mir fehlt, oder sind Chrome-Erweiterungen nicht erlaubt, so etwas zu tun?

Answer 1

Ich habe eine beträchtliche Menge an Chrome-Erweiterungen entwickelt, und ich glaube nicht, dass es eine Möglichkeit gibt, eine Seitenquelle zu bearbeiten, bevor sie vom Browser gerendert wird. Die beiden nächsten Optionen sind:

• Content scripts ermöglicht es Ihnen, in zusätzliche JavaScript und CSS-Dateien zu werfen. Möglicherweise können Sie diese Skripts verwenden, um vorhandene Skript-Tags auf der Seite neu zu schreiben, aber ich bin mir nicht sicher, ob es funktionieren würde, da alle Skript-Tags, die für Ihr Skript über das DOM sichtbar sind, bereits geladen sind oder geladen werden.

• WebRequest können Sie HTTP-Anfragen an kapern, so dass Sie könnte eine Erweiterung eine Anfrage für library.js-library_dev.js Umleiten haben.

Angenommen, Ihre Website ist www.mysite.com und halten Sie Ihre Skripte im/js Verzeichnis:

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"]); 

Die HTML-Quelle gleich aussehen, aber das Dokument gezogen von <script src="library.js"></script> wird jetzt eine andere Datei sein. Dies sollte erreichen, was Sie wollen.

Answer 2

Sie könnten an den im Opera-Browser verfügbaren Hooks interessiert sein. Opera hatte früher * very powerful hooks, sowohl für Benutzer-JavaScript-Dateien (Einzeldateien, sehr einfach zu schreiben und bereitzustellen) und Erweiterungen. Einige davon sind:

BeforeExternalScript:

Dieses Ereignis wird ausgelöst, wenn ein Skriptelement mit einem src-Attribut angetroffen wird. Sie können das Element einschließlich seines src-Attributs untersuchen, es ändern, ihm spezifischere Ereignis-Listener hinzufügen oder das Laden vollständig abbrechen.

Ein schöner Trick ist es, das Laden abzubrechen, das externe Skript in einen AJAX-Aufruf zu laden, Text zu ersetzen und es dann als Skript-Tag oder mit eval wieder in die Webseite einzufügen.

window.opera.defineMagicVariable:

Diese Methode kann durch Benutzer JavaScripts verwendet werden, durch regelmäßige Skripte definierten globalen Variablen außer Kraft zu setzen. Jeder Verweis auf den globalen Namen, der überschrieben wird, ruft die bereitgestellten Getter- und Setterfunktionen auf.

fenster.opera.defineMagicFunction:

Diese Methode kann von Benutzer-JavaScripts verwendet werden, um globale Funktionen zu überschreiben, die von regulären Skripts definiert werden. Jeder Aufruf des globalen Namens, der überschrieben wird, ruft die bereitgestellte Implementierung auf.

*: Opera ist kürzlich auf die Webkit-Engine umgestiegen und scheint einige dieser Hooks entfernt zu haben. Sie können Opera 12 dennoch auf ihrer Website herunterladen.

Answer 3

Es handelt sich nicht um eine Chrome-Erweiterung, aber Fiddler kann das Skript so ändern, dass es auf Ihren Entwicklungsserver verweist (Anweisungen zur Einrichtung des Autors von Fiddler finden Sie unter this answer). Außerdem können Sie mit Fiddler einen Such- und Ersetzvorgang einrichten, um den zusätzlichen Parameter hinzuzufügen, den Sie benötigen.

Answer 4

Hier ist eine Möglichkeit, Inhalt zu ändern, bevor es auf der Seite mit der WebRequest API geladen wird. Dies erfordert, dass der Inhalt in eine Zeichenfolgenvariable geladen wird, bevor der onBeforeRequest-Listener zurückkehrt. Dieses Beispiel gilt für JavaScript, sollte aber auch für andere Inhaltstypen geeignet sein.

loadSynchronously() kann mit einem regulären XMLHttpRequest implementiert werden. Synchrones Laden blockiert die Ereignisschleife und ist deprecated in XMLHttpRequest, aber es ist leider schwer mit dieser Lösung zu vermeiden.