CODEWITHSUNDEEP
javascriptnode.jswebsocketelixirphoenix-framework
dianesis
dianesis

Reputation: 332

How to use a module in firefox extension?

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.

Upvotes: 2

Views: 943

Answers (1)

GavinBrelstaff
GavinBrelstaff

Reputation: 3069

"background":[
        "phoenix.js", "msg.js"
      ]

may need to be:

"background": {
    "scripts": [
      "phoenix.js", "msg.js"
    ]
  }

Upvotes: 2

Related Questions