So I am building a very simple extension for firefox. The problem I have is that I cannot import the js file I need in order to make it work.
Extension Structure
root-
|-------manifest.json
|-------index.html
|-------phoenix.js
|-------msg.js
As you can see I have all the files at the same level.
In my manifest, I have:
//manifest.json
{
"manifest_version": 2,
"name": "Socket",
"version": "1.0",
"description": "Simple extension test",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["phoenix.js", "msg.js"]
}
],
"background": {
"scripts": [
"phoenix.js", "msg.js"
]
}
}
In my index.html I have:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="uth-8">
</head>
<body style="background:black; color:white">
<!-- Msg board -->
<!-- Type bar and Send btn -->
</body>
<script src="./phoenix.js"> </script>
<script src="./msg.js"> </script>
</html>
In my msg.js I am trying to import the phoenix.js in order to create a socket and connect to my backend Elixir websocket server.
//msg.js
import {Socket} from "phoenix" // I also tried "./phoenix"
So the big issue is I can't seem to import the phoenix. I tried to have it as background script and also as content script.
"background":[
"phoenix.js", "msg.js"
]
may need to be:
"background": {
"scripts": [
"phoenix.js", "msg.js"
]
}