{"id":920,"date":"2009-09-04T07:40:44","date_gmt":"2009-09-04T14:40:44","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=920"},"modified":"2009-09-04T07:40:44","modified_gmt":"2009-09-04T14:40:44","slug":"fennec-%e2%80%93-handling-add-on-options","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/","title":{"rendered":"Fennec \u2013 Handling Add-on Options"},"content":{"rendered":"

This was originally posted on Mark Finkle’s blog<\/a>. Mark is a member of the Fennec mobile team.<\/em><\/p>\n

The add-on (extension) mechanism built into the Mozilla platform is very powerful. One of the optional features is support for options (preferences) dialogs. As discussed in my last post<\/a>, Fennec doesn’t like dialogs. In addition, Fennec has a simple, clean preference system. While designing the Fennec Add-ons Manager, we discussed how we would support add-on options. We didn’t want popup dialogs of random and complicated XUL.<\/p>\n

After brainstorming a few ideas, we settled on a simple idea. Fennec uses special <setting><\/code> XUL tags to create it’s list of preferences. Add-ons would be forced to use the same tags. The options would be merged into the Fennec Add-on Manager, not displayed as a popup dialog. Of course, add-ons can support more than one application, so we needed to make sure that the options XUL for Fennec could coexist with the options XUL for other applications. Let’s take a look at how this all works:<\/p>\n

Install Manifest<\/strong><\/p>\n

Add-ons use install.rdf to identify the XUL used for displaying the preferences. This is optional.
\n
\n<em:optionsURL>chrome:\/\/myaddon\/content\/options.xul<\/em:optionsURL>
\n<\/code><\/p>\n

This is needed for any add-on that wants to use an options dialog.<\/p>\n

Chrome Manifest<\/strong><\/p>\n

Add-ons use the chrome manifest<\/a> to selectively override<\/a> XUL, and other resources, between different applications using the application flags<\/a><\/p>\n

override chrome:\/\/myaddon\/content\/options.xul chrome:\/\/myaddon\/content\/fennec-options.xul application={a23983c0-fd0e-11dc-95ff-0800200c9a66}<\/code><\/p>\n

This will tell Mozilla to use fennec-options.xul<\/code> anytime the options.xul<\/code> resource is requested.<\/p>\n

Options XUL<\/strong><\/p>\n

As I said, the XUL allowed for the Fennec options system is limited to a few new tags<\/a>. Here is an example of a Fennec options dialog:<\/p>\n

\r\n<?xml version=\"1.0\"?>\r\n\r\n<!DOCTYPE mydialog SYSTEM \"chrome:\/\/myextension\/locale\/mydialog.dtd\">\r\n\r\n<vbox xmlns=\"http:\/\/www.mozilla.org\/keymaster\/gatekeeper\/there.is.only.xul\">\r\n  <setting pref=\"extensions.myaddon.debugging\" type=\"boolint\" on=\"1\" off=\"2\" \r\ntitle=\"Enable debugging\"\/>\r\n  <setting pref=\"extensions.myaddon.profiling\" type=\"bool\" title=\"Enable profiling\">\r\n    Profiling can affect the performance of the application\r\n  <\/setting>\r\n\r\n  <setting pref=\"extensions.myaddon.logging\" type=\"bool\" title=\"Save logs\"\/>\r\n  <setting pref=\"extensions.myaddon.logging.path\" type=\"string\" title=\"Log folder\"\/>\r\n  <setting type=\"button\" title=\"Clear logs\">\r\n    <button label=\"Clear\" oncommand=\"MyAddon.clearLogs();\"\/>\r\n  <\/setting>\r\n<\/vbox>\r\n\r\n<\/code><\/pre>\n
Note that we don’t have any <script><\/code> support and we are limited to <setting><\/code> tags. The root <vbox><\/code> just acts as a container, it isn’t merged into the main window. Here is how the options look in Fennec:<\/p>\n
\"fennec-addon-options-sample\"<\/a><\/p>\n
As always, we appreciate your feedback. I’m in the process of updating the Fennec Best Practices<\/a> documents with this information.<\/p>\n
A big thank you<\/strong> goes out to Vivien Nicolas, a Mozilla intern in the Paris office, for turning my super-great design<\/a> into a reality. Shaver told me there’d be days like this!<\/p>\n","protected":false},"excerpt":{"rendered":"
This was originally posted on Mark Finkle’s blog. Mark is a member of the Fennec mobile team. The add-on (extension) mechanism built into the Mozilla platform is very powerful. One … Read more<\/a><\/p>\n","protected":false},"author":120,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[],"yoast_head":"\nFennec \u2013 Handling Add-on Options - Mozilla Add-ons Community Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-\u2013-handling-add-on-options\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/\",\"name\":\"Fennec \u2013 Handling Add-on Options - Mozilla Add-ons Community Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/blog.mozilla.org\/addons\/files\/2009\/09\/fennec-addon-options-sample-300x187.png\",\"datePublished\":\"2009-09-04T14:40:44+00:00\",\"dateModified\":\"2009-09-04T14:40:44+00:00\",\"author\":{\"@id\":\"\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/#primaryimage\",\"url\":\"http:\/\/blog.mozilla.org\/addons\/files\/2009\/09\/fennec-addon-options-sample-300x187.png\",\"contentUrl\":\"http:\/\/blog.mozilla.org\/addons\/files\/2009\/09\/fennec-addon-options-sample-300x187.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/addons\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fennec \u2013 Handling Add-on Options\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/\",\"name\":\"Mozilla Add-ons Community Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/author\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fennec \u2013 Handling Add-on Options - Mozilla Add-ons Community Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-\u2013-handling-add-on-options\/","twitter_misc":{"Written by":"","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/","url":"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/","name":"Fennec \u2013 Handling Add-on Options - Mozilla Add-ons Community Blog","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/addons\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/#primaryimage"},"thumbnailUrl":"http:\/\/blog.mozilla.org\/addons\/files\/2009\/09\/fennec-addon-options-sample-300x187.png","datePublished":"2009-09-04T14:40:44+00:00","dateModified":"2009-09-04T14:40:44+00:00","author":{"@id":""},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/#primaryimage","url":"http:\/\/blog.mozilla.org\/addons\/files\/2009\/09\/fennec-addon-options-sample-300x187.png","contentUrl":"http:\/\/blog.mozilla.org\/addons\/files\/2009\/09\/fennec-addon-options-sample-300x187.png"},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/addons\/2009\/09\/04\/fennec-%e2%80%93-handling-add-on-options\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/addons\/"},{"@type":"ListItem","position":2,"name":"Fennec \u2013 Handling Add-on Options"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/addons\/#website","url":"https:\/\/blog.mozilla.org\/addons\/","name":"Mozilla Add-ons Community Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"","url":"https:\/\/blog.mozilla.org\/addons\/author\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/920"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/users\/120"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/comments?post=920"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/920\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media?parent=920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/categories?post=920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/tags?post=920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}