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

**URL:** <https://discourse.mozilla.org/t/use-options-pages-html-in-xcomp-add-on/12140>\
**Category:** Development\
**Created:** [November 21, 2016, 4:33pm UTC](https://discourse.mozilla.org/t/use-options-pages-html-in-xcomp-add-on/12140 "2016-11-21T16:33:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kjemmo](https://avatars.discourse-cdn.com/v4/letter/k/439d5e/32.png) [@kjemmo](https://discourse.mozilla.org/u/kjemmo)\
**Post date:** [November 21, 2016, 4:34pm UTC](https://discourse.mozilla.org/t/use-options-pages-html-in-xcomp-add-on/12140/1 "2016-11-21T16:34:00Z")

</div>

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.

> **[Anatomy of an extension](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Options_pages)**
>
> An extension consists of a collection of files, packaged for distribution and installation. In this article, we will quickly go through the files that might be present in an extension.

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

All suggestions are most welcome.

---

<div class="post-metadata">

**Author:** ![wbamberg](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/wbamberg/32/30597_2.png) [@wbamberg](https://discourse.mozilla.org/u/wbamberg)\
**Post date:** [November 21, 2016, 5:38pm UTC](https://discourse.mozilla.org/t/use-options-pages-html-in-xcomp-add-on/12140/2 "2016-11-21T17:38:14Z")

</div>

One thing you might want to look at is [embedded WebExtensions](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/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.

---

<div class="post-metadata">

**Author:** ![noitidart](https://avatars.discourse-cdn.com/v4/letter/n/9f8e36/32.png) [@noitidart](https://discourse.mozilla.org/u/noitidart)\
**Post date:** [November 23, 2016, 3:29am UTC](https://discourse.mozilla.org/t/use-options-pages-html-in-xcomp-add-on/12140/3 "2016-11-23T03:29:55Z")

</div>

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:

> **[Noitidart/l10n](https://github.com/Noitidart/l10n/tree/xhtml-xul)**
>
> l10n - ff-addon-demo: Shows how to localize restartless add-ons.

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>
```

---

<div class="post-metadata">

**Author:** ![noitidart](https://avatars.discourse-cdn.com/v4/letter/n/9f8e36/32.png) [@noitidart](https://discourse.mozilla.org/u/noitidart)\
**Post date:** [November 23, 2016, 3:33am UTC](https://discourse.mozilla.org/t/use-options-pages-html-in-xcomp-add-on/12140/4 "2016-11-23T03:33:02Z")

</div>

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/](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](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](https://www.famkruithof.net/uuid/uuidgen)

If you need help simplifying this let me know