Recently when I was working on my first Firefox
extension, I struggled for
a while to figure out the best way to work with the code - the script,
CSS, etc. - involved with the extension.
I like using Visual Studio as my environment for the other projects I’m
on, so I thought I’d look around and see if other folks had figured out
how to use it while working with Firefox extensions. The closest I got
was this article over on
DevSource
which really talks more about creating the extension’s folder structure
than it does about how you actually manage the project in Visual Studio.
With that, I figured it was up to me, and here’s how I got it working.
First, follow the Mozilla instructions on setting up a developer
profile for extension
building
and creating the base extension
structure. It
might even be worth getting the full Hello World
plugin running
so you know you’ve got something working to start.
Now we’re going to create a Visual Studio solution to manage the code
with. We’ll end up with a folder/file structure that looks something
like this:
You have a folder that houses your extension (“ExampleExtension”) and
then you have the actual folder structure under that which has the
extension code (“extension”). Ostensibly, you’ll end up zipping
everything under “extension” into an .xpi file for distribution later.
We need to create the solution you see in the folder right above the
extension code so fire up Visual Studio. Go to “File->New Project” and
under “Other Project Types” click “Visual Studio Solutions” and elect to
create a Blank Solution. Put the blank solution in the folder right
above the main extension code (“ExampleExtension” in the above folder
tree).
Save the solution file and close it. Visual Studio always does this
thing where it creates a folder for the solution but you don’t want that
folder here - you’ve already got a structure you’re working in. Go grab
the .sln file that was just created and put it in the folder right above
the extension code (“ExampleExtension”). You can then delete the folder
Visual Studio stuck it in as well as the .suo file.
You should have the .sln file right above the “extension” folder with
your Firefox extension code, just like the picture above. Now open the
solution in Visual Studio. We’re going to use the Web Site project
type to work with the extension code. Extensions are mostly XML, CSS,
and script anyway, so it mostly makes sense, right?
In Visual Studio, go to “File -> Add -> New Web Site…” to open the
web site template dialog. Select the “ASP.NET Web Site” project
template. Under “Location,” select “File System” and point to the
folder that contains the extension code (“extension”). It doesn’t
really matter which language you select, since you’re not going to be
really making a web site, so select what you want. (I selected Visual
C#.)
When you click “OK,” it’s going to find the extension folders and such
you already have. It will then ask you how you want to proceed. Select
“Open the existing web site” and click OK. This will add everything
for your extension into the “web site” without adding anything to it.
You should see it all in Solution Explorer. Here’s a screen shot of my
extension in Solution Explorer with all the requisite files.
That’s it. You should now be able to add, remove, and update files
for your extension from Visual Studio.
Now, I know I could install Eclipse and do things differently, or choose
some other environment, but I really wanted to see how VS would work.
Seems to work reasonably well, at least for what I’m doing.
What about debugging?
Well, you can’t really do debugging of your extension from inside Visual
Studio, but you can execute your Firefox developer environment to see
your extension run. Right-click the Web Site project proper (the little
“globe” icon you see in Solution Explorer) and select “Browse With…”
In that dialog, click “Add” to add a new browser. In the “Program Name”
box, type the full command line that you need to run the developer
profile with (you have that from when you set up your extension
developer
environment).
In the “Friendly Name” box, put something like “Firefox Extension
Developer Environment.” Then click OK.
You will get warned with something that says “File name does not exist,
is invalid, or contains parameters that cannot be validated. Do you want
to change your entry?” Say NO. That warning will close and the “Firefox
Extension Development Environment” browser will appear in the list.
From now on, you can select “Browse With,” select your developer
environment, click the “Browse” button, and the developer version of
Firefox, with your extension installed, will pop up. (You mustset
up the Firefox extension proxy file when you set up your development
environment
or it won’t matter that you popped open the dev browser - your extension
won’t be there.)
How about building/packaging the extension?
I haven’t figured out a way to do it from inside Visual Studio (though
I’m sure you could through post-build tasks or modifying the .sln file
directly), however, with the use of MSBuild Community
Tasks I’ve got a very simple build
script that zips up the extension as an .xpi in a build_output folder
(peer to the extension code). Yours for the taking. YMMV, no support, no
warranty expressed nor implied, etc.
<?xml version="1.0" encoding="utf-8"?>
<Project DefaultTargets="All" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<MSBuildCommunityTasksPath>$(MSBuildProjectDirectory)\lib\MSBuildCommunityTasks</MSBuildCommunityTasksPath>
<BuildDirectory>$(MSBuildProjectDirectory)\build_output</BuildDirectory>
<ExtensionDirectory>$(MSBuildProjectDirectory)\extension</ExtensionDirectory>
<ExtensionName>ExampleExtension</ExtensionName>
</PropertyGroup>
<Import Project="$(MSBuildProjectDirectory)\lib\MSBuildCommunityTasks\MSBuild.Community.Tasks.Targets"/>
<Target Name="All" DependsOnTargets="Clean;Compile">
</Target>
<Target Name="Clean">
<RemoveDir Directories="$(BuildDirectory)" Condition="Exists('$(BuildDirectory)')"/>
</Target>
<Target Name="Compile">
<ItemGroup>
<ExtensionFiles
Include="$(ExtensionDirectory)\**\*.*"
Exclude="$(ExtensionDirectory)\**\_svn\**\*.*" />
</ItemGroup>
<MakeDir
Directories="$(BuildDirectory)"
Condition="!Exists('$(BuildDirectory)')"/>
<Zip Files="@(ExtensionFiles)"
WorkingDirectory="$(ExtensionDirectory)"
ZipFileName="$(BuildDirectory)\$(ExtensionName).xpi" />
</Target>
</Project>
Yeah, that’s a lot to just build a zip file, but it always cleans out
any existing build and repackages the thing, plus if you end up having
more to do (like adding other files or doing additional filtering), this
is a starting point.
Hopefully this will help some of you folks trying to break into Firefox
extension development!
