Vue.js inside Chrome extension Content script

Question

I am trying to use Vue.js 3 inside a content script of a chrome extension.

Here I create the element on the rendered webpage (eg. google.com):

content-script.js

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

Here I create the Vue app:

import { createApp } from 'vue'

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

but in the webpage it displays COUNTER: {{counter}} without actually filling the content.

In the console:

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

did you created the extension using boilerplate through vue-cli, if not then you need to include vue library in index.html. — Chandan
– Chandan, Commented Mar 22, 2021 at 4:27
It’s a content script in a chrome extension. I haven’t index.html, how do I include it? — sparkle
– sparkle, Commented Mar 22, 2021 at 9:11
if not then vue library is not included by default you need to include it in your content script — Chandan
– Chandan, Commented Mar 22, 2021 at 9:49
you can create extension project with vue-cli check this post. — Chandan
– Chandan, Commented Mar 22, 2021 at 9:50

Kalnode · Accepted Answer · 2022-12-26 21:32:58Z

3

+50

I can't test this in a chrome app context but I think this should solve your problem of getting the Vue variable to render.

The template needs to be with the Vue code, rather than with the content script code. By the time it is inserted into the DOM it is too late for Vue to interpolate your this.counter value.

content-script.js

In the content script just append the empty #counter div

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

Vue app

Then in the app code add a .render() function to interpolate the value into your string (and turn it into a VNode with h())

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

So if you wanted to render a <p> tag with your interpolated string template COUNTER: {{ this.counter }} in it, try:

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

// If you have local import failure, try import via CDN url, like:
//import { createApp, h  } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

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

More information on the render() function: vuejs.org

edited Dec 26, 2022 at 21:32

Kalnode

11.7k3 gold badges44 silver badges76 bronze badges

answered Mar 24, 2021 at 23:55

Dick Fox

2,9942 gold badges16 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kalnode Over a year ago

You'll probably fail at the import statement as importing modules in this context is unsupported (there's lots of discussion on this). Ultimately there might be a reliable solution for full module import support, however you can consider import via CDN url e.g. import { createApp, h } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'. This worked for me and I was able to see the counter inside the webpage.

Collectives™ on Stack Overflow

Vue.js inside Chrome extension Content script

1 Answer 1

content-script.js

Vue app

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

content-script.js

Vue app

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related