NativeWindow

  • Revision slug: Extensions/Mobile/API/NativeWindow
  • Revision title: NativeWindow
  • Revision id: 448237
  • Created:
  • Creator: imonlhec22
  • Is current revision? No
  • Comment

Revision Content

The NativeWindow object is only available to privileged code running on Firefox for Android, and is intended for use by Firefox for Android add-ons.

The NativeWindow object enables Firefox for Android add-ons to create user interface components.

NativeWindow is available as a property of the chrome window object. For example, if you use this template for initializing your extension, you can access it from the window argument passed into loadIntoWindow():

function loadIntoWindow(window) {
  if (!window)
    return;
  window.NativeWindow.toast.show("I'm starting!", "short");
}

The NativeWindow object enables developers of Firefox for Android add-ons to create UI components.

It supports the following components:

Add items to the main menu in Firefox for Android. See the menu API documentation.

/*
label: menu label
icon: file:// or data: URI for an icon
callback: JS function called when menu is tapped
returns a menu ID that can be used to remove the menu
*/
menuID = NativeWindow.menu.add(label, icon, callback);
NativeWindow.menu.remove(menuID);

doorhanger

Show and hide doorhanger notifications, also known as popup notifications. See the doorhanger API documentation.

/*
message: displayed text
value: string based tag
buttons: array of JS objects used to create buttons in the notification
tabID: tab associated with this notification
options: JS object that has 'persistence' and 'timeout' options
*/
NativeWindow.doorhanger.show(message, value, buttons, tabID, options);
NativeWindow.doorhanger.hide(value, tabID);

contextmenus

Add and remove context menu items. See the contextmenus API documentation.

/*
label: menu label
selector: JS object that has a 'matches(element)' function. Used to show the menu.
callback: JS function called when menu is tapped
returns a menu ID that can be used to remove the menu
*/
menuID = NativeWindow.contextmenu.add(label, selector, callback);
NativeWindow.contextmenu.add(menuID);

toast

Show Android toast notifications. See the toast API documentation.

/*
message: displayed text
duration: "short" or "long"; Used for alert timeout
*/
NativeWindow.toast.show(message, duration);

 

pageactions

Add and remove pageactions

/*
title: Pageaction title
icon: Icon image for the pageaction
clickCallback: Callback called when pageaction is clicked
longClickCallback: Callback called when pageaction is long pressed
*/
var aOptions = {
  title: "title",
  icon: "chrome://myaddon/skin/image.png",
  clickCallback: function() { },
  longClickCallback: function() { } (optional)
};

//Adding pageaction
var id = NativeWindow.pageactions.add(aOptions);

//Remove pageaction
NativeWindow.pageactions.remove(id);

Revision Source

<div class="note">
  The NativeWindow object is only available to privileged code running on <a href="/en/Mozilla/Firefox_for_Android" title="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android">Firefox for Android</a>, and is intended for use by Firefox for Android add-ons.</div>
<p>The <code>NativeWindow</code> object enables Firefox for Android add-ons to create user interface components.</p>
<p><code>NativeWindow</code> is available as a property of the chrome <code>window</code> object. For example, if you use <a href="/en/Extensions/Mobile/Initialization_and_Cleanup" title="https://developer.mozilla.org/en/Extensions/Mobile/Initialization_and_Cleanup">this template for initializing your extension</a>, you can access it from the <code>window</code> argument passed into <code>loadIntoWindow()</code>:</p>
<pre class="brush: js">
function loadIntoWindow(window) {
  if (!window)
    return;
  window.NativeWindow.toast.show("I'm starting!", "short");
}
</pre>
<p>The <code>NativeWindow</code> object enables developers of Firefox for Android add-ons to create UI components.</p>
<p>It supports the following components:</p>
<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Extensions/Mobile/API/NativeWindow/menu" title="https://developer.mozilla.org/en-US/docs/Extensions/Mobile/API/NativeWindow/menu">Menu items</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Extensions/Mobile/API/NativeWindow/doorhanger" title="https://developer.mozilla.org/es/docs/DOM/window.NativeWindow.doorhanger">Doorhanger notifications</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Extensions/Mobile/API/NativeWindow/contextmenus" title="https://developer.mozilla.org/en-US/docs/Extensions/Mobile/API/NativeWindow/contextmenus">Context menus items</a></li>
  <li><a class="external" href="http://developer.android.com/guide/topics/ui/notifiers/toasts.html" title="http://developer.android.com/guide/topics/ui/notifiers/toasts.html">Android toast alerts</a></li>
</ul>
<h2 id="menu">menu</h2>
<p>Add items to the main menu in Firefox for Android. See the <a href="/en/Extensions/Mobile/API/NativeWindow/menu" title="/en/Extensions/Mobile/API/NativeWindow/menu">menu</a> API documentation.</p>
<pre class="brush:js;">
/*
label: menu label
icon: file:// or data: URI for an icon
callback: JS function called when menu is tapped
returns a menu ID that can be used to remove the menu
*/
menuID = NativeWindow.menu.add(label, icon, callback);
NativeWindow.menu.remove(menuID);
</pre>
<h2 id="doorhanger">doorhanger</h2>
<p>Show and hide doorhanger notifications, also known as <a href="/en/Using_popup_notifications" title="https://developer.mozilla.org/en/Using_popup_notifications">popup notifications</a>. See the <a href="/en-US/docs/Extensions/Mobile/API/NativeWindow/doorhanger" title="/en-US/docs/Extensions/Mobile/API/NativeWindow/doorhanger">doorhanger</a> API documentation.</p>
<pre class="brush:js;">
/*
message: displayed text
value: string based tag
buttons: array of JS objects used to create buttons in the notification
tabID: tab associated with this notification
options: JS object that has 'persistence' and 'timeout' options
*/
NativeWindow.doorhanger.show(message, value, buttons, tabID, options);
NativeWindow.doorhanger.hide(value, tabID);
</pre>
<h2 id="contextmenus">contextmenus</h2>
<p>Add and remove context menu items. See the <a href="/en-US/docs/Extensions/Mobile/API/NativeWindow/contextmenus" title="/en-US/docs/Extensions/Mobile/API/NativeWindow/contextmenus">contextmenus</a> API documentation.</p>
<pre class="brush:js;">
/*
label: menu label
selector: JS object that has a 'matches(element)' function. Used to show the menu.
callback: JS function called when menu is tapped
returns a menu ID that can be used to remove the menu
*/
menuID = NativeWindow.contextmenu.add(label, selector, callback);
NativeWindow.contextmenu.add(menuID);
</pre>
<h2 id="toast">toast</h2>
<p>Show <a class="external" href="http://developer.android.com/guide/topics/ui/notifiers/toasts.html" title="http://developer.android.com/guide/topics/ui/notifiers/toasts.html">Android toast notifications</a>. See the <a href="/en-US/docs/Extensions/Mobile/API/NativeWindow/toast" title="/en-US/docs/Extensions/Mobile/API/NativeWindow/contextmenus">toast</a> API documentation.</p>
<pre class="brush:js;">
/*
message: displayed text
duration: "short" or "long"; Used for alert timeout
*/
NativeWindow.toast.show(message, duration);
</pre>
<p>&nbsp;</p>
<h2 id="pageactions">pageactions</h2>
<p>Add and remove pageactions</p>
<pre class="brush:js;">
/*
title: Pageaction title
icon: Icon image for the pageaction
clickCallback: Callback called when pageaction is clicked
longClickCallback: Callback called when pageaction is long pressed
*/
var aOptions = {
  title: "title",
  icon: "chrome://myaddon/skin/image.png",
  clickCallback: function() { },
  longClickCallback: function() { } (optional)
};

//Adding pageaction
var id = NativeWindow.pageactions.add(aOptions);

//Remove pageaction
NativeWindow.pageactions.remove(id);
</pre>
Revert to this revision