Use Options pages (html) in XCOMP add-on?

Add-ons Development
#1

I am planning to upgrade an older XCOMP/XUL add-on to a WebExtension.

This will be a tough process as the add-on is heavy and very feature rich.

My hope is that it can be done gradually.

One place so start could be to get rid of all XUL and create a new interface in html and load it as suggested for WebExtensions options pages.

I wonder if this is possible and what the best approach would be?

All suggestions are most welcome.

#2

One thing you might want to look at is embedded WebExtensions: this lets you embed a WebExtension inside a traditional bootstrapped extension, so you can gradually port it a piece at a time. However, I think you can only do this with a bootstrapped (i.e. restartless) extension or an SDK add-on. So you can’t do it with a restart-required, XUL overlay-based extension.

#3

All my addons (bootstrap type) used HTML pages. You would actually make it an xhtml page so you can localize it.

Here is a very simple repo showing you how to do it:

You have to be on the xhtml-xul branch.

Localizing the XHTML is super easy:

<!DOCTYPE html SYSTEM "chrome://l10n/locale/my.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
		<title>&my.title;</title>
		<script>
		   alert('&my.welcome-message;');
		</script>
	</head>
	<body>
		<b>&my.quote;</b>
	</body>
</html>
#4

You might want to make the URL look cleaner in the tab though, that’s what I like. So I would register an about page with URI_SAFE_FOR_UNTRUSTED_CONTENT which makes your html page have no XPCOM access.

I did that in my addon here -

https://addons.mozilla.org/en-US/firefox/addon/nativeshot/

Here is a very simple function to do it for you:

https://github.com/Noitidart/NativeShot/blob/master/resources/scripts/MainFramescript.js#L477

You just need to set your own UUID which you can make on here:

https://www.famkruithof.net/uuid/uuidgen

If you need help simplifying this let me know