This repository has been archived by the owner on Mar 29, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
/
commonjs.html
452 lines (354 loc) · 17.2 KB
/
commonjs.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base>
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
<script src="../../static-files/syntaxhighlighter/scripts/shCore.js" type="text/javascript"></script>
<script src="../../static-files/syntaxhighlighter/scripts/shBrushCss.js" type="text/javascript"></script>
<script src="../../static-files/syntaxhighlighter/scripts/shBrushXml.js" type="text/javascript"></script>
<script src="../../static-files/syntaxhighlighter/scripts/shBrushJScript.js" type="text/javascript"></script>
<link media="all" href="../../static-files/css/base.css" type="text/css" rel="stylesheet">
<link media="all" href="../../static-files/css/header.css" type="text/css" rel="stylesheet">
<link media="all" href="../../static-files/css/footer.css" type="text/css" rel="stylesheet">
<link media="all" href="../../static-files/css/sdk-docs.css" type="text/css" rel="stylesheet">
<link media="all" href="../../static-files/css/api-reference.css" type="text/css" rel="stylesheet">
<link href="../../static-files/syntaxhighlighter/styles/shCore.css" type="text/css" rel="stylesheet">
<link href="../../static-files/syntaxhighlighter/styles/shThemeDefault.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<style type="text/css">
.package-summary .module,
.package-entry .module,
.package-detail .module {
display: block;
}
</style>
<![endif]-->
<link href="../../static-files/media/favicon.png" type="image/x-icon" rel="shortcut icon">
<title>CommonJS, Packages, and the SDK - Add-on SDK Documentation</title>
</head>
<body>
<div id="global-header">
<div class="funnel">
<a href="http://www.mozilla.org/?ref=logo" id="mozilla-tab">Mozilla</a>
<div class="menu">
<p>
<a href="https://builder.addons.mozilla.org/">Add-on Builder</a>
</p>
<p>
<a href="https://addons.mozilla.org/en-US/developers/">Developer Hub</a>
</p>
</div>
</div>
</div>
<div id="site-header">
<div class="funnel">
<h1>
<a href="../../dev-guide/index.html">Add-on SDK<span></span></a>
</h1>
<div id="version">Version 1.8</div>
</div>
</div>
<div id="container">
<div id="columns">
<div id="main-content-column" class="column">
<div id="toc"></div>
<div id="main-content"><!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<h1>CommonJS, Packages, and the SDK</h1>
<p>CommonJS is the underlying infrastructure for both the SDK and the add-ons
you build using the SDK.</p>
<p>The <a href="http://wiki.commonjs.org/wiki/CommonJS">CommonJS group</a> defines
specifications for <strong>modules</strong> and <strong>packages</strong>.</p>
<h2>CommonJS Modules</h2>
<p>A CommonJS <strong>module</strong> is a piece of reusable JavaScript: it exports certain
objects which are thus made available to dependent code. To facilitate this
CommonJS defines:</p>
<ul>
<li>
<p>an object called <code>exports</code> which contains all the objects which a CommonJS
module wants to make available to other modules</p>
</li>
<li>
<p>a function called <code>require</code> which a module can use to import the <code>exports</code>
object of another module.</p>
</li>
</ul>
<p><img src="../../static-files/media/commonjs-modules.png" alt="CommonJS modules"/></p>
<p>The SDK
<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/freeze">freezes</a>
the <code>exports</code> object returned by <code>require</code>. So a if you import a module using
<code>require</code>, you can't change the properties of the object returned:</p>
<pre><code>self = require("self");
// Attempting to define a new property
// will fail, or throw an exception in strict mode
self.foo = 1;
// Attempting to modify an existing property
// will fail, or throw an exception in strict mode
self.data = "foo";
</code></pre>
<h2>CommonJS Packages</h2>
<p>A CommonJS <strong>package</strong> is a structure which can wrap a collection of related
modules: this makes it easier to distribute, install and manage modules.</p>
<p>Minimally, a package must include a package descriptor file named
<code>package.json</code>: this file contains information about the package such as a short
description, the authors, and the other packages it depends on.</p>
<p>Packages must also follow a particular directory structure, which is the
structure <code>cfx init</code> created for your add-on.</p>
<h2>CommonJS and the Add-on SDK</h2>
<img src="../../static-files/media/commonjs-wikipanel.png" alt="CommonJS wikipanel" class="image-right">
<ul>
<li>
<p>The JavaScript modules which the SDK provides are CommonJS modules, and they
are collected into CommonJS packages.</p>
</li>
<li>
<p>The JavaScript components of an add-on constitute one or more
CommonJS modules, and a complete add-on is a CommonJS package.</p>
</li>
</ul>
<p>According to the CommonJS specification, if a module called <code>main</code> exists in a
CommonJS package, that module will be evaluated as soon as your program is
loaded. For an add-on, that means that the <code>main</code> module will be evaluated as
soon as Firefox has enabled the add-on.</p>
<p>Because an add-on is a CommonJS package it's possible to include more than one
module in an add-on, and to make your modules available to any code that want
to use them.</p>
<h2>Packages in the SDK</h2>
<p>Navigate to the root of your SDK installation and list the contents of
the "packages" directory:</p>
<pre>
ls packages
</pre>
<p>You will see something like this:</p>
<pre>
addon-kit api-utils test-harness
</pre>
<p>So the modules which implement the SDK's APIs are
collected into three packages, <code>addon-kit</code>, <code>api-utils</code> and <code>test-harness</code>.</p>
<h3><a name="addon-kit">addon-kit</a></h3>
<p>Modules in the <code>addon-kit</code> package implement high-level APIs for
building add-ons:</p>
<ul>
<li>creating user interfaces</li>
<li>interacting with the web</li>
<li>interacting with the browser</li>
</ul>
<p>These modules are "supported": meaning that they are stable, and that
we'll avoid making incompatible changes to them unless absolutely
necessary.</p>
<p>They are documented in the "High-Level APIs" section
of the sidebar.</p>
<h3><a name="api-utils">api-utils</a></h3>
<p>Modules in the <code>api-utils</code> package implement low-level APIs. These
modules fall roughly into three categories:</p>
<ul>
<li>
<p>fundamental utilities such as
<a href="../../packages/api-utils/collection.html">collection</a> and
<a href="../../packages/api-utils/url.html">url</a>. Many add-ons are likely to
want to use modules from this category.</p>
</li>
<li>
<p>building blocks for higher level modules, such as
<a href="../../packages/api-utils/event/core.html">event/core</a>,
<a href="../../packages/api-utils/event/target.html">event/target</a>,
<a href="../../packages/api-utils/heritage.html">heritage</a>, and
<a href="../../packages/api-utils/namespace.html">namespace</a>. You're more
likely to use these if you are building your own modules that
implement new APIs, thus extending the SDK itself.</p>
</li>
<li>
<p>privileged modules that expose powerful low-level capabilities
such as <a href="../../packages/api-utils/xhr.html">xhr</a> and
<a href="../../packages/api-utils/xpcom.html">xpcom</a>. You can use these
modules in your add-on if you need to, but should be aware that
the cost of privileged access is the need to take more elaborate
security precautions. In many cases these modules have simpler,
more restricted analogs in the high-level addon-kit package (for
example, <a href="../../packages/addon-kit/tabs.html">tabs</a> or
<a href="../../packages/addon-kit/request.html">request</a>).</p>
</li>
</ul>
<div class="warning">
<p>These modules are still in active development,
and we expect to make incompatible changes to them in future releases.
</p>
If you use these modules in your add-on you may need to rewrite your
code when upgrading to a newer release of the SDK.
</div>
<p>They are documented in the "Low-Level APIs" section of the sidebar.</p>
<h3>test-harness</h3>
<p>Modules in this packages are used internally by the SDK's test code.</p></div>
</div>
<div id="sidebar" class="column">
<div class="sidebar-section" id="addon-development">
<a href="../../dev-guide/index.html"><h2 class="sidebar-section-header">Developer Guide</h2></a>
<ul class="sidebar-section-contents" id="default-section-contents">
<li class="sidebar-subsection">
<a href="../../dev-guide/tutorials/installation.html"><h3>Installation</h3></a>
</li>
<li class="sidebar-subsection">
<a href="../../dev-guide/tutorials/index.html"><h3 class="sidebar-subsection-header">Tutorials</h3></a>
</li>
<li class="sidebar-subsection">
<a href="../../dev-guide/guides/index.html"><h3 class="sidebar-subsection-header">Guides</h3></a>
</li>
<li class="sidebar-subsection" id="third-party-packages-subsection">
<a href="../../dev-guide/third-party-apis.html"><h3 class="sidebar-subsection-header">Third-Party APIs</h3></a>
<div class="sidebar-subsection-contents">
<ul id="third-party-package-summaries"></ul>
</div>
</li>
<li class="sidebar-subsection">
<a href="../../dev-guide/high-level-apis.html"><h3 class="sidebar-subsection-header">High-Level APIs</h3></a>
<div class="sidebar-subsection-contents">
<ul id="high-level-package-summaries">
<li style="display: block;" class="package-summary">
<h4>
<a href="../../packages/addon-kit/index.html">addon-kit</a>
</h4>
<a href="../../packages/addon-kit/addon-page.html">addon-page</a>
<a href="../../packages/addon-kit/clipboard.html">clipboard</a>
<a href="../../packages/addon-kit/context-menu.html">context-menu</a>
<a href="../../packages/addon-kit/hotkeys.html">hotkeys</a>
<a href="../../packages/addon-kit/l10n.html">l10n</a>
<a href="../../packages/addon-kit/notifications.html">notifications</a>
<a href="../../packages/addon-kit/page-mod.html">page-mod</a>
<a href="../../packages/addon-kit/page-worker.html">page-worker</a>
<a href="../../packages/addon-kit/panel.html">panel</a>
<a href="../../packages/addon-kit/passwords.html">passwords</a>
<a href="../../packages/addon-kit/private-browsing.html">private-browsing</a>
<a href="../../packages/addon-kit/request.html">request</a>
<a href="../../packages/addon-kit/selection.html">selection</a>
<a href="../../packages/addon-kit/self.html">self</a>
<a href="../../packages/addon-kit/simple-prefs.html">simple-prefs</a>
<a href="../../packages/addon-kit/simple-storage.html">simple-storage</a>
<a href="../../packages/addon-kit/tabs.html">tabs</a>
<a href="../../packages/addon-kit/timers.html">timers</a>
<a href="../../packages/addon-kit/widget.html">widget</a>
<a href="../../packages/addon-kit/windows.html">windows</a>
</li>
</ul>
</div>
</li>
<li class="sidebar-subsection">
<a href="../../dev-guide/low-level-apis.html"><h3 class="sidebar-subsection-header">Low-Level APIs</h3></a>
<div class="sidebar-subsection-contents">
<ul id="low-level-package-summaries">
<li style="display: block;" class="package-summary">
<h4>
<a href="../../packages/api-utils/index.html">api-utils</a>
</h4>
<a href="../../packages/api-utils/api-utils.html">api-utils</a>
<a href="../../packages/api-utils/app-strings.html">app-strings</a>
<a href="../../packages/api-utils/byte-streams.html">byte-streams</a>
<a href="../../packages/api-utils/collection.html">collection</a>
<a href="../../packages/api-utils/content.html">content</a>
<a href="../../packages/api-utils/content/loader.html">content/loader</a>
<a href="../../packages/api-utils/content/proxy.html">content/proxy</a>
<a href="../../packages/api-utils/content/symbiont.html">content/symbiont</a>
<a href="../../packages/api-utils/content/worker.html">content/worker</a>
<a href="../../packages/api-utils/cortex.html">cortex</a>
<a href="../../packages/api-utils/cuddlefish.html">cuddlefish</a>
<a href="../../packages/api-utils/environment.html">environment</a>
<a href="../../packages/api-utils/errors.html">errors</a>
<a href="../../packages/api-utils/event/core.html">event/core</a>
<a href="../../packages/api-utils/event/target.html">event/target</a>
<a href="../../packages/api-utils/events.html">events</a>
<a href="../../packages/api-utils/file.html">file</a>
<a href="../../packages/api-utils/frame/utils.html">frame/utils</a>
<a href="../../packages/api-utils/globals.html">globals</a>
<a href="../../packages/api-utils/heritage.html">heritage</a>
<a href="../../packages/api-utils/hidden-frame.html">hidden-frame</a>
<a href="../../packages/api-utils/httpd.html">httpd</a>
<a href="../../packages/api-utils/light-traits.html">light-traits</a>
<a href="../../packages/api-utils/list.html">list</a>
<a href="../../packages/api-utils/match-pattern.html">match-pattern</a>
<a href="../../packages/api-utils/memory.html">memory</a>
<a href="../../packages/api-utils/message-manager.html">message-manager</a>
<a href="../../packages/api-utils/namespace.html">namespace</a>
<a href="../../packages/api-utils/observer-service.html">observer-service</a>
<a href="../../packages/api-utils/plain-text-console.html">plain-text-console</a>
<a href="../../packages/api-utils/preferences-service.html">preferences-service</a>
<a href="../../packages/api-utils/promise.html">promise</a>
<a href="../../packages/api-utils/querystring.html">querystring</a>
<a href="../../packages/api-utils/runtime.html">runtime</a>
<a href="../../packages/api-utils/sandbox.html">sandbox</a>
<a href="../../packages/api-utils/tab-browser.html">tab-browser</a>
<a href="../../packages/api-utils/text-streams.html">text-streams</a>
<a href="../../packages/api-utils/traceback.html">traceback</a>
<a href="../../packages/api-utils/traits.html">traits</a>
<a href="../../packages/api-utils/unit-test.html">unit-test</a>
<a href="../../packages/api-utils/unload.html">unload</a>
<a href="../../packages/api-utils/url.html">url</a>
<a href="../../packages/api-utils/uuid.html">uuid</a>
<a href="../../packages/api-utils/window/utils.html">window/utils</a>
<a href="../../packages/api-utils/window-utils.html">window-utils</a>
<a href="../../packages/api-utils/xhr.html">xhr</a>
<a href="../../packages/api-utils/xpcom.html">xpcom</a>
<a href="../../packages/api-utils/xul-app.html">xul-app</a>
</li>
<li style="display: block;" class="package-summary">
<h4>
<a href="../../packages/test-harness/index.html">test-harness</a>
</h4>
<a href="../../packages/test-harness/harness.html">harness</a>
<a href="../../packages/test-harness/run-tests.html">run-tests</a>
</li>
</ul>
</div>
</li>
<li class="sidebar-subsection">
<h3 class="sidebar-subsection-header">Tools Reference</h3>
<div class="sidebar-subsection-contents">
<a href="../../dev-guide/console.html">console</a>
<a href="../../dev-guide/cfx-tool.html">cfx</a>
<a href="../../dev-guide/package-spec.html">package.json</a>
</div>
</li>
</ul>
</div>
<ul class="sidebar-section" id="appendices">
<li><a href="https://wiki.mozilla.org/Labs/Jetpack/Release_Notes"><h3>Release Notes</h3></a></li>
<li><a href="https://wiki.mozilla.org/Labs/Jetpack"><h3>Jetpack Wiki</h3></a></li>
<li><a href="../../dev-guide/glossary.html"><h3>Glossary</h3></a></li>
<li><a href="../../dev-guide/credits.html"><h3>Credits</h3></a></li>
</ul>
<!--end of sidebar column-->
</div>
<!--end of 'columns'-->
<div class="clearfooter"></div>
</div>
</div>
<div id="footer">
<div class="section">
<img src="../../static-files/media/footer-logo-med.png" alt="" class="footerlogo">
<div id="social-footer">
<ul>
<li>get to know <b>add-ons</b></li>
<li><a href="https://addons.mozilla.org/en-US/firefox/about">About</a></li>
<li><a href="http://blog.mozilla.com/addons">Blog</a></li>
<li class="footer-devhub-link"><a href="https://addons.mozilla.org/en-US/developers/">Developer Hub</a></li>
<li><a href="https://addons.mozilla.org/en-US/firefox/faq">FAQ</a></li>
<li><a href="https://forums.addons.mozilla.org">Forum</a></li>
</ul>
</div>
<div id="copyright">
<p id="footer-links">
<a href="http://mozilla.com/privacy-policy.html">Privacy Policy</a> |
<a href="http://mozilla.com/about/legal.html">Legal Notices</a> |
<a href="http://mozilla.com/legal/fraud-report/index.html">Report Trademark Abuse</a>
| <a href="https://addons.mozilla.org/z/en-US/developers/" class="mobile-link">View Mobile Site</a>
</p>
<p>
Except where otherwise <a href="http://mozilla.com/about/legal.html#site">noted</a>, content on this site is licensed under the <br> <a href="http://creativecommons.org/licenses/by-sa/3.0/"> Creative Commons Attribution Share-Alike License v3.0 </a> or any later version.
</p>
</div>
</div>
</div>
<script src="../../static-files/js/jquery.js" type="text/javascript"></script>
<script src="../../static-files/js/main.js" type="text/javascript"></script>
</body>
</html>