I'm strung to rewrite my first firefox extension using vueJS.
The manifestio.json
{
"manifest_version": 2,
"name": "vuejs note taking",
"version": "1.0",
"description": "Tracks your browsing time on any given domain",
"browser_specific_settings": {
"gecko": {
"id": "xxxxx@gmail.com"
}
},
"browser_action": {
"default_icon": {
"16": "icon.png",
"32": "icon.png"
},
"default_title": "Open Sidebar"
},
....
"sidebar_action": {
"default_icon": "icon.png",
"default_title": "Theme integrated sidebar",
"default_panel": "sidebar/index.html",
"open_at_install": false
}
}
In background.js
browser.browserAction.onClicked.addListener(async () => {
await browser.tabs.create({ url: 'sidebar/index.html' });
});
and then the sidebar/index.js
<!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="/sidebar/myscripts/vuejs-lib.js"></script>
<script src="/sidebar/myscripts/main.js"></script>
</body>
</html>
(Through experiments I had to start from root src="/sidebar/..)
The code works, I tried running it on a server. But when I run it in firefix (with web-ext run) I get the error of
Content Security Policy: The page's settings blocked the loading of a resource at eval ("script-src").