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

【问题标题】：How to use Vue.js in a web extension popup?如何在 Web 扩展弹出窗口中使用 Vue.js？
【发布时间】：2018-03-21 08:56:47
【问题描述】：

我正在尝试开发一个网络扩展并使用 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 似乎没有在弹出窗口中运行：

【问题讨论】：

标签： javascript firefox vue.js firefox-addon-sdk firefox-addon-webextensions

【解决方案1】：

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

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

脚本加载，但这也不起作用：浏览器拒绝执行内联脚本，因为它违反了 CSP。这个比较棘手，因为它与使用 eval 函数呈现模板的 vue 有关。要解决这个问题，您必须在 js 中编写渲染函数（您不想这样做...）或编译您的模板。有很多解决方案可以做到这一点。在我看来，使用webpack 是更简单的方法。您可以在几分钟内使用 this one 之类的模板开始，它将使用 vue 和 webpack（为您完成所有 webpack 配置）创建与您的扩展几乎相同的扩展（Hello World 弹出窗口）。安装后，使用

编译您的扩展

npm run build

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

【讨论】：