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.
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/*"
]
}
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.