[Firefox add-ons]0003. Popup dialog box

In Firefox, a panel module is used to display a popup dialog box, and the contents of the panel are written in HTML. You can run content script on the panel, although the script in the Panel does not directly access the plugin code, but you can exchange information between the Panel script and the plug-in code. This time, we made an action button that will display the panel when clicked. There is a <textarea> element on the panel, and the,<textarea> content will be sent to the plugin code main program when the user presses the return key. The plug-in code main program outputs the log in the console.

Development steps

1. Initializing the project , The terminal window runs the following command.

mkdir DIALOGCD DIALOGCFX Init

2. Edit the Main.js file in the dialog project Lib directory.

var data = require ("Sdk/self"). data;//the construction Panel, loading//content from "text-entry.html" of the "Data" directory, and then loading the "get-text.js" script. var text_entry = require ("Sdk/panel"). Panel ({  contentURL:data.url ("text-entry.html"),  contentScriptFile:data.url ("Get-text.js")});// Create the button require ("Sdk/ui/button/action"). Actionbutton ({  ID: "Show-panel",  Label: "Show Panel",  icon: {    "+": "./icon-16.png",    "32": "./ Icon-32.png ",    " + ":"./icon-64.png "  },  Onclick:handleclick});//Displays the panel when the user taps the button. function Handleclick (state) {  text_entry.show ();} Text_entry.on ("Show", function () {  text_entry.port.emit ("Show");}); /listens for text-entered messages from the content script. The message body L is the text entered by the user. This implementation, we only display the log in the console. Text_entry.port.on ("text-entered", function (text) {  console.log (text);  Text_entry.hide ();});

3. Create a content script get-text.js file under the dialog Project Data directory　　

The user presses enter and sends a text-entered message to Main.js. The message body is the contents of the edit box. var TextArea = document.getElementById ("Edit-box"); Textarea.addeventlistener (' KeyUp ', function onkeyup (event) {  if (Event.keycode = =) {    //Remove the newline.    Text = TextArea.value.replace (/(\r\n|\n|\r)/gm, "");    Self.port.emit ("text-entered", text);    Textarea.value = ';  }}, False);//listen for the show event sent by the plug-in main program. Indicates that the panel will be displayed. Focus on the textarea so that the user can start typing directly. Self.port.on ("Show", Function OnShow () {  textarea.focus ();});

4. Create the Text-entry.html file under the dialog Project Data directory

5. Save the following image to the data directory
　　

6. Enter the dialog Project Run command
CFX Run

7. Click on the button, enter Hello Firefox, return.

8. Look at the terminal window, this way you will receive the content we have in the Firefox popup dialog box.


This is the end of the perfect.

 
 

  
  
 
   
Main.js: Plugin main program, where to create buttons and panels
 
   
Get-text.js: A content script that interacts with the panel content
 
   
Text-entry.html: The contents of the Panel, written by HTML
 
   
Icon-16.png,icon-32.png and Icon-64.png: Three icons of different sizes
 
  
 
 
Reference links

 
  
 
action button: https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action
Panel: Https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel
Toggle button: Https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle
This site article is for  baby bus SD. Team  Original, reproduced must be clearly noted: (the author's official website: Baby bus )
Reprinted from "Baby bus Superdo Team" original link: http://www.cnblogs.com/superdo/p/4843217.html
[Firefox add-ons]0003. Popup dialog box