[Firefox 套件開發] 建立檔案選取對話匡並儲存檔案

//*建立檔案選取對話匡*/
const nsIFilePicker = Components.interfaces.nsIFilePicker;
var fp = Components.
           classes["@mozilla.org/filepicker;1"].
           createInstance(nsIFilePicker);

// 對話匡標題及開啟形式
fp.init(window, "儲存文件", nsIFilePicker.modeSave);
/*
常數                數值    描述
modeOpen        0     載入一個檔案或目錄
modeSave        1     儲存一個檔案或目錄
modeGetFolder    2     選擇一個資料夾目錄
modeOpenMultiple  3     載入多個檔案
*/


// 預設副檔名
fp.defaultExtension = 'txt';
// 預設檔名
fp.defaultString = 'file_name';
// 檔案類型過濾
fp.appendFilter("純文字檔","*.txt");

// 使用檔案類型過濾
fp.appendFilters(nsIFilePicker.filterHTML | nsIFilePicker.filterXML);
/*
常數               數值     描述
filterAll       0x01  符合 *.* 的副檔名
filterHTML      0x02  符合 *.html, *.htm 的副檔名
filterText      0x04  符合 *.txt 的副檔名
filterImages    0x08  符合 *.png, *.gif, *.jpg, *.jpeg 的副檔名
filterXML       0x10  符合 *.xml 的副檔名
filterXUL       0x20  符合 *.xul 的副檔名
filterApps      0x40  符合系統平台的應用程式類型
*/


// 顯示對話匡
var result = fp.show();

/*
常數              數值     描述
returnOK        0      當使用者點擊對話匡中的"確認"
returnCancel    1      當使用者點擊對話匡中的"取消"
returnReplace   2      當使用者選擇一個已存在的檔案並同意複寫
*/
if (result != nsIFilePicker.returnCancel) {
    //建立檔案資料流
    var stream = Components.
           classes["@mozilla.org/network/file-output-stream;1"].
           createInstance(Components.interfaces.nsIFileOutputStream);

    // 移除已存在檔案文件
    if(fp.file.exists()){fp.file.remove(true);}
    // 建立新檔案文件
    fp.file.create(fp.file.NORMAL_FILE_TYPE, 0666);
    
    // 開啟檔案資料流
    stream.init(fp.file, 0x02, 0x200, null);

    var str = "test string"
    
    // 將字串寫入檔案文件
    stream.write(str, str.length);
    
    // 關閉檔案資料流
    stream.close();
}

參考來源：
Open and Save Dialogs - MDC
nsIFilePicker - MDC
Writing textual data - MDC
File I/O - MDC
nsIOutputStream - MDC

[Firefox 套件開發] 建立檔案選取對話匡並讀取檔案

//*建立檔案選取對話匡*/
const nsIFilePicker = Components.interfaces.nsIFilePicker;
var fp = Components.
           classes["@mozilla.org/filepicker;1"].
           createInstance(nsIFilePicker);

// 對話匡標題及開啟形式
fp.init(window, "讀取文件", nsIFilePicker.modeOpen);
/*
常數                數值    描述
modeOpen        0     載入一個檔案或目錄
modeSave        1     儲存一個檔案或目錄
modeGetFolder    2     選擇一個資料夾目錄
modeOpenMultiple  3     載入多個檔案
*/


// 預設副檔名
fp.defaultExtension = 'txt';
// 預設檔名
fp.defaultString = 'file_name';
// 檔案類型過濾
fp.appendFilter("純文字檔","*.txt");

// 使用檔案類型過濾
fp.appendFilters(nsIFilePicker.filterHTML | nsIFilePicker.filterXML);
/*
常數               數值     描述
filterAll       0x01  符合 *.* 的副檔名
filterHTML      0x02  符合 *.html, *.htm 的副檔名
filterText      0x04  符合 *.txt 的副檔名
filterImages    0x08  符合 *.png, *.gif, *.jpg, *.jpeg 的副檔名
filterXML       0x10  符合 *.xml 的副檔名
filterXUL       0x20  符合 *.xul 的副檔名
filterApps      0x40  符合系統平台的應用程式類型
*/


// 顯示對話匡
var result = fp.show();

/*
常數              數值     描述
returnOK        0      當使用者點擊對話匡中的"確認"
returnCancel    1      當使用者點擊對話匡中的"取消"
returnReplace   2      當使用者選擇一個已存在的檔案並同意複寫
*/
if (result != nsIFilePicker.returnOK) {
 //建立檔案資料流
    var stream = Components.
           classes["@mozilla.org/network/file-input-stream;1"].
           createInstance(Components.interfaces.nsIFileInputStream);
    var cstream = Components.
           classes["@mozilla.org/intl/converter-input-stream;1"].
           createInstance(Components.interfaces.nsIConverterInputStream);

    // 開啟檔案資料流
    stream.init(fp.file, -1, 0, 0);
    // 設定檔案讀取編碼方式
    cstream.init(stream, "UTF-8", 0, 0);
    
    var templates='';
    let (str = {}) {
        // 讀取整個文件，並把它放在 str.value
        cstream.readString(-1, str); 
        templates = str.value;
    }
    
    // 顯示檔案內容
    alert(templates);
    
    
    // 關閉檔案資料流
    cstream.close();
    stream.close();    
}

參考來源：
Open and Save Dialogs - MDC
nsIFilePicker - MDC
Reading textual data - MDC
File I/O - MDC
nsIInputStream - MDC

[Firefox 套件開發] 取得當前的網頁 DOM 物件及視窗框架

/* 
 取得當前的網頁 DOM 物件，
 這等於平常在網頁中 JavaScript 的 document。
*/
var doc = window.content.document;
// or
var doc = window.top.getBrowser().contentDocument;

// 當要改變視窗的 URL 頁面時
doc.location = "http://www.google.com.tw/";

// 取得指定 ID 的 DOM 元素
var content = doc.getElementById("content");

/* 
 PS: 這裡的 window 是指整個瀏覽器，
     而非一般網頁中的 window，
     在開發時別造成混淆了。
*/



/* 取得所有的瀏覽匡，這個物件將會是所有分頁共用的 */
var browser = window.top.getBrowser();

// 當頁面加載結束時的事件
contentOnLoad=function(e){
    alert("onLoad");
    
    // 如果事件只需要執行一次，或動態註冊，記得在結束時註銷事件
    browser.removeEventListener("load",contentOnLoad,false);
};    
// 註冊事件
browser.addEventListener("load",contentOnLoad,false);

[Firefox 套件開發] CSS 延生屬性

在為了設定 broadcaster 中 window 的底色
無意見找到 Firefox 中 CSS 的延生屬性表
Mozilla CSS Extensions - MDC

當中有蠻多好玩得屬性質
雖然只限於 Mozilla 的瀏覽器

下面的屬性將會顯示你瀏覽器目前所使用的底色：

　-moz-Field　
　-moz-Dialog　
　Window　
　Highlight　

[Firefox 套件開發] 設立快捷鍵

在 Firefox 套件中要建立自己的快捷鍵是非常容易的，只要在 XUL 中設定需要的按鍵及事件的對應就可以了。

<?xml version="1.0"?>

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    <!-- 建立快捷鍵 -->
    <keyset>
        <key id="key1"
             modifiers="control"
             key="Q"
             oncommand="alert('crtl+Q')" />

        <key id="key2"
             modifiers="control alt"
             key="C"
             oncommand="alert('crtl+alt+C')" />

        <key id="key3"
             modifiers="shift control"
             key="C"
             oncommand="alert('shift+crtl+C')" />

        <key id="key4"
             keycode="VK_F6"
             oncommand="alert('F6')"/>

        <key id="key5"
             modifiers="shift control"
             key="B"
             command="broadcaster1" />
    </keyset>

</window>

屬性
command
型態：command Id
監測內容的命令來設置編號元素。

disabled
型態：Bool(true,false)
顯示的元素是否被禁用。如果因素設置為True ，該元素被禁用。disabled 的內容通常是繪製灰色文字。如果內容是 disabled，用戶沒有回應的行動，甚至沒有收件人的重點，指揮事件不會發生。

key
型態：字符(character)
觸發鍵的字母值，必要的屬性設置。

keycode
型態：鍵盤按鍵的代碼字串
鍵盤上不是每個按鍵都有字母值，如 F1,Enter,Back...等，這個屬性可用來代替 key 的設置，去設定特殊的按鍵。
下面是常用的按鍵代碼：

VK_CANCEL	VK_BACK	VK_TAB	VK_CLEAR
VK_RETURN	VK_ENTER	VK_SHIFT	VK_CONTROL
VK_ALT	VK_PAUSE	VK_CAPS_LOCK	VK_ESCAPE
VK_SPACE	VK_PAGE_UP	VK_PAGE_DOWN	VK_END
VK_HOME	VK_LEFT	VK_UP	VK_RIGHT
VK_DOWN	VK_PRINTSCREEN	VK_INSERT	VK_DELETE
VK_0	VK_1	VK_2	VK_3
VK_4	VK_5	VK_6	VK_7
VK_8	VK_9	VK_SEMICOLON	VK_EQUALS
VK_A	VK_B	VK_C	VK_D
VK_E	VK_F	VK_G	VK_H
VK_I	VK_J	VK_K	VK_L
VK_M	VK_N	VK_O	VK_P
VK_Q	VK_R	VK_S	VK_T
VK_U	VK_V	VK_W	VK_X
VK_Y	VK_Z	VK_NUMPAD0	VK_NUMPAD1
VK_NUMPAD2	VK_NUMPAD3	VK_NUMPAD4	VK_NUMPAD5
VK_NUMPAD6	VK_NUMPAD7	VK_NUMPAD8	VK_NUMPAD9
VK_MULTIPLY	VK_ADD	VK_SEPARATOR	VK_SUBTRACT
VK_DECIMAL	VK_DIVIDE	VK_F1	VK_F2
VK_F3	VK_F4	VK_F5	VK_F6
VK_F7	VK_F8	VK_F9	VK_F10
VK_F11	VK_F12	VK_F13	VK_F14
VK_F15	VK_F16	VK_F17	VK_F18
VK_F19	VK_F20	VK_F21	VK_F22
VK_F23	VK_F24	VK_NUM_LOCK	VK_SCROLL_LOCK
VK_COMMA	VK_PERIOD	VK_SLASH	VK_BACK_QUOTE
VK_OPEN_BRACKET	VK_BACK_SLASH	VK_CLOSE_BRACKET	VK_QUOTE
VK_HELP

keytext
型態：字串
鍵盤快捷鍵標籤，這段文字將顯示在設有快捷鍵的 menuitem 中，並串接在 label 屬性後面。

modifiers
型態：組合鍵清單
快捷鍵中的組合鍵。組合鍵以空格分隔的或逗號。key 是不存在的平台上，將被分配到其他 key。

• shift: Shift 鍵。
• alt: Alt 鍵。在Mac 上是 Option 鍵。因為在 Mac 上文本輸入特別的文字的 Alt+Letter 的組合被預約，與其他的 modifier 聯結被使用。
• meta: Meta 鍵。在 Mac 上是 Command 鍵。
• control: Ctrl(Control) 鍵。
• accel: 用戶的平台上的快捷鍵使用的鑰匙。通常成為使用的價值。
• access: menu 和其他的要素的訪問鍵。在Windows 上面是 Alt 鍵。與要素的 accesskey 聯結被使用。
• any:代表上述的全部，表示任意的 modifier key。

oncommand
型態：Script code
此事件處理程序被激活時，該命令要求。這是選擇一個菜單項時所發生的用戶命令或按下鍵盤快捷鍵分配給它。

參考來源：
key - MDC
keyset - MDC
firefox扩展开发(七) ： 键盘快捷键

[Firefox 套件開發] 預設樣式 (Style classes)

在 Mozilla Developer Center 中找到 Style classes 所列出的樣式，為了明確的瞭解詳細屬性，找了一下在 Firefox 中的原始碼，除了官網中所列出的樣式外，你也可以使用其他預設的樣式。

其他的預設樣式，可以將 C:\Program Files\Mozilla Firefox\chrome 下的 classic.jar 解壓縮，就可以看到許多的預設樣式，像 chrome://browser/skin/browser.css(C:\Program Files\Mozilla Firefox\chrome\classic\skin\classic\browser\browser.css) 中的 tabs-closebutton , bookmark-item 等等都是不錯用的樣式，可以多加利用。

/*=[ alert-icon ]==================*/
/*=[ error-icon ]==================*/
/*=[ message-icon ]==================*/
/*=[ question-icon ]==================*/
.message-icon,
.alert-icon,
.error-icon,
.question-icon {
    width: 32px;     height: 32px;
}
.message-icon { /*圖片不存在*/
    list-style-image: url("chrome://global/skin/icons/Message.png");
}
.alert-icon {
    list-style-image: url("chrome://global/skin/icons/Warning.png");
}
.error-icon {
    list-style-image: url("chrome://global/skin/icons/Error.png");
}
.question-icon {
    list-style-image: url("chrome://global/skin/icons/Question.png");
}

/*=[ chromeclass-toolbar ]==================*/
window[chromehidden~="menubar"] .chromeclass-menubar,
window[chromehidden~="directories"] .chromeclass-directories,
window[chromehidden~="status"] .chromeclass-status,
window[chromehidden~="extrachrome"] .chromeclass-extrachrome,
window[chromehidden~="location"] .chromeclass-location,
window[chromehidden~="location"][chromehidden~="toolbar"] .chromeclass-toolbar,
window[chromehidden~="toolbar"] .chromeclass-toolbar-additional{
    display: none;
}
prefwindow[chromehidden~="toolbar"] .chromeclass-toolbar{
    display: none;
}


/*=[ groove ]==================*/
separator.groove,
separator.groove[orient="horizontal"] {
    border-top: 1px solid ThreeDShadow;
    border-bottom: 1px solid ThreeDHighlight;
    height: 0px;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}
separator.groove[orient="vertical"] {
    border-left: 1px solid ThreeDShadow;
    border-right: 1px solid ThreeDHighlight;
    -moz-margin-start: 0.4em;
    -moz-margin-end: 0.4em;
}


/*=[ header ]==================*/
.header {
    font-weight : bold;
}
textbox.header {
    -moz-margin-start : 0;
}


/*=[ indent ]==================*/
.indent {
    -moz-margin-start : 23px;
}


/*=[ listcell-iconic ]==================*/
.listcell-iconic {
    -moz-binding: url("chrome://global/content/bindings/listbox.xml#listcell-iconic");
}
listcell[type="checkbox"].listcell-iconic {
    -moz-binding: url("chrome://global/content/bindings/listbox.xml#listcell-checkbox-iconic");
}


/*=[ listitem-iconic ]==================*/
.listitem-iconic {
    -moz-binding: url("chrome://global/content/bindings/listbox.xml#listitem-iconic");
}
listitem[type="checkbox"].listitem-iconic {
    -moz-binding: url("chrome://global/content/bindings/listbox.xml#listitem-checkbox-iconic");
}


/*=[ menuitem-iconic ]==================*/
menu.menu-iconic > .menu-iconic-left,
menuitem.menuitem-iconic > .menu-iconic-left {
    -moz-appearance: menuimage;
}
menu.menu-iconic > .menu-iconic-left > .menu-iconic-icon,
menuitem.menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
    /* reduce icon-text crowding */
    -moz-margin-start: -1px;
    -moz-margin-end: 1px;
}


/*=[ menuitem-non-iconic ]==================*/
menuitem.menuitem-non-iconic {
    -moz-binding: url("chrome://global/content/bindings/menu.xml#menubutton-item");
}


/*=[ monospace ]==================*/
.monospace {
    font-family : monospace;
}


/*=[ plain ]==================*/
.plain {
    margin: 0px !important;
    border: none;
    padding: 0px;
}

/* ::::: plain buttons ::::: */
button.plain {
    border: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
}

/* ::::: plain textbox ::::: */
textbox.plain {
    -moz-appearance: none !important;
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
}


/*=[ small-margin ]==================*/
.small-margin {
    margin : 1px 2px 1px 2px;
}


/*=[ statusbarpanel-iconic ]==================*/
/*=[ statusbarpanel-iconic-text ]==================*/
/*=[ statusbarpanel-menu-iconic ]==================*/
.statusbarpanel-iconic,  
.statusbarpanel-iconic-text, 
.statusbarpanel-menu-iconic {
    padding: 0px 1px 0px 1px;
}


/*=[ text-link ]==================*/
.console-row-code[selected="true"],
.console-row-content[selected="true"] > .console-row-file > .console-error-source > .text-link {
  color: inherit !important;
}
richlistitem[selected="true"] .text-link {
  color: inherit;
}

/* class for text with a 'link' appearance */
.text-link {
    color : blue;
    text-decoration : underline;
    border : 1px solid transparent;
}
.text-link:focus {
    color : red;
    border : 1px dotted -moz-DialogText;
}
.text-link:hover {
    cursor : pointer;
} 
.text-link:hover:active {
    color : red;
} 
.text-link[visited="true"] {
    color : purple;
}


/*=[ thin ]==================*/
/* thinner separators (50% size) */
separator.thin, separator.thin[orient="horizontal"] {
    height: 0.5em;
}
separator.thin[orient="vertical"] {
    width: 0.5em;
}


/*=[ tree-splitter ]==================*/
.tree-splitter {
    width: 0px;
    max-width: 0px;
    min-width: 0% ! important;
    min-height: 0% ! important;
    -moz-box-ordinal-group: 2147483646;
}


/*=[ treecol-image ]==================*/
.treecol-image {
    padding: 0px 1px;
}

列表外的其他樣式

/* inset areas */
.inset {
    border-left : 1px solid ThreeDShadow;
    border-top : 1px solid ThreeDShadow;
    border-right : 1px solid ThreeDHighlight;
    border-bottom : 1px solid ThreeDHighlight;
    margin : 0px 5px 5px 5px;
}


.box-inset {
    margin: 2px 4px;
    border: 2px solid;
    -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
    -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
    -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
    -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
    background-color: -moz-Field;
    color: -moz-FieldText;
} 


/* formatting */
.groove-top {
    border-top : 2px groove ThreeDFace; 
}
.groove-right {
    border-right : 2px groove ThreeDFace;
}
.groove-left {
    border-left : 2px groove ThreeDFace;
}
.groove-bottom {
    border-bottom : 2px groove ThreeDFace;
}


.outset {
    border-left : 1px solid ThreeDHighlight;
    border-top : 1px solid ThreeDHighlight;
    border-right : 1px solid ThreeDShadow;
    border-bottom : 1px solid ThreeDShadow;
}
.outset-top-bottom {
    border-top : 1px solid ThreeDHighlight;
    border-bottom : 1px solid ThreeDShadow;
} 


/* groove separators (0 padding, for dividing effects) */ 
separator.groove-thin {
    border-top: 1px solid ThreeDShadow;
    border-bottom: 1px solid ThreeDHighlight;
    height: 0px;
}
separator[orient="vertical"].groove-thin {
    border-left: 1px solid ThreeDShadow;
    border-right: 1px solid ThreeDHighlight;
}


.larger-text {
    font-size : larger;
}

.smaller-text {
    font-size : smaller;
}


.box-padded {
    padding : 5px;
} 


.spaced {
    margin : 3px 5px 4px 5px;
} 


.wizard-box {
    padding : 20px 44px 10px 44px;
} 


.caption-text {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    -moz-margin-start: 1px !important;
    -moz-margin-end: 2px !important;
}


.treecol-text {
    margin: 0px !important;
}