Probleme Polymer 1.0 in einer Chrom-Erweiterung geladen

Question

Ich habe die Entwicklung einer Chrome-Erweiterung Polymer nun schon seit einiger Zeit mit, und ich habe ein paar Bedenken darüber in seiner aktuellen Zustand freigegeben wird. Ich möchte über einige Strategien zum Verhindern der folgenden Probleme hören, mit denen ich konfrontiert wurde:

1) Laden von Polymer in die Seite leckt in den globalen Namespace. Polymer wird nicht in JS-Dateien gebündelt, sondern kommt in Form einer HTML-Seite und erfordert, dass der Benutzer einen HTML-Import verwendet, um es in die Seite zu laden. AFAIK, Inhaltsskripte erlauben nur CSS und JS, aber nicht HTML. Um dieses Problem zu beheben, ich bin auch durch dynamisch ein Verbindungselement zu erzeugen und sie als solche in der Seite hinzufügen:

function loadUrl(url) { 
    return new Promise(
    function(resolve, reject) { 
     var link = document.createElement('link'); 
     link.setAttribute('rel', 'import'); 
     link.setAttribute('href', url); 
     link.onload = function() { 
     resolve(url); 
     }; 
     document.head.appendChild(link); 
    }); 
} 

loadUrl(chrome.extension.getURL("polymer/polymer.html")). 
then(loadUrl(chrome.extension.getURL("my/component.html"))) 

Einmal in die Host-Seite geladen, ist es nicht isoliert wie Content-Skripte ausgeführt und kann Ursache Namespace-Konflikte, wenn die Seite bereits hat Polymer geladen.

2) Polymer sagen Sie nicht, wenn es geladen und einsatzbereit. Polymer feuert (derzeit) nicht ein Ereignis, wenn es geladen wurde und als Ergebnis laden meine Komponenten manchmal vor Polymer und brechen.

Um dies zu mildern, ich Auslösen ein benutzerdefiniertes Ereignis am Ende der polymer-micro.html (die in den Polymer ist) als solche definiert:

var ev = new CustomEvent('polymer-loaded'); 
document.dispatchEvent(ev); 

3) Das Polybuild Werkzeug nicht für einen richtigen Code generiert Chromverlängerung. So nützlich es ist, erzeugt es eine separate JavaScript-Datei außerhalb der dom-module einen Namespace leak in das globale Fensterobjekt verursacht. Wenn zum Beispiel jQuery in mein Modul importiert wurde, erzeugte Polybuild eine JS-Datei, die jQuery außerhalb des DOM-Moduls enthielt, wodurch sie an das Objekt des Host-Fensters angehängt wurde - ein großes Nein in einer Chrome-Erweiterung.

Danke für das Feedback.

Zum Zeitpunkt des Schreibens dieses verwende ich Polymer 1.2.3

Answer 1

Laden Polymer in die Seite Lecks in den globalen Namespace.

Sie können das HTMLImports.whenReady Ereignis und Ihre Elemente direkt in das Hauptdokument registrieren. Sie können Javascript direkt einfügen oder auf Skript-Tags verweisen, die es enthalten. Dies behebt das Problem, dass HTML-Dateien nicht importiert werden können, löst aber nicht die Frage, die möglicherweise Ihre eigentliche Frage zu Lecks im globalen Namespace war, und das JavaScript wird weiterhin als Teil des Hauptdokuments ausgeführt.

HTMLImports.whenReady(function() { 
     Polymer({ 
     is: 'main-document-element' 
     }); 
    }); 

Polymer wird Ihnen nicht sagen, wenn es geladen wird und einsatzbereit.

WebComponentsJs bietet es eigenes benutzerdefiniertes Ereignis ist, WebComponentsReady

window.addEventListener('WebComponentsReady', function(e) { 
    // imports are loaded and elements have been registered 
    }); 

Dies Ihnen eine Javascript in Zusammenhang mit Polymer und WebComponents verschieben kann, bis alle Elemente registriert wurden.

Das Polybuild-Tool generiert nicht den richtigen Code für eine Chrome-Erweiterung.

es6 modules können Variablen mindern, die in den globalen Namespace münden, den Sie derzeit mit Babel verwenden können.