Question

我正在尝试在chrome扩展程序中作为新标签页运行示例Vuejs应用程序（即，当您打开新标签页时，Vuejs应用程序应呈现）。当我使用dist/从simplehttpserver dist/文件夹运行应用程序时，它按预期运行正常，但是，当我将dist文件夹作为Chrome扩展程序Load Unpacked并尝试打开新标签时， 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>

Answer 1

要使用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扩展程序设置了vuejs应用程序，但是它将作为弹出窗口打开，以使其在新标签页中可见，需要进行一些修改，如下所述。

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

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

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

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

完成后，您可以通过单击扩展图标在新选项卡窗口中查看vuejs应用程序。

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

Answer 2

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

许多人指出，整个问题与运行时中的vue渲染模板有关。为此，它使用eval()函数，出于安全原因，由于扩展名，默认情况下chrome不允许使用该函数。

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

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

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

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

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

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

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

Vuejs应用未在Chrome扩展程序中呈现

2 个答案: