javascript - 为什么这个 javascript 无法加载到我的 chrome 扩展中？

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

为了在扩展中使用外部 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'",

  ...
}

希望这有帮助!