[英]Why Vue.js instance doesn't work in Firefox Extension Development?
清單.json:
{
"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"
}
}
背景.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"}))
})
索引.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>
vue.js:從 vue 頁面下載的 vue.js 本身
index.js:
let app = new Vue({
el: '#app',
data: {
msg: 'hi'
}
})
問題:屏幕上沒有呈現任何內容。 如果我得到相同的 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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.