Menu
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!
965
Vue Chrome Extension Project Setup The src folder contains all of the files we'll be using for the extension. The manifest file and background. js should be familiar, but also notice a popup folder containing a Vue component. When the boilerplate builds the extension into the dist folder, it will pipe any .
Vue. js provides a bunch of features that allow you to build reusable web components. Routing is one of those methods. It allows the user to switch between pages without refreshing the page.
Sometimes, you might want to attach arbitrary information to routes like transition names, who can access the route, etc. This can be achieved through the meta property which accepts an object of properties and can be accessed on the route location and navigation guards.
I 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 /
70
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,
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
