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

【问题标题】：Vue.js inside Chrome extension Content scriptChrome 扩展内容脚本中的 Vue.js
【发布时间】：2021-06-15 01:14:03
【问题描述】：

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

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

content-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}} 而没有实际填充内容。

在控制台中：

{模板：“↵计数器：{{计数器}}↵
", __props: Array(0), __emits: null, 数据: ƒ, 挂载: ƒ}

【问题讨论】：

您是否通过 vue-cli 使用样板文件创建了扩展，如果没有，则需要在 index.html 中包含 vue 库。
这是一个 chrome 扩展中的内容脚本。我没有index.html，怎么包含？
不，我没有使用 vue-cli
如果没有，则默认不包含 vue 库，您需要将其包含在内容脚本中
您可以使用 vue-cli check this post 创建扩展项目。

标签： vue.js google-chrome-extension vuejs3

【解决方案1】：

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

模板需要带有 Vue 代码，而不是内容脚本代码。当它被插入 DOM 时，Vue 插入你的 this.counter 值已经太晚了。

content-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

【讨论】：