是否可以使用 Polymer 2 构建浏览器扩展？

Question

浏览器扩展是指 WebExtension https://developer.mozilla.org/ru/Add-ons/WebExtensions。

我尝试将它用于本地文件并得到：

Access to Imported resource at 'file:///' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

WebExtension（尤其是弹出设置）没有特定的服务器。他们的链接将像 chrome-extension://pkngljipephggpkgjfkjhggmcjfmhgkn/page.html

Answer 1

生产年份后的更新答案

我使用了 Polymer 1 和 Polymer 3。你需要为两者创建整个建筑生态系统。在 Polymer 3 的情况下，由于错误，这非常非常困难！ polymer-build 的文档（不要阅读文档，直接阅读源代码）

刚刚测试，这里是答案。很快：是的，但有并发症。

仅插入一个 Polymer 元素后出现许多错误：拒绝执行内联脚本，因为它违反了以下内容安全策略指令："script-src 'self'"。启用内联执行需要 'unsafe-inline' 关键字、散列 ('sha256-AYzkEOy570v3pgwSjL36msfNQGIBNCoa6ppxJtI8Fag=') 或随机数 ('nonce-...')。

在扩展要求中 Chrome 31+ - 所以我无法更改内容安全策略。我不能对任何模板使用内联 <script> 标签。

所以我通过将所有内联脚本移动到单独的脚本来修改 Polymer 的代码，并且成功了。

缺点：如果要更新 Polymer，我无法自动更新代码。每次我需要重写它的代码。

Answer 2

Vulcanize 和 Crisper 工具可用于解决 CORS/CSP 问题。

这里有很多 how-to 详细信息：https://www.polymer-project.org/1.0/docs/tools/optimize-for-production

两种工具都有 Gulp 插件，因此您可以像这样编写构建步骤脚本：

gulp.task('vulcanize', function() {
  return gulp.src('index.html')
    .pipe(vulcanize({
      inlineScripts: true,
      inlineCss: true
    }))
    .pipe(crisper())
    .pipe(gulp.dest('popup'));
});

是否可以使用 Polymer 2 构建浏览器扩展？

Is it possible to use Polymer 2 for building browser extention?

javascript

polymer

polymer-2.x