Pocket Sized Add-ons: Extension Development for Firefox Mobile

• People use phones and tablets differently than desktop computers
• Small screens mean less visible UI
• No more XUL, but you can still build add-ons in JS!

• Menu items
• Notifications
• Open/close tabs
• Prompts/dialogs

• Modify the DOM
• Listen for events
• Web progress
• Touch events
• Get the user's location

• Query history/bookmarks database
• Set preferences
• Store data

• Ad-Block Plus
• Always Request Desktop Site
• Clear History on Exit

• Add a menu item to view the source of a webpage
• A basic restartless add-on skeleton is available on github
• Documentation for this walkthrough is available on MDN

• install.rdf
• Install manifest with metadata, such as the add-on's indentifier, author, and target application
• bootstrap.js
• File that contains bootstrapped add-on logic
• build.sh and config_build.sh
• The basic restartless add-on skeleton also includes a build script to package and install your add-on

• loadIntoWindow() to initialize our add-on
• unloadFromWindow() to clean up any changes we've made

          var menuId;
          function loadIntoWindow(window) {
            menuId = window.NativeWindow.menu.add(
              "View Source", null, function() { viewSource(window); });
          }
          function unloadFromWindow(window) {
            window.NativeWindow.menu.remove(menuId);
          }
        

• Now we need to implement the viewSource() function

          function viewSource(window) {
            let url = window.content.location.href;
            window.console.log("displaying source for " + url);
            window.BrowserApp.addTab("view-source:" + url);
          }
        

• Packaging
• Zip up install.rdf and bootstrap.js into a .xpi file
• Installing
• Put your add-on on your device using adb push
• Open the .xpi file using Firefox
• If you are using the add-on skeleton, you can run ./build.sh to do this all for you!
• Edit config_build.sh to name your .xpi file
• Make sure adb is in your root path

• Access web console messages with adb logcat
• Filter for "GeckoConsole" to limit log output
• Remote debugger

• Drawing on top of a webpage
• Cropped screenshots
• Automatic text translation
• Website compatibility bug reporter
• Load images on demand
• Dolphin Add-ons and XUL Fennec Add-ons

• MDN Documentation
• Communicate with the Firefox for Android development team
• File bugs in the Firefox for Android Bugzilla component
• Join #mobile and/or #extdev on irc.mozilla.org