chrome 插件 VueJS 元素在渲染时消失

Question

我有一个成功的运行开发者模式插件，可以在 Chrome 中运行。

我想要页面上的按钮运行 Vue（我已经使用多年）。这是我的代码：

    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)

25秒的延迟只是为了弄清楚发生了什么。按钮渲染得很好，但是当 Vue({ ... }) 片段渲染时，#islet-vue div 就从 DOM!

中消失了

有人知道为什么会这样吗？

编辑：这里是 chrome 检查器的截图。有趣的是添加了注释，但实际的 div#islet-vue 元素消失了。

编辑 2：这是我的 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/*"
    ]
}

Answer 1

看起来问题是 Vue 没有权限从插件处理页面上的字符串。解决方案是在您的 Vue 实例上添加一个渲染函数

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

可能和你导入vue的方式有关，所以我会用webpack（或者browserify），这样可以省去很多导入外部包的麻烦。

chrome 插件 VueJS 元素在渲染时消失

chrome addon VueJS element disappears when rendered

javascript

add-on

google-chrome-extension

vue.js