mozilla

Compare Revisions

Extension Frequently Asked Questions

Change Revisions

Revision 504215:

Revision 504215 by wbamberg on

Revision 624685:

Revision 624685 by kmaglione on

Title:
Extension Frequently Asked Questions
Extension Frequently Asked Questions
Slug:
Mozilla/Add-ons/Extension_Frequently_Asked_Questions
Mozilla/Add-ons/Extension_Frequently_Asked_Questions
Tags:
"NeedsContent", "Extensions", "Add-ons", "Guide"
"NeedsContent", "Extensions", "Add-ons", "Guide"
Content:

Revision 504215
Revision 624685
n16    <h3 id="Debugging" name="Debugging">n
17      Debugging
18    </h3>
t20      You should <a href="/en/Setting_up_extension_development_ent17      <strong>TODO:</strong> Add content.
>vironment" title="en/Setting_up_extension_development_environment 
>">set development preferences</a> before attempting to debug your 
> extension. 
21    </p>
22    <p>
23      The <a href="/en/Venkman" title="en/Venkman">Venkman</a> Ja
>vaScript debugger may be useful in complex cases, remember to tur 
>n off the "Debug -&gt; Exclude Browser Files" option when working 
> on extension code. 
24    </p>
25    <h4 id="How_can_I_see_errors_in_my_code.3F" name="How_can_I_s
>ee_errors_in_my_code.3F"> 
26      How can I see errors in my code?
27    </h4>
28    <p>
29      After you <a href="/en/Setting_up_extension_development_env
>ironment" title="en/Setting_up_extension_development_environment" 
>>set the preference <strong>javascript.options.showInConsole</str 
>ong> to <strong>true</strong></a>, the errors will be reported to 
> the <a href="/en/Error_Console" title="en/Error_Console">Error C 
>onsole</a>. By logging all JavaScript errors into the console, it 
> becomes much easier to track down the bugs in your code. 
30    </p>
31    <h4 id="How_can_I_display_what_my_extension_is_doing.3F" name
>="How_can_I_display_what_my_extension_is_doing.3F"> 
32      How can I display what my extension is doing?
33    </h4>
34    <p>
35      You can use <code><a href="/en/DOM/window.alert" title="en/
>DOM/window.alert">alert()</a></code>, <code><a href="/en/DOM/wind 
>ow.dump" title="en/DOM/window.dump">dump()</a></code>, <code><a h 
>ref="/en/Components.utils.reportError" title="en/Components.utils 
>.reportError">Components.utils.reportError()</a></code>, or <a hr 
>ef="/en/nsIConsoleService" title="en/nsIConsoleService">the conso 
>le service</a> to display variable data and debugging text. You c 
>an also try to use the <a class="link-https" href="https://addons 
>.mozilla.org/en-US/firefox/216">Venkman JavaScript Debugger add-o 
>n</a>. 
36    </p>
37    <h4 id="Why_doesn.27t_my_script_run_properly.3F" name="Why_do
>esn.27t_my_script_run_properly.3F"> 
38      Why doesn't my script run properly?
39    </h4>
40    <p>
41      If your script doesn't function as expected, the first thin
>g you should do is check the Error Console (see <a href="#How_can 
>_I_see_errors_in_my_code.3F">above</a>). 
42    </p>
43    <p>
44      One common mistake is trying to access the DOM of a window 
>before it is fully loaded. This happens if you place the initiali 
>zation code at the top level of your script (i.e. outside of any  
>functions). The fix is to use a <code>load</code> event listener  
>to delay your code until the window has finished loading: 
45    </p>
46    <pre class="eval">
47function exampleBrowserStartup(event)
48{
49  // place your startup code here
50}
51window.addEventListener("load", exampleBrowserStartup, false);
52</pre>
53    <p>
54      If you see an error similar to "JavaScript error: <a class=
>"external" href="chrome://myextension/content/overlay.js" rel="fr 
>eelink">chrome://myextension/content/overlay.js</a>, line 47: mis 
>sing ; before statement", you're likely using JavaScript 1.7 feat 
>ures or syntax when your extension is being run under an earlier  
>version.&nbsp; To force your code to be run under Javascript 1.7, 
> you need to write: 
55    </p>
56    <pre>
57&lt;script type="application/x-javascript" src="overlay.js;versio
>n=1.7"/&gt; 
58</pre>
59    <h4 id="Accessing_the_document_of_a_webpage_doesn.27t_work" n
>ame="Accessing_the_document_of_a_webpage_doesn.27t_work"> 
60      Accessing the document of a webpage doesn't work
61    </h4>
62    <p>
63      To get the document of the current webpage from a browser.x
>ul overlay, you should use <code>content.document</code>, instead 
> of just <code>document</code> which is the document of the brows 
>er's window itself. See <a href="/en/Working_with_windows_in_chro 
>me_code#Content_windows" title="en/Working_with_windows_in_chrome 
>_code#Content_windows">Working with windows in chrome code</a> fo 
>r details. 
64    </p>
65    <p>
66      Also, by default <a href="/en/XPCNativeWrapper" title="en/X
>PCNativeWrapper">XPCNativeWrapper</a> prevents you from accessing 
> script-defined objects in the web page and doing some other thin 
>gs. 
67    </p>
68    <h4 id="I_cannot_initiate_an_XMLHttpRequest_from_my_extension
>" name="I_cannot_initiate_an_XMLHttpRequest_from_my_extension"> 
69      I cannot initiate an XMLHttpRequest from my extension
70    </h4>
71    <p>
72      If you try and get/send information with an extension throu
>gh an XMLHttpRequest, odds are you will need to go cross domain.  
>Normally this might be an issue, but as long as you execute the r 
>equest from a chrome window, you will be inside the security scop 
>e, and it will be allowed. 
73    </p>
74    <p>
75      You need to make sure that you are initializing the cross d
>omain XMLHttpRequest from JavaScript code that is referencing a X 
>UL window. If you try and execute the request in relation to the  
>browser content document, as opposed to the "document" of the XUL 
> window, you will receive a Permission Denied error. 
76    </p>
77    <h4 id="I_get_an_XML_parsing_error.2C_but_the_file_looks_fine
>.21" name="I_get_an_XML_parsing_error.2C_but_the_file_looks_fine. 
>21"> 
78      I get an XML parsing error, but the file looks fine!
79    </h4>
80    <p>
81      A common source of parsing errors (some red text with a ---
>----------^ underneath) is an &amp; or a &lt; character in your s 
>cript or an attribute value, which has special meaning in XML. Fo 
>r example: 
82    </p>
83    <pre class="eval">
84&lt;button oncommand="window.open('<span class="nowiki">http://ex
>ample.com/</span>q?param1=value<strong>&amp;param2</strong>=val2' 
>)"/&gt; 
85</pre>
86    <p>
87      or
88    </p>
89    <pre class="eval;">
90&lt;script&gt;function lesser(a,b) { return <strong>a &lt; b</str
>ong> ? a : b; }&lt;/script&gt; 
91</pre>
92    <p>
93      The problem can be solved in one of the following ways:
94    </p>
95    <ol>
96      <li>Replace the character with its non XML conflicting repr
>esentation (Ex: "&amp;" -&gt; "&amp;amp;", "&lt;" -&gt; "&amp;lt; 
>") 
97      </li>
98      <li>In case it's a text node, such as script, place CDATA t
>ags around it: 
99        <pre>
100&lt;script&gt;&lt;![CDATA[
101   function lesser(a,b) {
102     return a &lt; b ? a : b;
103   }
104 ]]&gt;&lt;/script&gt;
105</pre>
106      </li>
107      <li>Put your script in a separate file and include it, e.g.
>: 
108        <pre>
109&lt;script type="application/javascript" src="our.js"/&gt;
110</pre>
111      </li>
112    </ol>
113    <h3 id="Example_code" name="Example_code">
114      Example code
115    </h3>
116    <p>
117      The easiest way to find out what code you need to use in or
>der to do something useful is to find an extension (or part of Mo 
>zilla itself) that does it and look at its code. (The XPI and JAR 
> files use the ZIP format.) 
118    </p>
119    <p>
120      There is also some documentation. See <a href="/Special:Tag
>s?tag=Extensions&amp;language=en" title="Special:Tags?tag=Extensi 
>ons&amp;language=en">the list of extension-related articles on MD 
>C</a>, <a href="/en/Code_snippets" title="en/Code_snippets">Code  
>snippets</a>, and <a class="external" href="http://kb.mozillazine 
>.org/Category:Example_code">Example code page on MozillaZine</a>. 

Back to History