Mobile/AddonsTrainingWeek/SpeakerNotesA: Difference between revisions
< Mobile | AddonsTrainingWeek
Jump to navigation
Jump to search
MarkFinkle (talk | contribs) (Created page with "* Download the latest release or nightly version of Firefox for mobile (Fennec) ** [http://ftp.mozilla.org/pub/mozilla.org/mobile/nightly/latest-mozilla-central-linux/ Nightly Li...") |
MarkFinkle (talk | contribs) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
* Download the latest release or nightly version of Firefox for mobile (Fennec) | ==Building an Add-on for Firefox (mobile)== | ||
* Download the latest release or nightly version of Firefox for mobile (Fennec). | |||
** [http://ftp.mozilla.org/pub/mozilla.org/mobile/nightly/latest-mozilla-central-linux/ Nightly Linux] | ** [http://ftp.mozilla.org/pub/mozilla.org/mobile/nightly/latest-mozilla-central-linux/ Nightly Linux] | ||
* Launch the browser and make sure the browser is functioning correctly | * Launch the browser and make sure the browser is functioning correctly. | ||
* Setup some preferences that will make it easier to debug problems. Go to about:config | * Setup some preferences that will make it easier to debug problems. Go to about:config. | ||
** [https://developer.mozilla.org/en/Setting_up_extension_development_environment#Development_preferences MDC page] | ** [https://developer.mozilla.org/en/Setting_up_extension_development_environment#Development_preferences MDC page] | ||
** javascript.options.showInConsole = true | ** javascript.options.showInConsole = true | ||
** browser.dom.window.dump.enabled = true | ** browser.dom.window.dump.enabled = true | ||
** extensions.logging.enabled = true | ** extensions.logging.enabled = true | ||
* Start editing the boilerplate of your add-on | * Start editing the boilerplate of your add-on. | ||
** Download the blank template or use the tool of your choice | ** Download the [http://people.mozilla.com/~mfinkle/fennec/addons/blank-addon.zip blank template] or use the tool of your choice. | ||
** Unpack or create add-on in a development folder | ** Unpack or create add-on in a development folder. | ||
** Use the editor of your choice | ** Use the editor of your choice. | ||
** [https://developer.mozilla.org/En/Building_an_Extension MDC page] | ** [https://developer.mozilla.org/En/Building_an_Extension MDC page] | ||
* Make a test link from the profile folder to your add-on development folder | ** Or you can use a finished version of the [http://people.mozilla.com/~mfinkle/fennec/addons/demotest-addon.zip demo]. | ||
* Make a test link from the profile folder to your add-on development folder. | |||
** [https://developer.mozilla.org/En/Building_an_Extension#Test MDC page] | ** [https://developer.mozilla.org/En/Building_an_Extension#Test MDC page] | ||
* Launch the browser and verify that your add-on installed | * Launch the browser and verify that your add-on installed. | ||
** If the add-on did not install, check the error console for potential problems | ** If the add-on did not install, check the error console for potential problems. | ||
* Now start adding more functionality to your add-on and keep testing in the browser | * Now start adding more functionality to your add-on and keep testing in the browser. | ||
* When ready, ZIP the contents of your add-on development folder into a XPI and post to AMO | * When ready, ZIP the contents of your add-on development folder into a XPI and post to AMO. | ||
==Porting an Add-on from Desktop to Mobile== | |||
* UI is very different. Read about the [https://wiki.mozilla.org/Mobile/Fennec/Extensions/UserInterface mobile UI guidelines]. | |||
** You will not be able to assume the desktop XUL overlays will "just work". | |||
** Dialogs and Preferences are handled very differently. | |||
** Screen size becomes very important and a limiting factor. Work on your [https://wiki.mozilla.org/Mobile/Fennec/Extensions/Layout layout]. | |||
** Maintaining "touch-friendly" widgets is critical. | |||
** Simplify everything. | |||
* JS front-end API's are very different. | |||
** XPCOM and features of the Mozilla platform are the same. | |||
** JS API's found in the UI code are different. | |||
** Out-of-process web content makes common tasks and patterns very different. Learn about ways to work with [https://wiki.mozilla.org/Mobile/Fennec/Extensions/Electrolysis multiple processes]. | |||
* Guidelines | |||
** Larger add-ons should not be ported "all at once". Break the add-on into smaller pieces and port each piece individually. | |||
** Porting non-UI code should be straight forward, but scan XPCOM components and JSM's for potential UI problems. | |||
** Out-of-process web content has a bit of a learning curve, but once you become comfortable with processing messages, you start moving faster and become more productive. | |||
** Read the [https://wiki.mozilla.org/Mobile/Fennec/Extensions/BestPractices best practices] document for more pointers. | |||
Latest revision as of 17:23, 20 October 2010
Building an Add-on for Firefox (mobile)
- Download the latest release or nightly version of Firefox for mobile (Fennec).
- Launch the browser and make sure the browser is functioning correctly.
- Setup some preferences that will make it easier to debug problems. Go to about:config.
- MDC page
- javascript.options.showInConsole = true
- browser.dom.window.dump.enabled = true
- extensions.logging.enabled = true
- Start editing the boilerplate of your add-on.
- Download the blank template or use the tool of your choice.
- Unpack or create add-on in a development folder.
- Use the editor of your choice.
- MDC page
- Or you can use a finished version of the demo.
- Make a test link from the profile folder to your add-on development folder.
- Launch the browser and verify that your add-on installed.
- If the add-on did not install, check the error console for potential problems.
- Now start adding more functionality to your add-on and keep testing in the browser.
- When ready, ZIP the contents of your add-on development folder into a XPI and post to AMO.
Porting an Add-on from Desktop to Mobile
- UI is very different. Read about the mobile UI guidelines.
- You will not be able to assume the desktop XUL overlays will "just work".
- Dialogs and Preferences are handled very differently.
- Screen size becomes very important and a limiting factor. Work on your layout.
- Maintaining "touch-friendly" widgets is critical.
- Simplify everything.
- JS front-end API's are very different.
- XPCOM and features of the Mozilla platform are the same.
- JS API's found in the UI code are different.
- Out-of-process web content makes common tasks and patterns very different. Learn about ways to work with multiple processes.
- Guidelines
- Larger add-ons should not be ported "all at once". Break the add-on into smaller pieces and port each piece individually.
- Porting non-UI code should be straight forward, but scan XPCOM components and JSM's for potential UI problems.
- Out-of-process web content has a bit of a learning curve, but once you become comfortable with processing messages, you start moving faster and become more productive.
- Read the best practices document for more pointers.