Firefox add-on development: automatically reload add-on after code is changed - firefox-addon

I'm developing Firefox add-on and problem is:
When I change code in add-on I must manually reload add-on folder in browser:
1. Go to about:debugging
2. Click on "Load temporary add-on" find add-on folder and open it
Question: Is there any way how to force Firefox to reload add-on folder on every code change? Somehow automatically?

Mozilla provides a command line tool called web-ext that allows you to run your extension in Firefox and reload automatically your code when the source files are modified.
The tool has many useful options that you can use to suit your needs, so I would recommend checking out the documentation page on MDN.
To get started quickly:
npm install --global web-ext
cd /path/to/your/webextension
web-ext run

Sadly, it is no possible. I develop the same way and had brought up the issue long time ago.
Files are Cached and not refreshed on Disable/Enable/Restart
Add Reload to installed addons in about:debugging
I have heard that it is possible with development scripts/environment but I don't use them.
Note: The background scripts (and anything that loads at start like _locales) are cached so they require restart but content scripts are not cached (well, cached per tab, you need to open a new tab).
Note that some content scripts are not cached, like addon's internal page such as pop-ups, option page etc so refreshing them will get the new version.

Related

Can Firefoxe's web-ext utility be made to open an extension page on start with -u?

As far as I understand, each time an extension is reloaded, it gets a new moz-extension:// URL with a new UUID. This makes it impossible to know the extension page URL I want to use with web-ext run -u in advance. This makes web-ext almost worthless for me because I have to (manually) open the page I need to run my tests on. If I knew the URL beforehand I could just pass it to web-ext and do everything completely automatically, and with a headless FF. Is there a way around this?
After some fiddling I finally managed to have web-ext open a page with moz-extension schema on browser start.
The only way (that I found) to open this page with an extension context (and test the page correctly) and not as an ordinary file:// is to use a moz-extension://<internal UUID>/path/to/extension/page/from/extension/root type URI to access it.
The problem is, as a temporary extension, it always has a different UUID that is not preserved between re-installs, so there is no way of telling web-ext to open an extension page via -u while using the defaults.
This is where this helpful documentation page comes in. It mentions the extensions.webextensions.keepUuidOnUninstall option in about:config that does exactly that. So a profile has to be created that has this option set to true, and used with web-ext -p option.
The next problem I had was that the page would silently fail to open. Apparently Firefox was attempting to open the page before the extension was installed. But web-ext has a --pre-install option that makes the extension (and its pages) available at start, so when it is enabled the page does open. Caveat 1 is that using --pre-install requires the extension to have an ID (this one is not the mentioned UUID generated by Firefox) that has to be set in manifest.json. Caveat 2, --pre-install disables extension auto-reloading on file change.
So my final solution was to:
With firefox --manageProfiles, create a separate profile to test my extension
Proceed to set and save the extensions.webextensions.keepUuidOnUninstall about:config flag (do this without web-ext or with --keep-profile-changes otherwise)
In manifest.json add an id for the extension:
"applications": {
"gecko": {
"id": "addon#example.com"
}
}
Run
web-ext run -p <testing profile name> --pre-install -u moz-extension://<extension UUID>/path/to/extension/page.html
This starts Firefox with a temporary installation of your extension and opens the desired page.
If you know a better solution (e.g. one that does not disable the auto-reloading), your answer is very welcome.

Testing with JPM Run is Extremely Slow

I just recently switched from using the outdated cfx to jpm for developing my Firefox add-ons. Every time I make a change to my code and want to test it again, I have to use the "jpm run" command it literally takes 3 to 5 minutes to launch the browser with the new code inside. This makes it pretty much impossible to develop my add-on because, every time I want to test a new line of code, I have to wait several minutes.
This kind of problem doesn't occur in Chrome so I'm not sure what the people at Mozilla are thinking. Do they want to make it nearly impossible to develop add-ons for their browser?
What are other Firefox add-on developers doing to test their code? Do they just spend hours launching and relaunching the browser very very slowly? Or is there a workaround?
You can use jpm watchpost together with the extension auto-installer instead to auto-reload the extension in a running firefox session.
But even without that it should not not take minutes, only seconds.
As the8472 has mentioned, you can test Add-on SDK extensions without the need to restart the browser using jpm by using jpm watchpost. Using this appears to take a bit of configuring. I have not used this, as I would find having the add-on automatically updated upon every write to a file a bit annoying. I often change multiple files, or make multiple writes to the same file between the times I run the add-on to test. Basically, I want to maintain more control as to when the add-on is reloaded than to have it automatically done each time a file is changed.
There is a way to load temporary add-ons which works for both unpacked add-ons and .xpi files. The problem is that prior to running jpm, your add-on is not actually a complete Firefox add-on. jpm adds wrappers around the contents of your add-on to make it a normal bootstrapped add-on. Without those wrappers, your add-on will not function. One possibility would be to run jpm xpi each time you want to test a new version: Once you have initially loaded the add-on as a temporary add-on, you would run jpm xpi, then click on the "Reload" button for your add-on in about:debugging.
[This method will have issues which you will need to work through]: Alternately, you could unpack the .xpi file and continue your development from the files contained in the resulting directories while using the temporary add-on method of installing your add-on (click on any file in the directory where you unpacked the files to install as a temporary add-on). However, this method may prevent you from using jpm at all with your add-on. In addition, jpm performs somewhat different actions when packaging your add-on into an .xpi file depending on the contents of your add-on. If so, things may start to break if you significantly change your add-on's functionality (e.g. changes in package.json won't propagate to install.rdf). With this method, you would, probably, need to use a "normal", non-jpm method of creating an .xpi file when you want to publish your add-on.

How to debug Firefox add-on update

I'm developing a migration update from XUL to Jetpack. I want to simulate the process on my local machine, make sure that everything works as expected when the versions change.
I followed all the steps of this tutorial:
http://www.borngeek.com/firefox/automatic-firefox-extension-updates/ in order to make a self hosted update version. But the extension won't update and I'm not getting any errors.
How can I debug, or at least initiate the update process for an add-on?
First of all, you should toggle on the extensions.logging.enabled preference. This will dump a lot of information about the update process and states into the Browser Console.
After enabling the preference, just open the Add-ons Manager UI and search for updates again.
But to test that stuff still works from going from one version to another, I would just install the old version (in a new profile) and then drop the new version XPI. This will trigger the same code paths as would have been triggered if the update XPI was retrieved over the network.

Why running the generated Angular index.html without Grunt shows an empty page?

I generated an Angular app and when I run grunt server it works (it shows the default page) but when I browse the files and double click index.html I get an empty page (except for the grey background).
Why is that? Isn't it just JS/CSS/HTML?
Depending on your setup some files usually need conversion- for instance your styles may well be in compass or SASS and need to be converted to regular css. Grunt handles all the various conversions you need (as well as launching the static page server).
Check out your console error log in the browser and I'll bet you'll see some "Failed to load resource" errors- for instance the css file may well not be there (when you're trying to run index.html directly).
By the way, you can run:
grunt build
This will create a new directory "dist" with everything converted and ready for distribution- sounds like this might be what you're looking for.

What's the quick way to make my change of firefox plugin take affect in windows?

Now I have to restart whenever I modified a single line...
Is there a way to make it refresh without restarting the firefox?
Yes, you use plain directories in your extension instead of a JAR file, add <em:unpack>true</em:unpack> to your install.rdf and add boolean nglayout.debug.disable_xul_cache/nglayout.debug.disable_xul_fastload preferences and set them to true. You also start Firefox with -purgecaches command line flag (for Firefox 4 and newer). Then you will be able to edit extension files directly in the profile and have these changes picked up immediately. If you have an own dialog window then closing it and opening it again will be enough. For browser window overlays you will have to open a new browser window. JavaScript modules and XPCOM component will still need a browser restart however, these are loaded only once per browser session. But at least you won't have to reinstall the extension.
More information: Setting up an extension development environment

Resources