在chrome扩展中加载Polymer 1.0的问题

Question

我一直在使用Polymer开发一个chrome扩展已有一段时间了,我有一些关于在它当前状态下释放它的担忧.我想听听一些防止我遇到的以下问题的策略:

1)将Polymer加载到页面中会泄漏到全局名称空间中.Polymer不会捆绑到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")) )

一旦加载到主机页面,它就不像内容脚本那样独立运行,如果页面已经加载了Polymer ,则会导致命名空间冲突.

2)聚合物不会告诉您何时装入并准备使用.聚合物(当前)在加载时不会触发事件,因此,我的组件有时会在聚合物进入并断开之前加载.

为了缓解这个问题,我在结束时触发了一个自定义事件polymer-micro.html(这是Polymer的定义):

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

3)Polybuild工具不会为chrome扩展生成正确的代码.虽然它很有用,但它会在命名空间之外生成一个单独的javascript文件,dom-module从而导致命名空间leak进入全局窗口对象.例如,如果在我的模块中导入jQuery,Polybuild将生成一个包含DOM模块之外的jQuery的JS文件,从而将其附加到主机窗口对象 - 这是Chrome扩展中的一个大禁忌.

感谢您的反馈.

在撰写本文时,我正在使用Polymer 1.2.3

Answer 1

将 Polymer 加载到页面中会泄漏到全局命名空间中。

您可以使用HTMLImports.whenReady事件并直接在主文档中注册您的元素。您可以直接包含 javascript，或引用包含它的脚本标签。这解决了您无法导入 html 文件的问题，但没有解决我认为可能是您关于全局名称空间泄漏的实际问题，并且 javascript 仍将作为主文档的一部分运行。

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

Polymer 不会告诉您它何时已加载并可供使用。

WebComponentsJs 提供了它自己的自定义事件WebComponentsReady

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

这允许您推迟与聚合物和 WebComponents 相关的任何 JavaScript，直到所有元素都已注册。

Polybuild 工具不会为 chrome 扩展生成正确的代码。

es6模块可以减少变量泄漏到全局命名空间中，目前您可以将其与Babel一起使用。