Chrome扩展内容脚本中的Vue.js

我试图在chrome扩展的内容脚本中使用Vue.js 3

在这里，我在呈现的网页（例如google.com）上创建元素：

content script.js

let element=document.querySelector（'h1#title'））
元素insertAdjacentHTML（'afterend'，'COUNTER:{{COUNTER}}'）；

在这里，我创建了Vue应用程序：

从“vue”导入{createApp}
常数计数器应用={
数据（）{
返回{
柜台:0
}
},
安装的（）{
设置间隔（（）=>{
这个柜台++
}, 1000)
}
}
createApp（CounterApp）.mount（“#counter”）
console.log（计数器应用程序）

但在网页中，它会显示COUNTER:{{COUNTER}}，而不实际填充内容

在控制台中：

{模板：“↵ 计数器：{{Counter}}↵
“，_-props:Array（0），_-emits:null，data:ƒ，mounted:ƒ}

---

我无法在chrome应用程序上下文中测试这一点，但我认为这应该可以解决让Vue变量渲染的问题

模板需要使用Vue代码，而不是内容脚本代码。当它被插入DOM时，Vue插入

this.counter

值已经太晚了

content-script.js 在内容脚本中，只需添加空的

#计数器

div

let element=document.querySelector（'h1#title'））
元素。插入相邻的TML（'afterend'，''）；

Vue应用程序 然后在应用程序代码中添加一个

.render（）

函数，将值插入到字符串中（并使用

h（）将其转换为VNode

）

render（）{
返回h（标签、道具、填充器）
}

因此，如果要使用插入的字符串模板

计数器：{{this.COUNTER}}

呈现

标记，请尝试：

---

import{createApp，h}from'vue'//您是否通过vue cli使用样板创建了扩展，如果不是，则需要在index.html中包含vue库。它是chrome扩展中的内容脚本。我没有index.html，如何包含它？没有，我没有使用vue cli如果没有，则默认情况下不包含vue库您需要将其包含在内容脚本中您可以使用vue cli check post创建扩展项目。