Vuejs app not rendering in a chrome extension

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). 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.

I'm running npm run build to build the app and then adding the manifest.json and background.js files into the dist/ folder.

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.

Note: the Vuejs app I'm trying to use as a chrome extension is the default example app vue init webpack . creates.

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

I've found a easy and quick fix.

The whole issue, as many have pointed out, is with vue rendering templates in runtime. To do so, it uses the eval() function which is by default not allowed by chrome for it's extensions for security reasons.

You can bypass this by adding the following line in your 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. That way it no longer needs to run eval() on your templates.

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 .

This forces Vue to use pre-compiled templates according to this article: https://vuejsdevelopers.com/2017/05/08/vue-js-chrome-extension/

... which is exactly what we need to not use the eval() function.

Answer 2

To create the chrome-extension using Vuejs you can use this boilerplate. Make sure you have installed the vue-cli if it's not installed you can install it by using `npm install -g @vue/cli.

After installing the vue-cli run this 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. Then you can move to the newly created directory and install the dependencies using the command 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.

First go to the src/manifest.json file and remove "default_popup": "popup/popup.html" from "browser_action"

Then go to the src/background.js file and delete all given code and replace it with the code given below.

 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. That you can open in chrome by doing using Load unpacked option in chrome extensions menu.

And you are done you can see the vuejs app running in new tab window by clicking on the extension icon.

Let me know if it worked or not if not worked then please lemem know whats the problem you are facing.

Vuejs app not rendering in a chrome extension

Question

2 answers

solution1
1 ACCPTED 2019-01-20 13:18:13

solution2
0 2019-01-20 07:38:17

Vuejs app not rendering in a chrome extension

Question

2 answers

solution1 1 ACCPTED 2019-01-20 13:18:13

solution2 0 2019-01-20 07:38:17

solution1
1 ACCPTED 2019-01-20 13:18:13

solution2
0 2019-01-20 07:38:17