3 ms·

I know this is tangential-- I would like to write a FF extension -- can anyone point out some good resources for that? Beyond what's on Moz's official site of c

I know this is tangential-- I would like to write a FF extension -- can anyone point out some good resources for that? Beyond what's on Moz's official site of course.

rococode 7y ago
I just started working on an extension recently with no experience and have found it to be pleasantly unchallenging. If you are familiar with web development already, it's actually a pretty easy transition. Primarily you have the option of injecting some JS into every page, and also running a page in the background. So you just need to design your extension to work that way. Then you have access to some extension-specific APIs for stuff like the little icon in the toolbar or reading cookies. I think if you already know web dev, you probably don't need a specific resource to figure it out - just dive right into it and look up which parts of API you need for certain things. If you don't already know web dev, perhaps it would be better to learn that first and then look at extensions.
- oceanghost 7y ago
  Thank you! I'm not a web dev precisely, but I think I can muddle through that :-)
  - jazoom 7y ago
    It's essentially the same as a Chrome extension now. Tutorials and documentation for either should work fine.
    - Scrantonicity 7y ago
      Extensions written for one should work in the other as well after some minor repackaging.
askvictor 7y ago
Since FF and Chrome use almost the same extension API, you can use Google resources to get started, and a lot of it will work on Firefox. The main exception is the identity module, which Chrome requires to be a Google account
cpeterso 7y ago
I know you asked for resources beyond Mozilla's site, but Mozilla's documentation for extension developers is very accessible and includes complete code for example extensions: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Web...
- oceanghost 7y ago
  I will look at it again, thank you!
  - cameronbrown 7y ago
    Chrome's developer site also contains handy stuff too. Many of the chrome. APIs can be accessed by replacing chrome.x with browser.x. Firefox basically uses Chrome's extension APIs.
spookyuser 7y ago
One of the things I found most lacking from the official chrome and FF documentation, is how to use NPM with your extension for dependencies and how to automatically build and release to both the FF store and chrome store. There are a couple of issues that come up if you just plonk a package.json in your root folder, for example - now you the same information like extension name and version number duplicated across two files, the npm package.json and the webextension's manifest.json. Nevermind the fact that it's not obvious at all how to distribute the npm dependencies with the extension once you have them installed on your computer On all of these issues, the best "tutorial" I've found is just looking at the structure of sindresorhus's "refined GitHub" repo. He and the contributors have totally nailed how to integrate npm, automate the build and manage the package.json files plus much much more, in a very readable way. I would definitely consider mirroring the rough structure of refined GitHub just for sanity reasons. Everything about it makes sense. Here's a link to the refined GitHub repo --https://github.com/sindresorhus/refined-github https://github.com/sindresorhus/refined-github And if it helps here's a link to the extension I built using refined GitHub as a model -- https://github.com/spookyUnknownUser/laconic_hover https://github.com/spookyUnknownUser/laconic_hover I tried to implement the most minimally important features of the build and packaging system of refined GitHub in my project.

I know this is tangential-- I would like to write a FF extension -- can anyone point out some good resources for that? Beyond what's on Moz's official site of course.

rococode 7y ago

I just started working on an extension recently with no experience and have found it to be pleasantly unchallenging. If you are familiar with web development already, it's actually a pretty easy transition. Primarily you have the option of injecting some JS into every page, and also running a page in the background. So you just need to design your extension to work that way. Then you have access to some extension-specific APIs for stuff like the little icon in the toolbar or reading cookies. I think if you already know web dev, you probably don't need a specific resource to figure it out - just dive right into it and look up which parts of API you need for certain things. If you don't already know web dev, perhaps it would be better to learn that first and then look at extensions.

oceanghost 7y ago
Thank you! I'm not a web dev precisely, but I think I can muddle through that :-)
- jazoom 7y ago
  It's essentially the same as a Chrome extension now. Tutorials and documentation for either should work fine.
  - Scrantonicity 7y ago
    Extensions written for one should work in the other as well after some minor repackaging.

askvictor 7y ago

Since FF and Chrome use almost the same extension API, you can use Google resources to get started, and a lot of it will work on Firefox. The main exception is the identity module, which Chrome requires to be a Google account

cpeterso 7y ago

I know you asked for resources beyond Mozilla's site, but Mozilla's documentation for extension developers is very accessible and includes complete code for example extensions: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Web...

oceanghost 7y ago
I will look at it again, thank you!
- cameronbrown 7y ago
  Chrome's developer site also contains handy stuff too. Many of the chrome. APIs can be accessed by replacing chrome.x with browser.x. Firefox basically uses Chrome's extension APIs.

spookyuser 7y ago

One of the things I found most lacking from the official chrome and FF documentation, is how to use NPM with your extension for dependencies and how to automatically build and release to both the FF store and chrome store. There are a couple of issues that come up if you just plonk a package.json in your root folder, for example - now you the same information like extension name and version number duplicated across two files, the npm package.json and the webextension's manifest.json. Nevermind the fact that it's not obvious at all how to distribute the npm dependencies with the extension once you have them installed on your computer On all of these issues, the best "tutorial" I've found is just looking at the structure of sindresorhus's "refined GitHub" repo. He and the contributors have totally nailed how to integrate npm, automate the build and manage the package.json files plus much much more, in a very readable way. I would definitely consider mirroring the rough structure of refined GitHub just for sanity reasons. Everything about it makes sense. Here's a link to the refined GitHub repo --https://github.com/sindresorhus/refined-github https://github.com/sindresorhus/refined-github And if it helps here's a link to the extension I built using refined GitHub as a model -- https://github.com/spookyUnknownUser/laconic_hover https://github.com/spookyUnknownUser/laconic_hover I tried to implement the most minimally important features of the build and packaging system of refined GitHub in my project.