如何在 Web 扩展弹出窗口中使用 Vue.js？

Question

我正在尝试开发一个网络扩展并使用 Vue 来设置弹出窗口的样式，但它似乎不起作用。目前代码非常基础

manifest.json:

{
  "manifest_version": 2,
  "name": "Web Extension",
  "description": "Web Extension",
  "version": "1.0.0",
  "browser_action": {
    "default_icon": "icons/compass.svg",
    "default_title": "Web Extension",
    "default_popup": "popup/index.html"
  },
  "permissions": ["<all_urls>"]
}

index.html:

<!DOCTYPE html>
<html>
<head>


<title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

从下图中可以看出，当在浏览器中打开页面时，代码可以正常工作，但是弹出窗口中的 js 似乎没有运行:

Answer 1

如果你检查你的弹出窗口，你会看到错误提示浏览器由于 CSP 而拒绝加载 vue 脚本（你必须在你的清单中指定你的扩展可以访问哪些资源）在清单中添加以下 CSP 以加载脚本：

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

脚本加载但这也不起作用: 浏览器拒绝执行内联脚本，因为它违反了 CSP。这个比较棘手，因为它与使用 eval 函数渲染模板的 vue 有关。要解决这个问题，您将不得不在 js 中编写您的渲染函数（您不想那样做...）或编译您的模板。有很多解决方案可以做到这一点。在我看来，使用 webpack is the easier way. You can start in a few minutes using a template like this one，这将创建与您几乎相同的扩展，（Hello World 弹出窗口）使用 vue 和 webpack（为您完成所有 webpack 配置）。安装后，使用

编译你的扩展

npm run build

并从 chrome 中的 dist 目录加载解压后的扩展。奇迹般有效。（或者在 Firefox 中使用 web-ext cli 来运行它很容易）

如何在 Web 扩展弹出窗口中使用 Vue.js？

How to use Vue.js in a web extension popup?

javascript

firefox

vue.js

firefox-addon-sdk

firefox-addon-webextensions