Setting up extension development environment: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
(the second link is not useful and distracts from the first one, removed)
 
(13 intermediate revisions by 7 users not shown)
Line 1: Line 1:
{{extdev}}
See [http://developer.mozilla.org/en/docs/Setting_up_extension_development_environment Setting up extension development environment] at MDC.
This describes some changes you can do to your system to make [[extension development]] easier. See also [[Getting started with extension development]].


== Set development prefs ==
[[Category:Redirects]]
Before you start doing any development, you should [[Editing configuration|set]] some preferences to make life easier:
* '''javascript.options.showInConsole = true'''. Logs errors in chrome files to the [[JavaScript Console]] to make debugging easier.
* '''nglayout.debug.disable_xul_cache = true'''. Disables the XUL cache (in your user.js) so that changes do not require a restart ([[Dev : Tips : Disable XUL cache|more]]).
* '''browser.dom.window.dump.enabled = true'''. Enables the use of the dump() statement to print to the standard console. (The application must be started using the -console flag; [[Viewing_dump()_output|read more]])
* '''javascript.options.strict = true'''.  Enables strict Javascript warnings in the JavaScript Console. Note that since many people have this setting turned off when developing, you will see lots of warnings for problems with ''their'' code in addition to warnings for your own extension.
 
====These ''I think,'' are the development preferences you'd need to copy in to user.js (untested)====
<pre>
// Log errors in chrome file to the Javascript Console
user_pref( "javascript.options.showInConsole", true ) ;
// Disable XUL cache, so chrome changes do not require a restart
user_pref( "nglayout.debug.disable_xul_cache", true ) ;
// dump() function outputs to console if application started with -console flag
user_pref( "browser.dom.window.dump.enabled", true ) ;
// Enable strict javascript warnings, to produce clean extensions
user_pref( "javascript.options.strict", true ) ;
</pre>
 
== Install development extensions ==
It is also a good idea to install a few developer extensions:
* The [[DOM Inspector]] is useful when you are trying to find the id of XUL elements which you wish to modify.
* Not really a developer extension, but the [[JavaScript Console]] can be surprisingly useful. Open it every time you have made changes to your JS files; it serves as a handy syntax checker (but make sure you have set the preferences listed above).
* For more advanced Javascript aid, check out [[Venkman]], the Mozilla-based Javascript debugger ([http://www.mozilla.org/projects/venkman/ project home], [http://www.hacksrus.com/~ginda/venkman/ latest info]).
* [http://ted.mielczarek.org/code/mozilla/extensiondev/ Extension developer's extension] for Firefox/Thunderbird/Mozilla ([http://forums.mozillazine.org/viewtopic.php?t=116052 discussion]). Includes these tools:
** JS Shell&mdash;execute statements from main application window. Features tab completion!
** JS Environment&mdash;run code snippets
** XUL Editor&mdash;XUL editor with real-time preview
** HTML Editor&mdash;same for HTML
** Extension Builder&mdash;a tool for editing install.rdf, packaging and installing your extension; still under development
** As a bonus, it can toggle the debugging prefs listed above with a single menu click.
* [http://forums.mozillazine.org/viewtopic.php?t=318102 Console<sup>2</sup>] provides a replacement for JavaScript Console, fixing many of its bugs and implementing long-wanted enhancement requests.
* [http://forums.mozillazine.org/viewtopic.php?t=264146 Console Filter] helps you to find the relevant errors in the JavaScript Console.
 
== Development profile ==
Having the above prefs set is very helpful when developing extensions, but they will slow down Firefox a bit, particularly at startup and when opening new browser windows, especially if you have many extensions installed. For these reasons you may choose to use a separate profile for development.
 
Warning: Especially in Thunderbird you should use a separate profile as you could destroy your old one. Development versions and nightlies often harm a profile!
 
You can run two instances of Firefox using separate profiles if you set '''MOZ_NO_REMOTE''' environment variable to '''1'''. For example, on Windows you can use the following bat file to run Firefox with development profile, whether "normal" Firefox is already running or not. (Assuming your development profile is called ''"dev"''):
set MOZ_NO_REMOTE=1
firefox -P dev
 
To run Firefox with default profile just run "firefox" or "firefox -P default", as usual. See article on the [[Profile Manager]] for more info on creating a new profile in Firefox.
 
= Non-essential setup tips =
 
== Using an unpacked version of Thunderbird/Firefox for development ==
: ''Note: these instructions will not work with Firefox/Thunderbird 1.5 and later (as installed-chrome.txt and chrome.rdf are gone). See below for instructions in newer versions.''
It's often necessary to extract all the jar files of the Thunderbird/Firefox/Mozilla Suite version you want to develop with: it makes debugging easier, you can include the code directly in the original sources, and you can make links from the sources to your extension sources. That describes what you need to do, at the example of the Thunderbird headerScroll extension (Windows users can use Cygwin to run these commands):
 
# Extract the <code>.tar.gz</code> distribution file to a directory, e.g. "thunderbird-1.0.6"
# <code>cd "thunderbird-1.0.6/chrome"</code>
# <code>for file in *.jar; do unzip $file; done</code>
# <code>perl -pi.orig -e 's/(jar:)|(\/[^.\/]+\.jar!)//g' chrome.rdf installed-chrome.txt</code>
# <code>ln -s /path/to/extension/src messenger-extensionname</code> - see below for an explanation
# open <code>mail/content/messenger/mailWindowOverlay.xul</code> and add <code><?xul-overlay href="chrome://messenger-headerscroll/content/headerscroll_overlay.xul"?></code> at the beginning after the other overlay defs - DON'T do <code>content/messenger-headerscroll/headerscroll_overlay.xul</code> - it's a chrome directory name, so we have to omit the <code>content</code> part
# add <code>content,install,url,resource:/chrome/messenger-headerscroll/content/messenger-headerscroll/</code> to <code>chrome/installed-chrome.txt</code> to give permissions
 
''' The explanation to point 5: '''
 
I don't like to mix the Thunderbird sources and my extension sources, so the extension code lies in a different folder. The structure of that is as follows:
headerScroll/
+- install.rdf
+- dist/
    +- all released versions go here
+- src/
    +- content/
      + messenger-headerscroll/
        +- contents.rdf
        +- headerscroll_overlay.js
        +- headerscroll_overlay.xul
        +- other files
So all I do with the <code>ln -s</code> is to link the extension's directory <code>src</code> directory in the <code>thunderbird/chrome/</code> directory, so that it's accessible from there.
 
=== Firefox 1.5 and later ===
 
Simply edit the chrome.manifest the same way as described above, i.e. remove all JAR references. For example change
content myExtension jar:chrome/myExtension.jar!/content/
to
content myExtension chrome/content/
 
See [[Getting started with extension development]] for detailed description and an example.
 
 
[[Category:Development]]

Latest revision as of 16:35, 24 May 2007