I am looking for good resources to learn to develop Firefox extensions. Resources can be either books or tutorials on the net. Prefer basic tutorials as I am a newbie in the world of Firefox extensions but I have experience in Software Development so programming is not an issue.
This is a useful folder structure to get you started:
chrome (folder)
content (folder)
chrome.manifest
defaults (folder)
preferences (folder)
install.rdf
locale (folder)
en-US (folder)
skin (folder)
You start with the install.rdf file, which contains all the information about your extension (e.g. its name, your name, the version of Firefox it supports...)
Then work on the chrome.manifest file, which looks a little trickier, but is quite simple really.
THEN you get to start doing the interesting stuff! You can mess around with browser.xul, options.xul, etc etc. Plonk your css/images in the skin folder, and I expect you'll need to make a custom Javascript file which contains your extension logic (this goes in the chrome/content folder).
Finally packaging it is just a case of zipping the entire thing (not the folder containing your extension folders, just the folders themselves), and renaming it from .zip to .xpi - job done :)
There's an excellent step-by-step guide on the Mozilla Blog here, which goes into some real detail.
You can also find another example project here.
p.s. don't forget source control, bug tracking, internationalisation, etc etc. But don't start with that or you'll never have any fun :)
A great way to learn is
Right Click on the Add to Firefox link on the Add On download page.
Save the file.
Change its extension .xpi to .zip
Extract and hack the code.
Start with some simple Add-On.
Example : Hello World Firefox Add On
I learn it from HERE.
Other Good Resources:
Zero to “Hello World” in 45 Minutes
For some advanced stuff look at the code of TwitterFox
Here is a tutorial: http://www.rietta.com/firefox/Tutorial/overview.html
There are quite a few different resources - the official Mozilla Developer Network has a great step-by-step guide on how to create your first extension (Including an excellent tutorial on setting up the IDE).
Another great tutorial can be found here (external):
Kevin Gisi has also written a book aptly named "Firefox Extensions - Tools for Productivity" located here.
Found something useful
Extensions
Plugins
Related
In there any way to print a list of all my templates in Resharper.
Recently, I installed the mnemonics plugin which have added a lot of templates and I'm lost in all these shortcuts.
It would be nice to have a pretty print list with every template shortcut, the description and a sample of the code. This will surely help me using more template then now.
Thanks.
Not exactly something you can print out, but I have a little project that can round trip Live Templates between .dotSettings and .md files. It can also generate a nice README.md that lists all of the templates, gives the description, and provides a link to the .md version of the template file.
You can see the mnemonics templates here: README.md
My answer concerns Mnemonics extention. There is no official print-friendly keymap yet. Fortunately, large set of mnemonics is based on few common principles (so I just printed main page to remember it). Of course, you can investigate each mnemonic in ReSharper Templates Explorer.
Admittedly - I have minimal knowledge of what's going on here. However all I want to do is get this environment up and running so I can start to mess around with developing a single page web app in the C9 IDE. Any help, literally any, will be incredibly appreciated.
Html and CSS files also known as "static" files are usually kept in a folder called public or client. It differs from language to language and framework to framework and also depends on personal preference or team preference. There are no real right places for you to place your static files yet best practices can be found if you google python folder structures. As long as your files can see your other files when you point to them you're set.
Developing an extension for Mozilla Firefox I wonder if there is an "easier way" to what I do right now. Currently I do:
Create a folder - in which to develop - for example myextension
Inside this folder: Create and Edit the Files (like install.rdf, chrome.manifest, xul files. Basically all the other structure of a Firefox extension (no problem here))
Zip-compress the content of the myextension to a ZIP-file (i.e. named myextension.zip)
Rename myextension.zip to myextension.xpi
Install the xpi-file-firefox-extension then in firefox
Restart Firefox
Test the extention
After each edit to the codebase of the extension I need to undergo the process of 3. zip-compress, 4. Rename, 5. install XPI file to firefox, 6 restart browser.
Of course I could automate some of this but still I wonder if there is another way to develop the firefox extension directly in the running firefox profile folder .
The extensions I know are stored in the Firefox profile folder as:
firefox/profile/extensions/nameofextension.xpi
I cannot remember well, but I think that there was a way to have the extension being stored unzipped as a folder there too? This way I would still need to restart after edits but not do all the laboursome zipping-renaming-installing.
Any ideas?
It is possible to setup a directory to "in-place-edit" a firefox extension. By this the effort between editing and testing of the Firefox-extension can be reduced.
I have found the good explanation on the blog https://blog.mozilla.org/addons/2009/01/28/how-to-develop-a-firefox-extension/
Here I want to give the principal steps necessary to achieve the "in-place-edit"
Step 1: You have to find your profile directory of Firefox.
For example in Linux this would often be often something like this:
~/.mozilla/firefox/#%#%.default/
Step 2: Go to this profile directory
Step 3: If you already have any extensions installed (like for example adblock+ or noscript), then inside this profile directory you will find a folder named extensions. If you do not have yet any additional extension installed, it might be easy to simply install any, only to have the **extensions" folder be setup for you.
Step 4: In this extensions folder you can create a new directory (let us name it "myextensions_1"), which shall contain the stuff of your plugin. This stuff would be the ordinary things like the install.rdf, chrome.manifest files and the content,skin,locale subdirectories. In effect all the stuff you would normaly zip up to become the XPI file.
Step 5. Create a file that is equal to the content of the <em:id> tag that you used in your ìnstall.rdf file. So if you used <em:id>myextensionname#author.org</em:id> you need to create a file named myextensionname#author.org. Inside this file you will write the location of the "in-place-edit-extension-folder" we created before. In our example this we would have
the file myextensionname#author.org
which contains only the text ~/.mozilla/firefox/#%#%.default/extensions/myextensions_1
Of course the text depends on the location of the folder you use for your plugin.
If you did all things correctly - and maybe double-checked with the instructions of the link above - you can restart or "newly start" firefox. The browser will ask you if you want to allow the usage of the plugin myextensionname#author.org, which you can conceed.
Now you can edit in the folder ~/.mozilla/firefox/#%#%.default/extensions/myextensions_1 and need not to worry about zipping-up -> renaming -> installing.
You simple restart Firefox and the edits to your extensions code will become available.
This will allow you swifter and faster developing "in-place".
Note: this is a shameless self-plug - I am talking about an extension I created myself.
Developing an extension in place is possible but has so many issues (mostly caching of all kinds) that it really isn't a good option. Still, you can simplify your development cycle a lot. For that you need to install the Extension Auto-Installer add-on in your Firefox. Then you can put a batch file (assuming that you are developing on Windows) into your extension directory along the lines of:
zip -r test.xpi * -xi *.bat *.xpi
wget --post-file=test.xpi http://localhost:8888/
del test.xpi
The required command line tools are all preinstalled on Unix-based systems, for Windows you can easily download them: zip, wget.
Then you will only need to run that batch file to update your extension in Firefox. If your extension isn't restartless then Firefox will restart automatically. So this replaces your steps 3 to 6.
I've been through the Windows and Mac video tutorials on the FireBreath (FB) website, through all the documentation and even seen the ActiveX example that a person has provided.
It's been an entire week, but I still can't understand how to create a new project in FB. The only thing explained on the website is how to get the FB sln compiled, where the PluginTest example is already coded. Even for the ActiveX example, only the code is given. It isn't explained as to how they created the project.
So how do I create a new project in FB? Should I just take the existing FB sln file and create a new empty project in it? How do I know what classes I should add to the project? How do I edit cmakeLists.txt to recognize my project? How does running prep2010.cmd make my newly added project compile?
If I need to create a wrapper for my ActiveX, how do I go about creating that project in Windows?
If you have been through the windows video tutorials and didn't see how to create a new project then you were obviously not paying attention. The first video tutorial on both windows and mac tells you how to use fbgen to create a new project.
To get text instructions, you can find them fairly easily:
Go to http://firebreath.org and click on "Getting Started". Scroll down to "Creating a new plugin project" and click on the link.
Either method will walk you through essentially the following steps:
1) Install cmake, visual studio, and python (if you don't have any of them)
2) Get FireBreath (the video tutorials suggest using git; I made the tutorials, so you can guess my suggested method).
3) Run fbgen.py with python and follow the steps.
Congratulations! You have now created a new plugin project!
To build it, you'll need to run the prep script appropriate for your platform and then open the build/FireBreath.(sln | xcodeproj) file in (visual studio | xcode). Note that this differs a bit depending on whether you're on Windows or Mac.
The prep script (such as prep2010.cmd) does not make your project compile; instead it uses cmake to generate the project files for that project for your computer which can then be used to build the project, as explained in the pages linked above. You should never modify anything in the build directory directly, instead you should modify the CMakeLists.txt file in your project directory or if you have platform-specific changes you need to make you can modify Win/projectDef.cmake and Mac/projectDef.cmake.
FireBreath.org is a wiki, so feel free to help us make these things easier to find; as you can see from the links all of the information is there. To me it seems easy to find, so obviously I'm not a good one to try to fix the problem (since I can't see it).
As for making an ActiveX wrapper, there is an example of doing this but it's not really something that is just "easy to do". FireBreath does not in any way attempt to make this a simple thing to do -- that's not the purpose of FireBreath. FireBreath is simply a framework for creating browser plugins; if you want your plugin to act as an activex wrapper you'll have to implement all of the activex for containing your control yourself.
Hopefully that's enough information to get you started. If you are confused, please go read those links. If you're still confused, read them again -- all of this information is there. If you're still confused, come ask in the FireBreath chat room on IRC and I'll try to help you figure it out.
Have made quite a bit of progress in my quest to figuring out the Mozilla extension platform, but am still struggling with a few issues.. Hoping someone here can point me in the right direction once again :)
Ok, so here is the issue... I have been messing around with the online addon builder app here: https://builder.addons.mozilla.org/
Great, this seems to be working ok for testing simple addons. But it includes so much extra junk - stuff I am not using and don't need there.
Now when I download the .xpi file, rename it to .zip, and extract it to work on the files, when I repackage it to a zip -> xpi, Firefox tells me the package is corrupt when I try to install.
I have deduced that this is because the package is "signed" or something, and when I repackage it myself this is not happening.
Whatever. This is getting ridiculous...
So I want to use the SDK to work locally, and then just include the SDK in the directory somehow. But it looks like I need to install python and run something in order to generate some files first blah blah blah.... are you joking me? I can't just code my app, then include the SDK files?
QUESTION:
How can I create my basic addon/extension with the online Addon Builder, then edit the files locally, repackage it, and use it?
Add-ons created with the SDK currently aren't signed (see bug 613618). There are a bunch of SHA256 checksums in the package manifest but nothing is verifying them (maybe they are meant for verification by external tools, I don't know). So this is not the problem you are experiencing.
Most likely issue is that when you repacked the ZIP file you didn't keep the directory structure. The install.rdf file needs to be at the top level of the package, not in some subdirectory. You can check it with the unzip -l mypackage.xpi - it should list install.rdf without any directory name.
Generally, I would advise against manipulating the XPI files. By removing unused modules you might be able to save 100 kB in download size, most likely less - somebody installing your add-on will not even notice the difference in download size. Modules that aren't used have zero impact on performance of your add-on. But you risk removing something that is actually used, maybe in a non-obvious way. And once AMO starts repacking SDK add-ons automatically they will replace your add-on by the standard package anyway.