Я разрабатываю расширение chrome с использованием 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 (которое является Polymer), как таковое:

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

Ответ 1

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

Вы можете использовать событие HTMLImports.whenReady и зарегистрировать свои элементы непосредственно в основном документе. Вы можете включать javascript напрямую или ссылаться на теги script, содержащие его. Это решит проблему неспособности импортировать 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, относящийся к полимерам и WebComponents, до тех пор, пока все элементы не будут зарегистрированы.

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

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