I have been using a developer mode addon successfully in Chrome for quite some time.
Now, I want to add a button to my Vue-powered page. Here's the code snippet:
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 25-second delay was just for troubleshooting purposes. The button appears fine initially, but once the Vue rendering happens with Vue({ ... }), the #islet-vue div disappears from the DOM!
Can anyone provide any insight into why this might be happening?
EDIT: Take a look at this screenshot from the Chrome Inspector. It seems like a comment is added, but the actual div#islet-vue element vanishes.
https://i.stack.imgur.com/1Np3q.png
EDIT 2: This is my manifest.json file:
{
"name": "XXX",
"version": "0.0.3",
"manifest_version": 3,
"description": "Simple secure plugin that converts 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/*"
]
}