Question

通过浏览器扩展我的意思是WebExtension https://developer.mozilla.org/ru/Add-ons/WebExtensions。

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

从'null'访问'file：///'的导入资源已经存在被CORS策略阻止：响应无效。因此，原点'null' 不允许访问。

WebExtension（特别是设置弹出窗口）没有特定的服务器。他们的链接就像chrome-extension：//pkngljipephggpkgjfkjhggmcjfmhgkn/page.html

Answer 1

生产年份后更新的答案

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

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

只插入一个Polymer元素后，我遇到了很多错误：拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self'”。要么是'unsafe-inline'关键字，哈希（'sha256-AYzkEOy570v3pgwSjL36msfNQGIBNCoa6ppxJtI8Fag ='），要么是nonce（'nonce -...'）来启用内联执行。

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

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

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

Answer 2

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

此处的详细信息详情：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来构建浏览器扩展？

2 个答案: