I have encountered an issue while trying to run a Vuejs app in a Chrome extension as a new tab. The app renders perfectly fine when running it from the dist/ folder using simplehttpserver dist/. However, when I attempt to load the dist folder as a Chrome Extension and open a new tab, the Vuejs app fails to render.
To build the app, I am using npm run build and then adding the files manifest.json and background.js into the dist/ folder.
Upon inspecting the element in the Chrome extension version, I noticed that the <div id="app"></div> is missing from the DOM, even though it exists in the index.html file after building the app.
Note: The Vuejs app I am attempting to use as a Chrome extension is the default example app created by 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>