Create firefox extension

[lkuoch]

Describe the solution you'd like Thank you for your extension! I'm a big fan of using it on Chrome and was hoping you would consider a release on firefox as well 🙏

Describe alternatives you've considered There are no other firefox addons with this level of polish and productivity.

[warrenday]

Hi @lkuoch if you're on mac I have recently created a desktop version of the app which works with Firefox. You can give it a try for free https://graphproxy.com

Here you can see the app inspecting traffic on Firefox from https://medium.com

One of the major benefits is you can also mock traffic for any server which has introspection turned on. Try it out with this pokemon api https://graphql-pokeapi.graphcdn.app

This is in early beta but let me know what you think!

[lkuoch]

Hi @lkuoch if you're on mac I have recently created a desktop version of the app which works with Firefox. You can give it a try for free https://graphproxy.com

Here you can see the app inspecting traffic on Firefox from https://medium.com

One of the major benefits is you can also mock traffic for any server which has introspection turned on. Try it out with this pokemon api https://graphql-pokeapi.graphcdn.app

This is in early beta but let me know what you think!

Would you mind if I published this as a firefox addon?

[warrenday]

@lkuoch you're welcome to raise a PR for the necessary changes. I'll then start publishing to Firefox as part of the deploy pipeline on this repo.

[falcucci]

@warrenday nice work!

IMO it should be listed in the readme for the millions of firefox users.

should I send a PR?

[warrenday]

Hey @falcucci

The desktop version mentioned above didn't really catch on, so development stopped.

We can however build for Firefox as an extension since the browser api is almost identical. I think we just need to output a separate build here.

[forabi-cosuno]

@warrenday This is actually all it took for me to make this work in FF:

public/devtools.js

chrome.devtools.panels.create(
  "GraphQL Network",
  "/icon.png",
  "/index.html",
  null
)

So basically, icon is required, and an absolute path to index.html must be provided instead of a relative one.

Other than that, I think you could upload the exact same ZIP you get from yarn bundle to Mozilla Add-ons.

[warrenday]

Oh damn, didn't realise it was that simple. I can start deploying to Firefox store as well in that case.

[tonycassara]

Any chance of an FF deploy soon? I just switched over at work and would love to get this into my workflow 🙌🏼

[Nezteb]

Other than that, I think you could upload the exact same ZIP you get from yarn bundle to Mozilla Add-ons.

@warrenday What were your steps?

I tried creating that public/devtools.js file, building the bundle, renaming the build.zip file to build.xpi, and importing it into Firefox, but I only get:

[forabi-cosuno]

@Nezteb that's probably because it's not signed. I only used it in development mode which allows unsigned addons

[forabi-cosuno]

Alternatively, you could just import the whole folder in dev mode instead of the zip

[Nezteb]

I only used it in development mode which allows unsigned addons

Huh, I am using LibreWolf so I wouldn't be surprised if that is causing issues. I did try to allow unsigned extensions in about:config to no avail:

[Nezteb]

Ah, okay I figured out the problem.

Other than that, I think you could upload the exact same ZIP you get from yarn bundle to Mozilla Add-ons.

@forabi-cosuno This isn't the case apparently. Firefox expects a slightly different file structure and (when trying to install from a local build) a slightly different manifest.json.

An example Yarn script that would fix the directory issue: (zipping the files at the top level instead of the entire directory)

"bundle": "yarn build && bestzip build.zip build/*",
"firefox": "yarn build && cd build && bestzip ../build.zip *",

And since an extension ID isn't generated for local ZIP/XPI extensions, you need to add one to the manifest.json, but only when wanting to install a local build: (the actual ID doesn't matter)

"browser_specific_settings": {
  "gecko": {
    "id": "[email protected]"
  }
},

After those two changes, I'm able to install the extension locally and don't need to use the "temporary extension" method. 😄

I'm only doing this until there is an official Firefox release of the extension. It works beautifully in Firefox though!

[tonycassara]

@Nezteb maybe you can open a PR that adds that bundle:firefox script? One less step to get this into the Firefox extension store :)

[forabi-cosuno]

Here's a signed FF version: 9f262261e149424993ae-2.14.1.zip (Rename to .xpi before using)

[warrenday]

Looks like it's not hard work at all to get this released officially. I'll update the codebase and start releasing a long with chrome.

[tonycassara]

Any chance FF has approved the extension yet? Excited to use this!

[kud]

Currently using the @forabi-cosuno 's version but yeah can't wait to have this in the FF store.

[warrenday]

Firefox bundling has now been added. Thanks to all on this thread for pointers to get this working. It's been a great help.

I have tested a local version and submitted to the Firefox Add-Ons developer hub. I'll update when we have a live listing. ❤️

[brianvanburken]

I see that it is ready to install! :) https://addons.mozilla.org/en-US/firefox/addon/graphql-network-inspector/ Thank you @warrenday!

[warrenday]

I'll close this issue now as we have an official release!