为什么我的Chrome扩展程序中不会加载此javascript？

Question

下面的开源GitHub项目允许您创建惊人的进度条，但是虽然它加载在网页中，但它不会在我正在开发的chrome扩展中。这是源代码：

https://github.com/kimmobrunfeldt/progressbar.js/blob/master/dist/progressbar.min.js

有什么东西我需要添加到“manifest.json”或我能做些什么来解决这个问题？

以下是一个示例，它适用于网页，但不适用于Chrome扩展程序。

在此先感谢您的帮助！

var bar = new ProgressBar.SemiCircle(container, {
  strokeWidth: 6,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  easing: 'easeInOut',
  duration: 1400,
  svgStyle: null,
  text: {
    value: '',
    alignToBottom: false
  },
  from: {color: '#FFEA82'},
  to: {color: '#ED6A5A'},
  // Set default step function for all animate calls
  step: (state, bar) => {
    bar.path.setAttribute('stroke', state.color);
    var value = Math.round(bar.value() * 100);
    if (value === 0) {
      bar.setText('');
    } else {
      bar.setText(value);
    }

    bar.text.style.color = state.color;
  }
});

bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(1.0);  // Number from 0.0 to 1.0

#container {
  margin: 20px;
  width: 200px;
  height: 100px;
}

<script src="https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/02a322d7/dist/progressbar.min.js"></script>

<div id="container"></div>

Answer 1

总结一下这个问题：Google试图帮助开发人员维护安全扩展，并实施了严格的内容安全策略。默认情况下，安全策略非常严格，因为它可以防止您的代码运行恶意代码。它以三种主要方式限制扩展：

1. Eval()和相关功能被禁用。
2. 内联JavaScript将不会被执行。
3. 仅加载本地脚本和对象资源。

在这种情况下，＃3是您的问题的原因。它的存在是为了防止开发人员在没有开发人员知识的情况下包含可能被修改以提供恶意代码的第三方脚本。这可以通过修改content_security_policy中的manifest.json来包含所需脚本的域来规避。例如，

"content_security_policy": "script-src 'self' 'https://your-code.com/'; object-src 'self'"

有关Chrome的内容安全政策的更多信息，请访问here。

Answer 2

要在扩展中使用外部js文件，您需要将简化域添加到“manifest.json”文件中。

例如URL：https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/02a322d7/dist/progressbar.min.js

简化为：https://cdn.rawgit.com/

现在将它添加到manifest.json：

{
  ...

  "content_security_policy": "script-src 'self' https://cdn.rawgit.com/; object-src 'self'",

  ...
}

如果你已经有了“内容安全策略”，只需在你的其他域旁边添加简化域，用以下空格分隔：

{
  ...

  "content_security_policy": "script-src 'self' https://cdn.rawgit.com/ https://firebase.com https://www.gstatic.com/; object-src 'self'",

  ...
}

希望这可以帮助！