Firefox4 Compatibility

tenderlaΛογισμικό & κατασκευή λογ/κού

13 Δεκ 2013 (πριν από 3 χρόνια και 6 μήνες)

69 εμφανίσεις

Firefox

Addon

development
tutorial

谢烜

xxie@mozilla.com

2011
-
7
-
4

Mozilla Corporation


3/15/2011

What we should learn


Learn what extension are, what they
can do, the staff they are made of


Configure your development
environment


Make an extension


Package and test it

Mozilla Corporation


3/15/2011

Required Gears


A Linux Mac or Windows machine


A terminal application(Gnome Terminal,
Terminal, Command Prompt)


A text editor(
Notpad
++,
TextEdit
,
Komodo Edit, Vim or
Emacs
)


A zip
archiver

(zip or 7
-
zip)


Basic knowledge of HTML CSS and
JavaScript

Mozilla Corporation


3/15/2011

What is an extension?


A package of files that modify Firefox's
appearance and/or behavior


In the zip file archive format (but in .
xpi

file extension)


Two manifesto file describe content


Distribute, browse and search via AMO


Install, manage uninstall via Add
-
ons
window

Mozilla Corporation


3/15/2011

What can they do?


Add and remove interface elements



(menu, button, etc.)


Modify appearance of elements



(color, border, icon, etc.)


Listen and response to events



(page loads, mouse clicks, etc.)


Access modules and components



(file
manipulation,networking,data

storage,etc
.)


Add their own modules and components and
override the build
-
in ones

Mozilla Corporation


3/15/2011

Content vs. Chrome


Content is a webpage that Firefox load
in browser tabs.



Chrome is Firefox user interface (i.e.
everything around the browser tabs,
including other windows like
preferences and add
-
ons)

Mozilla Corporation


3/15/2011

Why use chrome?


Chrome privilege
are the ability to do
anything that Firefox can do.



Extensions are part of chrome and have
chrome privilege!

Mozilla Corporation


3/15/2011

Extension building blocks


XUL and XHTML for structure, widgets


CSS for appearance and style


JavaScript for behavior


DTDs and properties for localization


JavaScript and C++ for
modules/components

Mozilla Corporation


3/15/2011

XUL


XML Interface Language


XML vocabulary for building interfaces


Like HTML, but for application


Tags like <menu> <button> <tab>


Different layout(box) model


Much of Firefox’s interface is built with
XUL


You can mix XUL and XHTML

Mozilla Corporation


3/15/2011

Develop environment


Firefox profile (
firefox

-
P)


Developer preferences


Developer extensions


Extension dictionary

Mozilla Corporation


3/15/2011

Profiles


A hidden feature of Firefox


Directory that store user’s
data(preferences, bookmarks, saved
passwords, etc.)


Extensions are profile
-
specific


Use develop profile to develop your
add
-
on and default profile for normal
use

Mozilla Corporation


3/15/2011

How to use profile


Use “

P” argument,
o
n Windows
platform, add this argument to shortcut,
on Linux and Mac, use command line.


Use two profiles at the same time, use


no
-
remote” argument or add “MOZ
-
NO
-
REMOTE=1” to environment
variable.


Use “
-
console” to display console
window.

Mozilla Corporation


3/15/2011

Developer preferences


Make it easier for developer


Type “
about:config
” at
url

bar


extensions.logging.enable
(true): show
logging error in Error Console


javascript.opitions.showInConsole
(true):
show JavaScript error in Error Console


browser.dom.window.dump.enable
(true)
:use “dump” function at
dom

context,
and show information at console
window

Mozilla Corporation


3/15/2011

Developer Extension


DOM Inspector


Console²


Firebug


Chrome Bug


Rainbow


XPCOM Viewer


SQLite Manager

Mozilla Corporation


3/15/2011

The install manifest


Tell Firefox about the extension(its
name, versions, compatible Firefox
versions, etc.)


Written in RDF, an XML vocabulary.


Must be at the top level of extension
directory


Must be called
install.rdf

Mozilla Corporation


3/15/2011

The chrome
regestration


Tell Firefox about the location of source
code files and resource files. Also tell
Firefox how they add themselves to
Firefox


Must be at the top level of extension
directory


Must be called
chrome.manifest

Mozilla Corporation


3/15/2011

Install your Extension


Link file method for developer


Create a text file inside the extensions/
sub directory of your develop profiles


The name of the file must be the ID of
your extension, no suffix!


The content of the file must a single line
specify the path of your extensions
directory

D:
\
xxie
\
helloworld

/home/
xxie
/
helloworld

Mozilla Corporation


3/15/2011

Show How to write an
addon


Write a XUL


Write a JavaScript


Include
css

file


Include DTD file


Include property file

Mozilla Corporation


3/15/2011

References


https
://developer.mozilla.org/en/Setting_up_extensio
n_development_environment


https://
developer.mozilla.org


https://wiki.mozilla.org


http://mxr.mozilla.org


https://addons.mozilla.org/en
-
US/developers


http
://www.google.com/


https
://developer.mozilla.org/en/JavaScrip
t/Guide