Vue.js應用未在Chrome擴展程序中呈現

Question

我正在嘗試在chrome擴展程序中作為新選項卡運行示例Vuejs應用程序（即，當您打開新選項卡時，Vuejs應用程序應呈現）。 當我使用simplehttpserver dist/從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

我發現了一個簡單快速的修復方法。

正如許多人指出的那樣，整個問題與運行時中的vue渲染模板有關。 為此，它使用eval()函數，出於安全原因，默認情況下chrome不允許使用eval()函數。

您可以通過在manifest.json添加以下行來繞過此操作：

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

顯然不建議這樣做，因為您的擴展程序很容易出現跨站點腳本漏洞。

相反，您可以依靠vue在編譯時渲染模板。 這樣，它不再需要在模板上運行eval() 。

在編譯時呈現模板的最簡單方法是在使用vue init webpack創建項目runtime將Vue build設置為runtime時。

這迫使Vue根據本文使用預編譯的模板： https : //vuejsdevelopers.com/2017/05/08/vue-js-chrome-extension/

...正是我們不需要使用eval()函數的原因。

Answer 2

要使用Vuejs創建chrome-extension，您可以使用此樣板。 確保已安裝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" "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中Load unpacked 。

完成后，您可以通過單擊擴展圖標查看vuejs應用程序在新選項卡窗口中運行。

讓我知道它是否有效，如果無效，請讓我知道您面臨的問題是什么。

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