Vuejs 应用程序未在 chrome 扩展中呈现答案

【问题标题】：Vuejs app not rendering in a chrome extensionVuejs 应用程序未在 chrome 扩展中呈现
【发布时间】：2019-06-13 18:06:56
【问题描述】：

我正在尝试在 chrome 扩展中运行一个示例 Vuejs 应用程序，作为一个新选项卡（即，当您打开一个新选项卡时，Vuejs 应用程序应该呈现）。当我使用simplehttpserver dist/ 从dist/ 文件夹运行应用程序时，它可以正常工作，但是，当我Load Unpacked 将 dist 文件夹作为 Chrome 扩展程序并尝试打开一个新选项卡时，Vuejs 应用程序不会呈现。

我正在运行npm run build 来构建应用程序，然后将manifest.json 和background.js 文件添加到dist/ 文件夹中。

我在 chrome 扩展版本的元素检查器中看到的一件事是 <div id="app"></div> 出于某种原因未包含在 DOM 中，即使它在构建完成后位于 index.html 文件中。

注意：我尝试用作 chrome 扩展的 Vuejs 应用是 vue init webpack . 创建的默认示例应用。

manifest.json

{
  "manifest_version": 2,
  "name": "Vuejs test extension",
  "description": "",
  "version": "0.0.0",

  "chrome_url_overrides": {
    "newtab": "index.html"
  },

  "browser_action": {
    "default_icon": "icon.png"
  },

  "permissions": [
    "tabs"
  ],

  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

background.js

chrome.browserAction.onClicked.addListener((function() {
    chrome.tabs.create({'url': "chrome://newtab"})
}));

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Test vuejs app</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

【问题讨论】：

检查器中有什么，可能是一些文件丢失或没有加载？
是dist文件夹中的html吗？
虽然我没有使用带有扩展的 vue，但我记得读过 this article，关于渲染怪癖。这部分不幸的是，模板编译器依赖 eval 函数来执行这个编译任务，而这些在 CSP 下是不允许的。
您的 html 没有加载任何脚本。请注意，扩展页面是一个静态文件，它必须包含明确提到的所有资源，因为它不是由 node.js 等提供的。
另外，我在谷歌搜索问题标题时看到了很多答案，包括用作扩展基础的样板模板。

标签： javascript vue.js google-chrome-extension vuejs2

【解决方案1】：

我找到了一个简单快捷的解决方法。

正如许多人所指出的，整个问题在于运行时的 vue 渲染模板。为此，它使用了eval() 函数，出于安全原因，chrome 默认不允许使用该函数。

您可以通过在 manifest.json 中添加以下行来绕过此操作：

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

显然不建议这样做，因为您的扩展程序容易出现跨站点脚本漏洞。

相反，您可以依靠 vue 在编译时渲染模板。这样它就不再需要在您的模板上运行 eval()。

在编译时呈现模板的最简单方法是在使用vue init webpack 创建项目时将Vue build 设置为runtime。

这会强制 Vue 根据这篇文章使用预编译的模板：https://vuejsdevelopers.com/2017/05/08/vue-js-chrome-extension/

...这正是我们不需要使用eval() 函数的原因。

【讨论】：

在开发模式下，Hot-Module-Reload 被激活，这就是为什么你需要使用unsafe-eval，但是在生产中你不需要这个。我创建这个是为了便于使用 Vue 和 Chrome 扩展 github.com/superoo7/vue-cli-plugin-chrome-ext 启动项目，它有 2 种不同的配置用于生产和开发
谢谢先生！我将它添加到 manifest.json 中，它一开始不起作用。但是在我强制重启 Chrome 扩展程序后，它工作得很好！
@johnsonlai 谢谢你，你指出了这个控制台错误的真正原因。

【解决方案2】：

要使用 Vuejs 创建 chrome 扩展，您可以使用 this 样板。确保你已经安装了 vue-cli，如果没有安装，你可以使用 `npm install -g @vue/cli 来安装它。

安装 vue-cli 后运行这个 cmd：vue init kocal/vue-web-extension my-extension。它将下载并安装 chrome-extension 的 vuejs 样板模板到您的当前目录。然后您可以移动到新创建的目录并使用命令npm install 安装依赖项。

现在您已经为您的 chrome-extension 完全设置了 vuejs 应用程序，但它将作为弹出窗口打开以使其在新选项卡中可见，它需要进行一些修改，如下所示。

首先转到src/manifest.json 文件并从"browser_action" 中删除"default_popup": "popup/popup.html"

然后转到src/background.js文件并删除所有给定的代码并将其替换为下面给出的代码。

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.create(
        {
            url: chrome.extension.getURL('./popup/popup.html'),
        },
        function (tab) { }
    );
});

现在运行npm run build，它将生成可用作扩展文件夹的 dist 文件夹。您可以通过使用 chrome 扩展菜单中的 Load unpacked 选项在 chrome 中打开。

你已经完成了，你可以通过点击扩展图标在新标签窗口中看到 vuejs 应用程序运行。

让我知道它是否有效，如果无效，请让我知道您面临的问题是什么。

【讨论】：

明白了。它似乎有效，但我看到它依赖于在扩展清单中添加unsafe-eval："content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" 有没有办法避免这种情况并仍然使 vuejs 应用程序呈现？
我不确定，但我可以在 webpack.config.js 文件中看到它只是在开发模式下将unsafe-eval 添加到manifest.json。如果您执行 npm run build 并检查 dist 文件夹中的清单文件，它可能不会添加 unsafe-eval。