Vue.js inside Chrome extension 内容脚本

Question

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

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

内容-script.js

let element = document.querySelector('h1#title')
element.insertAdjacentHTML('afterend', '<div id="counter">COUNTER: {{counter}}</div>');

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

import { createApp } from 'vue'

const CounterApp = {
    data() {
      return {
        counter: 0
      }
    },
    mounted() {
      setInterval(() => {
        this.counter++
      }, 1000)
    }
}
  
createApp(CounterApp).mount('#counter')
console.log(CounterApp)

但在网页中显示 COUNTER: {{counter}} 而没有实际填写内容。

在控制台中：

{template: "↵ Counter: {{ counter }}↵
", __props: Array(0), __emits: null, data: ƒ, mounted: ƒ}

Answer 1

我无法在 chrome 应用上下文中对此进行测试，但我认为这应该可以解决您让 Vue 变量呈现的问题。

模板需要和Vue代码在一起，而不是和内容脚本代码在一起。当它被插入 DOM 时，Vue 无法插入您的 this.counter 值。

内容-script.js

在内容脚本中，只需附加空的 #counter div

let element = document.querySelector('h1#title')
element.insertAdjacentHTML('afterend', '<div id="counter"></div>');

Vue 应用程序

然后在应用程序代码中添加一个 .render() 函数以将值插入到您的字符串中（并将其转换为具有 h() 的 VNode）

render () { 
  return h(tag, props, stuffToRender)
}

因此，如果您想呈现一个带有内插字符串模板 COUNTER: {{ this.counter }} 的 <p> 标签，请尝试：

import { createApp, h } from 'vue' // <-- don't forget to import h

const CounterApp = {
  data() {
    return {
      counter: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.counter++
    }, 1000)
  },
  render() {
    return h('p', {}, `COUNTER: ${this.counter}`)
  }
}
  
createApp(CounterApp).mount('#counter')

有关 render() 函数的更多信息：vuejs.org

Vue.js inside Chrome extension 内容脚本

Vue.js inside Chrome extension Content script

google-chrome-extension

vue.js

vuejs3

内容-script.js

Vue 应用程序