如何在Chrome扩展中的阴影dom内挂载Vue组件

lztngnrs  于 2022-12-04  发布在  Vue.js
关注(0)|答案(1)|浏览(329)

我正在构建一个chrome扩展。
我使用content-script.js成功地创建了一个阴影dom,在阴影模式打开的情况下创建了一个div元素,然后将其挂载到主体上。
这只是一个div。我想做的是,我想挂接一个Vue组件。我正在使用Vuejs来构建这个chrome扩展,这个项目的index.html被用作popup.html。
因此,我尝试在内容脚本中使用chrome.runtime.getUrl('../../views/About. vue')将vue组件挂载到shadow dom,但没有成功。
我还可以尝试其他什么方法来显示content-script创建的shadow dom中的Vue组件。

mwkjh3gx

mwkjh3gx1#

要在Chrome扩展中的阴影dom内挂载Vue组件,您需要执行以下步骤:
1.创建一个新的Vue示例,并定义要在阴影dom中挂载的组件。

const app = new Vue({
  components: {
    // Define your Vue Components here
  }
});

1.使用attachShadow方法在要安装Vue组件的元素上创建新的阴影dom。

const shadowRoot = element.attachShadow({ mode: "open" });

1.在Vue示例上使用$mount方法将其挂载到阴影dom中。

app.$mount(shadowRoot);

1.然后,您可以在阴影DOM中使用Vue组件,方法与在常规Vue应用程序中相同。

<div>
  <my-component></my-component>
</div>

通过以下步骤,您将能够在Chrome扩展中的shadow dom内挂载Vue组件,允许您利用shadow dom的优势,例如封装和改进的性能。

相关问题