Question

我正在尝试使用web accessible resources创建一个Chrome扩展程序。由于我的扩展程序尝试使用可用数据列表创建模式，因此我决定使用VueJS来处理内容的动态性质。

但是，当我创建示例文件并初始化VueJS时，它只会导致所有DOM都被注释掉，而我的应用无法正常工作。

这是我正在使用的代码：
web_resources / vue.html

<html>
<head>
  <script type="text/javascript" src="/web_resources/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script type="text/javascript" src="/web_resources/app.js"></script>
</body>
</html>

web_resources / app.js

window.app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }
})

运行此命令时，整个div被替换为，但没有任何效果。

在iframe中在线搜索VueJS时，我遇到了this post，其中有这个fiddle，令人惊讶地为我生成了一个没有内容的空白页。检查结果时，我发现这里的div也已被取代。

为什么VueJS在iframe中无法正确初始化？

Answer 1

问题是内容安全策略（CSP）。由于我使用的是vue.min.js的本地副本，因此看不到任何错误消息。看起来一切都在按预期进行初始化，只是没有进行。将其替换为未缩小的版本后，在以下代码行中看到错误：

我只需要通过添加以下内容即可更新manifest.json中的CSP：

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",

创建Vue实例注释掉所有内容

1 个答案: