Creating custom builds of Mozilla Firefox - firefox

I am trying to build my own version of Firefox with slight UI changes and by adding some addons(extensions) to the build.
I have downloaded the source code from repo. Where would I start to achieve this?
Which all codes hold the UI structuring? Where do I put my addon xpi files?
PS: I tried to read the Mozilla documentation. Its either kinda outdated or I am not really getting it? A detailed insight would be much appreciated.

Addons
To do this, simply place the extensions in the distribution/extensions
directory in the application's distribution directory.
Here are the extension
https://dxr.mozilla.org/aviary101branch/source/browser/extensions
Flags In firefox
https://dxr.mozilla.org/aviary101branch/source/browser/config/mozconfig
Do more with themes
https://dxr.mozilla.org/aviary101branch/source/themes/modern
https://dxr.mozilla.org/aviary101branch/source/browser/themes
For Editing you may need XUL
https://www.xul.fr/tutorial/
Components
Go here and customize every component you need
https://dxr.mozilla.org/aviary101branch/source/browser/components

Related

FireFox Add-on document.querySelectorAll(); not defined

I am working on a add-on project for FireFox using SDK (JPM) and when I run the code in JPM I get "document is not defined"
My index.js file has the following which this error refers to:
var insecure = document.querySelectorAll('[src^="http://"],[href^="http: //"],[img^="http://"]');
Any help would be great as I have tried so many things
Thanks
Add-on SDK uses a CommonJS module system, it means that the index.js is a sandboxed module, and therefore there is no specific document or DOM associated with it.
If you want access to a content document, you probably want to use content scripts. Take a look here: https://developer.mozilla.org/en/Add-ons/SDK/Guides/Two_Types_of_Scripts and here: https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts
Hope it helps.
This issue has now been resolved. I have used content scripts and the "port.emit" port.on" options. Sorry I was late responding.

How to create a ui button for SeaMonkey

I'm trying to get my extension (using Firefox Addon SDK 1.17) to work on SeaMonkey (2.30). After modifying install.rdf to allow my extension to be installed, I can see SeaMonkey accepted the extension. However -- my extension's button isn't visible anywhere in the UI. I am using sdk/ui/button/toggle. I have also tried require("sdk/ui").ActionButton but that doesn't seem to do anything either.
What do I need to do to make sure my extension can render a button into SeaMonkey's toolbar?
Looks like the answer is that SeaMonkey does not officially support the Addon SDK yet. Support is planned for SeaMonkey 2.33
There are a couple of options:
patch the sdk to allow support on seamonkey.
copy the button code from the sdk into your add-on, mark it as supporting seamonkey, and use that, possibly uploading the code to npm as a third party module.

Updating Firefox addon jsm module code without browser restart

I am developing a Firefox addon that is loaded from a directory instead of an xpi, Firefox extension proxy file. The extension is based on jsm modules.
Is there a way to update those modules to reflect the code changes. The only way to do it now is to close and restart the browser but that its not a sane way to develop anything.
Tried to:
Components.utils.unload('resource://myextension/mymodule.jsm');
Components.utils.import('resource://myextension/mymodule.jsm');
but changes are not made.
Got the answer from Victor Porof. In order to make this work you need to clear first the cache:
var obs = Cc["#mozilla.org/observer-service;1"].getService(Ci.nsIObserverService);
obs.notifyObservers(null, "startupcache-invalidate", null);
Hope this helps anyone

Sass (source maps) support in Firefox Developer Tools

With the release of Firefox 25 we saw a huge improvement in their development tools. SO much so that I'm rather excited to try them out over Firebug.
However I can't see how to turn on Sass debugging, which is currently working in Firebug. I've looked in all the settings that are offered within the development settings.
I'm hoping I'm wrong and it is currently supported.
With Firefox 29 the support for Sass and LESS files was introduced.
Taken from https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/
You have to right-click in the Rules section and activate Show original sources option:
Now CSS rule links will show the location in the original file, and
clicking these links will take you to the source in the Style Editor.
From there you can go on to the Styles Editor and edit your Sass/LESS file. Functionality needs Source Maps enabled!
The best suitable way to debug Sass in Firefox seems to be FireSass.
https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

Hack Firefox to open extensions with address bar

I see this one time, and know that it not so hard, but can't find any solutions in internet.
Let say I have plugin, as you know it written by XUL. XUL like HTML has tags, js and etc. So I want to debug it with Firebug.
But in default plugin view firebug (as all other plugins disabled). So i need to open my plugin like Web page.
I remember that it's something like
chrome://address/to/my/plugin/page.xul
Does anyone face this problem?
There is no general rule by which you can build the addresses of extension pages. You have to open the extension's XPI file (it's a regular ZIP file, rename it if necessary) and have a look at chrome.manifest inside. E.g. in Firebug's chrome.manifest it says:
content firebug content/firebug/
Which means that the files in the content/firebug/ directory of the extension are accessible under chrome://firebug/content/. You can try opening them as web pages but they won't necessarily work.
A better approach would be using tools that are actually meant for extensions. For example Chromebug or DOM Inspector.

Resources