0

I tried to use the content scripts to make an popup page by Vue.js and Bootstrap the popup page works good, but the side effect of this let the original website components setting become a chaos. I used es6 and compile by webpack.

As following my code:

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import 'animate.css/animate.min.css';

//component
import App from './App.vue';

//scripts


Vue.use(BootstrapVue)
Vue.config.silent = true;




var initDom = document.createElement("div");
initDom.id = "extensionUIwrap";

document.getElementsByTagName("body")[0].appendChild(initDom);

new Vue({
  render: h => h(App)
}).$mount('#extensionUIwrap')

How to let the css module just made effect on my popup page or exclude effect from the original website?

Champer Wu
  • 1,101
  • 3
  • 13
  • 32
  • Possible duplicate of [How to really isolate stylesheets in the Google Chrome extension?](https://stackoverflow.com/questions/12783217/how-to-really-isolate-stylesheets-in-the-google-chrome-extension) – wOxxOm Aug 26 '19 at 07:44

1 Answers1

0

Try using Vue inside shadow dom, like explained in this answer.

It will completely isolate your extension's DOM from pages.

MadRunner
  • 605
  • 9
  • 17
  • how to let `vue app` inside `shadow dom`? After the code `new Vue()` the dom `#extensionUIwrap ` will be replaced by App content which is `` – Champer Wu Aug 26 '19 at 11:04