Vue.js应用未在Chrome扩展程序中呈现

Question

I'm trying to run an example Vuejs app in a chrome extension, as a new tab (ie when you open a new tab, the Vuejs app should render). 我正在尝试在chrome扩展程序中作为新选项卡运行示例Vuejs应用程序（即，当您打开新选项卡时，Vuejs应用程序应呈现）。 When I run the app from the dist/ folder using simplehttpserver dist/ it works just fine as expected, however, when I Load Unpacked the dist folder as a Chrome Extension and try opening a new tab, the Vuejs app does not render. 当我使用simplehttpserver dist/从dist/文件夹运行应用程序时，它按预期运行，但是，当我将dist文件夹作为Chrome扩展程序Load Unpacked解压缩并尝试打开新标签时，Vuejs应用程序不会呈现。

I'm running npm run build to build the app and then adding the manifest.json and background.js files into the dist/ folder. 我正在运行npm run build来构建应用程序，然后将manifest.json和background.js文件添加到dist/文件夹中。

One thing I see in the element inspector on the chrome extension version is that the <div id="app"></div> for some reason is not included in the DOM, even though it is in the index.html file after the build is done. 我在chrome扩展版本的元素检查器中看到的一件事是，由于某些原因， <div id="app"></div>未包含在DOM中，即使它在之后的index.html文件中也是如此。构建完成。

Note: the Vuejs app I'm trying to use as a chrome extension is the default example app vue init webpack . 注意：我尝试用作chrome扩展程序的Vuejs应用程序是默认示例应用程序vue init webpack . creates. 创建。

manifest.json 的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 background.js

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

index.html 的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

I've found a easy and quick fix. 我发现了一个简单快速的修复方法。

The whole issue, as many have pointed out, is with vue rendering templates in runtime. 正如许多人指出的那样，整个问题与运行时中的vue渲染模板有关。 To do so, it uses the eval() function which is by default not allowed by chrome for it's extensions for security reasons. 为此，它使用eval()函数，出于安全原因，默认情况下chrome不允许使用eval()函数。

You can bypass this by adding the following line in your manifest.json : 您可以通过在manifest.json添加以下行来绕过此操作：

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

This is obviously not recommended as your extension will be prone to cross-site scripting vulnerabilities. 显然不建议这样做，因为您的扩展程序很容易出现跨站点脚本漏洞。

Instead, you can rely on vue rendering the templates in compile time. 相反，您可以依靠vue在编译时渲染模板。 That way it no longer needs to run eval() on your templates. 这样，它不再需要在模板上运行eval() 。

The easiest way to render templates on compile time is to set the Vue build to runtime when creating your project with vue init webpack . 在编译时呈现模板的最简单方法是在使用vue init webpack创建项目runtime将Vue build设置为runtime时。

This forces Vue to use pre-compiled templates according to this article: https://vuejsdevelopers.com/2017/05/08/vue-js-chrome-extension/ 这迫使Vue根据本文使用预编译的模板： https : //vuejsdevelopers.com/2017/05/08/vue-js-chrome-extension/

... which is exactly what we need to not use the eval() function. ...正是我们不需要使用eval()函数的原因。

Answer 2

To create the chrome-extension using Vuejs you can use this boilerplate. 要使用Vuejs创建chrome-extension，您可以使用此样板。 Make sure you have installed the vue-cli if it's not installed you can install it by using `npm install -g @vue/cli. 确保已安装vue-cli（如果尚未安装），可以使用`npm install -g @ vue / cli安装它。

After installing the vue-cli run this cmd: vue init kocal/vue-web-extension my-extension . 安装vue-cli后，运行以下cmd： vue init kocal/vue-web-extension my-extension 。 It will download and install the vuejs boilerplate template for chrome-extension to your current directory. 它将下载chrome-extension的vuejs样板模板并将其安装到当前目录。 Then you can move to the newly created directory and install the dependencies using the command npm install . 然后，您可以移动到新创建的目录并使用命令npm install依赖项。

Now you have completely setup the vuejs app for your chrome-extension but it will open as popup window to make it visible in new tab it will require some modification as I given below. 现在，您已经完全为chrome-extension设置了vuejs应用程序，但是它将作为弹出窗口打开，以使其在新选项卡中可见，这将需要一些修改，如下所示。

First go to the src/manifest.json file and remove "default_popup": "popup/popup.html" from "browser_action" 首先转到src/manifest.json文件，然后从"browser_action"删除"default_popup": "popup/popup.html" "browser_action"
Then go to the src/background.js file and delete all given code and replace it with the code given below. 然后转到src/background.js文件并删除所有给定的代码，并将其替换为下面给出的代码。
```
 chrome.browserAction.onClicked.addListener(function (tab) { chrome.tabs.create( { url: chrome.extension.getURL('./popup/popup.html'), }, function (tab) { } ); }); 
```
Now run run npm run build and it will generate the dist folder which you can use as your extension folder. 现在运行run npm run build ，它将生成dist文件夹，您可以将其用作扩展文件夹。 That you can open in chrome by doing using Load unpacked option in chrome extensions menu. 您可以通过使用chrome扩展程序菜单中的Load unpacked选项在chrome中Load unpacked 。

And you are done you can see the vuejs app running in new tab window by clicking on the extension icon. 完成后，您可以通过单击扩展图标查看vuejs应用程序在新选项卡窗口中运行。

Let me know if it worked or not if not worked then please lemem know whats the problem you are facing. 让我知道它是否有效，如果无效，请让我知道您面临的问题是什么。

Vue.js应用未在Chrome扩展程序中呈现

问题描述

2 个解决方案

解决方案1
1 已采纳 2019-01-20 13:18:13

解决方案2
0 2019-01-20 07:38:17

Vue.js应用未在Chrome扩展程序中呈现

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-01-20 13:18:13

解决方案2 0 2019-01-20 07:38:17

解决方案1
1 已采纳 2019-01-20 13:18:13

解决方案2
0 2019-01-20 07:38:17