时间戳

首页 > 解决方案 > Chrome 扩展内容脚本中的 Vue.js

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

问题描述

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

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

内容脚本.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}} 而不实际填充内容。

在控制台中：

{模板：“↵计数器：{{计数器}}↵<br />”，__props：数组（0），__emits：null，数据：ƒ，安装：ƒ}

标签： vue.jsgoogle-chrome-extensionvuejs3

解决方案

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

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

内容脚本.js

在内容脚本中，只需附加空#counterdiv

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

Vue 应用程序

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

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

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

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

推荐阅读