我正在构建一个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组件。
1条答案
按热度按时间mwkjh3gx1#
要在Chrome扩展中的阴影dom内挂载Vue组件,您需要执行以下步骤:
1.创建一个新的Vue示例,并定义要在阴影dom中挂载的组件。
1.使用
attachShadow
方法在要安装Vue组件的元素上创建新的阴影dom。1.在Vue示例上使用
$mount
方法将其挂载到阴影dom中。1.然后,您可以在阴影DOM中使用Vue组件,方法与在常规Vue应用程序中相同。
通过以下步骤,您将能够在Chrome扩展中的shadow dom内挂载Vue组件,允许您利用shadow dom的优势,例如封装和改进的性能。