Javascript 为什么Vue.js实例没有';在Firefox扩展开发中不工作?
Manifest.json:Javascript 为什么Vue.js实例没有';在Firefox扩展开发中不工作?,javascript,vue.js,firefox-addon,Javascript,Vue.js,Firefox Addon,Manifest.json: { "manifest_version": 2, "name": "Vue", "version": "1.0", "description": "Vue Test", "icons": { "96": "icons/icon.png"
{
"manifest_version": 2,
"name": "Vue",
"version": "1.0",
"description": "Vue Test",
"icons": {
"96": "icons/icon.png"
},
"permissions": [
"tabs"
],
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icons/icon.png",
"default_title": "Vue"
}
}
background.js:
browser.browserAction.onClicked.addListener(()=>{
browser.tabs.create({url: 'index.html'})
.then(()=>browser.tabs.executeScript({file: "index.js"}))
.then(()=>browser.tabs.executeScript({file: "vue.js"}))
})
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div id="app">{{msg}}</div>
<script src="vue.js"></script>
<script src="index.js"></script>
</body>
</html>
问题是:屏幕上没有呈现任何内容。如果我得到相同的index.html并直接在浏览器上打开它,它将呈现消息“hi”。我缺少什么?首先,
vue.js
和index.js
不需要再次导入index.html
文件,因为它已经从background.js
注入/执行
其次,在background.js
中,应该首先执行vue.js
(以便VueJS稍后准备初始化主应用程序),我们实际上应该等到它完成执行后再继续执行index.js
总之,background.js
应该是这样的:
browser.browserAction.onClicked.addListener(async ()=>{
await browser.tabs.create({url: 'index.html'});
await browser.tabs.executeScript({file: "vue.js"});
await browser.tabs.executeScript({file: "index.js"});
});
移除
<script src="vue.js"></script>
<script src="index.js"></script>
首先,从
index.html
开始,vue.js
和index.js
不需要再次导入index.html
文件,因为它已经从background.js
注入/执行
其次,在background.js
中,应该首先执行vue.js
(以便VueJS稍后准备初始化主应用程序),我们实际上应该等到它完成执行后再继续执行index.js
总之,background.js
应该是这样的:
browser.browserAction.onClicked.addListener(async ()=>{
await browser.tabs.create({url: 'index.html'});
await browser.tabs.executeScript({file: "vue.js"});
await browser.tabs.executeScript({file: "index.js"});
});
移除
<script src="vue.js"></script>
<script src="index.js"></script>
从
index.html
仍然无法处理更改。HTML仅显示{{msg}:(等等…它正在工作!在更改并删除我正在使用但未定义的catch中的函数后,一切都正常。谢谢!仍然无法处理更改。HTML仅显示{{msg}:(等等……它正在工作!在更改和删除catch中的一个函数后,我正在使用该函数,但它没有定义,一切正常。谢谢!