Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

139
Vistas
chrome addon VueJS element disappears when rendered

I have a successfully running developer mode addon that works in Chrome.

I would like a button on the page running Vue (which I've used for years). Here is my code:

    let isletCtl = document.createElement('div')
    isletCtl.id = "islet-ctl"
    isletCtl.innerText = 'isletCtl: '

    let isletVue = document.createElement('div')
    isletVue.id = 'islet-vue'
    isletVue.innerText = 'isletVue: {{ response }}'
    isletCtl.appendChild(isletVue)
    document.body.appendChild(isletCtl)

    window.setTimeout(function(){
        new Vue({
            el: "#islet-vue",
            data: function(){
                return {response: 'hello vue'}
            }
        })
    }, 25000)

The 25s delay was just to figure out what is going on. the button renders just fine, but when the Vue({ ... }) piece renders, the #islet-vue div just disappears from the DOM!

Anyone have an answer as to why this is happening?

EDIT: here is a screenshot of the chrome inspector. Interestingly a comment is added, but the actual div#islet-vue element just goes away. enter image description here

EDIT 2: here is my manifest.json:

{
    "name" : " XXX",
    "version": "0.0.3",
    "manifest_version": 3,
    "description" : "Simple secure plugin to convert Jira-like text in Slack..",
    "content_scripts" : [
        {
            "js" : ["js/vue-2.1.6.min.js","tools.js", "common.js", "app.slack.com.v2.js"],
            "css": ["app.slack.com.css"],
            "matches" : ["https://app.slack.com/client/*"]
        },
        {
            "js" : ["tools.js","common.js","develop/localhost.43000.js"],
            "css": ["develop/localhost.43000.css"],
            "matches" : ["http://localhost:43000/*"]
        }
    ],
    "action": {
        "browser_style": true,
        "default_title": "X Islet CORS popup",
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs",
        "bookmarks",
        "storage"
    ],
    "host_permissions": [
        "http://localhost:8080/",
        "http://localhost:43000/",
        "http://52.117.30.181/*"
    ]
}
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

It looks like the issue is that Vue doesn't have permission to work on a string on the page from an addon. The solution would be to add a render function on your Vue instance

new Vue({
    el: "#islet-vue",
    render: function(createElement) {
        return createElement('div', {}, this.message)
    },
    data: function() {
        return {
            response: 'hello vue'
        }
    }
})

It might have to do with how you import vue, so I would use webpack (or browserify), which takes away a lot of the hassle in importing external packages.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda