I developing a chrome extension with Vue.js. Works fine until I hit the part when I want to use routing.
On my local developing server where I have localhost:8080/ this is not a problem when using following routing setup:
main.js
import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App.vue";
import OptionComponent from "./OptionComponent.vue";
const routes = [
{ path: '/', component: App },
{ path: '/option', component: OptionComponent },
];
Vue.use(VueRouter); // This makes all the magic hapen and Vue recognizes the router-view and router-link
const router = new VueRouter({
routes,
});
new Vue({
el: '#app',
router,
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CM Server Descriptor</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="libs/crypt.js"></script>
<script src="libs/jquery.js"></script>
<script src="libs/aja.min.js"></script>
<script src="libs/JSLINQ.js"></script>
<script src="js/build.js"></script>
</body>
</html>
When I deploy to my Chrome-Extension and start testing it there nothing happens. I figured out that the chrome extension has some special path behaviours.
Here you can see that chrome has the path /index.html which is extra extra here.
What I then tried is the following:
const routes = [
{path: '/' + chrome.runtime.id + '/index.html', component: App},
{path: '/' + chrome.runtime.id + '/option', component: OptionComponent},
];
Did not helped. Changing to /index and / did not helped either...
Last try was trying to explicitely telling the protocol:
{path: 'chrome-extension://' + chrome.runtime.id + '/', component: App},
No luck as well. I assume that VueRouter only acts on http:// protocol urls.
If anybody has an idea how to get around this I'd be very thankful!
I developing a chrome extension with Vue.js. Works fine until I hit the part when I want to use routing.
On my local developing server where I have localhost:8080/ this is not a problem when using following routing setup:
main.js
import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App.vue";
import OptionComponent from "./OptionComponent.vue";
const routes = [
{ path: '/', component: App },
{ path: '/option', component: OptionComponent },
];
Vue.use(VueRouter); // This makes all the magic hapen and Vue recognizes the router-view and router-link
const router = new VueRouter({
routes,
});
new Vue({
el: '#app',
router,
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CM Server Descriptor</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="libs/crypt.js"></script>
<script src="libs/jquery.js"></script>
<script src="libs/aja.min.js"></script>
<script src="libs/JSLINQ.js"></script>
<script src="js/build.js"></script>
</body>
</html>
When I deploy to my Chrome-Extension and start testing it there nothing happens. I figured out that the chrome extension has some special path behaviours.
Here you can see that chrome has the path /index.html which is extra extra here.
What I then tried is the following:
const routes = [
{path: '/' + chrome.runtime.id + '/index.html', component: App},
{path: '/' + chrome.runtime.id + '/option', component: OptionComponent},
];
Did not helped. Changing to /index and / did not helped either...
Last try was trying to explicitely telling the protocol:
{path: 'chrome-extension://' + chrome.runtime.id + '/', component: App},
No luck as well. I assume that VueRouter only acts on http:// protocol urls.
If anybody has an idea how to get around this I'd be very thankful!
Share Improve this question edited Jun 14, 2017 at 8:18 xetra11 asked Jun 13, 2017 at 19:45 xetra11xetra11 8,84518 gold badges100 silver badges198 bronze badges 3 |4 Answers
Reset to default 9I had the same issue and I finally fixed it. It has been a year so not sure if it was fixed by chrome or Vue.
Anyway, I'll write down for anyone new to here:
Chrome pass URL based on folder structure and no implicit URL resolution. It means / won't redirect to index.html. So the solution is:
Either add a path for
index.html:{ path: '/index.html', component: App },Or add a path for your app and manual push to it when loaded.
//router.js { path: '/app', component: App },
File App.vue
created(){
this.$router.push('app');
}
And remember the routing path needs to exactly match the relative path in your chrome extension root. So if you put index.html in extension root, your Vue baseUrl must be /
Chrome is pointing at your popup.html file you´ve registered in the mainfest, which then will not be found by your router.
Setting the base url to the popup.html (depending on it´s location relative to the mainfest.json) solves it
const router = new VueRouter({
base: '/popup/popup.html',
mode: 'history',
routes,
});
Just to build on Marian's answer, the latest version of VueRouter has moved the base option to the createWebHistory function. So it would look something like this -
const routes = /** your route definitions **/[]
createRouter({ history: createWebHistory('popup.html'), routes })
Chrome extensions have to comply with CSP (Content Security Policy) so you can't use Vue 2 because it's based on eval().
You need to use the CSP version of Vue and Vue-router version 1.0 to go with:
Vue 1.0-csp
https://github.com/vuejs/vue/tree/1.0-csp
Vue-router 1.0
https://github.com/vuejs/vue-router/tree/1.0
path: '/index.html'. – woxxom Commented Jun 13, 2017 at 19:59{ path: 'index.html/', component: App },as well without success – xetra11 Commented Jun 14, 2017 at 7:53/index.html- was a typo. Yes the index.html is in the same root as the manifest. I added the index.html to the question – xetra11 Commented Jun 14, 2017 at 8:16