use VueRouter and Vue.js in Chrome Extension - Issues with path segments

问题

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!

回答1:

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 /

回答2:

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,
});

回答3:

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

来源：https://stackoverflow.com/questions/44530237/use-vuerouter-and-vue-js-in-chrome-extension-issues-with-path-segments

标签

javascript

google-chrome-extension

routing

Vue.js

vue-router