草庐IT

javascript - 在 chrome 扩展中加载 Polymer 1.0 时出现问题

coder 2024-05-10 原文

我使用 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 不会在加载和准备好使用时告诉您。 Polymer 不会(当前)在加载时触发事件，因此，我的组件有时会在 Polymer 加载之前加载并打破。

为了缓解这种情况，我在 polymer-micro.html(这是 Polymer)定义的末尾触发了一个自定义事件:

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

3) Polybuild 工具没有为 chrome 扩展生成正确的代码。尽管它很有用，但它会在dom-module 的外部 生成一个单独的javascript 文件，导致命名空间泄漏 到全局窗口对象中。例如，如果在我的模块中导入 jQuery，Polybuild 会在 DOM 模块外部生成一个包含 jQuery 的 JS 文件，导致它附加到主机窗口对象——这是 chrome 扩展中的一个大禁忌。

感谢您的反馈。

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

最佳答案

将 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
  });

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

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

es6 modules可以减少泄漏到全局命名空间中的变量，您当前可以将其与 Babel 一起使用.

关于javascript - 在 chrome 扩展中加载 Polymer 1.0 时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34619046/

时出中加Polymerstrongcodejavascriptgoogle-chrome-extensionpolymer-1.0web-component

有关javascript - 在 chrome 扩展中加载 Polymer 1.0 时出现问题的更多相关文章

  1. ruby - ECONNRESET (Whois::ConnectionError) - 尝试在 Ruby 中查询 Whois 时出错 - 2

    我正在用Ruby编写一个简单的程序来检查域列表是否被占用。基本上它循环遍历列表，并使用以下函数进行检查。require'rubygems'require'whois'defcheck_domain(domain)c=Whois::Client.newc.query("google.com").available?end程序不断出错(即使我在google.com中进行硬编码)，并打印以下消息。鉴于该程序非常简单，我已经没有什么想法了-有什么建议吗？/Library/Ruby/Gems/1.8/gems/whois-2.0.2/lib/whois/server/adapters/base.

  2. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  3. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  4. ruby - 使用 C 扩展开发 ruby​​gem 时，如何使用 Rspec 在本地进行测试？ - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当

  5. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  6. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  7. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

  8. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  9. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  10. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

随机推荐