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

【问题标题】：Is it possible to use Polymer 2 for building browser extention?是否可以使用 Polymer 2 构建浏览器扩展？
【发布时间】：2018-11-21 20:12:47
【问题描述】：

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

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

已从源“null”访问“file:///”处的导入资源被 CORS 策略阻止：无效响应。因此，原点“空”是不允许访问。

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

【问题讨论】：

答案是肯定的。由于不同的问题，您收到的错误。 CORS 是跨源请求错误。当你得到这个的时候你在做什么
只是 HTML 导入
您的导入方式出现问题。它不是与聚合物有关的错误。可能是 chrome 中的某些东西被阻塞了。您是否尝试过 jquery 或其他方法来测试出了什么问题？
当他们开发一些浏览器扩展时，我看到很少有人在 stackoverflow 上提问，所以是的，这可能是可能的，但我不知道任何教程或文章

标签： javascript polymer polymer-2.x

【解决方案1】：

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

【讨论】：

【解决方案2】：

制作一年后更新答案

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

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

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

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

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

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

【讨论】：