Проблемы с загрузкой Polymer 1.0 в расширении хрома

Question

Я разрабатываю расширение хрома с использованием Polymer в течение некоторого времени, и у меня есть пара проблем, связанных с его выпуском в текущем состоянии. Я хотел бы услышать о некоторых стратегиях предотвращения следующих проблем, с которыми я столкнулся:

1) Загрузка Полимер в страницу просачивается в глобальное пространство имен. Полимер не поставляется в JS-файлах, скорее, он представлен в виде html-страницы и требует, чтобы пользователь использовал импорт HTML для загрузки его на страницу. AFAIK, скрипты контента допускают только CSS и JS, но не HTML. Чтобы решить эту проблему, я включаю его динамически генерировать ссылку элемент и добавление его в качестве такового на страницу:

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

После загрузки на страницу хозяина, он не работает в изоляции, как скрипты контента и может вызывает конфликты пространства имен, если страница уже загружена Полимер.

2) Полимер не сообщает вам, когда он загружен и готов к использованию. Полимер не (в настоящее время) не запускает событие, когда оно загружено, и в результате мои компоненты иногда загружаются до того, как Polymer сделает и сломается.

Чтобы смягчить это, я запуская пользовательское событие в конце polymer-micro.html (что, где полимер) определяется как таковые:

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

3) Инструмент POLYBUILD не создает правильный код для хром удлинение. Как бы он ни был полезен, он генерирует отдельный файл javascript внеdom-module, вызывая пространство имен leak в глобальный объект окна. Например, если был импортирован jQuery в мой модуль, Polybuild создавал бы JS-файл, содержащий jQuery вне модуля DOM, заставляя его прикрепляться к объекту окна хоста - большой нет-нет в расширении chrome.

Спасибо за отзыв.

На момент написания этого я использую Polymer 1.2.3

Answer 1

Загрузка полимера в страницу утечки в глобальное пространство имен.

Вы можете использовать событие HTMLImports.whenReady и зарегистрировать свои элементы непосредственно в основном документе. Вы можете включать javascript напрямую или ссылаться на теги сценария, содержащие его. Это решит проблему неспособности импортировать html-файлы, но не разрешает то, что, по моему мнению, могло быть вашим фактическим вопросом об утечках в глобальном пространстве имен, а javascript по-прежнему будет выполняться как часть основного документа.

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

Полимер не говорит вам, когда он будет загружен и готов к использованию.

WebComponentsJs предоставляет свой собственный пользовательский событие, WebComponentsReady

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

Это позволяет перенести любые Javascript, связанные с полимером и веб-компоненты, пока все элементы не были зарегистрированы.

Инструмент Polybuild не генерирует правильный код для расширения хрома.

es6 modules может уменьшить утечку переменных в глобальное пространство имен, которое вы можете использовать в настоящее время с Babel.