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试图帮助开发人员维护安全扩展，并实施了严格的内容安全策略。默认情况下，安全策略非常严格，因为它可以防止您的代码运行恶意代码。它以三种主要方式限制扩展：

Eval()及相关功能已停用。
不会执行内联JavaScript。
仅加载本地脚本和对象资源。

在这种情况下，＃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”文件中。

例如网址：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'",

  ...
}

希望这有帮助！

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

2 个答案: