11

Die von mir entwickelte Chrome Extension injiziert Polymer und andere Webkomponenten über HTML - Imports in die Host - Seite im Gegensatz zu der typischen Methode, Inhalts - Skripte zu verwenden, die automatisch in einem laufen isolated world.Javascript in einer "isolierten Welt" ausführen (chrome)

Der Grund hinter diesem mit zwei Dingen zu tun hat:

  1. Chrome-Erweiterungen können nicht benutzerdefinierte Elemente aus content scripts
  2. Das Chrome-Erweiterung Manifest nicht registriert HTML Importen läuft in einer isolierten Umgebung unterstützen, nur Javascript

Aufgrund dieser Einschränkungen, musste ich lade meine Komponenten in der Host-Seite <head> als described here greifen.

Das offensichtliche Problem, mit dem ich konfrontiert bin, ist mit meinem Javascript Konflikt mit der Javascript-Seite der Host-Seite [auf bestimmten Websites], da die Methode, die ich verwende, um meine Abhängigkeiten zu injizieren läuft nicht in einer "isolierten Welt".

Bisher habe ich die meisten dieser Probleme gelöst, indem ich eine Schluckaufgabe Polymer & meine Komponenten zu vermeiden, um Konflikte zu vermeiden, aber leider ist es nicht perfekt und ein robuster Ansatz ist erforderlich.

Endlich zu meiner Frage: Ist es möglich, eine "isolierte Welt" für mein Javascript zu erstellen? Vielleicht ein anderes Dokumentobjekt? Wenn nicht, gibt es irgendwelche Strategien, die ich anwenden kann, um sicherzustellen, dass mein Code isoliert läuft?

Update:

Ein paar von euch mit IIFE vorgeschlagen, das ist, was ich bisher im Einsatz. Ich bin auf der Suche nach einer Antwort im Sinne einer isolierten Welt, ähnlich wie Google Chrome unter Erweiterungen läuft. Dies liegt hauptsächlich daran, dass Polymer an das globale Fensterobjekt angehängt werden muss.

+0

welche Konflikte meinst du? nur Variablen Name/Funktion Konflikte oder komplexere? – juvian

+0

Variablen-/Funktionsnamenskonflikte. Dies gilt insbesondere, wenn die Host-Seite eine eigene Version von Polymer verwendet. –

+0

Können Sie das Polymer nicht auf der Seite verwenden? Überprüfen Sie, ob es bereits existiert, und wenn nicht, injizieren Sie Ihre? – juvian

Antwort

7

Sie können Variablen (die Funktionen enthält, da sie erstklassige Objekte in JavaScript sind) mit a closure.

Also, wenn Sie den folgenden Code mit IIFE injizieren - sofort aufgerufen Funktionsausdruck -

var someVar = 'this one "conflicts" with page js'; 
(function(){ 
    var someVar = 'this one does not "conflict" with page js'; //shadows someVar above 
    console.log(someVar); 
})(); 
console.log(someVar); 

Sie werden sehen, dass someVar gibt unterschiedliche Werte zugreifen.

Als Teil Ihres injizierten Codes können Sie "widersprüchliche" Variablen auf diese Weise schattieren - wie bei Polymer.

Importieren Sie eine gewünschte Version in ein IIFE mit etwas wie CommonJS require() und weiterhin Zugriff auf alles andere aus übergeordneten Bereich.

4

Aus Gründen der Definition:

Isolierte Scopes

sind als IIFE des weithin bekannt, die ein Design-Muster für javascript "Verschlüsse" ist.

Isolierte Welt

oder „isolierte Welt“ für diese Angelegenheit und werden von Dipol beschrieben, ist der Autor der Frage, JavaScript-Anwendungen, die auf der gleiche Umgebung laufen, wissen aber nicht umeinander.

Mögliche Antwort

Diese Fragen meine haben here bereits beantwortet.

Mein Vorschlag

Während „Isoliert World“ ist keine „Sache“ in Javascript, oder zumindest war es bis vor kurzem nicht, und im Geist eine mögliche Lösung zu sehen, die Bereitstellung von um Dynamic Script Loading.

Sie haben immer noch einen Konflikt, wenn Sie Ihre Skripte nicht dynamisch in einen "isolierten Bereich" laden und Ihre Funktionen in diesem Bereich verwenden.

0

Für das, was es wert ist, sind iframes ziemlich isoliert :)

Anstelle der Zugabe Polymer direkt an die Host-Seite <head>, versuchen, ein in der Host-Seite erstellen und fügen Polymer und andere Web-Komponenten mit dem inneren Dokument .

Sie können entweder den Inhalt dynamisch erstellen oder versuchen, eine HTML-Datei in Ihrer Erweiterung (src="") zu referenzieren (nicht sicher, SOP könnte im Weg sein).

(Sie können den Iframe transparent machen und überlagern, wo immer Sie möchten).

Hoffe, das funktioniert/hilft.

+0

Danke für den Vorschlag, aber leider sind iframes keine brauchbare Option für mich. Die Erweiterung enthält viele verschiedene Komponenten, die mit Elementen auf der Seite interagieren müssen, im Gegensatz zu einer einzelnen Komponente, die eigenständig sein kann. –

0

nur ein Vorschlag: Sie können Service-Mitarbeiter versuchen. Führen Sie Ihr Javascript in einem separaten Thread aus und verwenden Sie dort Ihre eigenen Bibliotheken.