「套件開發指南 - Googlebar Lite」修訂間的差異
出自 MozTW Wiki
DelsiTbora(對話 | 貢獻) (http://steviestever.aboutus.vg/article552.html) |
DelsiTbora(對話 | 貢獻) (http://altatrin.my3gb.com/middletown-church.htm) |
||
行 1: | 行 1: | ||
+ | [http://altatrin.my3gb.com/middletown-church.htm middletown church of the nazarene] [http://altatrin.my3gb.com/pizza-buffalo.htm pizza buffalo grove il] [http://altatrin.my3gb.com/by-pass.htm by-pass] [http://altatrin.my3gb.com/mizuno.htm junko mizuno] [http://altatrin.my3gb.com/drag-racer-v3.htm drag racer v3 online game] | ||
[http://steviestever.aboutus.vg/article552.html mighty mighty bosstones music videos] [http://redtiebikini.ecv.vg/20080417-is-harry-on.htm is harry on the boat movie cast] [http://redtiebikini.ecv.vg/20080409-qvideo2.htm qvideo2] [http://redtiebikini.ecv.vg/20080414-o-zone-video.htm o zone video clip dragostea din tei] [http://redtiebikini.ecv.vg/20080407-lanni-barbie-videos.htm lanni barbie videos] | [http://steviestever.aboutus.vg/article552.html mighty mighty bosstones music videos] [http://redtiebikini.ecv.vg/20080417-is-harry-on.htm is harry on the boat movie cast] [http://redtiebikini.ecv.vg/20080409-qvideo2.htm qvideo2] [http://redtiebikini.ecv.vg/20080414-o-zone-video.htm o zone video clip dragostea din tei] [http://redtiebikini.ecv.vg/20080407-lanni-barbie-videos.htm lanni barbie videos] | ||
− | + | Ã¥ÂÂæÂÂ: [http://www.borngeek.com/firefox/toolbar-tutorial/ Creating a Firefox Toolbar Extension (Firefox 1.5)][å·²æÂÂæ¬Â] | |
− | + | ä½ÂèÂÂ
[http://www.borngeek.com/about/ Born Geek] | |
− | = | + | = Ã¥ÂÂ訠(Instruction) = |
− | + | éÂÂ份æÂÂÃ¥ÂÂå°Â說æÂÂå¦Âä½Â建章Firefox çÂÂå·¥åÂ
·åÂÂå¥Â件(æ¯æ´ 1.5 æÂÂæ´æ°çÂÂçÂÂæ¬)ã | |
− | + | éÂÂ份æÂÂ件æÂÂä¾Âå¥Â件å¦Âä½ÂéÂÂç¼çÂÂæ¦Âè¦ÂãÂÂå¿Â
è¦ÂçÂÂå·¥åÂ
·ãÂÂ以åÂÂ建ç«Âå·¥åÂ
·åÂÂçÂÂç´°ç¯ÂãÂÂå¥Â件éÂÂç¼æ¯ä¸Âé£çÂÂï¼ÂÃ¥ÂÂ管å¿Â
é ÂÃ¥Â
·åÂÂæÂÂäºÂåºç¤ÂçÂÂç¨Âå¼Âè¨Âè¨ÂçÂ¥èÂÂã | |
− | + | æÂÂä¸Â種æÂÂè¡Âæ¯æÂÂ建è°你å¿Â
é Âç¨Âå¾®çÂÂæÂÂçÂÂï¼ÂXMLãÂÂJavaScriptãÂÂCSSãÂÂéÂÂä¸ÂÃ¥ÂÂæÂÂè¡Âå¸ç¿Âèµ·ä¾Âé½ä¸Âé£ï¼ÂèÂÂä¸Â網路ä¸ÂæÂÂ許å¤Âä¸Âé¯çÂÂæÂÂå¸ã | |
− | Firefox 1.5 | + | Firefox 1.5 çÂÂå¨å¥Â件éÂÂç¼ä¸ÂæÂÂå¾Â大çÂÂæ¹åÂÂï¼ÂéÂÂÃ¥ÂÂçÂÂæ¬æ¯ÂÃ¥Â
ÂÃ¥ÂÂçÂÂçÂÂæ¾´容æÂÂ建ç«Âå¥Â件ã éÂÂ份æÂÂÃ¥ÂÂå©ç¨äºÂæ¹åÂÂçÂÂé¨份ï¼Âå¿Â
è¦ÂæÂÂï¼ÂæÂÂæÂÂæÂÂåºè®ÂÃ¥ÂÂçÂÂé¨份ãÂÂå¦ÂæÂÂä½ ç¼ç¾é¯誤çÂÂå°æ¹ï¼ÂæÂÂæ¯æÂÂä»»ä½Â建è°ï¼Âè«Â[http://www.borngeek.com/contact/ è¯絡ä½ÂèÂÂ
]ã |
− | = | + | = 第ä¸Âç« ï¼ÂæºÂÃ¥ÂÂéÂÂ姠(Getting Started) = |
− | == | + | == éÂÂå§Âä¹Âå (Before We Start)== |
− | + | å¨æÂÂÃ¥ÂÂéÂÂå§Â製ä½Â第ä¸Â份工åÂ
·åÂÂå¥Â件ä¹ÂÃ¥ÂÂï¼ÂæÂÂä¸ÂäºÂéÂÂ常æÂÂç¨çÂÂæ±西æ¯你å¿Â
é Âè¦ÂÃ¥Â
ÂçÂ¥éÂÂçÂÂã | |
− | === | + | === ä¸Âè¼ÂæÂÂå (Tutorial Downloads) === |
− | + | å¨éÂÂ份æÂÂÃ¥ÂÂçÂÂæÂÂå¾Âï¼ÂæÂÂÃ¥ÂÂå°Â建ç«Âä¸Âå [http://www.borngeek.com/firefox/googlebarlite/ Googlebar Lite] çÂÂç°¡åÂÂçÂÂæ‹ÂÂçºäºÂå°ÂéÂÂç¨ÂçÂÂå¸ç¿ÂæÂÂæÂÂ幫å©ï¼Âä½ å¯以ä¸Âè¼ÂéÂÂÃ¥ÂÂå·¥åÂ
·åÂÂçÂÂéÂÂç¼çÂÂæ‹ÂÂÃ¥Â
©ä»½å¯å¾Âå°çÂÂçÂÂæ¬@| |
− | * [http://www.borngeek.com/downloads/toolbar-tutorial/tuttoolbar.xpi Example Toolbar XPI] : | + | * [http://www.borngeek.com/downloads/toolbar-tutorial/tuttoolbar.xpi Example Toolbar XPI] : éÂÂæ¯æÂÂÃ¥ÂÂå°Âè¦Â建ç«ÂçÂÂå¥Â件çÂÂå®Âè£ÂçÂÂæ‹ |
− | * [http://www.borngeek.com/downloads/toolbar-tutorial/tuttoolbar.zip Example Toolbar Source Code]: | + | * [http://www.borngeek.com/downloads/toolbar-tutorial/tuttoolbar.zip Example Toolbar Source Code]: éÂÂ份 zip æªÂæ¡ÂÃ¥ÂÂ
å«建ç«Âå·¥åÂ
·åÂÂçÂÂÃ¥ÂÂå§Â碼ã |
− | + | 注æÂÂå°éÂÂ份 xpi æªÂæ¡Âä¹ÂÃ¥ÂÂ
å«äºÂÃ¥ÂÂå§Â碼ãÂÂæÂÂè¡Âä¸ÂèÂÂè¨Âï¼Âä½ åªè¦Âä¸Âè¼ xpi çÂÂæªÂæ¡Âï¼Â並ç¨ zip çÂÂ解å£Â縮ç¨Âå¼Â解é xpi æªÂï¼Â以åÂÂÃ¥Â
¶ä¸Âç jar æªÂãÂÂ第äºÂ份æªÂæ¡Âåªæ¯çºäºÂæ¹便èÂÂå·²ã | |
− | === | + | === æÂÂç¨çÂÂÃ¥ÂÂèÂÂæÂÂç» (Useful References) === |
− | + | æÂÂå¼·çÂÂ建è°你å°Âä¸ÂÃ¥ÂÂçÂÂ網åÂÂå åÂ
¥æ¸籤ï¼Âå¨æÂÂå¸ç¿Âå¥Â件éÂÂç¼çÂÂéÂÂç¨Âï¼ÂéÂÂäºÂ網é Âå°ÂæÂÂéÂÂ常çÂÂæÂÂ幫å©ï¼ÂæÂÂç¸信å°Âä½ ä¾Â說ä¹Âæ¯ãÂÂ(Ã¥ÂÂÃ¥ÂÂé Â
çºåÂÂä½ÂèÂÂ
æÂÂä¾Â) | |
− | * [http://xulplanet.com/references/elemref/ XUL Planet Element Reference]( | + | * [http://xulplanet.com/references/elemref/ XUL Planet Element Reference](è±) |
− | * [http://forums.mozillazine.org/viewforum.php?f=19 MozillaZine Extension Development Forum]( | + | * [http://forums.mozillazine.org/viewforum.php?f=19 MozillaZine Extension Development Forum](è±) |
− | * [http://lxr.mozilla.org/mozilla1.8.0/ Search the Firefox Source Code]( | + | * [http://lxr.mozilla.org/mozilla1.8.0/ Search the Firefox Source Code](è±) |
− | * [http://roachfiend.com/archives/2004/12/08/how-to-create-firefox-extensions/ roachfiend.com Extension Tutorial]( | + | * [http://roachfiend.com/archives/2004/12/08/how-to-create-firefox-extensions/ roachfiend.com Extension Tutorial](è±) |
− | * [http://developer.mozilla.org/en/docs/Building_an_Extension Building an Extension - Mozilla Developer Center]( | + | * [http://developer.mozilla.org/en/docs/Building_an_Extension Building an Extension - Mozilla Developer Center](è±) |
− | * [http://marvel.hit.edu.cn:8080/text/firefox/Hello%20World%20Firefox.htm | + | * [http://marvel.hit.edu.cn:8080/text/firefox/Hello%20World%20Firefox.htm Ã¥ÂÂæÂÂæ û Hello WorldâÂÂâÂÂéÂÂç¼你çÂÂ第ä¸ÂÃ¥ÂÂFirefoxæ´å±Â](ç°¡) |
− | * [http://blog.donews.com/limodou/category/35193.aspx?PageNumber=4 | + | * [http://blog.donews.com/limodou/category/35193.aspx?PageNumber=4 limodouçÂÂå¸ç¿Âè¨Âé - XUL](ç°¡) |
− | * [http://itart.wordpress.com/mozilla-ext/ The Art of IT | + | * [http://itart.wordpress.com/mozilla-ext/ The Art of IT û åºæ¼ Mozilla çÂÂæ´å±ÂéÂÂç¼](ç°¡) |
− | === | + | === å¿Â
éÂÂÃ¥Â
Âå¸ç¿Âç (Learning the Prerequisites) === |
− | + | å¦ÂæÂÂä¹ÂÃ¥ÂÂæÂÂæÂÂå°çÂÂï¼ÂFirefox å¥Â件éÂÂç¼éÂÂè¦ÂÃ¥Â
ÂçÂ¥éÂÂä¸Âé»ÂéÂÂæ¼ XMLãÂÂJavaScriptãÂÂÃ¥ÂÂCSS çÂÂæÂÂè¡ÂãÂÂéÂÂä¸ÂÃ¥ÂÂ主é¡Âé½æ¯ç¸ç¶容æÂÂäºÂ解çÂÂï¼ÂæÂÂä¹ÂæÂÂæÂÂä¾ÂäºÂä¸ÂäºÂéÂÂæ¼éÂÂä¸Âé Â
æÂÂè¡ÂçÂÂ說æÂÂã | |
* [http://www.w3schools.com/xml/xml_whatis.asp Learn XML] | * [http://www.w3schools.com/xml/xml_whatis.asp Learn XML] | ||
行 50: | 行 51: | ||
* [http://www.w3schools.com/css/css_intro.asp Learn CSS] | * [http://www.w3schools.com/css/css_intro.asp Learn CSS] | ||
− | == | + | == ä½ å°ÂæÂÂéÂÂè¦ÂçÂÂå·¥åÂ
· (Tools You Will Need) == |
− | + | çºäºÂè¨Âè¨Âå¥Â件ï¼Âä½ éÂÂè¦Âå¹¾åÂÂå·¥åÂ
·è»Âé«Âï¼ÂéÂÂäºÂè»Âé«Âé½æ¯åÂ
Âè²»å¯åÂÂå¾ÂçÂÂãÂÂæÂÂÃ¥ÂÂè¦Âè¨Âè¨ÂçÂÂå¹¾åÂÂæªÂæ¡Âé½æ¯æ¨ÂæºÂæÂÂÃ¥ÂÂæªÂãÂÂå æ¤ï¼Âä½ éÂÂè¦Âä¸ÂÃ¥ÂÂä¸Âé¯çÂÂæÂÂÃ¥ÂÂ編輯å¨ãÂÂæÂÂå¼·çÂÂ'''Ã¥ÂÂå°Â'''使ç¨é¡Âä¼¼ Microsoft Word çÂÂç¨Âå¼ÂãÂÂ網路ä¸ÂæÂÂä¸ÂäºÂÃ¥ÂÂåºçÂÂÃ¥Â
Âè²»ç¨Âå¼Âè¨Âè¨ÂæÂÂÃ¥ÂÂ編輯å¨ï¼ÂéÂÂäºÂ編輯å¨å°Âä½ æÂÂéÂÂ常大çÂÂ幫å©ï¼Âä¾Âå¦ÂèªåÂÂ縮æÂÂãÂÂ強調èªÂæ³ÂçÂÂçÂÂãÂÂå¹¾åÂÂÃ¥ÂÂæ¡è¿ÂçÂÂ編輯å¨åÂÂ
å« [http://www.crimsoneditor.com/ Crimson Editor]ãÂÂ[http://www.textpad.com/ TextPad]ãÂÂå [http://www.jcreator.com/ JCreator]ãÂÂ[http://www.emeditor.com/ EmEditor]ã | |
− | + | 第äºÂÃ¥ÂÂä½ æÂÂç¨å°çÂÂå·¥åÂ
·æ¯ zip æªÂçÂÂå£Â縮è»Âé«ÂãÂÂéÂÂç¶æÂÂÃ¥Â
¶ä»ÂéÂÂå¤ÂæÂÂç¨çÂÂå·¥åÂ
·ï¼ÂÃ¥ÂÂæ¯ [http://www.7-zip.org/ 7-Zip]ãÂÂå [http://www.rarlab.com/ WinRAR]ï¼Âä½ÂæÂÂÃ¥ÂÂ人æ¯使ç¨ [http://www.winzip.com/ WinZip]ãÂÂç¶å°Âè£Âå¥Â件æÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂç¨å°éÂÂÃ¥ÂÂå·¥åÂ
·ãÂÂå¦ÂæÂÂä½ æÂÂç®ÂÃ¥ÂÂå¾Âå¤Âå¥Â件çÂÂéÂÂç¼ï¼ÂæÂÂ建è°你æ¾æÂÂå½令åÂÂä»Âé¢çÂÂå£Â縮工åÂ
·ãÂÂ使ç¨å½令åÂÂå¯以è¼ÂæÂÂå°å°Âå°Âè£ÂéÂÂç¨ÂèªåÂÂÃ¥ÂÂï¼Âä¹ÂçÂÂä¸Â你大éÂÂçÂÂæÂÂéÂÂã | |
− | == | + | == æªÂæ¡ÂçµÂæ§Âä½Âå± (File Structure Layout) == |
− | + | å¥Â件éÂÂç¼éÂÂè¦Âç¹å®ÂçÂÂÃ¥Â
§é¨çµÂæ§Âï¼ÂæÂÂ以æÂÂÃ¥ÂÂå¿Â
é Â確å®ÂéÂÂä¸ÂæÂ¥æ¯æ£確çÂÂãÂÂå¦åÂÂï¼Âå°Âä¸ÂæÂÂç¼çÂÂä½Âç¨ãÂÂé¦ÂÃ¥Â
Âï¼ÂçºæÂÂÃ¥ÂÂçÂÂå¥Â件建ç«ÂæÂÂä¸Â層çÂÂç®éÂÂãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂ使ç¨ '''TutToolbar''' ç¶ä½Âç®éÂÂÃ¥ÂÂ稱(é¿åÂ
Â使ç¨空ç½æÂÂÃ¥ÂÂ)ãÂÂå¨éÂÂÃ¥ÂÂæ°建ç«Â好ç '''TutToolbar''' ç®éÂÂ裡ï¼ÂæÂÂÃ¥ÂÂéÂÂè¦ÂÃ¥ÂÂ建ç«Â第äºÂÃ¥ÂÂç®éÂÂãÂÂéÂÂÃ¥ÂÂç®éÂÂå½åÂÂçº '''chrome''' (使ç¨å°Â寫) ãÂÂæ¢ç¶æÂÂÃ¥ÂÂéÂÂ麼åÂÂæ¡建ç«Âç®éÂÂï¼Âé£就åÂÂä¾Â建ç«Â第ä¸ÂÃ¥ÂÂå§ï¼ÂéÂÂ次å¨ '''chrome''' ç®éÂÂ裡建ç«Âä¸ÂÃ¥ÂÂÃ¥ÂÂ稱çº '''content''' çÂÂç®éÂÂ(使ç¨å°Â寫)ãÂÂéÂÂ裡æ¯æÂÂÃ¥ÂÂçÂÂç®éÂÂçµÂæ§ÂçÂÂèµ·ä¾ÂçÂÂ樣åÂÂï¼ | |
<pre> | <pre> | ||
+- TutToolbar/ | +- TutToolbar/ | ||
行 64: | 行 65: | ||
+- content/ | +- content/ | ||
</pre> | </pre> | ||
− | + | æÂÂèÂÂ
æ¯ | |
<pre> | <pre> | ||
TutToolbar/ | TutToolbar/ | ||
行 71: | 行 72: | ||
</pre> | </pre> | ||
− | = | + | = 第äºÂç« ï¼Â建ç«Âæ¶æ§Â(Creating the Framework) = |
− | + | å¥Â件çÂÂæ¶æ§Âæ¯ç¨ä¾ÂÃ¥ÂÂ訴 Firefox å¥Â件æ¯å¦Âä½Â被延伸çÂÂï¼ÂæªÂæ¡ÂçÂÂçµÂæ§ÂãÂÂ被誰建ç«ÂãÂÂæÂÂæ¯å¥Â件çÂÂÃ¥Â
¨çÂÂå¯ä¸Â代èÂÂ(GUID)ãÂÂå¨ Firefox 1.5 éÂÂÃ¥ÂÂçÂÂæ¬ï¼Âå¥Â件éÂÂç¼å¨éÂÂÃ¥ÂÂé¨份æÂÂå¾Â大çÂÂè®ÂÃ¥ÂÂãÂÂÃ¥ÂÂæά 1.0.x çÂÂæ¯å¾Âæ²ÂéÂÂçÂÂæÂÂå·§ï¼Âå¨ 1.5 çÂÂå·²ç¶Âè®Âå¾Âæ´æ´æ½ÂãÂÂæ´簡å®ã | |
− | == | + | == å®Âè£Âæ¸Â
å® (Installer Manifest) == |
− | + | éÂÂ份æ¸Â
å®æ¯ç¨ä¾ÂæÂÂä¾ Firefox éÂÂæ¼å¥Â件çÂÂç´°ç¯ÂãÂÂæÂÂä¸ÂäºÂéÂÂè¦ÂçÂÂé Â
ç®æ¾置å¨éÂÂÃ¥ÂÂæªÂæ¡Âï¼ÂæÂÂ以æÂÂÃ¥ÂÂå¿Â
é Â確å®ÂéÂÂé¨份æ¯æ£確çÂÂãÂÂå¨你çÂÂæÂÂä¸Â層ç®éÂÂ裡ï¼Â建ç«Âä¸ÂÃ¥ÂÂæªÂæ¡ '''install.rdf''' ãÂÂç¶你建ç«Â好éÂÂÃ¥ÂÂæªÂæ¡Âï¼Âä½ æÂÂçÂÂå°éÂÂ樣çÂÂçµÂæ§Âï¼ | |
<pre> | <pre> | ||
+- TutToolbar/ | +- TutToolbar/ | ||
行 85: | 行 86: | ||
</pre> | </pre> | ||
− | + | å¨æÂÂÃ¥ÂÂéÂÂå·¥åÂÂï¼Âè®ÂæÂÂÃ¥ÂÂçÂÂçÂÂéÂÂÃ¥ÂÂç¯Âä¾ÂãÂÂæÂÂæÂÂæÂÂÃ¥ÂÂå¿Â
é Â編輯çÂÂé¨份已ç¶Â被çªÂ顯åºä¾ÂäºÂï¼Âæ²ÂæÂÂ被çªÂ顯çÂÂé¨份æ¯ä¸Âå¯以修æ¹çÂÂãÂÂæÂ¥èÂÂï¼ÂæÂÂÃ¥ÂÂä¾ÂçÂÂéÂÂ份æªÂæ¡ÂçÂÂÃ¥Â
§å®¹ï¼ÂæÂÂå°ÂæÂÂ解éÂÂæ¯ÂÃ¥ÂÂé¨份çÂÂç´°ç¯Âï¼ÂèÂÂä¸Âå¯以éÂÂå§Â編輯屬æ¼èª己çÂÂå¥Â件ã | |
<pre> | <pre> | ||
行 117: | 行 118: | ||
</pre> | </pre> | ||
− | + | å¨æÂÂä¸Âé¢第ä¸Âè¡Â表示éÂÂæ¯ä¸Â份 XML æ ¼å¼ÂçÂÂæªÂæ¡ÂãÂÂ第äºÂè¡Âï¼Â以 '''<RDF>''' éÂÂé ÂçÂÂï¼Âæ¯éÂÂ份æÂÂ件çÂÂåºæÂŒÂ
Âç´ (root element)ãÂÂå®ÂçÂÂ責任æ¯辨åÂ¥éÂÂé¨份æ¯ RDF (Resource Description Framework) æ ¼å¼ÂãÂÂä¸Âä¸ÂÃ¥ÂÂæ¨Â籤(Tag) '''<Description>''' Ã¥ÂÂ樣å°æ¯ç¨ä¾Â辨åÂ¥çºå®Âè£Âæ¸Â
å®ãÂÂç¾å¨ï¼Âä¹Âå³çÂÂæ±西é½çµÂæÂÂäºÂï¼Âè®ÂæÂÂÃ¥ÂÂçÂÂçÂÂ第ä¸Âé¨份å¿Â
é Âè¦Â編輯çÂÂï¼ | |
<pre> | <pre> | ||
<em:id>yourextension@yoursite.com</em:id> | <em:id>yourextension@yoursite.com</em:id> | ||
行 124: | 行 125: | ||
</pre> | </pre> | ||
− | + | 第ä¸ÂÃ¥ÂÂæÂÂÃ¥ÂÂéÂÂè¦ÂæÂÂå¿ÂçÂÂæ¯å¥Â件çÂÂèÂÂå¥èÂÂ碼ãÂÂå¨ Firefox 1.5 ä¹ÂÃ¥ÂÂçÂÂçÂÂæ¬ï¼Âå¿Â
é Â使ç¨åÂ
¨çÂÂå¯ä¸Â代èÂÂ(globally unique identifier)ï¼Âå³ GUIDãÂÂÃ¥ÂÂ管 GUID éÂÂæ¯被æ¯æ´çÂÂï¼Âæ°çÂÂæ ¼å¼ÂÃ¥ÂȾ´容æÂÂ使ç¨ãÂÂÃ¥ÂÂ
Ã¥ÂÂ
éÂÂè¦Â使ç¨你çÂÂå¥Â件åÂÂ稱ï¼Â@符èÂÂï¼ÂÃ¥ÂÂå ä¸Âä½ çÂÂ網ç«ÂçÂÂæÂÂä¸Â層網åÂÂãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂä¸Âï¼ÂæÂÂÃ¥ÂÂçºéÂÂÃ¥ÂÂå·¥åÂ
·åÂÂ使ç¨éÂÂÃ¥ÂÂå¼ '''tuttoolbar@borngeek.com''' ã | |
− | + | æÂ¥èÂÂæ¯å¥Â件çÂÂÃ¥ÂÂ稱(éÂÂæÂÂ顯示å¨å¥Â件管çÂÂå¡裡)ãÂÂå¨æÂÂÃ¥ÂÂçÂÂç¯Âä¾Â裡ï¼Â使ç¨ '''Toolbar Tutorial''' çºéÂÂÃ¥ÂÂå¥Â件çÂÂÃ¥ÂÂ稱ãÂÂ確å®ÂéÂÂÃ¥ÂÂÃ¥ÂÂ稱ä¸ÂÃ¥ÂÂ
å«çÂÂæᬏÂÂï¼Âå çºçÂÂæᬏÂÂæÂÂå®Âèª己å°Â屬çÂÂæ¨Â籤ãÂÂæÂÂÃ¥ÂÂè¦Â編輯çÂÂéÂÂÃ¥ÂÂæ¨Â籤就å¨ä¸Âä¸Âè¡ÂãÂÂæ¢ç¶éÂÂæ¯æÂÂÃ¥ÂÂ試åÂÂè¦ÂÃ¥ÂÂçÂÂ第ä¸ÂÃ¥ÂÂå·¥åÂ
·åÂÂå¥Â件ï¼Âè®ÂéÂÂÃ¥ÂÂå¼çº 1.0 ãÂÂè¦Â注æÂÂå°ï¼Âå¨çÂÂ實çÂÂæÂÂ
æ³Â裡ï¼Âç¶你ç¼表æ°çÂÂæÂÂå¥Â件æÂÂï¼Âå¿Â
é Âæ´æ°éÂÂÃ¥ÂÂå¼ï¼ÂæÂÂ述解è¯ç¨Âå¼Â(Scripter)å¨èªåÂÂæ´æ°éÂÂç¨ÂæÂÂä¸ÂæÂÂç¼çÂÂÃ¥ÂÂé¡ÂãÂÂå¨æÂÂçÂÂå¥Â件裡ï¼ÂæÂÂå©ç¨äºÂæÂÂè¿°èªÂæ³ (以 Perl 寫æÂÂ)ãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂçÂÂ第ä¸Âç« ï¼ÂæÂÂå°ÂæÂÂÃ¥ÂÂ訴你æÂÂå¦Âä½Â使ç¨ã | |
− | + | ä¸Âä¸ÂÃ¥ÂÂÃ¥ÂÂå¡Âä¹Âæ¯éÂÂÃ¥ÂÂå®Âè£Âæ¸Â
å®éÂÂè¦ÂçÂÂä¸Âé¨åÂÂï¼ÂæÂ¥èÂÂä¾ÂçÂÂçÂÂéÂÂé¨份@| |
<pre> | <pre> | ||
<em:targetApplication> | <em:targetApplication> | ||
行 138: | 行 139: | ||
</em:targetApplication> | </em:targetApplication> | ||
</pre> | </pre> | ||
− | + | éÂÂÃ¥ÂÂÃ¥ÂÂå¡Âæ¯ç¨ä¾ÂæÂÂ示å¥Â件è¦Âç¨å¨åªåÂÂç¨Âå¼ÂãÂÂå¨éÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂï¼ÂæÂÂÃ¥ÂÂè¦ÂéÂÂç¼ Firefox çÂÂå¥Â件ãÂÂå æ¤ï¼Â'''<em:id>''' éÂÂÃ¥ÂÂÃ¥Â
Âç´ æÂÂå®Â亠Firefox ç GUID ãÂÂä½ ä¸ÂæÂÂ該æ¹è®ÂéÂÂÃ¥ÂÂå¼ï¼Âå¦åÂÂï¼ÂæÂÂè®Âä½ çÂÂå¥Â件ç¡æ³Â被æ£確å°å®Âè£Âã | |
− | + | å¯ä¸ÂÃ¥Â
©åÂÂæÂÂÃ¥ÂÂéÂÂè¦Âè®ÂÃ¥ÂÂçÂÂï¼Âæ¯éÂÂÃ¥Â
©åÂÂÃ¥Â
Âç´ ï¼Â'''<em:minVersion>''' ã '''<em:maxVersion>''' ãÂÂéÂÂÃ¥Â
©åÂÂÃ¥Â
Âç´ æÂÂæÂÂå¥Â件é©åÂÂç¨å¨ Firefox çÂÂåªåÂÂçÂÂæ¬ ( minVersion æ¯æÂÂä½Âæ¯æ´çÂÂæ¬ï¼Âè maxVersion æ¯æÂÂé«Âæ¯æ´çÂÂæ¬) ã | |
− | + | å¨æÂÂÃ¥ÂÂçÂÂç¯Âä¾Âï¼ÂæÂÂÃ¥ÂÂæÂÂ使ç¨ 1.5 (minVersion) è 1.5.0.* ï¼ÂmaxVersion)ãÂÂå çºæÂÂÃ¥ÂÂå©ç¨ Firefox 1.5 çÂÂéÂÂç¼ç°å¢Âï¼ÂæÂÂ以ä¸Âå¯以æ minVersion è¨Âå®ÂçÂÂ毠1.5 éÂÂå°Âã | |
− | + | 注æÂÂå°ï¼Âä½ æÂÂ使ç¨çÂÂçÂÂæᬏÂÂå¿Â
é Âéµå®Âæ¨ÂæºÂÃ¥ÂÂå®ÂãÂÂèÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂï¼ÂãÂÂ1.5 Release Candidate 1ãÂÂæ¯ä¸Âè¡ÂçÂÂãÂÂç®å Firefox çÂÂçÂÂæ¬çµÂæ§Âæ¯ç¸ç¶å´謹çÂÂï¼Âå¨ Mozilla Developer Center çÂÂæÂÂç« [http://developer.mozilla.org/en/docs/Toolkit_version_format Toolkit Version Format] æÂÂ詳細çÂÂæÂÂè¿°ãÂÂæÂÂ建è°你è®ÂéÂÂç¯ÂæÂÂç« ï¼Â以äºÂ解æÂÂ樣çÂÂÃ¥ÂÂ串æ¯被åÂ
Â許çÂÂã | |
− | + | å¨å®Âè£Âæ¸Â
å®çÂÂæÂÂå¾Âï¼Âæ¯ç¨ä¾ÂæÂÂè¿°å¥Â件çÂÂè³ÂæÂÂå®Â義ï¼ÂæÂÂ稱ä¸Âç¹¼è³ÂæÂÂ(meta-data)ï¼ | |
<pre> | <pre> | ||
<!-- Optional Items --> | <!-- Optional Items --> | ||
行 153: | 行 154: | ||
</pre> | </pre> | ||
− | + | å°±å¦Â註éÂÂä¸Â樣ï¼ÂéÂÂäºÂÃ¥Â
Âç´ æ¯éÂÂå¿Â
è¦ÂçÂÂãÂÂ'''<em:creator>''' Ã¥Â
Â許å¥Â件ä½ÂèÂÂ
æÂÂæÂÂèª己çÂÂÃ¥ÂÂÃ¥ÂÂï¼ÂéÂÂ樣å¥人就çÂ¥éÂÂæ¯誰製ä½ÂéÂÂÃ¥ÂÂå¥Â件ãÂÂä¸Âä¸ÂÃ¥ÂÂï¼Â<em:description> Ã¥Â
Â許æÂÂÃ¥ÂÂå°ÂæÂÂÃ¥ÂÂçÂÂå¥Â件åÂÂä¸ÂäºÂ說æÂÂï¼ÂéÂÂÃ¥ÂÂ說æÂÂæÂÂ顯示å¨å¥Â件管çÂÂå¡ä¸ÂçÂÂå¥Â件åÂÂ稱åºÂä¸ÂãÂÂæÂÂå¾Âï¼Â'''<em:homepageURL>''' Ã¥Â
Â許æÂÂÃ¥ÂÂæÂÂæÂÂå¥人å¯以å¨åª裡æ¾å°æÂÂÃ¥ÂÂçÂÂå¥Â件ã | |
− | + | 注æÂÂå°ï¼ÂéÂÂäºÂä¸Âæ¯å¯ä¸ÂçÂÂè³ÂæÂÂå®Â義ï¼ÂÃ¥ÂÂæÂÂä¹ÂæÂÂ許å¤ÂÃ¥Â
¶ä»Âå¯é¸ç¨çÂÂé Â
ç®ãÂÂèÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂï¼ÂæÂÂÃ¥ÂÂÃ¥Â
Âç´ å¯以å¨å¥Â件管çÂÂå¡ä¸Â使ç¨æÂÂÃ¥ÂÂèª己çÂÂÃ¥ÂÂ示(icon)ã å¦ä¸ÂÃ¥ÂÂÃ¥Â
Âç´ åÂ
Â許æÂÂÃ¥ÂÂæÂÂå®Âèªè¨Âé¸é Â
çÂÂä½Âç½®æÂÂæ¯ãÂÂéÂÂæ¼ãÂÂçÂÂå°Â話è¦ÂçªÂãÂÂÃ¥Â
¨é¨å¯ç¨çÂÂÃ¥Â
Âç´ (ä¹Âå«åÂÂ屬æ§ properties )ï¼Âå¯以çÂÂçÂÂå¨Mozilla Developer Center ä¸ÂçÂÂæÂÂç« [http://developer.mozilla.org/en/docs/install.rdf Installer Manifests] ãÂÂæÂÂå¾Âä¸Âé»Âè¦Â注æÂÂçÂÂï¼ÂæÂÂæÂÂçÂÂÃ¥Â
Âç´ æ¯ä¸ÂéÂÂè¦ÂæÂÂçÂ
§é ÂåºÂçÂÂãÂÂä¹Âå°±æ¯說ï¼Âä½ å¯以å°Âå®ÂÃ¥ÂÂæ¾å¨æªÂæ¡Âä¸Âä»»ä½Âå°æ¹ï¼ÂÃ¥ÂÂ
Ã¥ÂÂ
è¦Â注æÂÂçÂÂæ¯ï¼Âå°Âå®ÂÃ¥ÂÂæ¾置å¨ '''<Description>''' è '''</Description>''' ä¹ÂéÂÂã | |
− | + | ç¾å¨ï¼ÂæÂÂÃ¥ÂÂäºÂ解äºÂå®Âè£Âæ¸Â
å®ï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂæÂÂå¾ÂçÂÂ樣åÂÂï¼ÂéÂÂÃ¥ÂÂçÂÂæ¬å°Â被使ç¨å¨éÂÂ份æÂÂÃ¥ÂÂä¸ÂãÂÂä½ å¯以ç´æÂ¥å°Âä¸Âé¢çÂÂé¨份ï¼Âè¤Â製å¨ '''install.rdf''' ä¸Âã | |
<pre> | <pre> | ||
<?xml version="1.0"?> | <?xml version="1.0"?> | ||
行 188: | 行 189: | ||
</pre> | </pre> | ||
− | == Chrome | + | == Chrome æ¸Â
å® (Chrome Manifest) == |
− | Chrome | + | Chrome æ¸Â
å®æ¯ Firefox 1.5 æÂÂéÂÂå§ÂæÂÂçÂÂãÂÂå¨ä¹ÂÃ¥ÂÂï¼ÂæÂÂæÂÂçÂÂè³ÂæÂÂ被è¨Âå®Âå¨åÂ
©åÂÂå°æ¹ï¼Âå®Âè£Âæ¸Â
å®(installer manifest)ãÂÂå contents.rdf ãÂÂèÂÂç¾å¨ï¼Âæ°çÂÂæ ¼å¼Â顯å¾Âæ´簡å®ãÂÂÃ¥ÂÂ次å¨æÂÂä¸Â層ç®éÂÂ建ç«Âå¦å¤Âä¸ÂÃ¥ÂÂæªÂæ¡ '''chrome.manifest''' ãÂÂä¸Âé¢æ¯æªÂæ¡ÂçµÂæ§ÂçÂÂèµ·ä¾ÂçÂÂ樣åÂÂï¼ |
<pre> | <pre> | ||
+- TutToolbar/ | +- TutToolbar/ | ||
行 199: | 行 200: | ||
</pre> | </pre> | ||
− | Chrome | + | Chrome æ¸Â
å®æ¯ç¨ä¾ÂÃ¥ÂÂ訴 Firefox ï¼ÂæÂÂÃ¥ÂÂçÂÂå¥Â件æÂÂä¾ÂçÂÂå°Âè£Â(package)èÂÂè¦Âè¼Â(overlay)ãÂÂå¨æÂÂÃ¥ÂÂéÂÂå§Â建ç«Âä¹ÂÃ¥ÂÂï¼ÂÃ¥Â
ÂçÂÂÃ¥ÂÂç¯Âä¾Âï¼ |
<pre> | <pre> | ||
content myextension chrome/content/ | content myextension chrome/content/ | ||
行 205: | 行 206: | ||
locale myextension en-US chrome/locale/en-US/ | locale myextension en-US chrome/locale/en-US/ | ||
skin myextension classic/1.0 chrome/skin/</pre> | skin myextension classic/1.0 chrome/skin/</pre> | ||
− | + | èÂÂæ©åÂ
Â使ç¨ç contents.rdf (éÂÂ常è¶Â
éÂÂ20è¡Â) æ¯Âè¼Âï¼Âç¾å¨çÂÂæ¹å¼Âè®Âå¾ÂéÂÂ常簡å®ï¼Â第ä¸Âè¡Â使ç¨你æÂÂå®ÂçÂÂå°Âè£ÂÃ¥ÂÂ稱ä¾ÂçÂȎÂÂï¼Â並æÂÂæÂÂæ¾置å¨ content ç®éÂÂãÂÂéÂÂå°ÂÃ¥Â
Â許 chrome è³ÂæºÂèÂÂå¥åÂÂ串(Uniform Resource Identifierï¼Â簡稱 URI) ï¼Â妠'''chrome://myextension/content/'''ï¼Âå¨æÂÂÃ¥ÂÂçÂÂå¥Â件層ç´Âä¸ÂæÂÂÃ¥ÂÂé©ç¶çÂÂå°æ¹ãÂÂ注æÂÂï¼Â'''å°Âè£ÂÃ¥ÂÂ稱åªè½以å°Â寫表示'''ï¼ÂÃ¥Â
¶ä»Âæ··åÂÂ大å°Â寫ï¼ÂæÂÂæ¯åÂ
¨é¨大寫çÂÂÃ¥ÂÂ稱é½æ¯ä¸ÂÃ¥Â
Â許çÂÂã | |
− | + | 注æÂÂå°ï¼Â'''content''' ç®éÂÂçÂÂä½Âç½®æ¯ç¸å°Âæ¼å¥Â件çÂÂæ ¹ç®éÂÂãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂï¼ÂæÂÂÃ¥ÂÂ使ç¨ '''tuttoolbar''' ç¶ä½Âå°Âè£ÂÃ¥ÂÂ稱ã | |
− | + | 第äºÂè¡ÂçÂȎ '''chrome://browser/content/browser.xul''' çÂÂè¦Âè¼Â(overlay)ï¼ÂéÂÂÃ¥Â
Â許你æ°å¢ÂæÂÂä¿®æ¹ Firefox 主è¦ÂçªÂçÂÂ使ç¨èÂÂ
ä»Âé¢(user interface)ã | |
− | + | å¨ä¸Âé¢çÂÂç¯Âä¾Âï¼Â'''chrome://myextension/content/overlay.xul''' æÂÂå®ÂäºÂè¦Âè¼Â(overlay)çÂÂXUL æªÂæ¡Âã | |
− | + | æÂÂå¥話說ï¼Âä½Âæ¼å¥Â件丠content ç®éÂÂç overlay.xul æªÂæ¡Âï¼Âæ¯æÂÂÃ¥ÂÂå°Âè¦Âæ°å¢ÂçÂÂ使ç¨èÂÂ
ä»Âé¢(å·¥åÂ
·åÂÂ)ãÂÂå¨éÂÂÃ¥ÂÂé¨份ï¼ÂæÂÂÃ¥ÂÂè¦Â使ç¨çÂÂå¼çº '''chrome://tuttoolbar/content/tuttoolbar.xul''' ã | |
− | + | ä¸Âä¸Âè¡Â說æÂÂå°åÂÂÃ¥ÂÂå¦Âä½Â建ç«Â(how a locale can be created)ãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂä¸Âï¼ÂæÂÂÃ¥ÂÂä¸Âè¨Âè¨Âå°åÂÂÃ¥ÂÂ(éÂÂç¶éÂÂç¨Âå¾Âç°¡å®)ï¼ÂéÂÂå°Âå¨æªä¾ÂÃ¥ÂÂÃ¥ÂÂè¨Âè«Âã | |
− | + | æÂÂå¾Âä¸Âè¡Âè¨Âå®ÂäºÂé¢æ¿(skin)ï¼ÂæÂÂÃ¥ÂÂå°Â使ç¨éÂÂÃ¥ÂÂæÂÂå·§ä¾Âç¾ÂÃ¥ÂÂæÂÂÃ¥ÂÂçÂÂå·¥åÂ
·åÂÂãÂÂç¾å¨ï¼ÂÃ¥Â
ÂçÂ¥éÂÂå®Âï¼ÂæÂÂÃ¥ÂÂå°Âå¨第äºÂç« åÂÂÃ¥ÂÂä¾Âè¨Âè«ÂéÂÂé»Âã | |
− | + | ä¸ÂÃ¥ÂÂé½å¾Âç°¡å®ï¼Âä¸Âæ¯åÂÂï¼Âä¸Âé¢æ¯æÂÂÃ¥ÂÂå°ÂæÂÂ使ç¨ç chrome æ¸Â
å®ï¼ÂéÂÂåªæ¯åÂÂæÂÂÃ¥ÂÂï¼Âä¹Âå¾ÂæÂÂÃ¥ÂÂå°ÂæÂÂå åÂ
¥é¢æ¿çÂÂè³Âè¨ÂãÂÂÃ¥ÂÂä¸Â次ï¼Âå°Âä¸Âé¢çÂÂç¨Âå¼Â碼è¤Â製å°æÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂ建ç«Âç '''chrome.manifest''' ã | |
<pre> | <pre> | ||
content tuttoolbar chrome/content/ | content tuttoolbar chrome/content/ | ||
行 223: | 行 224: | ||
</pre> | </pre> | ||
− | + | ç¾å¨æ¶æ§Âå·²ç¶Âå¯以äºÂï¼ÂæÂ¥èÂÂè®ÂæÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂäºÂæÂÂ趣çÂÂäºÂå§@| |
− | = | + | = 第ä¸Âç« ï¼Â建æ§Âå·¥åÂ
·å (Structuring the Toolbar) = |
− | Firefox | + | Firefox å¥Â件çÂÂ使ç¨èÂÂ
ä»Âé¢é¨份æ¯使ç¨ XUL æÂÂè¡ (é³ï¼Âzool)ï¼ÂéÂÂæ¯ä¸Â種ç¨ä¾Âè¨Âè¨Â使ç¨èÂÂ
ä»Âé¢çÂÂæ¨Â示èªÂè¨ÂãÂÂXUL å¯以æ³æÂÂæ¯ä¸Â種 XML çÂÂ調å³æÂÂ(æÂÂæ¨æÂÂéÂÂå åÂÂè½çÂÂ)ï¼ å®Âä¸ÂéÂÂæ¯使ç¨é Âè¨ÂÃ¥Â
Âç´ ç XML (ä¹Âå«å widgets)ãÂÂ使ç¨ XUL çÂÂ好èÂÂï¼Âæ¯å çºå®Â使ç¨äºÂ'''Ã¥ÂÂæÂ
Âè¦Âè¼Â(dynamic overlays)'''çÂÂæÂÂè¡ÂãÂÂÃ¥ÂÂæÂ
Âè¦Âè¼ÂæÂÂè¡Âå¯以è®ÂéÂÂç¼èÂÂ
'''ä¸ÂéÂÂè¦Â'''æ¹è®ÂÃ¥ÂÂæ¬ä»Âé¢çÂÂç¨Âå¼Â碼çÂÂæÂÂ
æ³Âä¸Âï¼Âå»修æ¹è¦ÂçªÂçÂÂ使ç¨èÂÂ
ä»Âé¢ãÂÂå¨ä¸ÂéÂÂæ´åÂÂÃ¥ÂÂå§Âç¨Âå¼Â碼çÂÂæÂÂ
æ³Âä¸Âï¼Âå¯以è®ÂæÂÂÃ¥ÂÂå°Â注æ¼è¨Âè¨ÂæÂÂÃ¥ÂÂçÂÂå¥Â件ï¼ÂèÂÂä¸Âç¨æÂÂå¿ÂéÂÂè¦ÂéÂÂè¤ÂéÂÂç¼çÂÂÃ¥ÂÂé¡ÂãÂÂå¨éÂÂÃ¥ÂÂç« ç¯Âï¼ÂæÂÂÃ¥ÂÂè¦Âä¾ÂçÂÂçÂÂè¨Âè¨Âå·¥åÂ
·åÂÂç XUL å¿Â
è¦Âæ¨Â示ãÂÂè¨Âä½Âï¼ÂXUL Ã¥ÂÂ
Ã¥ÂÂ
æ¯ç¨ä¾Â建æ§Âå·¥åÂ
·åÂÂèÂÂå·²ãÂÂçºäºÂè®Âå·¥åÂ
·åÂÂå¯以éÂÂä½Âï¼ÂæÂÂÃ¥ÂÂå¿Â
é Â使ç¨ JavaScript ï¼ÂéÂÂé¨份å°Âå¨第åÂ
Âç« æÂÂå°ã |
− | + | å¨ '''content''' ç®éÂÂ裡ï¼Â建ç«Âä¸ÂÃ¥ÂÂæªÂÃ¥ÂÂçº '''tuttoolbar.xul''' çÂÂæªÂæ¡ÂãÂÂå¨你建ç«Â好ä¹Âå¾Âï¼Âç®éÂÂçÂÂçµÂæ§ÂæÂÂæ¯éÂÂ樣@| |
<pre> | <pre> | ||
+- TutToolbar/ | +- TutToolbar/ | ||
行 238: | 行 239: | ||
+- tuttoolbar.xul</pre> | +- tuttoolbar.xul</pre> | ||
− | + | ç¾å¨ï¼ÂæÂÂÃ¥ÂÂå·²ç¶Â建ç«Â好éÂÂÃ¥ÂÂæªÂæ¡Âï¼Âå¯以éÂÂè¡Âå°éÂÂå§Âè¨Âè«ÂÃ¥Â
§å®¹ãÂÂé¨èÂÂé²è¡ÂçÂÂèÂ
³æÂ¥ï¼ÂæÂÂæÂÂå°ÂæªÂæ¡ÂçÂÂæÂÂæÂÂÃ¥Â
§å®¹ï¼Âä¸ÂæÂ¥ä¸ÂæÂ¥å°ä»Âç´¹ãÂÂéÂÂæÂÂè®ÂéÂÂç¨ÂçÂÂèµ·ä¾Âæ´簡å®ï¼Âå¨éÂÂç« ç¯ÂçÂÂæÂÂå¾Âï¼ÂéÂÂÃ¥ÂÂæªÂæ¡ÂæÂÂç¸ç¶åÂ¥åÂ
¨ã | |
− | + | å çº XUL åªæ¯ä¸Â種 XML çÂÂ調å³æÂÂï¼ÂæÂÂ以第ä¸Âè¡Âå¿Â
é Âæ¯使ç¨ XML çÂÂ宣åÂÂï¼ | |
<pre><?xml version="1.0"?></pre> | <pre><?xml version="1.0"?></pre> | ||
− | + | ç¾å¨ï¼Â宣åÂÂéÂÂæ¯ä¸Âå XML çÂÂæªÂæ¡Âä¹Âå¾Âï¼ÂæÂÂÃ¥ÂÂå°±å¯以éÂÂå§ÂèÂÂç± '''overlay''' Ã¥Â
Âç´ è¨Âè¨Âè¦Âè¼ÂäºÂãÂÂéÂÂÃ¥ÂÂÃ¥Â
Âç´ å°ÂæÂÂæ¯éÂÂæ´份æÂÂ件çÂÂæ ¹åÂ
Âç´ ãÂÂæÂÂå¥話說ï¼ÂæÂÂæÂÂÃ¥Â
¶ä»ÂçÂÂÃ¥Â
Âç´ å¿Â
é Âå¨ <overlay> è </overlay> ä¹ÂéÂÂãÂÂéÂÂæ¯ '''overlay''' çÂÂèµ·ä¾ÂçÂÂ樣åÂÂï¼ | |
<pre> | <pre> | ||
<overlay id="TutTB-Overlay" | <overlay id="TutTB-Overlay" | ||
行 250: | 行 251: | ||
</overlay></pre> | </overlay></pre> | ||
− | + | éÂÂÃ¥ÂÂÃ¥Â
Âç´ æÂÂÃ¥Â
©åÂÂ屬æ§ï¼Â'''id''' è '''xmlns''' ãÂÂéÂÂè· HTML é¡Âä¼¼ï¼Â'''id''' çÂÂå¼'''å¿Â
é Âæ¯å¯ä¸Â'''çÂÂãÂÂæ´éÂÂè¦ÂçÂÂæ¯ï¼ÂéÂÂä¹Âå¿Â
é Âæ¯'''æ´åÂÂçÂÂ覽å¨'''å¯ä¸ÂçÂÂå¼ãÂÂéÂÂ裡æÂÂä¸ÂÃ¥ÂÂå¯以è®Â你確å®ÂæÂÂ使ç¨ç ID æ¯å¯ä¸ÂçÂÂæ¹æ³ÂãÂÂä¾Âå¦Âï¼Âä¸Âé¢çÂÂç¯Âä¾ÂãÂÂä½ å¯以注æÂÂå°æÂÂ使ç¨亠'''TutTB''' éÂÂé ÂçÂÂÃ¥ÂÂç¼ä¾Âå®Â義 id 屬æ§çÂÂå¼ãÂÂ使ç¨符åÂÂä½ çÂÂå¥Â件åÂÂ稱éÂÂé ÂçÂÂÃ¥ÂÂç¼ï¼ÂéÂÂæÂÂ使 ID æ¯å¯ä¸ÂçÂÂå¯è½æ§æÂÂé«ÂãÂÂ並ä¸Â注æÂÂå°ï¼Â實éÂÂçÂÂå¼æ¯ä¸ÂéÂÂè¦ÂÃ¥ÂÂ
å« overlay çÂÂÃ¥ÂÂç¼ï¼ÂæÂÂéÂÂ麼åÂÂæ¯æ¹便æÂÂ追蹤æÂÂ使ç¨çÂÂÃ¥ÂÂ稱æ¯åÂÂä»Â麼ç¨çÂÂã | |
− | + | 第äºÂÃ¥ÂÂ屬æ§ï¼Â'''xmlns'''ï¼Âç¨ä¾ÂæÂÂå®Â使ç¨æ¼è¦Âè¼ÂçÂÂå½åÂÂ空éÂÂãÂÂæ¢ç¶éÂÂæ¯ XUL æÂÂ件ï¼ÂæÂÂÃ¥ÂÂå¿Â
é Âå®Â義 XUL çÂÂå½åÂÂ空éÂÂï¼ÂéÂÂæ¯你æÂÂ'''ä¸Âç´'''ç¨å°çÂÂå¼ã | |
− | == | + | == å·¥åÂ
·ç®±èÂÂå·¥åÂ
·å (The Toolbox and Toolbar) == |
− | + | æÂÂæÂÂçÂÂå·¥åÂ
·åÂÂæÂÂ該被éÂÂä¸Âå¨工åÂ
·ç®±ä¸ÂãÂÂæÂÂÃ¥ÂÂ使ç¨ '''toolbox''' Ã¥Â
Âç´ ä¾ÂæÂÂå®Âä¸ÂÃ¥ÂÂå·¥åÂ
·ç®±(è¨Âä½Âï¼ÂéÂÂÃ¥ÂÂÃ¥Â
Âç´ å¿Â
é Â被æ¾置å¨ '''overlay''' ä¹ÂéÂÂãÂÂ)ï¼ | |
<pre> | <pre> | ||
<toolbox id="navigator-toolbox"> | <toolbox id="navigator-toolbox"> | ||
</toolbox></pre> | </toolbox></pre> | ||
− | + | 注æÂÂå°ï¼ÂéÂÂå id 屬æ§æÂÂä¸ÂÃ¥ÂÂé Âè¨Âå¼ï¼Â'''navigator-toolbox''' ã éÂÂÃ¥ÂÂç¹å®ÂçÂÂå¼表示çº Firefox è¦ÂçªÂä¸Â主è¦ÂçÂÂå·¥åÂ
·ç®±åÂ
Âç´ ï¼Âè·ÂçÂÂ覽工åÂ
·åÂÂãÂÂé¸å®åÂÂãÂÂ網åÂÂÃ¥ÂÂï¼ÂæÂÂæ¯åÂ
¶ä»Âé¡Âä¼¼çÂÂæ§å¶é¸é Â
ä¸Â樣ãÂÂèÂÂç±æÂÂå®ÂéÂÂÃ¥ÂÂç¹åÂ¥çÂÂå·¥åÂ
·åÂÂï¼ÂæÂÂÃ¥ÂÂå¯以確å®ÂéÂÂÃ¥ÂÂå·¥åÂ
·åÂÂæÂÂèÂÂÃ¥Â
¶ä»ÂçÂÂå·¥åÂ
·åÂÂé æÂÂå¨ä¸Âèµ·ãÂÂæÂÂ建è°你總æ¯è®Âä½ çÂÂå·¥åÂ
·åÂÂæ¾å¨éÂÂÃ¥ÂÂç¹å®ÂçÂÂå·¥åÂ
·ç®±ä¸Âï¼ÂéÂÂä¸Âåªè®Âä½ æÂÂçÂÂèµ·ä¾Âä¸Âè´çÂÂå·¥åÂ
·åÂÂï¼Âä¹Âå¯以è®Âä½ å¨ ãÂÂ檢è¦Â>å·¥åÂ
·åÂÂã ä¸Âï¼Âå¿«éÂÂå°å°Âä½ çÂÂå·¥åÂ
·åÂÂé±èÂÂæÂÂæ¯顯示ã | |
− | + | è®ÂæÂÂÃ¥ÂÂå°Â注æÂÂÃ¥ÂÂæ¾åÂÂå° '''toolbar''' Ã¥Â
Âç´ ï¼ÂæÂÂÃ¥ÂÂæÂÂå°ÂéÂÂÃ¥ÂÂÃ¥Â
Âç´ æ¾å¨ '''toolbox''' ä¹Âä¸ÂãÂÂçÂÂçÂÂéÂÂÃ¥ÂÂç¯Âä¾Âï¼ | |
<pre> | <pre> | ||
<toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" | <toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" | ||
行 270: | 行 271: | ||
</toolbar></pre> | </toolbar></pre> | ||
− | + | è®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂéÂÂÃ¥ÂÂÃ¥Â
Âç´ çÂÂ屬æ§@| |
− | * '''toolbarname''' - | + | * '''toolbarname''' - éÂÂÃ¥ÂÂÃ¥Â
Âç´ æÂÂå®Âå¥Â件çÂÂÃ¥ÂÂ稱(éÂÂæÂÂæ¯你å¨ãÂÂ檢è¦Â>å·¥åÂ
·åÂÂãÂÂçÂÂå°çÂÂæÂÂÃ¥ÂÂ)ã |
− | * '''accesskey''' - | + | * '''accesskey''' - 給éÂÂÃ¥ÂÂå·¥åÂ
·åÂÂæÂÂå®ÂÃ¥ÂÂæ¯Âï¼Âç¨ä¾Âç¶ä½Âå¿«éÂÂéµ使ç¨ãÂÂå¨éÂÂÃ¥ÂÂå·¥åÂ
·åÂÂæÂÂÃ¥ÂÂä¸Âï¼ÂæÂÂÃ¥ÂÂ使ç¨大寫ç T ãÂÂéÂÂç¶éÂÂæ¯éÂÂå¿Â
è¦ÂçÂÂ屬æ§ï¼ÂéÂÂæ¯強çÂÂ建è°你使ç¨å®Âï¼ÂéÂÂè½è®Â使ç¨èÂÂ
åªè¦Âç¨快éÂÂéµ就è½éÂÂÃ¥ÂÂæÂÂéÂÂéÂÂä½ çÂÂå·¥åÂ
·åÂÂã |
− | * '''class''' - | + | * '''class''' - çº工åÂ
·åÂÂæÂÂå®Âç¹å®ÂçÂÂ樣å¼Âé¡Âå¥ãÂÂé Âè¨Âå¼ '''chromeclass-toolbar''' æ¯ç¨ä¾Âè¦Âç¯Âå·¥åÂ
·åÂÂ顯示模å¼ÂçÂÂé¡Âå¥ï¼ÂÃ¥ÂÂ樣å°ï¼ÂéÂÂæ¯建è°使ç¨çÂÂéÂÂå¿Â
è¦Â屬æ§ã |
− | * '''context''' - | + | * '''context''' - æÂÂå®Âç¶å¨工åÂ
·åÂÂä¸ÂæÂÂå³éµæÂÂï¼ÂæÂÂ顯示çÂÂå·¥åÂ
·åÂÂé¸å®(context menu)ãÂÂä½ å¯以æÂÂä¾Âä½ çÂÂé¸å® ID å¼ï¼ÂæÂÂæ¯使ç¨ '''toolbar-context-menu''' ä¾Âå°Âé¸å®æ¾置å¨ãÂÂ檢覠> å·¥åÂ
·åÂÂãÂÂã |
− | * '''hidden''' - | + | * '''hidden''' - æÂÂå®Âå·¥åÂ
·åÂÂæ¯å¦é±èÂÂãÂÂé Âè¨ÂçÂÂæÂÂ
æ³Âä¸Âï¼ÂæÂÂÃ¥ÂÂè¦Âè®Â使ç¨èÂÂ
çÂÂè¦ÂæÂÂÃ¥ÂÂçÂÂå·¥åÂ
·åÂÂï¼ÂæÂÂ以è¨Âå®ÂéÂÂÃ¥ÂÂå¼çº false (ç¸åÂÂçº ture )ã |
− | * '''persist''' - This attribute is a space separated list of attributes that should persist across browser sessions. | + | * '''persist''' - This attribute is a space separated list of attributes that should persist across browser sessions. å¨ä¸Âé¢çÂÂç¯Âä¾Âï¼ÂæÂÂ使ç¨ hidden ï¼Âç¨ä¾ÂÃ¥ÂÂ訴 Firefox å¨ sessions è¨Âä½Âå·¥åÂ
·åÂÂçÂÂé±èÂÂçÂÂæÂ
ÂãÂÂ注æÂÂå°ï¼Âå¦ÂæÂÂä½ çÂÂå·¥åÂ
·åÂÂæ²ÂæÂÂ使ç¨ id 屬æ§ï¼Âå persist 屬æ§ä¸ÂæÂÂç¼çÂÂä½Âç¨ï¼ÂæÂÂ以è¦Â確å®Âä½ æÂÂçº你çÂÂå·¥åÂ
·åÂÂæÂÂå® id Ã¥Â
Âç´ ã |
− | + | ä½ å¯以å¨ XUL Planet [http://xulplanet.com/references/elemref/ref_toolbar.html toolbar element's attributes] çÂÂå°å®Âæ´çÂÂÃ¥ÂÂèÂÂæÂÂçÂȋ | |
− | + | ç¾å¨ï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂ建ç«Â好çÂÂè¦Âè¼ÂæªÂæ¡Â[[http://www.borngeek.com/firefox/toolbar-tutorial/samples/xul-a.txt View XUL Overlay Revision 1]]ï¼ | |
<pre> | <pre> | ||
<?xml version="1.0"?> | <?xml version="1.0"?> | ||
行 298: | 行 299: | ||
</overlay></pre> | </overlay></pre> | ||
− | == | + | == å·¥åÂ
·åÂÂæÂÂé (Toolbar Buttons) == |
− | + | å¨ Firefox ä¸Âï¼Âå·¥åÂ
·åÂÂæÂÂéÂÂæÂÂä¸Â種ï¼Âä¸Âè‹ÂÂé¸å®ãÂÂæÂÂéÂÂé¸å®ãÂÂéÂÂäºÂé½æ¯ç¨ '''toolbarbutton''' ä¾Â建ç«ÂçÂÂï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂå¥çÂÂçÂÂãÂÂè¨Âä½Âï¼ÂéÂÂäºÂÃ¥Â
Âç´ å¿Â
é Âæ¾å¨ '''toolbar''' Ã¥Â
Âç´ ä¹Âä¸Âã | |
− | === | + | === ä¸Âè¾ÂÂé (Normal Buttons) === |
− | + | éÂÂæ¯ç¨ä¾Â建ç«Âä¸ÂèÂÂæÂÂéÂÂï¼ | |
<pre> | <pre> | ||
<toolbarbutton id="TutTB-Web-Button" tooltiptext="Search the Web" | <toolbarbutton id="TutTB-Web-Button" tooltiptext="Search the Web" | ||
label="Web Search" oncommand="TutTB_Search(event, 'web')" /></pre> | label="Web Search" oncommand="TutTB_Search(event, 'web')" /></pre> | ||
− | + | å®ÂæÂÂä¹Âå¾Âï¼Âä¾ÂçÂÂçÂÂéÂÂÃ¥ÂÂÃ¥Â
Âç´ çÂÂ屬æ§@| |
− | * '''tooltiptext''' - | + | * '''tooltiptext''' - ç¶æ»Â鼠移åÂÂå°æÂÂéÂÂä¸ÂæÂÂåºç¾çÂÂ說æÂÂã |
− | * '''label''' - | + | * '''label''' - å·¥åÂ
·åÂÂæÂÂéÂÂ顯示çÂÂæÂÂÃ¥ÂÂã |
− | * '''oncommand''' - | + | * '''oncommand''' - ç¶ '''oncommand''' äºÂ件觸ç¼æÂÂ(æÂÂä¸ÂæÂÂéÂÂ)ï¼Âä½ æÂÂæÂÂå®ÂçÂÂç¨Âå¼Â碼ãÂÂå¨éÂÂÃ¥ÂÂç¯Âä¾Âï¼Â使ç¨ '''TutTB_Search()'''å½å¼Âï¼ÂæÂÂÃ¥ÂÂå°Âå¨第åÂ
Â章詳細說æÂÂã |
− | + | ä½ å¯以å¨ XUL Planet [http://xulplanet.com/references/elemref/ref_toolbarbutton.html toolbarbutton element's attributes] æ¾å°å®Âæ´çÂÂÃ¥ÂÂèÂÂæÂÂçÂȋ | |
− | === | + | === é¸å®æÂÂé (Menu Buttons) === |
− | + | ç¶é»ÂæÂÂæÂÂéÂÂé¸å®æÂÂï¼ÂæÂÂåºç¾ä¸ÂæÂÂå¼Âé¸å®ã åÂÂ管éÂÂÃ¥ÂÂæÂÂéÂÂæ¨Âè¨Âé¡Âä¼¼ä¸Âè¾ÂÂéÂÂæ¨Âè¨Âï¼ÂæÂÂÃ¥ÂÂéÂÂæ¯å¿Â
é Âå åÂ
Â¥ '''menupopup''' Ã¥Â
Âç´ ï¼Âè®Âé¸å®以æÂÂÃ¥ÂÂæ³è¦ÂçÂÂ樣åÂÂåºç¾ãÂÂçºäºÂç°¡æ½Âé»Âï¼Âä¸Âé¢çÂÂç¯Âä¾ÂåªåÂÂ
å«åÂ
©åÂÂé¸å®é Â
ç®ã | |
<pre> | <pre> | ||
<toolbarbutton id="TutTB-MainMenu" type="menu" | <toolbarbutton id="TutTB-MainMenu" type="menu" | ||
行 336: | 行 337: | ||
</toolbarbutton></pre> | </toolbarbutton></pre> | ||
− | '''toolbarbutton''' | + | '''toolbarbutton''' æÂÂÃ¥Â
©åÂÂè¦Â注æÂÂçÂÂè®ÂÃ¥ÂÂãÂÂ第ä¸Âï¼Â'''type''' 屬æ§æÂÂå®Â亠menu çÂÂå¼ï¼Â說æÂÂäºÂéÂÂæ¯åÂÂé¸å®æÂÂéÂÂï¼ÂèÂÂä¸Âæ¯ä¸Âè¾ÂÂéÂÂãÂÂ第äºÂï¼Âä½ æÂÂ注æÂÂå°éÂÂ裡é¢æ²Âæ '''oncommand''' 屬æ§ãÂÂå çºé¸å®æÂÂéÂÂçÂÂå¯ä¸Âç®çÂÂæ¯çºäºÂ顯示跳åºå¼Âé¸å®ï¼Â並ä¸ÂéÂÂè¦Âå·è¡Âä»»ä½Âç¨Âå¼Â碼ï¼ÂèÂÂ顯示é¸å®çÂÂÃ¥ÂÂä½ÂæÂÂç± Firefox èªåÂÂå®ÂæÂÂã |
− | + | ä¹Âè«Â注æÂÂå° '''menupopup''' ï¼Â'''menuitem''' ï¼Â'''menuseparator''' éÂÂä¸ÂÃ¥ÂÂÃ¥Â
Âç´ ãÂÂ'''menupopup''' æÂÂæÂÂé¸å®é Â
ç®çÂÂ容å¨ï¼Âç¨ä¾Â建ç«ÂèÂÂ顯示é¸å®ãÂÂå¨éÂÂÃ¥ÂÂç¯Âä¾Â裡ï¼ÂéÂÂÃ¥ÂÂÃ¥Â
Âç´ æ²ÂæÂÂ屬æ§ãÂÂÃ¥ÂÂ樣å°ï¼Â'''menuseparator''' ä¹Âå¾Âç°¡å®ï¼Âå¨ä¸ÂæÂÂå¼Âé¸å®ä¸Âæ¾置水平åÂÂéÂÂç·Âï¼Âç¨ä¾ÂÃ¥ÂÂéÂÂä¸ÂÃ¥ÂÂçÂÂé¸å®ã | |
− | '''menuitem''' | + | '''menuitem''' ç¨Âå¾®æÂÂé»Âè¤ÂéÂÂãÂÂå¨ä¸Âé¢çÂÂç¯Âä¾Âï¼ÂæÂÂÃ¥ÂÂæÂÂå®ÂçÂÂ屬æ§@|
− | * '''label''' - | + | * '''label''' - æÂÂå®Âé¸å®é Â
ç®çÂÂæÂÂÃ¥ÂÂã |
− | * '''tooltiptext''' - | + | * '''tooltiptext''' - éÂÂÃ¥ÂÂ屬æ§就åÂÂæ¯æÂÂÃ¥ÂÂå¨ '''toolbarbutton''' çÂÂå°çÂÂï¼Âä½Âæ¯æÂÂä¸Âé»Âè¦Âè¦åÂÂçÂÂãÂÂç±æ¼ Firefox ç bug ([https://bugzilla.mozilla.org/show_bug.cgi?id=147670 bug #147670])ï¼ÂéÂÂÃ¥ÂÂ屬æ§æ¯å¿Â
è¦ÂçÂÂãÂÂå¦ÂæÂÂ你決å®Âå¾ '''menuitem''' ä¸ÂåªæÂÂéÂÂÃ¥ÂÂ屬æ§ï¼Âç¶使ç¨èÂÂ
å°Âæ»Â鼠移åÂÂå°é¸å®é Â
ç®æÂÂï¼ÂæÂÂçÂÂä¸Âå°æÂÂ示說æÂÂãÂÂé¸å®ä¸ÂæÂÂ顯示工åÂ
·æÂÂ示ï¼ÂéÂÂçÂÂæ¯åÂÂ令人ä¸Â滿æÂÂçÂÂãÂÂç¹è²ãÂÂï¼ |
− | + | ä½ å¯以å¨ XUL Planet [http://xulplanet.com/references/elemref/ref_menuitem.html menuitem element's attributes] æ¾å°å®Âæ´çÂÂÃ¥ÂÂèÂÂæÂÂçÂȋ | |
− | === | + | === æÂÂéÂÂé¸å® (Button-Menu Buttons) === |
− | + | 第ä¸Âä¹Âæ¯æÂÂå¾ÂçÂÂæÂÂéÂÂé¸å®æ¯ä¸Â種ä¹Âä¸ÂæÂÂè¤ÂéÂÂçÂÂãÂÂ實éÂÂä¸Âï¼ÂçµÂÃ¥ÂÂäºÂÃ¥ÂÂÃ¥Â
©ç¨®æÂÂéÂÂï¼ÂæÂÂä¾Âå¯é»ÂæÂÂæÂÂéÂÂçÂÂä¸ÂæÂÂå¼Âé¸å®ã | |
− | + | ãÂÂä¸Âä¸Âé ÂãÂÂèÂÂãÂÂä¸Âä¸Âé ÂãÂÂçÂÂ覽é¸å®æ¯éÂÂÃ¥ÂÂæÂÂéÂÂé¸å®çÂÂç¯Âä¾Âï¼ÂéÂÂæ¯éÂÂè¦Â建ç«ÂçÂÂæ¨Âè¨Âï¼ | |
<pre> | <pre> | ||
<toolbarbutton id="TutTB-Combined-Button" label="Search" | <toolbarbutton id="TutTB-Combined-Button" label="Search" | ||
行 367: | 行 368: | ||
</toolbarbutton></pre> | </toolbarbutton></pre> | ||
− | + | æÂÂÃ¥Â
©åÂÂå¼å¾Â注æÂÂçÂÂè®ÂÃ¥ÂÂï¼Âå¨ '''toolbarbutton''' ç '''type''' 屬æ§æÂÂå®ÂäºÂå¼ '''menu-button''' ï¼ÂèÂÂä¸ÂæÂÂå¦å¤Âä¸Âè¡Âç¨Âå¼Â碼 '''oncommand''' ï¼ÂæÂÂæÂÂå¨第åÂ
Â章解éÂÂéÂÂé¡Âå¤ÂçÂÂç¨Âå¼Â碼ãÂÂæÂ¥èÂÂ注æÂÂå°ï¼ÂéÂÂ裡æÂÂè·ÂãÂÂä¸Âè¾ÂÂéÂÂãÂÂä¸Â樣ç '''toolbarbutton''' æ '''oncommand''' 屬æ§ï¼Â以åÂÂå¨ãÂÂé¸å®æÂÂéÂÂãÂÂ裡çÂÂå·¢çÂÂÃ¥Â
Âç´ '''menupopup''' è '''menuitem''' ã | |
− | + | ç¾å¨ï¼ÂæÂÂÃ¥ÂÂè¨Âè«Âå®Âä¸ÂÃ¥ÂÂçÂÂæÂÂéÂÂï¼Âä¾ÂçÂÂçÂÂç¨Âå¼Â碼çÂÂ樣åÂÂ[[http://www.borngeek.com/firefox/toolbar-tutorial/samples/xul-b.txt View XUL Overlay Revision 2]]ï¼ | |
<pre> | <pre> | ||
<?xml version="1.0"?> | <?xml version="1.0"?> | ||
行 416: | 行 417: | ||
</overlay></pre> | </overlay></pre> | ||
− | == | + | == ä¸ÂæÂÂå¼Â編輯å (Drop-Down Edit Box) == |
− | + | ä¸Âä¸ÂÃ¥ÂÂæÂÂÃ¥ÂÂè¦Âå¨工åÂ
·åÂÂå åÂ
¥çÂÂæ¯ä¸ÂæÂÂå¼Â編輯åÂÂãÂÂéÂÂæ¯ç¨ '''menulist''' ä¾Â建ç«ÂçÂÂï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂç¨Âå¼Â碼@| |
<pre> | <pre> | ||
<toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> | <toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> | ||
行 428: | 行 429: | ||
</toolbaritem></pre> | </toolbaritem></pre> | ||
− | + | 注æÂÂå°ï¼ÂæÂÂÃ¥ÂÂæ '''menulist''' æ¾å¨ '''toolbaritem''' ä¹Âä¸ÂãÂÂä»»ä½Âä¸ÂÃ¥ÂÂå¨ '''toolbar''' çÂÂé Â
ç®é½ä¸Âæ¯工åÂ
·åÂÂæÂÂéÂÂï¼Âå¨ '''toolbaritem''' 裡é ÂçÂÂæÂÂæ¯ãÂÂä¹Âè«Â注æÂÂå°ï¼ÂæÂÂÃ¥ÂÂçº '''toolbaritem''' æÂÂå®Â亠'''id''' ï¼Âä¸Âè¨Âå®ÂäºÂ寬度(èÂÂç±å©ç¨亠'''persist''' 屬æ§)ã | |
− | '''menulist''' | + | '''menulist''' æÂÂæ¯çÂÂæ£ç¨ä¾Â建ç«Âä¸ÂæÂÂå¼Â編輯åÂÂçÂÂãÂÂæÂÂå¹¾åÂÂå¨éÂÂÃ¥ÂÂÃ¥Â
Âç´ åºç¾çÂÂæ°屬æ§@|
− | * '''editable''' - | + | * '''editable''' - ç¶è¨Âå®Âçº true æÂÂï¼Â使ç¨èÂÂ
å¯以å¨編輯åÂÂä¸ÂæÂÂÃ¥ÂÂã |
− | * '''flex''' - | + | * '''flex''' - 使éÂÂÃ¥ÂÂÃ¥Â
Âç´ æ¯å¯è®ÂÃ¥ÂÂçÂÂãÂÂéÂÂæ¯åÂÂæ´æ¸å¼ï¼Âç¸å°Âæ¼åÂ
¶ä»Âå¯è®ÂÃ¥ÂÂå·¥åÂ
·åÂÂÃ¥Â
Âç´ ï¼ÂæÂÂå®ÂÃ¥Â
¶å¤§å°ÂãÂÂè¨Âå®Âå¼ 2 代表èÂÂè¨Âå®Âå¼ 1 çÂÂÃ¥Â
©åÂÂ寬ï¼Â0 Ã¥ÂÂæ¯ä¸Âè½è®ÂÃ¥ÂÂçÂÂåºå®Â寬度ã |
− | * '''minwidth''' - | + | * '''minwidth''' - æÂÂå°Â寬度ï¼Âå®ä½ÂçºåÂÂç´ ã |
− | * '''width''' - | + | * '''width''' - Ã¥ÂÂå§Â寬度ï¼Âå®ä½ÂçºåÂÂç´ ã |
− | * '''onkeypress''' - | + | * '''onkeypress''' - ç¶使ç¨èÂÂ
輸åÂ
¥æÂÂÃ¥ÂÂæÂÂï¼Âç¨ä¾Âå·è¡ÂçÂÂç¨Âå¼Â碼ã |
− | + | ä½ å¯以å¨ XUL Planet [http://xulplanet.com/references/elemref/ref_menulist.html menulist element's attributes] çÂÂå°å®Âæ´çÂÂÃ¥ÂÂèÂÂæÂÂçÂȋ | |
− | + | è·ÂæÂÂÃ¥ÂÂä¹ÂÃ¥ÂÂçÂÂå°çÂÂãÂÂé¸å®æÂÂéÂÂãÂÂä¸Â樣ï¼Âå¨ '''menulist''' 裡ç '''menupopup''' Ã¥ÂÂ
å«亠menuitem Ã¥Â
Âç´ ãÂÂ'''onpopupshowing''' éÂÂÃ¥ÂÂäºÂ件æÂÂå¨編輯åÂÂçÂÂé¸å®é Â
ç®顯示åÂÂ觸ç¼ï¼ÂÃ¥Â
¶ä¸ÂæÂÂå®Âä¸ÂÃ¥ÂÂè½åÂÂæÂ
Â寫åÂ
¥é¸å®é Â
ç®çÂÂå½å¼Âï¼ÂéÂÂÃ¥ÂÂå½å¼ÂæÂÂÃ¥ÂÂç¨Âå¾ÂæÂÂæÂÂÃ¥ÂÂãÂÂä½ ä¹Âå¯以å åÂ
¥éÂÂæÂ
ÂçÂÂé¸å®ï¼ÂéÂÂç¨Âè·ÂãÂÂé¸å®æÂÂéÂÂãÂÂæ¯ä¸Â樣çÂÂã | |
− | + | ç¾å¨ï¼ÂéÂÂÃ¥ÂÂå¥Â件已ç¶Âè®Âå¾Âæ´åÂ
·é«Âä¸Âé»ÂäºÂï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂç¨Âå¼Â碼[[http://www.borngeek.com/firefox/toolbar-tutorial/samples/xul-c.txt View XUL Overlay Revision 3]]ï¼ | |
<pre> | <pre> | ||
<?xml version="1.0"?> | <?xml version="1.0"?> | ||
行 497: | 行 498: | ||
</overlay></pre> | </overlay></pre> | ||
− | == | + | == å¯調æ´çÂÂ移é§Âæ¨Â訠(Resizing Gripper) == |
− | + | éÂÂè¨Âå¾Âä¹ÂÃ¥ÂÂÃ¥ÂÂ
å«å¨ '''menulist''' 丠'''toolbaritem''' Ã¥Â
Âç´ æÂÂæÂÂå°ç '''persist''' 屬æ§åÂÂï¼Âè¨Âå®ÂéÂÂÃ¥ÂÂ屬æ§以è®ÂæÂÂÃ¥ÂÂå¨çÂÂ覽å¨使ç¨æÂÂéÂÂï¼Âå¯以å²åÂÂæÂÂå°ÂÃ¥ÂÂçÂÂ寬度ãÂÂçºäºÂè®Â使ç¨èÂÂ
å¯以æ¹è®Â寬度ï¼ÂæÂÂÃ¥ÂÂè¦ÂæÂÂä¾ '''移é§Âæ¨Âè¨Â''' ãÂÂç¨ä¾ÂÃ¥ÂÂéÂÂ件äºÂçÂÂÃ¥Â
Âç´ æ¯ '''splitter''' ï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂç¨Âå¼Â碼@| |
<pre> | <pre> | ||
<splitter id="TutTB-ResizeSplitter" state="open" collapse="none" | <splitter id="TutTB-ResizeSplitter" state="open" collapse="none" | ||
行 507: | 行 508: | ||
</splitter></pre> | </splitter></pre> | ||
− | + | éÂÂæ¯ '''splitter''' çÂÂ屬æ§@| |
− | * '''state''' - | + | * '''state''' - æÂÂå®ÂÃ¥ÂÂå²æ¨Âè¨Âæ¯å¦æºçÂÂ(é±èÂÂ)Ã¥Â
§å®¹ï¼ open å¼æÂÂå®Âä¸Â管æ¯å¦æÂÂÃ¥Â
§å®¹çÂÂ顯示ã |
− | * '''collapse''' - | + | * '''collapse''' - 決å®ÂåªéÂÂç splitter 被é±èÂÂãÂÂæÂÂÃ¥ÂÂ使ç¨ none ï¼Âä¸Âè®Âä»»ä½Âä¸ÂéÂÂç splitter 被é±èÂÂã |
− | * '''resizebefore''' - | + | * '''resizebefore''' - ç¶ splitter æ¹è®ÂæÂÂï¼ÂæÂÂå® splitter å·¦éÂÂçÂÂåªåÂÂÃ¥Â
Âç´ å¿Â
é Â被éÂÂæ°調æ´ãÂÂç¶ splitter 移åÂÂæÂÂï¼Â使ç¨ closest ä¾ÂéÂÂæ°調æ´æÂÂé 迠splitter å·¦éÂÂçÂÂ編輯åÂÂã |
− | * '''resizeafter''' - | + | * '''resizeafter''' - ç¶ splitter æ¹è®ÂæÂÂï¼ÂæÂÂå® splitter å³éÂÂçÂÂåªåÂÂÃ¥Â
Âç´ å¿Â
é Â被éÂÂæ°調æ´ãÂÂå¨éÂÂÃ¥ÂÂç¯Âä¾Â裡ï¼ÂæÂÂÃ¥ÂÂ使ç¨ farthest ä¾ÂéÂÂæ°調æ´æÂÂå³éÂÂçÂÂå½Âæ§空éÂÂã |
− | vbox | + | vbox æ¯ç¨ä¾Âè¨Âå®Â樣å¼ÂçÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂå¨第äºÂç« è¨Âè«Âé¢æ¿æÂÂï¼ÂæÂÂå°éÂÂé»Âã |
− | + | ä½ å¯以å¨ XUL Planet [http://xulplanet.com/references/elemref/ref_splitter.html splitter element's attributes] çÂÂå°æ´å®Âæ´çÂÂÃ¥ÂÂèÂÂæÂÂçÂȋ | |
− | + | è®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂÃ¥ÂÂ
å« '''splitter''' è '''toolbaritem''' çÂÂè¦Âè¼Âç¨Âå¼Â碼[[http://www.borngeek.com/firefox/toolbar-tutorial/samples/xul-d.txt View XUL Overlay Revision 4]]ï¼ | |
<pre> | <pre> | ||
<?xml version="1.0"?> | <?xml version="1.0"?> | ||
行 581: | 行 582: | ||
</overlay></pre> | </overlay></pre> | ||
− | + | çºäºÂé¿åÂ
Â移é§Âæ¨Âè¨Âè¨ÂÃ¥ÂÂçÂÂ細微顯示åÂÂé¡Âï¼ÂæÂÂÃ¥ÂÂéÂÂéÂÂè¦Â建ç«Âé¡Âå¤Âç '''toolbaritem''' ï¼ÂéÂÂèÂÂæÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂå¨ãÂÂé¸å®æÂÂéÂÂãÂÂä¸ÂçÂÂæÂÂå°ÂæÂÂéÂÂæÂÂÃ¥ÂÂçÂÂä¸Â樣ã åÂÂä¸Â次確宠flex 屬æ§çÂÂå¼çº 0ï¼ÂéÂÂå°ÂæÂÂé¿åÂ
Âï¼Âç¶æÂÂÃ¥ÂÂçÂÂé¸å®æÂÂéÂÂ被æÂÂæ³å°左éÂÂæÂÂ被移é¤ã | |
− | + | æÂ¥èÂÂï¼Âè®ÂæÂÂÃ¥ÂÂÃ¥ÂÂä¾Âå¢Âå åÂ
©åÂÂé Â
ç®ãÂÂé¦ÂÃ¥Â
Âï¼Âå° '''toolbarseparator''' æ¾置å¨æÂÂå¾ÂÃ¥Â
©åÂÂæÂÂéÂÂä¸Âï¼Âæ¤ç®çÂÂæ¯çºäºÂè£Â飾ãÂÂÃ¥ÂÂä¾Âï¼Âå° '''toolbarspring''' æ¾置å¨æÂÂå¾Âç toolbaritem Ã¥Â
Âç´ ä¹Âå¾ÂãÂÂThis spring will allow us to drag the resizer all the way to the right, so that we can see the full resizing effect in action. éÂÂÃ¥Â
©åÂÂæ¨Â示æ¯å¾Âç°¡å®çÂÂï¼ÂÃ¥ÂÂæ¯éÂÂ樣@| |
<pre> | <pre> | ||
<toolbarseparator /> | <toolbarseparator /> | ||
行 589: | 行 590: | ||
<toolbarspring /></pre> | <toolbarspring /></pre> | ||
− | + | è®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂå®Âæ´çÂÂè¦Âè¼Âç¯Âä¾Â[[http://www.borngeek.com/firefox/toolbar-tutorial/samples/xul-e.txt View XUL Overlay Revision 5]]ï¼ | |
<pre> | <pre> | ||
<?xml version="1.0"?> | <?xml version="1.0"?> | ||
行 660: | 行 661: | ||
</overlay> </pre> | </overlay> </pre> | ||
− | = | + | = 第åÂÂç« ï¼ÂÃ¥ÂÂæÂ
ÂéÂÂç¼ (Dynamic Development) = |
− | ( | + | (è¯èÂÂ
ï¼Âå¦ÂæÂÂä¸Âæ³ç¨æ¤éÂÂç¼ç°å¢Âï¼Âå¯以çÂ¥éÂÂæ¤章ï¼Â並ç¨第ä¸Âç« çÂÂæ¹å¼Â測試å¥Â件ãÂÂ) |
− | + | å¨ Firefox 1.5 ä¸Âï¼ÂÃ¥ÂÂæÂ
Âå¥Â件éÂÂç¼æ¯æ°çÂÂæÂÂè¡Âï¼Âå°ÂéÂÂç¼èÂÂ
èÂÂè¨Âï¼ÂéÂÂæ¯æÂÂæÂÂç¨çÂÂéÂÂå åÂÂè½ãÂÂéÂÂé Â
æÂÂè¡Âå¯以è®Âä½ å¨éÂÂç¼å¥Â件æÂÂï¼Âå³æÂÂå°çÂÂå°çµÂæÂÂãÂÂç¶你è¦Â測試 XUL è¦Âè¼ÂæÂÂæ¯ JavaScript ç¨Âå¼Â碼æÂÂï¼Âä¸Âç¨æ¯Â次åÂÂéÂÂæ°å°Âè£Âå¥Â件ãÂÂéÂÂä¸Âåªç¯ÂçÂÂäºÂä½ çÂÂæÂÂéÂÂï¼Âä¹Âè®Âä½ è½æ´快éÂÂå°é¤é¯ã | |
− | + | é£麼ï¼ÂéÂÂé Â
ç¹è²æ¯å¦Âä½ÂéÂÂä½ÂçÂÂå¢ï¼ÂéÂÂå°±è¦ÂæÂÂè¬ÂæÂÂÃ¥ÂÂå¨第äºÂ章建ç«Âç chrome æ¸Â
å®äºÂãÂÂç´å°ç¾å¨çºæ¢ï¼ÂæÂÂé½éÂÂæ²Âè·Â你說 chrome æ¸Â
å®試ä½ÂçÂÂ麼ç¨éÂÂãÂÂå¨éÂÂÃ¥ÂÂæÂÂÃ¥ÂÂä¸Âï¼ÂæÂÂÃ¥ÂÂä¸ÂéÂÂå§Â建ç«ÂçÂÂçÂÂæ¬就æ¯'''ç¹åÂÂ¥'''çºåÂÂæÂ
ÂéÂÂç¼èÂÂè¨Âè¨ÂçÂÂãÂÂæÂÂè¨Âä¹Âï¼ÂæÂÂÃ¥ÂÂä¸Âå¿Â
éÂÂæ°å°Âè£Âé£份çÂÂæÂÂå¥Â件ï¼Âä½ÂéÂÂæ¯æÂÂäºÂæ¹è®ÂéÂÂè¦Âå®ÂæÂÂï¼ÂæÂÂå¯以å°Âè£ÂãÂÂæÂÂå¹¾åÂÂç¨ä¾ÂãÂÂÃ¥ÂÂÃ¥ÂÂãÂÂå¥Â件åÂÂæÂ
ÂéÂÂç¼çÂÂæÂ¥é©Âï¼Âå¨é£ä¹ÂÃ¥ÂÂï¼ÂæÂÂè¦ÂÃ¥Â
Â給你幾åÂÂ建è°ã | |
− | == | + | == 注æÂÂäºÂé Â
(A Word of Warning) == |
− | + | å¥Â件éÂÂç¼æÂÂæÂÂæÂÂæÂÂé»Âå±éªï¼Âå°¤åÂ
¶æ¯è¨Â訠XUL è¦Âè¼ÂæªÂæ¡ÂæÂÂãÂÂæÂÂ'''å¼·çÂÂ建è°'''ä½ è¦Âé¿åÂ
ÂéÂÂç¼å¥Â件è·Â平常çÂÂ覽網é ÂÃ¥Â
±ç¨ä¸ÂÃ¥ÂÂè¨Âå®ÂæªÂ(profile)ãÂÂæÂÂè¨Âä¹Âï¼Â'''ä½ å¿Â
é Âçº你çÂÂéÂÂç¼ç°å¢Â建ç«Âä¸ÂÃ¥ÂÂæ°çÂÂè¨Âå®ÂæªÂ'''ãÂÂéÂÂå¯以é¿åÂ
Â你失å»ä¸ÂäºÂéÂÂéµçÂÂè³ÂæÂÂï¼Âå¦Âï¼Âå²åÂÂçÂÂå¯Â碼ãÂÂcookiesãÂÂæ¸籤æÂÂæ¯åÂ
¶ä»Âä½ ä¸Âæ³éº失çÂÂæ±西ã | |
− | + | æÂÂå¸ÂæÂÂè½åÂÂå¿« Born Geek å¨ç¼表éÂÂæ¼å¦Âä½Â建ç«ÂèÂÂ使ç¨è¨Âå®ÂæªÂçÂÂæÂÂå¸ãÂÂå¨é£ä¹ÂÃ¥ÂÂï¼Âä½ å¯以åÂ
ÂçÂÂçÂÂå¨ Mozilla.org çÂÂ[http://www.mozilla.org/support/firefox/profile è¨Âå®ÂæªÂæÂÂ件]ãÂÂ建ç«ÂèÂÂ使ç¨è¨Âå®ÂæªÂæ¯å¾Âç°¡å®çÂÂï¼ÂéÂÂæÂÂé¿åÂ
Âè®Âä½ é ÂçÂÂçÂÂæÂÂ
æ³Âç¼çÂÂã | |
− | == | + | == å¦Âä½ÂÃ¥ÂÂæÂ
ÂéÂÂç¼ (How to Develop Dynamically) == |
− | + | æÂÂ主è¦ÂçÂÂå·¥ä½Âï¼ÂæÂÂÃ¥ÂÂå·²ç¶Âå¨ chrome æ¸Â
å®å®ÂæÂÂ(å³使你éÂÂä¸ÂäºÂ解æÂÂÃ¥ÂÂé£æÂÂÃ¥ÂÂäºÂä»Â麼)ãÂÂç¾å¨ï¼ÂæÂÂÃ¥ÂÂéÂÂè¦ÂçÂÂï¼Âæ¯ä¸ÂÃ¥ÂÂå° Firefox æÂÂÃ¥ÂÂ硬ç¢Âä¸Âå¥Â件ä½Âç½®çÂÂæªÂæ¡Âï¼ÂæÂÂÃ¥ÂÂå°ÂèÂÂç± pointer æªÂæ¡Âä¾Âå®ÂæÂÂã | |
− | + | é¦ÂÃ¥Â
Âï¼Âå¨你çÂÂéÂȏÂ
¦çÂÂé¨便ä¸ÂÃ¥ÂÂå°æ¹ï¼Â以æÂÂÃ¥ÂÂå¨å®Âè£Âæ¸Â
å®(install manifest)ä¸ÂæÂÂ使ç¨ç GUID Ã¥ÂÂ稱ï¼Â建ç«Âä¸ÂÃ¥ÂÂæÂÂÃ¥ÂÂæªÂãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂä¸Âï¼ÂæÂÂÃ¥ÂÂ使ç¨ '''tuttoolbar@borngeek.com''' ä½ÂçºæªÂÃ¥ÂÂãÂÂä¸Â幸çÂÂæ¯ï¼Âå¨微è»Âè¦ÂçªÂç°å¢Â裡ï¼ÂãÂÂ.comãÂÂçÂÂæªÂæ¡Âæ¯被ç¨ä¾Âç¶ä½Âå·è¡ÂæªÂï¼ÂèÂÂæÂÂÃ¥ÂÂéÂÂè¦ÂçÂÂæ¯æÂÂÃ¥ÂÂæªÂãÂÂä½ å¯以æÂÂãÂÂ.comãÂÂæ¿æÂÂï¼Âä½Âä¹Âè¨Âå¾Âå»修æ¹å¨å®Âè£Âæ¸Â
å®ç GUIDï¼Â確ä¿ÂÃ¥Â
©åÂÂÃ¥ÂÂ稱æ¯ä¸Â樣çÂÂã | |
− | + | å¨éÂÂÃ¥ÂÂæªÂæ¡Â裡ï¼ÂæÂÂÃ¥ÂÂå°Âè¦Â輸åÂ
¥ä¸Âè¡ÂæÂÂÃ¥ÂÂï¼Âå¥Â件å²åÂÂçÂÂçµÂå°Âä½Âç½®ï¼Âä¹Âå°±æ¯åÂÂæ¾ '''install.rdf''' è '''chrome.manifest''' æªÂæ¡ÂçÂÂç®éÂÂãÂÂå¨æÂÂçÂÂä¾ÂÃ¥ÂÂï¼Âå²åÂÂè·¯å¾Âå¦Âä¸Âï¼ | |
<pre>C:\Born Geek\TutToolbar</pre> | <pre>C:\Born Geek\TutToolbar</pre> | ||
− | + | ä½ å¿Â
é Â使ç¨你èª己è¨Âå®ÂçÂÂè·¯å¾Âï¼Âé¤éÂÂä½ çÂÂè·¯å¾Âè·ÂæÂÂçÂÂä¸Â樣ãÂÂ輸åÂ
¥å®Âè·¯å¾Âå¾Âï¼Âå²åÂÂæªÂæ¡Âã | |
− | + | ç¾å¨ï¼ÂæÂÂÃ¥ÂÂå¿Â
é Âå°ÂéÂÂÃ¥ÂÂæªÂæ¡Â移åÂÂå°è·ÂéÂÂç¼ç°å¢ÂçÂÂè¨Âå®ÂæªÂ(profile)Ã¥ÂÂä¸ÂÃ¥ÂÂç®éÂÂ(å¦Âï¼ÂC:\Documents and Settings\Administrator\Application Data\Mozilla\Firefox\Profiles)ãÂÂæÂÂÃ¥ÂÂÃ¥ÂÂæÂÂå°çÂÂ[http://www.mozilla.org/support/firefox/profile è¨Âå®ÂæªÂæÂÂ件]æÂÂè¨Âè«Âå°è¨Âå®ÂæªÂç®éÂÂçÂÂä½Âç½®ãÂÂç¶你æ¾å°è¨Âå®ÂæªÂç®éÂÂæÂÂï¼Âå°ÂæÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂ建ç«Âç pointer æªÂæ¡Â移åÂÂå°該ç®éÂÂç extensions ç®éÂÂä¸ÂãÂÂéÂÂæ¯æÂÂçÂÂä¾ÂÃ¥ÂÂï¼ | |
<pre> | <pre> | ||
+- tl5wlpz3.Nightly/ | +- tl5wlpz3.Nightly/ | ||
行 692: | 行 693: | ||
+- tuttoolbar@borngeek.com | +- tuttoolbar@borngeek.com | ||
+- (... other files and folders ...)</pre> | +- (... other files and folders ...)</pre> | ||
− | + | ä½ å¯以çÂÂå°æÂÂçÂÂè¨Âå®ÂæªÂæÂÂä¸Â層ç®éÂÂï¼ÂæÂÂ使ç¨以ãÂÂNightlyãÂÂçºåÂÂçÂÂè¨Âå®ÂæªÂï¼Âä¾Âä½ÂçºæÂÂçÂÂå¥Â件éÂÂç¼ç°å¢ÂãÂÂä¸Âæ¦你æ pointer æªÂæ¡Âæ¾å¨é©ç¶çÂÂä½Âç½®ï¼ÂéÂÂå Firefoxï¼Â確å®Â你使ç¨çÂÂæ¯å¥Â件éÂÂç¼çÂÂè¨Âå®ÂæªÂ(Ã¥ÂÂ次æÂÂéÂÂï¼ÂÃ¥ÂÂÃ¥ÂÂæÂÂå°çÂÂè¨Âå®ÂæªÂæÂÂ件æÂÂÃ¥ÂÂ訴你å¦Âä½ÂéÂÂ樣åÂÂ)ã å°ç®åÂÂçºæ¢ï¼Âå¦ÂæÂÂä½ æ¯Â樣é½åÂÂçÂÂæ£確ï¼Âä½ æÂÂçÂÂå°æ²ÂæÂÂé¢æ¿çÂÂç°è²工åÂ
·åÂÂã | |
− | == | + | == éÂÂç¼é±æ (The Development Cycle) == |
− | + | ç¾å¨ï¼ÂæÂÂÃ¥ÂÂå·²ç¶ÂÃ¥ÂÂÃ¥ÂÂäºÂÃ¥ÂÂæÂ
ÂéÂÂç¼ç°å¢Âï¼Âé£è¦Âå¦Âä½ÂÃ¥ÂȌ©ç¨å¢ï¼ÂéÂÂç¨ÂÃ¥Â
¶å¯¦æ¯éÂÂ常簡å®çÂÂï¼ | |
− | # | + | #編輯你çÂÂå¥Â件æªÂæ¡ |
− | # | + | #éÂÂæ°éÂÂÃ¥ÂÂå·²æ´æ¹æªÂæ¡ÂæÂÂå¥Âç¨çÂÂè¦ÂçªÂï¼ÂæÂÂæ¯使ç¨ [http://ted.mielczarek.org/code/mozilla/extensiondev/index.html Extension Developer's Extension] çÂÂéÂÂæ°æ´çÂÂ('''Reload Chrome''')ã |
− | + | æÂÂÃ¥Â
©ä»¶äºÂæ¯你è¦ÂçÂ¥éÂÂçÂÂï¼ | |
− | * | + | *å¦ÂæÂÂä½ æ¹è®Â亠'''chrome.manifest''' æªÂæ¡Âï¼Âä½ å¿Â
é ÂéÂÂæ°éÂÂå Firefox (éÂÂÃ¥ÂÂæªÂæ¡ÂåªæÂÂå¨ç¨Âå¼ÂÃ¥ÂÂÃ¥ÂÂæÂÂæÂÂç¼çÂÂä½Âç¨)ã |
− | * | + | *å¦ÂæÂÂä½ æ¹è®Â亠'''install.rdf''' æªÂæ¡Âï¼Âä½ å¿Â
é Âæ¹讠pointer æªÂæ¡ÂæÂÂæÂÂÃ¥ÂÂç®éÂÂçÂÂä¿®æ¹æÂÂéÂÂãÂÂå¨ Linux ä¸Âï¼Âä½ åªè¦Â使ç¨ '''touch''' æÂÂ令ãÂÂèÂÂå¨ Windows 裡就æÂÂé»Âé£度ï¼Âé¤éÂÂä½ å®Âè£ÂäºÂå¯以使ç¨ '''touch''' æÂÂ令ç [http://www.cygwin.com/ Cygwin] å·¥åÂ
·ãÂÂå¯ä¸Âè¦ÂÃ¥ÂÂçÂÂï¼Âå°±æ¯å¨å¥Â件æÂÂä¸Â層ç®éÂÂ建ç«Âä¸ÂÃ¥ÂÂæ°ç®éÂÂï¼Âç¶å¾Âåªé¤æ°ç®éÂÂ以æ¹è®Âç®éÂÂçÂÂãÂÂä¸Âä¸Â次修æ¹ãÂÂæÂÂéÂÂã |
− | + | ä½ å¯以çÂÂå°ï¼ÂæÂÂÃ¥ÂÂæÂÂäºÂæ¹便çÂÂéÂÂç¼èÂÂé¤é¯工åÂ
·ãÂÂéÂÂÃ¥ÂÂéÂÂæ¼ï¼Âå¨ 1.5 çÂÂä¹ÂÃ¥ÂÂçÂÂæ¨ÂæºÂéÂÂç¨Âï¼Âå°±æ¯æ¯Â次å¨å¥Â件éÂÂç¼éÂÂç¨Âé½è¦Âå°Âè£ÂæªÂæ¡Âã | |
− | + | ç¾å¨ï¼Âè®ÂæÂÂÃ¥ÂÂæÂÂéÂÂÃ¥ÂÂéÂÂéÂÂçÂÂå·¥åÂ
·åÂÂè®Âå¾Âæ´æ¼Â亮ä¸Âé»Âå§@| |
− | = | + | = 第äºÂç« ï¼Âé¢æ¿製你(Skinning the Toolbar) = |
− | + | é¢æ¿æ¯ç±樣å¼Âæ¨ÂæºÂèÂÂÃ¥ÂÂçÂÂæÂÂæ§ÂæÂÂçÂÂãÂÂè¨Âä½Âï¼ÂÃ¥ÂÂ管è¨Âè¨Âé¢æ¿æ¯éÂÂå¿Â
è¦ÂçÂÂï¼Âä½Âæ¯å®Âè½æÂÂÃ¥ÂÂå¥Â件çÂÂÃ¥ÂÂ質ãÂÂç¢ç«Â使ç¨èÂÂ
å°Âå¥Â件çÂÂ第ä¸Âå°象æ¯å®ÂçÂÂå¤Âè§Âï¼ÂèÂÂä¸Âæ¯å®ÂçÂÂÃ¥ÂÂè½ãÂÂç¶èÂÂï¼Âå¦ÂæÂÂ你覺å¾Â使ç¨æÂÂÃ¥ÂÂæ¨Â籤è®Âä½ æ¯Âè¼Âèªå¨ï¼ÂæÂÂæ¯ä¸ÂéÂÂè¦Â建ç«Âå¤Âè§Âï¼Âä½ å¯以çÂ¥éÂÂéÂÂÃ¥ÂÂç« ç¯Âã | |
− | == | + | == æ´æ°æªÂæ¡ÂçµÂ槠(Updating the File Structure) == |
− | + | è¨Âè¨Âé¢æ¿çÂÂ第ä¸Âæ¥就æ¯建ç«Âä¸ÂÃ¥ÂÂç®éÂÂï¼Âç¨ä¾ÂÃ¥ÂÂæ¾éÂÂæ¼é¢æ¿çÂÂæªÂæ¡ÂãÂÂå¨ '''chrome''' ç®éÂÂä¸Â建ç«Âä¸Âå '''skin''' ç®éÂÂãÂÂæªÂæ¡ÂçµÂæ§ÂæÂÂÃ¥ÂÂéÂÂ樣@| |
<pre> | <pre> | ||
+- TutToolbar/ | +- TutToolbar/ | ||
行 726: | 行 727: | ||
+- tuttoolbar.xul | +- tuttoolbar.xul | ||
+- skin/</pre> | +- skin/</pre> | ||
− | + | ç¾å¨æÂÂÃ¥ÂÂæÂÂÃ¥ÂÂæ¾é¢æ¿æªÂæ¡ÂçÂÂå°æ¹äºÂï¼Âä¹Âå¾Âå¿Â
é Âè¦Âå¨ chrome 裡註åÂÂéÂÂÃ¥ÂÂä½Âç½®ã | |
− | == | + | == æ´æ° Chrome æ¸Â
å® (Updating the Chrome Manifest) == |
− | + | éÂÂè¨Âå¾ÂæÂÂÃ¥ÂÂå¨第äºÂ章建ç«Âç chrome æ¸Â
å®åÂÂï¼ÂæÂÂÃ¥ÂÂå¿Â
é Âå¨éÂÂÃ¥ÂÂæªÂæ¡Âå åÂ
¥ä¸Âè¡Âç¨Âå¼Â碼ï¼Âç¨ä¾Â註åÂÂæÂÂÃ¥ÂÂçÂÂé¢æ¿ãÂÂæ°å åÂ
¥çÂÂä½Âç½®(第ä¸Âè¡Â)ï¼ | |
<pre> | <pre> | ||
content tuttoolbar chrome/content/ | content tuttoolbar chrome/content/ | ||
overlay chrome://browser/content/browser.xul chrome://tuttoolbar/content/tuttoolbar.xul | overlay chrome://browser/content/browser.xul chrome://tuttoolbar/content/tuttoolbar.xul | ||
skin tuttoolbar classic/1.0 chrome/skin/</pre> | skin tuttoolbar classic/1.0 chrome/skin/</pre> | ||
− | + | æ°å åÂ
¥çÂÂéÂÂä¸Âè¡Âç¸ç¶簡å®ï¼ÂèÂÂä¸ÂåªæÂÂÃ¥ÂÂÃ¥ÂÂé¨份ãÂÂ第ä¸Âé¨份ï¼Âskin 說æÂÂéÂÂä¸Âè¡Âè¦Â註åÂÂé¢æ¿çÂÂè³Âè¨ÂãÂÂæÂ¥èÂÂæ¯å¥Â件çÂÂÃ¥ÂÂ稱ï¼ÂéÂÂ裡使ç¨ '''tuttoolbar''' ç¶ä½ÂæÂÂÃ¥ÂÂçÂÂå¥Â件åÂÂ稱ãÂÂ第ä¸Âé¨份ï¼Â說æÂÂæÂÂÃ¥ÂÂå°ÂæÂÂæ´å±ÂçÂÂå·²å®Âè£Âå¥Â件åÂÂ稱ï¼ÂãÂÂclassic/1.0ãÂÂæ¯你æÂÂä¸Âç´ç¨å°çÂÂå¼ãÂÂæÂÂå¾Âï¼Âä¹Âæ¯æÂÂéÂÂè¦ÂçÂÂé¨份ï¼Âå°±æ¯åÂÂ
å«é¢æ¿æªÂæ¡ÂçÂÂç®éÂÂè·¯å¾ÂãÂÂ注æÂÂå°éÂÂÃ¥ÂÂè·¯å¾Âå¾Âé¢çÂÂæÂÂç·Â(/)ï¼ÂéÂÂÃ¥ÂÂæÂÂç·Âæ¯'''å¿Â
è¦ÂçÂÂ'''ï¼Â確å®Âä½ æÂÂ輸åÂ
¥ã | |
− | == | + | == 建ç«ÂÃ¥ÂÂçÂÂæªÂæ¡ (Creating the Image Files) == |
− | + | æÂÂÃ¥ÂÂæÂÂè®Âæ¯ÂÃ¥ÂÂå·¥åÂ
·åÂÂæÂÂéÂÂ使ç¨åÂÂèªçÂÂÃ¥ÂÂÃ¥ÂÂãÂÂ注æÂÂå°ï¼ÂéÂÂä¸Âæ¯æÂÂæÂÂæÂÂçÂÂæÂÂæ¯精緻çÂÂä½Âæ³Âï¼Âä½Âæ¯å¯以è®Â人æ´容æÂÂäºÂ解ãÂÂæ´好çÂÂæ¹å¼Âæ¯使ç¨'''Ã¥ÂÂÃ¥ÂÂ樣å¼Â表'''ï¼Âä½Âæ¯é£è¶Â
åºéÂÂ份æÂÂÃ¥ÂÂçÂÂç¯ÂÃ¥ÂÂã | |
− | + | æÂÂÃ¥ÂÂéÂÂè¦ÂäºÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂä¾Âå·¥åÂ
·åÂÂçÂÂçµÂÃ¥ÂÂé¸å®使ç¨ï¼Â主è¦Âé¸å®ãÂÂç¶ÂÃ¥ÂÂæÂÂå°ÂæÂÂéÂÂãÂÂ網é ÂæÂÂå°ÂæÂÂéÂÂãÂÂÃ¥ÂÂçÂÂæÂÂå°Âé¸å®以åÂÂå¯調æ´çÂÂ移é§Âæ¨Âè¨ÂãÂÂå¨ä¸Âé¢çÂÂÃ¥ÂÂ表ä¸Âï¼ÂæÂÂäºÂÃ¥ÂÂæÂÂç¨å¨éÂÂÃ¥ÂÂå¥Â件çÂÂÃ¥ÂÂÃ¥ÂÂãÂÂ注æÂÂï¼ éÂÂäºÂÃ¥ÂÂÃ¥ÂÂé½æ¯éÂÂæÂÂç PNG æ ¼å¼ÂæªÂæ¡Âï¼Âå¦ÂæÂÂ你使ç¨ IE æÂÂæ¯åÂ
¶ä»ÂçÂÂ覽å¨ï¼Âå¯è½ä¸Âè½æ£確å°顯示ã | |
− | + | 主è¦Âé¸å®åÂÂ示 Main Menu Icon (main.png): http://wiki.moztw.org/uimages/b/b7/Borngeek_main.png | |
− | + | ç¶ÂÃ¥ÂÂæÂÂå°ÂÃ¥ÂÂ示 Combined Search Icon (combined.png): http://wiki.moztw.org/uimages/3/36/Borngeek_combined.png | |
− | + | 網é ÂæÂÂå°ÂÃ¥ÂÂ示 Web Search Icon (web.png): http://wiki.moztw.org/uimages/9/9c/Borngeek_web.png | |
− | + | Ã¥ÂÂçÂÂæÂÂå°ÂÃ¥ÂÂ示 Images Search Icon (images.png): http://wiki.moztw.org/uimages/6/61/Borngeek_images.png | |
− | + | å¯調æ´移é§Âæ¨Âè¨ÂÃ¥ÂÂ示 Resizing Gripper Icon (gripper.png): http://wiki.moztw.org/uimages/5/50/Borngeek_gripper.png | |
− | + | å°ÂéÂÂäºÂÃ¥ÂÂÃ¥ÂÂå²åÂÂå¨æÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂ建ç«Âç '''skin''' ç®éÂÂ裡ï¼ÂæªÂæ¡ÂçµÂæ§ÂæÂÂÃ¥ÂÂéÂÂ樣@| |
<pre> | <pre> | ||
+- TutToolbar/ | +- TutToolbar/ | ||
行 768: | 行 769: | ||
+- web.png</pre> | +- web.png</pre> | ||
− | == | + | == èÂÂç±串æ¥樣å¼Â表å¥Âç¨åÂÂç (Applying the Images with CSS) == |
− | + | ç¾å¨ï¼ÂæÂÂéÂÂäºÂÃ¥ÂÂÃ¥ÂÂå¯以使ç¨ï¼Âé¢æ¿ç®éÂÂä¹Âå·²ç¶Â註åÂÂï¼ÂæÂÂÃ¥ÂÂå¯以éÂÂå§ÂæÂÂÃ¥ÂÂÃ¥ÂÂå¥Âç¨å¨工åÂ
·åÂÂæÂÂéÂÂä¸ÂäºÂãÂÂæÂÂÃ¥ÂÂå°ÂæÂÂèÂÂç± CSS ä¾Âå®ÂæÂÂãÂÂå°±å¦ÂæÂÂå¨æÂÂÃ¥ÂÂä¸ÂéÂÂå§ÂæÂÂå°çÂÂï¼Âå¦ÂæÂÂä½ å° CSS ä¸ÂçÂÂæÂÂï¼Âå¯以åÂÂè W3Schools ç [http://www.w3schools.com/css/css_intro.asp excellent CSS tutorial] ã | |
− | + | è®ÂæÂÂÃ¥ÂÂéÂÂå§Â建章CSS æªÂæ¡Âå§ï¼Âå¨ '''skin''' ç®éÂÂä¸Âï¼Â建ç«Âä¸ÂÃ¥ÂÂæªÂÃ¥ÂÂçº '''tuttoolbar.css''' çÂÂæªÂæ¡Âï¼ÂæÂÂéÂÂÃ¥ÂÂæªÂæ¡Âè·ÂÃ¥ÂÂÃ¥ÂÂæ¾å¨ä¸Âèµ·ãÂÂæªÂæ¡ÂçµÂæ§Âå¦Âä¸Âï¼ | |
<pre> | <pre> | ||
+- TutToolbar/ | +- TutToolbar/ | ||
行 787: | 行 788: | ||
+- web.png | +- web.png | ||
+- tuttoolbar.css</pre> | +- tuttoolbar.css</pre> | ||
− | + | å¨說æÂÂç´°ç¯ÂÃ¥ÂÂï¼ÂÃ¥Â
Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂ樣å¼Â表çÂÂÃ¥Â
§å®¹ï¼ | |
<pre> | <pre> | ||
#TutTB-MainMenu { | #TutTB-MainMenu { | ||
行 820: | 行 821: | ||
border: none !important; | border: none !important; | ||
}</pre> | }</pre> | ||
− | + | 第ä¸Âé Â
è¦ÂÃ¥ÂÂæ¯æÂÂå®Â該åÂÂÃ¥ÂÂ給ãÂÂ主è¦Âé¸å®ãÂÂæÂÂéÂÂ使ç¨ãÂÂÃ¥ÂÂ顧ä¸Âä¸Â第ä¸Âç« ï¼ÂæÂÂÃ¥ÂÂ給äºÂ該æÂÂéÂÂä¸Âå ID å¼ï¼Â'''TutTB-MainMenu'''ï¼ÂæÂÂÃ¥ÂÂç¨該å¼ä¾Âè¨Âå®ÂæÂÂéÂÂ顯示çÂÂÃ¥ÂÂÃ¥ÂÂãÂÂå¨åÂÂé¢çÂÂäºÂèÂÂ(#)æ¯ '''ID é¸åÂÂå¨'''(ID selector)ï¼Âä¹Âå°±æ¯ç¨ä¾ÂæÂÂå® CSS Ã¥Â
Âç´ è¦ÂÃ¥ÂÂçÂÂç¹å®ÂèÂÂå¥å¼ãÂÂå¨工åÂ
·åÂÂæÂÂéÂÂ裡ï¼ÂæÂÂÃ¥ÂÂ使ç¨ CSS 屬æ§ç '''list-style-image''' ä¾ÂæÂÂå®ÂÃ¥ÂÂÃ¥ÂÂãÂÂ注æÂÂå°æÂÂÃ¥ÂÂ使ç¨çÂÂæ¯ chrome è·¯å¾Âï¼Âä¹Âå°±æ¯å¥Â件æªÂæ¡ÂçµÂæ§Âä¸ÂçÂÂÃ¥ÂÂÃ¥ÂÂè·¯å¾Âï¼Â常ç¨çÂÂæ ¼å¼Âå¦Âä¸Âï¼ | |
<pre> | <pre> | ||
chrome://<packagename>/skin/<image_file_name></pre> | chrome://<packagename>/skin/<image_file_name></pre> | ||
− | + | å¨æÂÂÃ¥ÂÂçÂÂç¯Âä¾Â裡ï¼Âå°Âè£ÂÃ¥ÂÂ稱(package name)æ¯ '''tuttoolbar'''ï¼ÂèÂÂ主è¦Âé¸å®使ç¨çÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂ稱çº '''main.png'''ãÂÂä½ å¯以çÂÂå°ï¼ÂæÂÂæÂÂçÂÂå·¥åÂ
·åÂÂæÂÂéÂÂ使ç¨é¡Âä¼¼çÂÂè¦ÂÃ¥ÂÂï¼Âå¨ç¶ÂÃ¥ÂÂæÂÂå°ÂæÂÂéÂÂçÂÂé¸å®é Â
ç®ä¹Âæ¯ä¸Â樣ãÂÂThere's one caveat to handling menu item icons, however. Ã¥ÂÂæ³ä¸Âä¸Âï¼Âå¨ç¶ÂÃ¥ÂÂæÂÂå°Âé¸å®ä¸Âï¼ÂæÂÂÃ¥ÂÂçºé¸å®é Â
ç®使ç¨äºÂä¸ÂÃ¥ÂÂç¹åÂ¥çÂÂé¡Âå¥å¼ï¼Â'''menuitem-iconic'''ï¼ÂéÂÂæ¯ Firefox Ã¥Â
§å»ºçÂÂãÂÂéÂÂÃ¥ÂÂå¼ãÂÂÃ¥ÂÂÃ¥ÂÂãÂÂÃ¥ÂÂ示æ¯æ´使ç¨å®ÂçÂÂæ¯ÂÃ¥ÂÂé¸å®é Â
ç®ã | |
− | + | æ³å¿Â
ä½ ä¹Â注æÂÂå°äºÂéÂÂÃ¥ÂÂç¶ÂÃ¥ÂÂæÂÂå°ÂæÂÂéÂÂçÂÂç¹å®Âè¦ÂÃ¥ÂÂï¼ | |
<pre> | <pre> | ||
#TutTB-Combined-Button > .toolbarbutton-menubutton-button { | #TutTB-Combined-Button > .toolbarbutton-menubutton-button { | ||
-moz-box-orient: horizontal; | -moz-box-orient: horizontal; | ||
}</pre> | }</pre> | ||
− | + | éÂÂÃ¥ÂÂç¹åÂ¥ç CSS 屬æ§å¨éÂÂ裡使ç¨ '''-moz-box-orient'''ï¼ÂéÂÂæÂÂå®ÂæÂÂéÂÂçÂÂæ¨Â籤該å¦Âä½Â顯示ï¼Âæ°´å¹³æÂÂæ¯åÂÂç´顯示ãÂÂå·¥åÂ
·åÂÂæÂÂéÂÂæ¨Â籤çÂÂé Âè¨Âå¼æ¯åÂÂç´顯示ï¼Âä¹Âå°±æ¯顯示å¨åÂÂ示ä¸Âæ¹ãÂÂå¨éÂÂÃ¥ÂÂç¯Âä¾Âï¼Âä¸Â使ç¨éÂÂ樣çÂÂæ¹å¼Âï¼ÂæÂÂ以æÂÂÃ¥ÂÂæ¹çº水平顯示ï¼Â以使æ¨Â籤顯示å¨åÂÂ示ä¹Âå¾Âã | |
− | + | å¨èÂÂçÂÂå¯調æ´çÂÂ移é§Âæ¨Âè¨Â(resizing gripper)æÂÂï¼ÂæÂÂÃ¥Â
©æ¢Â樣å¼Â表çÂÂè¦ÂÃ¥ÂÂãÂÂéÂÂè¨Âå¾Âå¨第åÂÂ章裡ï¼ÂæÂÂÃ¥ÂÂå¨åÂÂé¢çÂÂÃ¥Â
Âç´ (splitter element)使ç¨ç '''vbox''' Ã¥Â
Âç´ åÂÂï¼ÂæÂÂÃ¥ÂÂçº移é§Âæ¨Âè¨Â使ç¨亠'''vbox''' ä¾Â顯示èÂÂæ¯åÂÂÃ¥ÂÂãÂÂéÂÂ次ï¼ÂæÂÂÃ¥ÂÂ使ç¨ '''background-image''' 屬æ§ãÂÂæÂÂÃ¥ÂÂå¿Â
é ÂèÂÂç± '''min-height''' è '''min-width''' 屬æ§ï¼ÂæÂÂä¾ÂæÂÂå°Âé«Â度èÂÂæÂÂå°Â寬度ï¼Â以è®Â移é§Âæ¨Âè¨Â顯示åºä¾ÂãÂÂ'''vbox''' è '''hbox''' 屬æ§çÂÂé Âè¨Âå¼å¯è½æ¯ä¾ÂÃ¥Â
§å®¹å¤§å°Âå¤å®ÂãÂÂç±æ¼ '''vbox''' æ¯空çÂÂï¼Âé Âè¨Âå¼就æ¯ 0ï¼ÂéÂÂä¹Âé¿åÂ
ÂæÂÂÃ¥ÂÂæÂÂçÂÂå°èÂÂæ¯åÂÂÃ¥ÂÂã | |
− | + | æÂÂÃ¥ÂÂä¹ÂçºåÂÂé¢çÂÂÃ¥Â
Âç´ æÂÂä¾Âä¸Âæ¢Âè¦ÂÃ¥ÂÂã æÂÂÃ¥ÂÂè®ÂèÂÂæ¯æ¯éÂÂæÂÂçÂÂï¼ÂèÂÂä¸Âä¸Â使ç¨éÂÂæ¡Â(Ã¥ÂÂé¢åÂ
Âç´ çÂÂé Âè¨Âå¼æ¯æÂÂ使ç¨éÂÂæ¡ÂçÂÂ)ãÂÂç¾å¨ï¼ÂCSS æªÂæ¡Âå·²ç¶Âå®ÂæÂÂï¼ÂæÂÂÃ¥ÂÂè¦Âè¨Âå®Âè¦Âè¼Â(overlay)以使ç¨å®Âã | |
− | == | + | == 使ç¨樣å¼Â表 (Using the Style Sheet) == |
− | + | åªæÂÂä¸Âè¡Âç¨Âå¼Â碼æ¯éÂÂè¦Â被å åÂ
¥å¨ XUL è¦Âè¼ÂçÂÂï¼ÂéÂÂç¨ä¾ÂÃ¥ÂÂÃ¥ÂÂæÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂ建ç«ÂçÂÂ樣å¼Â表ãÂÂéÂÂå¿Â
é Âæ¾置å¨ XML 宣åÂÂæÂÂ令çÂÂä¸Âæ¹ï¼Â以åÂÂè¦Âè¼Â(overlay)Ã¥Â
Âç´ ä¹ÂÃ¥ÂÂãÂÂä¸Âé¢ï¼ÂæÂÂÃ¥ÂÂåºè¦Âè¼ÂæªÂæ¡ÂçÂÂÃ¥ÂÂå¹¾è¡ÂéÂÂè¦Âæ´åÂÂçÂÂå°æ¹@| |
<pre> | <pre> | ||
<?xml version="1.0"?> | <?xml version="1.0"?> | ||
行 848: | 行 849: | ||
(... rest of XUL overlay file ...)</pre> | (... rest of XUL overlay file ...)</pre> | ||
− | + | å°±åÂÂæÂÂÃ¥ÂÂå¨樣å¼Â表ä¸ÂçÂÂå°çÂÂÃ¥ÂÂÃ¥ÂÂä¸Â樣ï¼Âchrome è·¯å¾Â被ç¨ä¾ÂæÂÂå®Âä½Âç½®ãÂÂè '''type''' 屬æ§åªæ¯æÂÂæÂÂéÂÂæ¯ CSS çÂÂæªÂæ¡ÂãÂÂç¾å¨è®ÂæÂÂÃ¥ÂÂçÂÂçÂÂè¦Âè¼ÂæªÂæ¡Âå¨å åÂ
¥éÂÂä¸Âè¡Âå¾ÂçÂÂå®Âæ´åÂ
§å®¹[[http://www.borngeek.com/firefox/toolbar-tutorial/samples/xul-f.txt View XUL Overlay Revision 6]]ï¼ | |
<pre> | <pre> | ||
<?xml version="1.0"?> | <?xml version="1.0"?> | ||
行 921: | 行 922: | ||
</overlay> | </overlay> | ||
</pre> | </pre> | ||
− | + | å¥å¿Âè¨Âè¦Â測試ï¼Âç¨[http://wiki.moztw.org/index.php/%E5%A5%97%E4%BB%B6%E9%96%8B%E7%99%BC%E6%8C%87%E5%8D%97_-_Googlebar_Lite#.E7.AC.AC.E5.9B.9B.E7.AB.A0.EF.BC.9A.E5.8B.95.E6.85.8B.E9.96.8B.E7.99.BC_.28Dynamic_Development.29 Ã¥ÂÂæÂ
ÂéÂÂç¼]ç Firefox å¯æÂŽÂÂÃ¥ÂÂï¼Âç¶å¾ÂçÂÂçÂÂå¥Â件çÂÂ樣åÂÂãÂÂæÂ¥ä¸Âä¾Âï¼ÂæÂÂÃ¥ÂÂè¦Âçº工åÂ
·åÂÂ注åÂ
¥çÂÂå½ã | |
− | = | + | = 第åÂ
Âç« ï¼Â主ç¨Âå¼ (Scripting the Toolbar) = |
− | + | å¥Â件éÂÂ常æ¯ç¨ JavaScript å·è¡ÂçÂÂï¼ÂéÂÂæ¯ä¸Â種簡å®æÂÂå¸çÂÂç¨Âå¼ÂèªÂè¨ÂãÂÂä½ å°ÂæÂÂç¼ç¾ï¼ÂæÂÂÃ¥ÂÂçÂÂå·¥åÂ
·åÂÂå¥Â件çÂÂç¨Âå¼Â碼æ¯éÂÂ常簡å®çÂÂãÂÂæÂÂÃ¥ÂÂå°ÂæÂÂ大éÂÂ使ç¨æÂÂ件ç©件模åÂÂ(DOM)ï¼ÂéÂÂå¯以è®ÂæÂÂÃ¥ÂÂèÂÂçÂÂå®ç¨çÂÂÃ¥Â
Âç´ ã | |
− | + | å¨æÂÂÃ¥ÂÂéÂÂå§ÂÃ¥ÂÂï¼Âä½ è¦ÂÃ¥Â
ÂçÂ¥éÂÂä¸ÂÃ¥ÂÂéÂÂé»ÂãÂÂ'''id''' 屬æ§å¿Â
é Âæ¯æ´åÂÂçÂÂ覽å¨å¯ä¸ÂçÂÂï¼Âè JavaScript çÂÂè®Âæ¸åÂÂå½å¼Âä¹Âæ¯ãÂÂå¨çÂÂ覽å¨è¦Âè¼Âä¸ÂçÂÂJavaScript æ¯åÂ
¨åÂÂæ§çÂÂï¼Âå æ¤æÂÂæÂÂæÂÂéÂÂÃ¥ÂÂéÂÂå¶ãÂÂæÂÂÃ¥ÂÂå°ÂæÂÂ使ç¨跠XUL Ã¥Â
Âç´ ä¸Â樣çÂÂæÂÂå·§ï¼ÂæÂÂæÂÂçÂÂè®Âæ¸åÂÂå½å¼ÂçÂÂÃ¥ÂÂ稱ï¼Âå°ÂæÂÂæÂÂ以æÂÂÃ¥ÂÂå¥Â件çºåÂÂèµ·å§ÂÃ¥ÂÂ稱ãÂÂæÂÂÃ¥ÂÂ使ç¨ '''TutTB_''' ç¶ä½Âèµ·å§ÂÃ¥ÂÂ稱ï¼ÂæÂÂ以æÂÂÃ¥ÂÂçÂÂæÂÂå°Âå½å¼ÂæÂÂæ¯ '''TutTB_Search()'''ã | |
− | + | ç¾å¨ï¼Âè®ÂæÂÂÃ¥ÂÂ建章JavaScript æªÂæ¡ÂãÂÂå¨ '''content''' ç®éÂÂä¸Âï¼Â建ç«Âä¸Âå '''tuttoolbar.js''' çÂÂæÂÂÃ¥ÂÂæªÂãÂÂç®éÂÂçµÂæ§Âå¦Âä¸Âï¼ | |
<pre> | <pre> | ||
行 948: | 行 949: | ||
</pre> | </pre> | ||
− | + | å¨建ç«Âä»»ä½Âç¨Âå¼Â碼åÂÂï¼ÂÃ¥Â
ÂÃ¥ÂÂ訴 XUL æªÂæ¡Â該å¦Âä½Â使ç¨ JavaScript æªÂæ¡Âã | |
− | == | + | == é£絠XUL è JavaScript (Tying XUL to JavaScript) == |
− | + | æÂÂÃ¥ÂÂç XUL æªÂæ¡ '''tuttoolbar.xul''' éÂÂè¦Â被åÂÂçÂ¥ç¸å°ÂæÂÂç JavaScript æªÂï¼ÂæÂÂÃ¥ÂÂå¯以使ç¨ä¸Âé¢çÂÂæÂÂè¿°ï¼ | |
<pre> | <pre> | ||
行 958: | 行 959: | ||
src="chrome://tuttoolbar/content/tuttoolbar.js" /> | src="chrome://tuttoolbar/content/tuttoolbar.js" /> | ||
</pre> | </pre> | ||
− | + | éÂÂå¿Â
é Âæ¾置å¨ '''overlay''' Ã¥Â
Âç´ ä¹Âä¸ÂãÂÂ'''type''' 屬æ§æ¯æÂÂå®Â使ç¨ JavaScriptï¼Â'''src''' 屬æ§æ¯æÂÂå®ÂÃ¥ÂÂÃ¥ÂÂ建ç«Âç JavaScript æªÂãÂÂÃ¥Â
§å®¹å¦Âä¸Â[[http://www.borngeek.com/firefox/toolbar-tutorial/samples/xul-g.txt View XUL Overlay Revision 7]]ï¼ | |
<pre> | <pre> | ||
行 1,036: | 行 1,037: | ||
</pre> | </pre> | ||
− | == | + | == çºæÂÂéÂÂå ä¸ÂÃ¥ÂÂè½ (Adding Functionality to the Buttons) == |
− | + | éÂÂè¨Âå¾ÂæÂÂÃ¥ÂÂçº工åÂ
·åÂÂæÂÂéÂÂæÂÂä¾Âç '''oncommand''' 屬æ§åÂÂï¼ÂéÂÂÃ¥ÂÂ屬æ§æ¯æÂÂå®Âç¨Âå¼Â碼å·è¡ÂçÂÂäºÂ件ãÂÂæÂÂÃ¥ÂÂä¹Âå¯以使ç¨ '''onclick''' 代æ¿ '''oncommand'''ï¼Âä½Âæ¯ '''onclick''' å°Âéµç¤ç¡æÂÂï¼Âè '''oncommand''' å¯以åÂÂæÂÂÃ¥ÂÂæÂÂéµç¤èÂÂæ»Âé¼ çÂÂÃ¥ÂÂä½ÂãÂÂè®ÂæÂÂÃ¥ÂÂÃ¥ÂÂ顧ä¸Âä¸ÂæÂÂå°ÂæÂÂéÂÂï¼ | |
<pre> | <pre> | ||
行 1,044: | 行 1,045: | ||
</pre> | </pre> | ||
− | + | éÂÂÃ¥ÂÂå¼å¼å« '''TutTB_Search()''' å½å¼Âï¼ÂÃ¥Â
¶ä¸ÂÃ¥ÂÂ
å«åÂ
©åÂÂå¼ï¼ÂéÂÂÃ¥ÂÂå½å¼Âå¼å«çÂÂäºÂ件(event)ï¼Â以åÂÂæÂÂå°ÂçÂÂ網é Â(web)ã | |
− | + | ç¨Âå¼Â碼å¦Âä¸Â[[http://www.borngeek.com/firefox/toolbar-tutorial/samples/js-a.txt View JavaScript Revision 1]]ï¼ | |
<pre> | <pre> | ||
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
− | // TutTB_Search() | + | // TutTB_Search() å½å¼ÂæÂÂçºæÂÂÃ¥ÂÂå®ÂæÂÂæÂÂå°ÂãÂÂevent Ã¥ÂÂæ¸æÂÂ觸ç¼å½å¼ÂçÂÂå¼å«ï¼Âtype Ã¥ÂÂæ¸ |
− | // | + | // çºæÂÂå°ÂçÂÂé¡ÂÃ¥ÂÂã |
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
function TutTB_Search(event, type) | function TutTB_Search(event, type) | ||
{ | { | ||
− | // | + | // å°Âè¦ÂçÂÂ覽çÂÂ網å |
var URL = ""; | var URL = ""; | ||
− | // | + | // 辨åÂ¥æÂÂå°Âæ¬Âä½Âæ¯å¦çº空å¼ |
var isEmpty = false; | var isEmpty = false; | ||
− | // | + | // èÂÂçÂÂæÂÂå°Âæ¬Âä½ ( <menulist> Ã¥Â
Âç´ ) |
var searchTermsBox = document.getElementById("TutTB-SearchTerms"); | var searchTermsBox = document.getElementById("TutTB-SearchTerms"); | ||
− | // | + | // å¾ÂæÂÂå°Âæ¬Âä½ÂÃ¥ÂÂåºåÂÂ串ï¼Âæ´çÂÂå¿Â
è¦ÂçÂÂ空ç½ |
− | // | + | // å¯以å¨ä¸Âé¢çÂÂç TutTB_TrimString() å½å¼ÂéÂÂä½ÂçÂÂ細篠|
var searchTerms = TutTB_TrimString(searchTermsBox.value); | var searchTerms = TutTB_TrimString(searchTermsBox.value); | ||
行 1,074: | 行 1,075: | ||
searchTerms = TutTB_ConvertTermsToURI(searchTerms); | searchTerms = TutTB_ConvertTermsToURI(searchTerms); | ||
− | // | + | // é¸æÂÂæÂÂå°ÂçÂÂé¡Âå |
− | // | + | // å¦ÂæÂÂæ¬Âä½Âæ¯空ç½çÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂå¼Âå°Â使ç¨èÂÂ
å° Google 網é Âä¸Âé©ç¶çÂÂå°æ¹ã |
− | // | + | // å¦åÂÂï¼ÂæÂÂå°Â輸åÂ
¥çÂÂæÂÂÃ¥ÂÂã |
switch(type) | switch(type) | ||
{ | { | ||
− | // | + | // 建ç«ÂÃ¥ÂÂçÂÂæÂÂå°ÂçÂÂ網å |
case "image": | case "image": | ||
if(isEmpty) { URL = "http://images.google.com/"; } | if(isEmpty) { URL = "http://images.google.com/"; } | ||
行 1,087: | 行 1,088: | ||
− | // | + | // 建ç«Â網é ÂæÂÂå°ÂçÂÂ網å |
case "web": | case "web": | ||
default: | default: | ||
行 1,095: | 行 1,096: | ||
} | } | ||
− | // | + | // 使ç¨ TutTB_LoadURL å½å¼Âå¨çÂÂ覽è¦ÂçªÂä¸Âè¼ÂÃ¥Â
¥ç¶²å |
TutTB_LoadURL(URL); | TutTB_LoadURL(URL); | ||
} | } | ||
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
− | // TutTB_TrimString() | + | // TutTB_TrimString() å½å¼ÂæÂÂä¿®åªåÂÂ串çÂÂÃ¥ÂÂå¾Â空ç½é¨份ï¼Âç¶å¾Âå°ÂæÂÂæÂÂçÂÂ空ç½é¨份è½ÂæÂÂæ |
− | // | + | // å®ä¸ÂÃ¥ÂÂ空ç½ï¼Âç¶å¾Âå³åÂÂä¿®æ¹å¾ÂÃ¥ÂÂ串ã |
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
function TutTB_TrimString(string) | function TutTB_TrimString(string) | ||
{ | { | ||
− | // | + | // å¦ÂæÂÂå³åÂ
¥çÂÂÃ¥ÂÂ串ç¡æÂÂï¼ÂæÂÂæ¯æ²ÂæÂÂæ±西ï¼ÂÃ¥ÂÂå³åÂÂ空å¼ |
if (!string) | if (!string) | ||
return ""; | return ""; | ||
行 1,112: | 行 1,113: | ||
string = string.replace(/\s+$/, ''); // Remove trailing whitespace | string = string.replace(/\s+$/, ''); // Remove trailing whitespace | ||
− | // | + | // å°ÂæÂÂæÂÂ空ç½é¨份ç¨å®ä¸Â空ç½代æ¿ |
string = string.replace(/\s+/g, ' '); | string = string.replace(/\s+/g, ' '); | ||
− | return string; // | + | return string; // å³åÂÂæ¹è®Âå¾ÂçÂÂå¼ |
} | } | ||
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
− | // TutTB_ConvertTermsToURI() | + | // TutTB_ConvertTermsToURI() å½å¼Âå°Âå³åÂ
¥çÂÂæÂÂå°ÂÃ¥ÂÂ串è½ÂæÂÂçºå®ÂÃ¥Â
¨çÂÂ網å |
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
function TutTB_ConvertTermsToURI(terms) | function TutTB_ConvertTermsToURI(terms) | ||
{ | { | ||
− | // | + | // 建ç«Âé£åÂÂÃ¥ÂÂæ¾æ¯ÂÃ¥ÂÂæÂÂå°ÂÃ¥ÂÂ串 |
var termArray = new Array(); | var termArray = new Array(); | ||
− | // | + | // ç¨空ç½åÂÂÃ¥Â
ÂÃ¥ÂÂå²åÂÂ串 |
termArray = terms.split(" "); | termArray = terms.split(" "); | ||
− | // | + | // ç¨ä¾ÂÃ¥ÂÂæ¾å®ÂÃ¥Â
¨çÂÂ網å |
var result = ""; | var result = ""; | ||
− | // | + | // å¨åÂÂ串ä¸ÂéÂÂè¿´ |
for(var i=0; i<termArray.length; i++) | for(var i=0; i<termArray.length; i++) | ||
{ | { | ||
− | // | + | // å¨第ä¸ÂÃ¥ÂÂÃ¥ÂÂ串å¾ÂçÂÂæÂÂæÂÂçÂÂÃ¥ÂÂ串æÂÂç¨å èÂÂ(+)éÂÂé |
if(i > 0) | if(i > 0) | ||
result += "+"; | result += "+"; | ||
− | // | + | // 使ç¨ Firefox Ã¥Â
§å»ºç encodeURIComponent() å½å¼Âå 寠|
result += encodeURIComponent(termArray[i]); | result += encodeURIComponent(termArray[i]); | ||
} | } | ||
− | return result; // | + | return result; // å³åÂÂçµÂæ |
} | } | ||
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
− | // TutTB_LoadURL() | + | // TutTB_LoadURL() å½å¼Âå¨çÂÂ覽å¨ä¸Âè¼ÂÃ¥Â
¥ç¹å®ÂçÂÂ網å |
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
function TutTB_LoadURL(url) | function TutTB_LoadURL(url) | ||
{ | { | ||
− | // | + | // å¨網åÂÂÃ¥ÂÂè¨Âå®Âå³åÂ
¥çÂÂ網å |
window._content.document.location = url; | window._content.document.location = url; | ||
行 1,159: | 行 1,160: | ||
</pre> | </pre> | ||
− | + | éÂÂÃ¥ÂÂä½ ç Firefox éÂÂç¼çÂÂæ¬ï¼Âå¨æÂÂÃ¥ÂÂçÂÂå·¥åÂ
·åÂÂå¥Â件輸åÂ
¥æÂÂå°ÂçÂÂå¼ï¼Âç¶å¾ÂæÂÂä¸Â網é ÂæÂÂå°ÂæÂÂéÂÂãÂÂç¨Âå¼Â碼æÂÂ該æÂÂå·è¡Âï¼Âç¶å¾ÂæÂÂåºç¾æÂÂå°ÂçµÂæÂÂãÂÂéÂÂÃ¥ÂÂÃ¥ÂÂæÂ
ÂéÂÂç¼çÂÂæ¬確實æ¯ç¸ç¶便å©çÂÂå§@| |
− | == | + | == æÂÂéÂÂé¸å®çÂÂ注æÂÂäºÂé Â
(A Special Note About Button-Menu Buttons) == |
− | + | å¨æÂÂÃ¥ÂÂé²åÂ
¥ä¸Âä¸Â張章ç¯Âä¹ÂÃ¥ÂÂï¼ÂæÂÂä¸Âé»ÂéÂÂæ¼æÂÂéÂÂé¸å®æÂÂè¦Â注æÂÂçÂÂãÂÂÃ¥ÂÂæ³ä¸Âä¸Âï¼ÂéÂÂé¡ÂÃ¥ÂÂçÂÂæÂÂéÂÂæÂÂä¾Âå¯以é»ÂæÂÂçÂÂæÂÂéÂÂèÂÂå½Âåºå¼Âé¸å®(主è¦Âç¯Âä¾Âçºå¾ÂÃ¥ÂÂèÂÂÃ¥ÂÂå¾ÂçÂÂ覽)ãÂÂä¹Âæ³ä¸Âä¸Âï¼Âtoolbarbutton 以åÂÂÃ¥ÂÂ
å« oncommand ç menuitem Ã¥Â
Âç´ ãÂÂç¶工åÂ
·åÂÂæÂÂéÂÂçÂÂä¸Âé¨åÂÂ被åÂÂÃ¥ÂÂï¼Âtoolbarbutton Ã¥Â
Âç´ ç oncommand ç¨Âå¼Â碼å¦Âä½ æÂÂæÂÂæÂÂçÂÂ被å·è¡ÂãÂÂä½Âæ¯ï¼Âç¶使ç¨èÂÂ
Ã¥ÂÂÃ¥ÂÂäºÂmenuitem Ã¥Â
Âç´ çÂÂÃ¥Â
¶ä¸Âä¸ÂÃ¥ÂÂæÂÂï¼ÂæÂÂç¼çÂÂä»Â麼äºÂï¼ | |
− | + | ä¸Âåªæ¯ menuitem Ã¥Â
Âç´ ç oncommand äºÂ件å·è¡Âï¼Âtoolbarbutton Ã¥Â
Âç´ çÂÂäºÂ件ä¹Â被å·è¡ÂãÂÂæÂÂ以åÂ
©åÂÂäºÂ件æ¯åÂÂæÂÂå·è¡ÂçÂÂï¼ÂÃ¥ÂÂ管你åªæ¯æ³è¦ÂÃ¥Â
¶ä¸Âä¸Â件被å·è¡ÂãÂÂå çº toolbarbutton äºÂ件æ¯æÂÂå¾Âç¼çÂÂçÂÂï¼ÂæÂÂ以實éÂÂå·è¡ÂçÂÂæ¯ toolbarbutton äºÂ件ãÂÂæÂÂå¥話說ï¼Âmenuitem äºÂ件æ²ÂæÂÂæ©ÂæÂÂå·è¡ÂãÂÂé£æÂÂÃ¥ÂÂè¦ÂæÂÂ樣解決éÂÂÃ¥ÂÂÃ¥ÂÂé¡Âå¢ï¼ÂäºÂ實ä¸Âï¼Âæ¯æÂÂ辦æ³ÂçÂÂãÂÂè®ÂæÂÂÃ¥ÂÂå¾ÂÃ¥ÂÂçÂÂç menuitem Ã¥Â
Âç´ ï¼ | |
<pre> | <pre> | ||
行 1,173: | 行 1,174: | ||
</pre> | </pre> | ||
− | + | èÂÂç±使ç¨ DOM å½张preventBubble()ï¼ÂæÂÂÃ¥ÂÂå¯以é¿åÂ
 oncommand 被å·è¡ÂãÂÂçºäºÂé¿åÂ
Âå¤Âé·夢å¤Âï¼Âè¨Âä½Âä¸Â件äºÂï¼Âç¶你建ç«ÂæÂÂéÂÂé¸å®æÂÂï¼Âè¨Âå¾Âå¨ menuitem Ã¥Â
Âç´ ç oncommand 屬æ§å åÂ
Â¥ '''event.preventBubble()'''ã | |
− | == | + | == çºæÂÂå°ÂÃ¥ÂÂå åÂ
¥åÂÂè½ (Adding Functionality to the Search Box) == |
− | + | ç¾å¨ï¼ÂæÂÂÃ¥ÂÂå·²ç¶Âè®ÂæÂÂå°ÂæÂÂéÂÂå¯以使ç¨ï¼ÂæÂ¥ä¸Âä¾Âï¼ÂæÂÂÃ¥ÂÂéÂÂè¦Â幫æÂÂå°ÂÃ¥ÂÂå åÂ
¥ä¸ÂäºÂÃ¥ÂÂè½ãÂÂè®Â使ç¨èÂÂ
å¯以å¨輸åÂ
¥åÂÂ串å¾ÂæÂÂä¸ÂãÂÂEnterãÂÂ以å·è¡ÂæÂÂå°ÂãÂÂè¦ÂæÂÂ麼åÂÂå¢ï¼Âè®ÂæÂÂÃ¥ÂÂçÂÂçÂÂè¦Â使ç¨çÂÂå½å¼Âï¼ | |
<pre> | <pre> | ||
行 1,189: | 行 1,190: | ||
</pre> | </pre> | ||
− | + | éÂÂ次ï¼ÂæÂÂÃ¥ÂÂ使ç¨ onkeypress 代æ¿ oncommandãÂÂéÂÂÃ¥ÂÂäºÂ件æÂÂå¨使ç¨èÂÂ
å¨æÂÂå°ÂÃ¥ÂÂæÂÂä¸ÂæÂÂéµæÂÂ觸ç¼ãÂÂå¨éÂÂÃ¥ÂÂç¯Âä¾Âï¼ÂæÂÂÃ¥ÂÂ建ç«Âä¸ÂÃ¥ÂÂç¸ç¶簡å®ç '''TutTB_KeyHandler()'''å½å¼Âï¼ | |
<pre> | <pre> | ||
行 1,199: | 行 1,200: | ||
</pre> | </pre> | ||
− | + | éÂÂÃ¥ÂÂå½å¼Âåªä¸ÂéÂÂæ¯è¦Â檢æÂ¥ãÂÂEnterãÂÂæ¯å¦被æÂÂä¸ÂãÂÂå¦ÂæÂÂæ¯ï¼ÂTutTB_Search()æÂÂ被å¼å«ãÂÂå¦åÂÂï¼Âä¸ÂÃ¥ÂÂä»»ä½ÂäºÂãÂÂè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂå åÂ
¥æ¤å½å¼Âç JavaScript æªÂæ¡Â[[http://www.borngeek.com/firefox/toolbar-tutorial/samples/js-b.txt View JavaScript Revision 2]]ï¼ | |
<pre> | <pre> | ||
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
− | // TutTB_Search() | + | // TutTB_Search() å½å¼ÂæÂÂçºæÂÂÃ¥ÂÂå®ÂæÂÂæÂÂå°ÂãÂÂevent Ã¥ÂÂæ¸æÂÂ觸ç¼å½å¼ÂçÂÂå¼å«ï¼Âtype Ã¥ÂÂæ¸ |
− | // | + | // çºæÂÂå°ÂçÂÂé¡ÂÃ¥ÂÂã |
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
function TutTB_Search(event, type) | function TutTB_Search(event, type) | ||
{ | { | ||
− | // | + | // å°Âè¦ÂçÂÂ覽çÂÂ網å |
var URL = ""; | var URL = ""; | ||
− | // | + | // 辨åÂ¥æÂÂå°Âæ¬Âä½Âæ¯å¦çº空å¼ |
var isEmpty = false; | var isEmpty = false; | ||
− | // | + | // èÂÂçÂÂæÂÂå°Âæ¬Âä½ ( <menulist> Ã¥Â
Âç´ ) |
var searchTermsBox = document.getElementById("TutTB-SearchTerms"); | var searchTermsBox = document.getElementById("TutTB-SearchTerms"); | ||
− | // | + | // å¾ÂæÂÂå°Âæ¬Âä½ÂÃ¥ÂÂåºåÂÂ串ï¼Âæ´çÂÂå¿Â
è¦ÂçÂÂ空ç½ |
− | // | + | // å¯以å¨ä¸Âé¢çÂÂç TutTB_TrimString() å½å¼ÂéÂÂä½ÂçÂÂ細篠|
var searchTerms = TutTB_TrimString(searchTermsBox.value); | var searchTerms = TutTB_TrimString(searchTermsBox.value); | ||
− | if(searchTerms.length == 0) // | + | if(searchTerms.length == 0) // æÂÂå°Âæ¬Âä½Âæ¯空ç½çÂÂÃ¥ÂÂï¼ |
− | isEmpty = true; // | + | isEmpty = true; // æ¯ï¼Âè¨Âå® isEmpty çº true |
− | else // | + | else // ä¸Âï¼Âè½ÂæÂÂçºå®ÂÃ¥Â
¨çÂÂ網å |
searchTerms = TutTB_ConvertTermsToURI(searchTerms); | searchTerms = TutTB_ConvertTermsToURI(searchTerms); | ||
− | // | + | // é¸æÂÂæÂÂå°ÂçÂÂé¡Âå |
− | // | + | // å¦ÂæÂÂæ¬Âä½Âæ¯空ç½çÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂå¼Âå°Â使ç¨èÂÂ
å° Google 網é Âä¸Âé©ç¶çÂÂå°æ¹ã |
− | // | + | // å¦åÂÂï¼ÂæÂÂå°Â輸åÂ
¥çÂÂæÂÂÃ¥ÂÂã |
switch(type) | switch(type) | ||
{ | { | ||
− | // | + | // 建ç«ÂÃ¥ÂÂçÂÂæÂÂå°ÂçÂÂ網å |
case "image": | case "image": | ||
if(isEmpty) { URL = "http://images.google.com/"; } | if(isEmpty) { URL = "http://images.google.com/"; } | ||
行 1,240: | 行 1,241: | ||
− | // | + | // 建ç«Â網é ÂæÂÂå°ÂçÂÂ網å |
case "web": | case "web": | ||
default: | default: | ||
行 1,248: | 行 1,249: | ||
} | } | ||
− | // | + | // 使ç¨ TutTB_LoadURL å½å¼Âå¨çÂÂ覽è¦ÂçªÂä¸Âè¼ÂÃ¥Â
¥ç¶²å |
TutTB_LoadURL(URL); | TutTB_LoadURL(URL); | ||
} | } | ||
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
− | // TutTB_TrimString() | + | // TutTB_TrimString() å½å¼ÂæÂÂä¿®åªåÂÂ串çÂÂÃ¥ÂÂå¾Â空ç½é¨份ï¼Âç¶å¾Âå°ÂæÂÂæÂÂçÂÂ空ç½é¨份è½ÂæÂÂæ |
− | // | + | // å®ä¸ÂÃ¥ÂÂ空ç½ï¼Âç¶å¾Âå³åÂÂä¿®æ¹å¾ÂÃ¥ÂÂ串ã |
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
function TutTB_TrimString(string) | function TutTB_TrimString(string) | ||
{ | { | ||
− | // | + | // å¦ÂæÂÂå³åÂ
¥çÂÂÃ¥ÂÂ串ç¡æÂÂï¼ÂæÂÂæ¯æ²ÂæÂÂæ±西ï¼ÂÃ¥ÂÂå³åÂÂ空å¼ |
if (!string) | if (!string) | ||
return ""; | return ""; | ||
行 1,265: | 行 1,266: | ||
string = string.replace(/\s+$/, ''); // Remove trailing whitespace | string = string.replace(/\s+$/, ''); // Remove trailing whitespace | ||
− | // | + | // å°ÂæÂÂæÂÂ空ç½é¨份ç¨å®ä¸Â空ç½代æ¿ |
string = string.replace(/\s+/g, ' '); | string = string.replace(/\s+/g, ' '); | ||
− | return string; // | + | return string; // å³åÂÂæ¹è®Âå¾ÂçÂÂå¼ |
} | } | ||
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
− | // TutTB_ConvertTermsToURI() | + | // TutTB_ConvertTermsToURI() å½å¼Âå°Âå³åÂ
¥çÂÂæÂÂå°ÂÃ¥ÂÂ串è½ÂæÂÂçºå®ÂÃ¥Â
¨çÂÂ網å |
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
function TutTB_ConvertTermsToURI(terms) | function TutTB_ConvertTermsToURI(terms) | ||
{ | { | ||
− | // | + | // 建ç«Âé£åÂÂÃ¥ÂÂæ¾æ¯ÂÃ¥ÂÂæÂÂå°ÂÃ¥ÂÂ串 |
var termArray = new Array(); | var termArray = new Array(); | ||
− | // | + | // ç¨空ç½åÂÂÃ¥Â
ÂÃ¥ÂÂå²åÂÂ串 |
termArray = terms.split(" "); | termArray = terms.split(" "); | ||
− | // | + | // ç¨ä¾ÂÃ¥ÂÂæ¾å®ÂÃ¥Â
¨çÂÂ網å |
var result = ""; | var result = ""; | ||
− | // | + | // å¨åÂÂ串ä¸ÂéÂÂè¿´ |
for(var i=0; i<termArray.length; i++) | for(var i=0; i<termArray.length; i++) | ||
{ | { | ||
− | // | + | // å¨第ä¸ÂÃ¥ÂÂÃ¥ÂÂ串å¾ÂçÂÂæÂÂæÂÂçÂÂÃ¥ÂÂ串æÂÂç¨å èÂÂ(+)éÂÂé |
if(i > 0) | if(i > 0) | ||
result += "+"; | result += "+"; | ||
− | // | + | // 使ç¨ Firefox Ã¥Â
§å»ºç encodeURIComponent() å½å¼Âå 寠|
result += encodeURIComponent(termArray[i]); | result += encodeURIComponent(termArray[i]); | ||
} | } | ||
− | return result; // | + | return result; // å³åÂÂçµÂæ |
} | } | ||
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
− | // TutTB_LoadURL() | + | // TutTB_LoadURL() å½å¼Âå¨çÂÂ覽å¨ä¸Âè¼ÂÃ¥Â
¥ç¹å®ÂçÂÂ網å |
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
function TutTB_LoadURL(url) | function TutTB_LoadURL(url) | ||
{ | { | ||
− | // | + | // å¨網åÂÂÃ¥ÂÂè¨Âå®Âå³åÂ
¥çÂÂ網å |
window._content.document.location = url; | window._content.document.location = url; | ||
行 1,312: | 行 1,313: | ||
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
− | // TutTB_KeyHandler() | + | // TutTB_KeyHandler() 檢æÂ¥ãÂÂEnterãÂÂæ¯å¦被輸åÂ
¥ãÂÂæ¯çÂÂ話ï¼Âå°±å·è¡ÂæÂÂå° |
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
function TutTB_KeyHandler(event) | function TutTB_KeyHandler(event) | ||
{ | { | ||
− | // [ENTER] | + | // [ENTER]被æÂÂä¸ÂäºÂÃ¥ÂÂï¼Âå¦ÂæÂÂæ¯ï¼Âå·è¡ÂæÂÂå° |
if(event.keyCode == event.DOM_VK_RETURN) | if(event.keyCode == event.DOM_VK_RETURN) | ||
TutTB_Search(event, 'web'); | TutTB_Search(event, 'web'); | ||
行 1,322: | 行 1,323: | ||
</pre> | </pre> | ||
− | + | å¨ä¸Â次ï¼Âå·è¡Âä½ ç Firefox éÂÂç¼çÂÂæ¬ï¼Âå¨æÂÂå°ÂÃ¥ÂÂ輸åÂ
¥æÂÂå°ÂÃ¥ÂÂ串ï¼Âç¶å¾ÂæÂÂä¸ÂãÂÂEnterãÂÂãÂÂå°±åÂÂæ¯æÂÂä¸ÂæÂÂå°ÂæÂÂéÂÂä¸Â樣ï¼ÂæÂÂå°ÂçµÂæÂÂæÂÂ該æÂÂåºç¾ãÂÂç¾å¨ï¼ÂæÂÂÃ¥ÂÂçÂÂå¥Â件已ç¶ÂæÂÂäºÂçÂÂå½@| |
− | == | + | == Ã¥ÂÂæÂ
Âç½®åÂ
¥é¸å® (Dynamically Populating a Menu) == |
− | + | Ã¥ÂÂæÂ
ÂçÂÂå°Âé¸å®é Â
ç®æ¾置å¨é¸å®裡æ¯å¾ÂæÂÂç¨çÂÂï¼ÂéÂÂ好éÂÂÃ¥ÂÂç¹è²æ¯å¾Â容æÂÂå®ÂæÂÂçÂÂãÂÂå¨éÂÂÃ¥ÂÂæÂÂÃ¥ÂÂ裡ï¼ÂæÂÂÃ¥ÂÂå°ÂæÂÂå¨æÂÂå°ÂÃ¥ÂÂä¸ÂæÂÂå¼Âé¸å®åÂÂæÂ
ÂçÂÂå åÂ
¥ä¸ÂäºÂé Â
ç®ãÂÂè®ÂæÂÂÃ¥ÂÂçÂÂçÂÂç¨ä¾Â建ç«Âå·¥åÂ
·åÂÂçÂÂé¨份@| |
<pre> | <pre> | ||
行 1,338: | 行 1,339: | ||
</pre> | </pre> | ||
− | + | 注æÂÂå°ï¼Âå¨ menupopup Ã¥Â
Âç´ ç onpopupshowing 屬æ§ãÂÂæÂÂÃ¥ÂÂæÂÂå® TutTB_Populate()å½å¼Âå¨æ¯Â次ãÂÂå½Âåºå¼Âé¸å®ãÂÂå³å°Â顯示æÂÂ被å·è¡Âï¼ÂéÂÂÃ¥ÂÂå½å¼Âå°ÂæÂÂ建ç«ÂæÂÂÃ¥ÂÂçÂÂÃ¥ÂÂæÂ
Âé¸å®é Â
ç®ãÂÂè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂå½å¼ÂçÂÂç¨Âå¼Â碼[[http://www.borngeek.com/firefox/toolbar-tutorial/samples/js-populate.txt View TutTB_Populate() Code]]ï¼ | |
<pre> | <pre> | ||
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
− | // TutTB_Populate() | + | // TutTB_Populate() å½å¼Âå¨工åÂ
·åÂÂæ¬Âä½ÂçÂÂä¸ÂæÂÂå¼Âé¸å®æ¾置åÂÂæÂ
Âç¢çÂÂçÂÂé¸å®é Â
ç®ã |
− | // | + | // éÂÂç¶éÂÂä¸Âæ¯éÂÂ常實ç¨çÂÂï¼Âä½Âæ¯èÂÂç±éÂÂÃ¥ÂÂç¯Âä¾Âï¼ÂæÂÂÃ¥ÂÂå¯以çÂÂçÂÂÃ¥ÂÂæÂ
Âé¸å®置åÂ
¥çÂÂéÂÂä½Âæ¹å¼Âã |
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
function TutTB_Populate() | function TutTB_Populate() | ||
{ | { | ||
− | // | + | // Ã¥ÂÂå¾Âå½Âåºé¸å®åÂ
Âç´ |
var menu = document.getElementById("TutTB-SearchTermsMenu"); | var menu = document.getElementById("TutTB-SearchTermsMenu"); | ||
− | // | + | // 移é¤å¨å½Âåºé¸å®ç®åÂÂçÂÂé Â
ç® |
for(var i=menu.childNodes.length - 1; i >= 0; i--) | for(var i=menu.childNodes.length - 1; i >= 0; i--) | ||
{ | { | ||
行 1,356: | 行 1,357: | ||
} | } | ||
− | // | + | // æÂÂå®Âè¦Âå¨é¸å®å¢Âå çÂÂé Â
ç®æ¸é |
var numItemsToAdd = 10; | var numItemsToAdd = 10; | ||
for(var i=0; i<numItemsToAdd; i++) | for(var i=0; i<numItemsToAdd; i++) | ||
{ | { | ||
− | // | + | // 建ç«Âè¦Âå¢Âå çÂÂæ°é¸å®é Â
ç® |
var tempItem = document.createElement("menuitem"); | var tempItem = document.createElement("menuitem"); | ||
− | // | + | // è¨Âå®Âæ°é¸å®é Â
ç®çÂÂæ¨Â籤 |
tempItem.setAttribute("label", "Dynamic Item Number " + (i+1)); | tempItem.setAttribute("label", "Dynamic Item Number " + (i+1)); | ||
− | // | + | // å¨é¸å®ä¸Âæ°å¢Âé Â
ç® |
menu.appendChild(tempItem); | menu.appendChild(tempItem); | ||
} | } | ||
行 1,373: | 行 1,374: | ||
</pre> | </pre> | ||
− | + | éÂÂÃ¥ÂÂå½å¼Âç¯Âä¾Âä¸ÂæÂÂå½令æ¯Âå menuitem Ã¥Â
Âç´ åÂȌ·è¡Âé¸æÂÂçÂÂæÂÂ令ãÂÂçºäºÂè®Âæ¯Âå menuitem çÂ¥éÂÂæÂÂ該å·è¡ÂçÂÂæÂÂ令ï¼ÂæÂÂÃ¥ÂÂÃ¥ÂÂ
Ã¥ÂÂ
åªè¦Âå åÂ
Â¥ setAttribute()å½å¼Âä¾ÂèÂÂçÂÂäºÂ件åÂÂå·è¡Âç¨Âå¼Â碼ãÂÂéÂÂæ¯èÂÂç oncommand äºÂ件çÂÂç¯Âä¾Âï¼ | |
<pre> | <pre> | ||
行 1,379: | 行 1,380: | ||
</pre> | </pre> | ||
− | + | å åÂ
Â¥ TutTB_Populate()å½å¼Âå¾Âç JavaScript æªÂæ¡Â[[http://www.borngeek.com/firefox/toolbar-tutorial/samples/js-c.txt View JavaScript Revision 3]]ï¼ | |
<pre> | <pre> | ||
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
− | // TutTB_Search() | + | // TutTB_Search() å½å¼ÂæÂÂçºæÂÂÃ¥ÂÂå®ÂæÂÂæÂÂå°ÂãÂÂevent Ã¥ÂÂæ¸æÂÂ觸ç¼å½å¼ÂçÂÂå¼å«ï¼Âtype Ã¥ÂÂæ¸ |
− | // | + | // çºæÂÂå°ÂçÂÂé¡ÂÃ¥ÂÂã |
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
function TutTB_Search(event, type) | function TutTB_Search(event, type) | ||
{ | { | ||
− | // | + | // å°Âè¦ÂçÂÂ覽çÂÂ網å |
var URL = ""; | var URL = ""; | ||
− | // | + | // 辨åÂ¥æÂÂå°Âæ¬Âä½Âæ¯å¦çº空å¼ |
var isEmpty = false; | var isEmpty = false; | ||
− | // | + | // èÂÂçÂÂæÂÂå°Âæ¬Âä½ ( <menulist> Ã¥Â
Âç´ ) |
var searchTermsBox = document.getElementById("TutTB-SearchTerms"); | var searchTermsBox = document.getElementById("TutTB-SearchTerms"); | ||
− | // | + | // å¾ÂæÂÂå°Âæ¬Âä½ÂÃ¥ÂÂåºåÂÂ串ï¼Âæ´çÂÂå¿Â
è¦ÂçÂÂ空ç½ |
− | // | + | // å¯以å¨ä¸Âé¢çÂÂç TutTB_TrimString() å½å¼ÂéÂÂä½ÂçÂÂ細篠|
var searchTerms = TutTB_TrimString(searchTermsBox.value); | var searchTerms = TutTB_TrimString(searchTermsBox.value); | ||
− | if(searchTerms.length == 0) // | + | if(searchTerms.length == 0) // æÂÂå°Âæ¬Âä½Âæ¯空ç½çÂÂÃ¥ÂÂï¼ |
− | isEmpty = true; // | + | isEmpty = true; // æ¯ï¼Âè¨Âå® isEmpty çº true |
− | else // | + | else // ä¸Âï¼Âè½ÂæÂÂçºå®ÂÃ¥Â
¨çÂÂ網å |
searchTerms = TutTB_ConvertTermsToURI(searchTerms); | searchTerms = TutTB_ConvertTermsToURI(searchTerms); | ||
− | // | + | // é¸æÂÂæÂÂå°ÂçÂÂé¡Âå |
− | // | + | // å¦ÂæÂÂæ¬Âä½Âæ¯空ç½çÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂå¼Âå°Â使ç¨èÂÂ
å° Google 網é Âä¸Âé©ç¶çÂÂå°æ¹ã |
− | // | + | // å¦åÂÂï¼ÂæÂÂå°Â輸åÂ
¥çÂÂæÂÂÃ¥ÂÂã |
switch(type) | switch(type) | ||
{ | { | ||
− | // | + | // 建ç«ÂÃ¥ÂÂçÂÂæÂÂå°ÂçÂÂ網å |
case "image": | case "image": | ||
if(isEmpty) { URL = "http://images.google.com/"; } | if(isEmpty) { URL = "http://images.google.com/"; } | ||
行 1,420: | 行 1,421: | ||
− | // | + | // 建ç«Â網é ÂæÂÂå°ÂçÂÂ網å |
case "web": | case "web": | ||
default: | default: | ||
行 1,428: | 行 1,429: | ||
} | } | ||
− | // | + | // 使ç¨ TutTB_LoadURL å½å¼Âå¨çÂÂ覽è¦ÂçªÂä¸Âè¼ÂÃ¥Â
¥ç¶²å |
TutTB_LoadURL(URL); | TutTB_LoadURL(URL); | ||
} | } | ||
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
− | // TutTB_TrimString() | + | // TutTB_TrimString() å½å¼ÂæÂÂä¿®åªåÂÂ串çÂÂÃ¥ÂÂå¾Â空ç½é¨份ï¼Âç¶å¾Âå°ÂæÂÂæÂÂçÂÂ空ç½é¨份è½ÂæÂÂæ |
− | // | + | // å®ä¸ÂÃ¥ÂÂ空ç½ï¼Âç¶å¾Âå³åÂÂä¿®æ¹å¾ÂÃ¥ÂÂ串ã |
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
function TutTB_TrimString(string) | function TutTB_TrimString(string) | ||
{ | { | ||
− | // | + | // å¦ÂæÂÂå³åÂ
¥çÂÂÃ¥ÂÂ串ç¡æÂÂï¼ÂæÂÂæ¯æ²ÂæÂÂæ±西ï¼ÂÃ¥ÂÂå³åÂÂ空å¼ |
if (!string) | if (!string) | ||
return ""; | return ""; | ||
− | string = string.replace(/^\s+/, ''); // | + | string = string.replace(/^\s+/, ''); // 移é¤åÂÂé¢空ç½ |
− | string = string.replace(/\s+$/, ''); // | + | string = string.replace(/\s+$/, ''); // 移é¤å¾Âé¢空ç½ |
− | // | + | // å°ÂæÂÂæÂÂ空ç½é¨份ç¨å®ä¸Â空ç½代æ¿ |
string = string.replace(/\s+/g, ' '); | string = string.replace(/\s+/g, ' '); | ||
− | return string; // | + | return string; // å³åÂÂæ¹è®Âå¾ÂçÂÂå¼ |
} | } | ||
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
− | // TutTB_ConvertTermsToURI() | + | // TutTB_ConvertTermsToURI() å½å¼Âå°Âå³åÂ
¥çÂÂæÂÂå°ÂÃ¥ÂÂ串è½ÂæÂÂçºå®ÂÃ¥Â
¨çÂÂ網å |
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
function TutTB_ConvertTermsToURI(terms) | function TutTB_ConvertTermsToURI(terms) | ||
{ | { | ||
− | // | + | // 建ç«Âé£åÂÂÃ¥ÂÂæ¾æ¯ÂÃ¥ÂÂæÂÂå°ÂÃ¥ÂÂ串 |
var termArray = new Array(); | var termArray = new Array(); | ||
− | // | + | // ç¨空ç½åÂÂÃ¥Â
ÂÃ¥ÂÂå²åÂÂ串 |
termArray = terms.split(" "); | termArray = terms.split(" "); | ||
− | // | + | // ç¨ä¾ÂÃ¥ÂÂæ¾å®ÂÃ¥Â
¨çÂÂ網å |
var result = ""; | var result = ""; | ||
− | // | + | // å¨åÂÂ串ä¸ÂéÂÂè¿´ |
for(var i=0; i<termArray.length; i++) | for(var i=0; i<termArray.length; i++) | ||
{ | { | ||
− | // | + | // å¨第ä¸ÂÃ¥ÂÂÃ¥ÂÂ串å¾ÂçÂÂæÂÂæÂÂçÂÂÃ¥ÂÂ串æÂÂç¨å èÂÂ(+)éÂÂé |
if(i > 0) | if(i > 0) | ||
result += "+"; | result += "+"; | ||
− | // | + | // 使ç¨ Firefox Ã¥Â
§å»ºç encodeURIComponent() å½å¼Âå 寠|
result += encodeURIComponent(termArray[i]); | result += encodeURIComponent(termArray[i]); | ||
} | } | ||
− | return result; // | + | return result; // å³åÂÂçµÂæ |
} | } | ||
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
− | // TutTB_LoadURL() | + | // TutTB_LoadURL() å½å¼Âå¨çÂÂ覽å¨ä¸Âè¼ÂÃ¥Â
¥ç¹å®ÂçÂÂ網å |
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
function TutTB_LoadURL(url) | function TutTB_LoadURL(url) | ||
{ | { | ||
− | // | + | // å¨網åÂÂÃ¥ÂÂè¨Âå®Âå³åÂ
¥çÂÂ網å |
window._content.document.location = url; | window._content.document.location = url; | ||
行 1,492: | 行 1,493: | ||
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
− | // TutTB_KeyHandler() | + | // TutTB_KeyHandler() 檢æÂ¥ãÂÂEnterãÂÂæ¯å¦被輸åÂ
¥ãÂÂæ¯çÂÂ話ï¼Âå°±å·è¡ÂæÂÂå° |
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
function TutTB_KeyHandler(event) | function TutTB_KeyHandler(event) | ||
{ | { | ||
− | // [ENTER] | + | // [ENTER]被æÂÂä¸ÂäºÂÃ¥ÂÂï¼Âå¦ÂæÂÂæ¯ï¼Âå·è¡ÂæÂÂå° |
if(event.keyCode == event.DOM_VK_RETURN) | if(event.keyCode == event.DOM_VK_RETURN) | ||
TutTB_Search(event, 'web'); | TutTB_Search(event, 'web'); | ||
行 1,502: | 行 1,503: | ||
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
− | // TutTB_Populate() | + | // TutTB_Populate() å½å¼Âå¨工åÂ
·åÂÂæ¬Âä½ÂçÂÂä¸ÂæÂÂå¼Âé¸å®æ¾置åÂÂæÂ
Âç¢çÂÂçÂÂé¸å®é Â
ç®ã |
− | // | + | // éÂÂç¶éÂÂä¸Âæ¯éÂÂ常實ç¨çÂÂï¼Âä½Âæ¯èÂÂç±éÂÂÃ¥ÂÂç¯Âä¾Âï¼ÂæÂÂÃ¥ÂÂå¯以çÂÂçÂÂÃ¥ÂÂæÂ
Âé¸å®置åÂ
¥çÂÂéÂÂä½Âæ¹å¼Âã |
//////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////// | ||
function TutTB_Populate() | function TutTB_Populate() | ||
{ | { | ||
− | // | + | // Ã¥ÂÂå¾Âå½Âåºé¸å®åÂ
Âç´ |
var menu = document.getElementById("TutTB-SearchTermsMenu"); | var menu = document.getElementById("TutTB-SearchTermsMenu"); | ||
− | // | + | // 移é¤å¨å½Âåºé¸å®ç®åÂÂçÂÂé Â
ç® |
for(var i=menu.childNodes.length - 1; i >= 0; i--) | for(var i=menu.childNodes.length - 1; i >= 0; i--) | ||
{ | { | ||
行 1,516: | 行 1,517: | ||
} | } | ||
− | // | + | // æÂÂå®Âè¦Âå¨é¸å®å¢Âå çÂÂé Â
ç®æ¸é |
var numItemsToAdd = 10; | var numItemsToAdd = 10; | ||
for(var i=0; i<numItemsToAdd; i++) | for(var i=0; i<numItemsToAdd; i++) | ||
{ | { | ||
− | // | + | // 建ç«Âè¦Âå¢Âå çÂÂæ°é¸å®é Â
ç® |
var tempItem = document.createElement("menuitem"); | var tempItem = document.createElement("menuitem"); | ||
− | // | + | // è¨Âå®Âæ°é¸å®é Â
ç®çÂÂæ¨Â籤 |
tempItem.setAttribute("label", "Dynamic Item Number " + (i+1)); | tempItem.setAttribute("label", "Dynamic Item Number " + (i+1)); | ||
− | // | + | // å¨é¸å®ä¸Âæ°å¢Âé Â
ç® |
menu.appendChild(tempItem); | menu.appendChild(tempItem); | ||
} | } | ||
行 1,533: | 行 1,534: | ||
</pre> | </pre> | ||
− | == | + | == Ã¥ÂÂæÂ
Âå åÂ
¥å·¥åÂ
·åÂÂæÂÂé (Dynamically Adding Toolbar Buttons) == |
− | + | å åÂ
¥åÂÂæÂ
Âå·¥åÂ
·åÂÂæÂÂéÂÂå°±è·ÂÃ¥ÂÂæÂ
Âç½®åÂ
¥é¸å®ä¸Â樣簡å®ï¼ÂèÂÂä¸ÂéÂÂéÂÂ常ç¸似ãÂÂé¦ÂÃ¥Â
Âï¼ÂæÂÂÃ¥ÂÂéÂÂè¦Âä¸ÂÃ¥ÂÂÃ¥ÂÂ
å«åÂÂæÂ
ÂæÂÂéÂÂçÂÂ容å¨ãÂÂå¨éÂÂÃ¥Â
Âï¼ toolbaritem Ã¥Â
Âç´ æ¯ä¸Âé¯çÂÂé¸æÂÂï¼Âæ¨Âè¨Âå¦Âä¸Âï¼ | |
<pre> | <pre> | ||
<toolbaritem id="TutTB-DynButtonContainer" /> | <toolbaritem id="TutTB-DynButtonContainer" /> | ||
</pre> | </pre> | ||
− | + | ç¾å¨ï¼Â容å¨已ç¶Âå¯以å©ç¨äºÂï¼ÂæÂÂÃ¥ÂÂå¯以使ç¨å®Âï¼Âä¾Âå åÂ
¥åÂÂæÂ
 toolbarbutton Ã¥Â
Âç´ ï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂä¸Âä¸Âå¯以è®ÂæÂÂÃ¥ÂÂå åÂ
¥åÂÂæÂ
ÂæÂÂéÂÂçÂÂå½å¼Âç¯Âä¾Âï¼ | |
<pre> | <pre> | ||
function TutTB_AddDynamicButtons() | function TutTB_AddDynamicButtons() | ||
{ | { | ||
− | // | + | // Ã¥ÂÂå¾ÂæÂÂÃ¥ÂÂå¨ XUL æÂÂè¿°ä¸Âå¢Âå çÂÂå·¥åÂ
·åÂÂé Â
ç®ãÂÂ容å¨ã |
var container = document.getElementById("TutTB-DynButtonContainer"); | var container = document.getElementById("TutTB-DynButtonContainer"); | ||
− | // | + | // 移é¤æÂÂæÂÂÃ¥ÂÂå¨çÂÂæÂÂé |
for(i=container.childNodes.length; i > 0; i--) { | for(i=container.childNodes.length; i > 0; i--) { | ||
container.removeChild(container.childNodes[0]); | container.removeChild(container.childNodes[0]); | ||
} | } | ||
− | // | + | // å¢Âå äºÂÃ¥ÂÂÃ¥ÂÂæÂ
ÂæÂÂé |
for(var i=0; i<5; i++) { | for(var i=0; i<5; i++) { | ||
var tempButton = null; | var tempButton = null; | ||
行 1,562: | 行 1,563: | ||
} | } | ||
</pre> | </pre> | ||
− | + | éÂÂÃ¥ÂÂå½å¼ÂÃ¥ÂÂç½®åÂ
¥åÂÂæÂ
Âé¸å®éÂÂ常ç¸似ãÂÂæÂÂÃ¥ÂÂå¾Â容å¨ä¸Â移é¤ç¾æÂÂçÂÂÃ¥ÂÂæÂ
ÂæÂÂéÂÂï¼Âç¶å¾Âå åÂ
¥æ°çÂÂã | |
− | '''Optional Programming Exercise''' | + | '''Optional Programming Exercise'''ï¼Â試èÂÂç¨éÂÂÃ¥ÂÂæ¦Â念ä¾Âå¢Âå ãÂÂæÂÂå°ÂÃ¥ÂÂ串æÂÂéÂÂ(search word buttons)ãÂÂå°工åÂ
·åÂÂãÂÂç¶使ç¨èÂÂ
å¨æÂÂå°ÂÃ¥ÂÂ串æÂÂéÂÂéµåÂ
¥æÂÂÃ¥ÂÂæÂÂï¼ÂÃ¥ÂÂæÂ
Âå°å¢Âå æÂÂéÂÂå°工åÂ
·åÂÂçÂÂæÂÂå¾Âï¼Âä¸ÂÃ¥ÂÂæÂÂéÂÂä¸ÂÃ¥ÂÂÃ¥ÂÂãÂÂéÂÂÃ¥Â
ÂæÂÂå¹¾åÂÂæÂÂ示@|
− | # | + | # ä½ éÂÂè¦Âå¢Âå toolbaritem 容å¨å° XUL æÂÂè¿°æªÂçÂÂæÂÂå¾Â(right before the toolbarspring element is a good choice)ãÂÂ確宠ID æ¯å¯ä¸ÂçÂÂã |
− | # | + | # å¨ menulist Ã¥Â
Âç´ ä¸Â使ç¨ oninput äºÂ件ï¼ÂéÂÂÃ¥ÂÂäºÂ件æÂÂå¨使ç¨èÂÂ
輸åÂ
¥æÂÂÃ¥ÂÂæÂÂ觸ç¼ã |
− | # | + | # ä½ å¼å«ç JavaScript æÂÂÃ¥ÂÂä¸ÂÃ¥ÂÂçÂÂäºÂï¼Â(a)å¨æÂÂå°Âæ¬Âä½Âä¸ÂÃ¥ÂÂå¾ÂæÂÂå°ÂæÂÂÃ¥ÂÂ(b)移é¤æÂÂæÂÂÃ¥Â
ÂÃ¥ÂÂ建ç«ÂçÂÂÃ¥ÂÂæÂ
ÂæÂÂéÂÂ(c)以空ç½åÂÂéÂÂæÂÂå°ÂæÂÂÃ¥ÂÂ(d)çºæ¯ÂÃ¥ÂÂç¨ç«ÂçÂÂæÂÂÃ¥ÂÂ建ç«ÂæÂÂéÂÂã |
− | + | éÂÂå°±æ¯æÂÂèÂÂç Googlebar Lite çÂÂæ¹å¼Âã | |
− | == | + | == éÂÂéÂÂèÂÂÃ¥ÂÂÃ¥ÂÂæÂÂé (Disabling and Enabling Buttons) == |
− | ( | + | (éÂÂé¨份åªæ¯åÂÂ訴你æÂÂ麼ç¨ï¼Âå¨éÂÂÃ¥ÂÂå·¥åÂ
·åÂÂç¯Âä¾Â並ä¸ÂæÂÂåºç¾)ã |
− | + | ä½ å¶ç¾å¯è½æÂÂæ³è¦ÂéÂÂéÂÂæÂÂæ¯åÂÂÃ¥ÂÂå·¥åÂ
·åÂÂæÂÂéÂÂãÂÂèÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂï¼ÂGooglebar Lite çÂÂé«Â亮度æ¨Âè¨ÂæÂÂéÂÂä¸ÂæÂÂå¨æÂÂå°Âæ¬Âä½Âæ²ÂæÂÂæÂÂå°ÂÃ¥ÂÂ串æÂÂç¼çÂÂä½Âç¨ï¼Âåªè½å·è¡Âæ¼æÂÂæÂÂå°ÂÃ¥ÂÂ串æÂÂã | |
− | + | ä¸Âé¢çÂÂä¾ÂÃ¥ÂÂæ¯å¦Âä½Â建ç«Âä¸ÂÃ¥ÂÂå¯以æ§å¶éÂÂéÂÂçÂÂä¸ÂèÂŒᴌÂ
·åÂÂæÂÂéÂÂãÂÂÃ¥ÂÂ次æÂÂéÂÂï¼ÂéÂÂä¸Âæ¯實ç¨çÂÂç¯Âä¾Âï¼Âåªæ¯èÂÂæÂÂéÂÂÃ¥ÂÂæÂÂæÂÂæ¯å¯以åÂÂå¾Âå°çÂÂãÂÂæÂ¥èÂÂæ¯é¸å®é Â
ç®çÂÂæÂÂè¿°æ¨Âè¨Âï¼ | |
<pre> | <pre> | ||
<menuitem label="Toggle Web Search Button" | <menuitem label="Toggle Web Search Button" | ||
行 1,582: | 行 1,583: | ||
oncommand="TutTB_ToggleWebSearchButton()" /> | oncommand="TutTB_ToggleWebSearchButton()" /> | ||
</pre> | </pre> | ||
− | TutTB_ToggleWebSearchButton() | + | TutTB_ToggleWebSearchButton()å½å¼ÂçÂÂç¨Âå¼Â碼@|
<pre> | <pre> | ||
function TutTB_ToggleWebSearchButton() | function TutTB_ToggleWebSearchButton() | ||
行 1,594: | 行 1,595: | ||
} | } | ||
</pre> | </pre> | ||
− | + | é¦ÂÃ¥Â
Âï¼ÂæÂÂÃ¥ÂÂå°ÂæÂÂèÂÂ趣çÂÂå·¥åÂ
·åÂÂæÂÂéÂÂ使ç¨ ID å¼以å getElementById()å½å¼ÂãÂÂåªè¦ÂæÂÂæÂÂéÂÂï¼ÂæÂÂÃ¥ÂÂå°±è½使ç¨ disabled 屬æ§æ§å¶該æÂÂéÂÂç©件çÂÂç¾æÂÂçÂÂæÂ
Â(Ã¥ÂÂÃ¥ÂÂæÂÂéÂÂéÂÂ)ãÂÂå¦ÂæÂÂå¼çº trueï¼Â就使ç¨ false Ã¥ÂÂæ¶ÂæÂÂéÂÂéÂÂéÂÂï¼ÂÃ¥ÂÂä¹Â亦ç¶ãÂÂFirefox æÂÂ幫æÂÂÃ¥ÂÂèÂÂçÂÂæÂÂéÂÂçÂÂéÂÂéÂÂï¼Âè®Â該æÂÂéÂÂä¸Âè½é»ÂæÂÂ(note that the button's image may not appeared grayed out: we must rely on skinning for that)ã | |
− | == | + | == Ã¥ÂÂæÂ
Â顯示èÂÂé±èÂÂæÂÂé (Dynamically Showing and Hiding Buttons) == |
− | ( | + | (éÂÂé¨份åªæ¯åÂÂ訴你æÂÂ麼ç¨ï¼Âå¨éÂÂÃ¥ÂÂå·¥åÂ
·åÂÂç¯Âä¾Â並ä¸ÂæÂÂåºç¾)ã |
− | Googlebar Lite | + | Googlebar Lite Ã¥Â
Â許使ç¨èÂÂ
é¸æÂÂæÂÂéÂÂå¨工åÂ
·åÂÂæÂÂçÂÂå°çÂÂ樣åÂÂãÂÂä¹Âå°±æ¯說ï¼Âå·¥åÂ
·åÂÂå¿Â
é Âè½夠åÂÂæÂ
ÂçÂÂ顯示æÂÂæ¯é±èÂÂå¯ç¨çÂÂæÂÂéÂÂãÂÂéÂÂæ¯æÂÂÃ¥ÂÂè¦Âå®ÂæÂÂç JavaScriptç¨Âå¼Â碼çÂÂ段@|
<pre> | <pre> | ||
var TB_Web = document.getElementById("TutTB-Web-Button"); | var TB_Web = document.getElementById("TutTB-Web-Button"); | ||
TB_Web.setAttribute("hidden", !TutTB_ShowWebButton); | TB_Web.setAttribute("hidden", !TutTB_ShowWebButton); | ||
</pre> | </pre> | ||
− | + | é¦ÂÃ¥Â
ÂæÂÂÃ¥ÂÂè®Âå·¥åÂ
·åÂÂæÂÂéÂÂ使ç¨ getElementById() å½å¼Âï¼Âç¶å¾ÂæÂÂÃ¥ÂÂå¼å« setAttribute()å½å¼Âä¾Âæ¹讠hidden 屬æ§çÂÂå¼ãÂÂä½ æÂÂç¼ç¾éÂÂå hidden å¼è·ÂæÂÂå¨ TutTB_ShowWebButton æÂÂè¨Âå®ÂçÂÂç¸åÂÂãÂÂéÂÂÃ¥ÂÂå¼æ¯åÂÂå¸ÂæÂÂæ¨Â籤(boolean flag)ï¼Âç¨ä¾Â辨å¥使ç¨èÂÂ
æ¯å¦æ³è¦ÂçÂÂå°ãÂÂ網é ÂæÂÂå°ÂãÂÂæÂÂéÂÂãÂÂå²åÂÂå¨éÂÂÃ¥ÂÂè®Âæ¸çÂÂå¼ï¼Âæ¯å¾Â使ç¨èÂÂ
è¨Âå®Âä¸Âè®ÂÃ¥ÂÂå°çÂÂãÂÂç¹¼çºÂé±è®Âï¼Âä¾ÂçÂÂçÂÂæÂÂÃ¥ÂÂå¦Âä½ÂÃ¥ÂÂå°éÂÂé»Âã | |
− | == | + | == è®ÂÃ¥ÂÂèÂÂå²åÂÂ使ç¨èÂÂ
è¨Âå® (Reading and Storing User Preferences) == |
− | ( | + | (éÂÂé¨份åªæ¯åÂÂ訴你æÂÂ麼ç¨ï¼Âå¨éÂÂÃ¥ÂÂå·¥åÂ
·åÂÂç¯Âä¾Â並ä¸ÂæÂÂåºç¾)ã |
− | + | çºäºÂè®ÂÃ¥ÂÂæÂÂå²åÂÂçÂÂè¨Âå®Âï¼ÂæÂÂÃ¥ÂÂéÂÂè¦ÂÃ¥ÂÂå Firefox è¨Âå®ÂæÂÂÃ¥ÂÂä»Âé¢(preferences service interface)ãÂÂæÂÂÃ¥ÂÂå¯以建ç«Âä¸ÂÃ¥ÂÂè®Âæ¸ä¾Âå®ÂæÂÂï¼ | |
<pre> | <pre> | ||
const TutTB_PrefService = | const TutTB_PrefService = | ||
行 1,617: | 行 1,618: | ||
getService(Components.interfaces.nsIPrefService); | getService(Components.interfaces.nsIPrefService); | ||
</pre> | </pre> | ||
− | + | ä¸Âæ¦åÂÂÃ¥ÂÂè¨Âå®Âä»Âé¢ï¼ÂæÂÂÃ¥ÂÂå°±å¯以ç²å¾Âå¥Â件è¨Âå®ÂçÂÂä¸Âé¨åÂÂ(i.e. the location in the preferences "registry" where our extension's settings are kept)ï¼ | |
<pre> | <pre> | ||
const TutTB_Branch = TutTB_PrefService.getBranch("tuttoolbar."); | const TutTB_Branch = TutTB_PrefService.getBranch("tuttoolbar."); | ||
</pre> | </pre> | ||
− | + | Ã¥ÂÂè¨ÂéÂÂÃ¥ÂÂå¥Â件ç¯Âä¾ÂçÂÂè¨Âå®Âèµ·å§Âæ¼ tuttoolbar æÂÂÃ¥ÂÂï¼Âå æ¤ï¼ÂæÂÂÃ¥ÂÂè¨Âå®ÂÃ¥ÂÂ串 getBranch() (Ã¥Â
§å»ºç Fireofx å½å¼Â) ãÂÂéÂÂÃ¥ÂÂå½å¼Âå¯以è®ÂæÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂå¥Â件çÂÂè¨Âå®Âï¼ÂæÂÂå¾Âå¯以ç²å¾ÂÃ¥ÂÂå¥é¸é Â
çÂÂå¼ãÂÂéÂÂæ¯æÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂæÂÂå°ãÂÂ顯示網é ÂæÂÂå°ÂæÂÂéÂÂãÂÂé¸é Â
å¯以åÂÂå¾ÂçÂÂå¼@| |
<pre> | <pre> | ||
if(TutTB_Branch.prefHasUserValue("show.button.web")) | if(TutTB_Branch.prefHasUserValue("show.button.web")) | ||
行 1,631: | 行 1,632: | ||
} | } | ||
</pre> | </pre> | ||
− | + | é¦ÂÃ¥Â
Âï¼ÂæÂÂÃ¥ÂÂ測試éÂÂÃ¥ÂÂè¨Âå®Âæ¯å¦åÂÂå¨æ¼è¨Âå®Â樹çÂÂçµÂæ§Â裡ãÂÂå¦ÂæÂÂÃ¥ÂÂå¨ï¼Âå°±ç¨ getBoolPref()å½å¼Âè®ÂÃ¥ÂÂå®ÂçÂÂå¼(å²åÂÂæ¼ TutTB_ShowWebButton è®Âæ¸)ãÂÂå¦åÂÂï¼ÂæÂÂÃ¥ÂÂå°±è¨Âå®Âçºé Âè¨Âå¼(è¨Âå®ÂçÂÂ樹èÂÂÃ¥Â
¨åÂÂè®Âæ¸)ã | |
− | + | å²åÂÂè¨Âå®Âæ¯å¾Âç°¡å®çÂÂå§ï¼Âä½ åªè¦ÂæÂÂä¾Âè¨Âå®ÂçÂÂÃ¥ÂÂ稱ï¼Âç¶å¾Â使ç¨éÂÂÃ¥ÂÂå¼@| |
<pre> | <pre> | ||
TutTB_Branch.setBoolPref("show.button.web", TutTB_ShowWebButton); | TutTB_Branch.setBoolPref("show.button.web", TutTB_ShowWebButton); | ||
</pre> | </pre> | ||
− | + | ãÂÂè®ÂÃ¥ÂÂèÂÂå²åÂÂè¨Âå®ÂãÂÂç¨ä¾Âå²åÂÂä½ çÂÂå¥Â件è¨Âå®Âæ¯å¾Âæ¹便çÂÂæ¹å¼ÂãÂÂ大é¨åÂÂçÂÂå¥Â件é½使ç¨éÂÂÃ¥ÂÂÃ¥ÂÂè½ï¼ÂæÂÂ許å¤Âå¯使ç¨çÂÂç¯Âä¾ÂçÂÂèÂÂä½ å»ç Â究ãÂÂå¦å¤Âï¼Âå¯以çÂÂç MozillaZine knowledge base çÂÂ[http://kb.mozillazine.org/Dev_:_Using_preferences æÂÂç« ]ã | |
− | = | + | = 第ä¸Âç« ï¼Âå°Â裠(Packaging the Toolbar) = |
− | + | å°ç®åÂÂçºæ¢ï¼ÂæÂÂÃ¥ÂÂç¨åÂÂæÂ
ÂéÂÂç¼ä¾ÂèÂÂçÂÂå®Âè£ÂçÂÂé¨份ãÂÂä½Âæ¯使ç¨èÂÂ
並ä¸ÂæÂÂæ³ç¨éÂÂ樣çÂÂæ¹å¼Âä¾Âå®Âè£Âå¥Â件ï¼ÂæÂÂ以æÂÂÃ¥ÂÂå¿Â
é Âå°Âè£ÂæªÂæ¡ÂæÂÂä¸ÂÃ¥ÂÂå®Âè£ÂæªÂãÂÂæÂÂÃ¥ÂÂå°Âè¦Â建ç«ÂÃ¥Â
©åÂÂæªÂæ¡Âï¼ÂXPI å JARãÂÂå¥被éÂÂ樣çÂÂæªÂæ¡ÂÃ¥ÂÂ稱給é¨ÂäºÂï¼Âä»ÂÃ¥ÂÂåªä¸ÂéÂÂæ¯ç¨ zip å£Â縮æªÂæ¡Âæ ¼å¼Âå½è£ÂçÂÂã | |
− | + | ç¾å¨æ¯å£Â縮工åÂ
·ç¼æ®åÂÂæÂÂçÂÂæÂÂÃ¥ÂÂäºÂï¼ÂæÂÂÃ¥ÂÂ人建è°使ç¨ [http://www.winzip.com/ WinZip] (å½令åÂÂ模å¼Â)ï¼Âä½Âæ¯網路ä¸Âä¹ÂæÂÂä¸Âå°ÂÃ¥Â
Âè²»çÂÂå·¥åÂ
·ãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂ丠@æÂÂæÂÂ使ç¨ UNIX å£Â縮工åÂ
·;å¨ Windows ä¸Âï¼Âå¯以使ç¨ [http://www.cygwin.com/ Cygwin] ã | |
− | == | + | == æ´æ° Chrome æ¸Â
å® (Updating the Chrome Manifest) == |
− | + | 第ä¸ÂæÂ¥å°Âè£ÂÃ¥ÂÂ
å«äºÂæ´æ° chrome æ¸Â
å®ãÂÂ注æÂÂï¼Âå¦ÂæÂÂè¦Âç¹¼çºÂÃ¥ÂÂæÂ
ÂéÂÂç¼ï¼Âä½ è¦ÂæÂÂÃ¥Â
©å chrome æ¸Â
å®ï¼Âä¸ÂÃ¥ÂÂæ¯å°Âè£Âç¨çÂÂï¼Âå¦ä¸ÂÃ¥ÂÂæ¯åÂÂæÂ
ÂéÂÂç¼ç¨çÂÂãÂÂèÂÂçÂÂéÂÂÃ¥Â
©åÂÂæªÂæ¡Âæ¯å¾Â麻çÂ
©çÂÂï¼ÂæÂÂ以æÂÂÃ¥ÂÂåªéÂÂå°ÂæÂÂÃ¥ÂÂä¸Âå·²åÂÂå¨ç chrome æ¸Â
å®åÂÂèÂÂçÂÂãÂÂ注æÂÂï¼Âå¨æÂÂÃ¥ÂÂä¿®æ¹æ¸Â
å®å¾Âï¼Âå°±ä¸Âè½ç¨å¨åÂÂæÂ
ÂéÂÂç¼äºÂï¼Âé¤éÂÂä½ ä¿®æ¹åÂÂä¾ÂãÂÂè®ÂæÂÂÃ¥ÂÂÃ¥Â
Âä¾ÂÃ¥ÂÂæ¶ä¸Âä¸Âæ¸Â
å®çÂÂÃ¥Â
§å®¹ï¼ | |
<pre> | <pre> | ||
content tuttoolbar chrome/content/ | content tuttoolbar chrome/content/ | ||
overlay chrome://browser/content/browser.xul chrome://tuttoolbar/content/tuttoolbar.xul | overlay chrome://browser/content/browser.xul chrome://tuttoolbar/content/tuttoolbar.xul | ||
skin tuttoolbar classic/1.0 chrome/skin/</pre> | skin tuttoolbar classic/1.0 chrome/skin/</pre> | ||
− | + | æÂÂÃ¥Â
©åÂÂå°æ¹éÂÂè¦Âä¿®æ¹ï¼ÂÃ¥Â
ÂçÂÂçÂÂ第ä¸Âè¡Âï¼ | |
<pre> | <pre> | ||
content tuttoolbar jar:chrome/tuttoolbar.jar!/content/</pre> | content tuttoolbar jar:chrome/tuttoolbar.jar!/content/</pre> | ||
− | + | æÂÂÃ¥ÂÂå åÂ
¥äºÂÃ¥Â
©åÂÂé Â
ç®ãÂÂé¦ÂÃ¥Â
Âæ¯ jar: ï¼Âæ¾置å¨路å¾ÂçÂÂÃ¥ÂÂé¢ãÂÂéÂÂæÂÂå® Firefox å¿Â
é Âå¾ JAR æªÂæ¡Âä¸ÂÃ¥ÂÂåºå¥Â件çÂÂÃ¥Â
§å®¹ãÂÂÃ¥ÂÂä¾Âï¼ÂæÂÂÃ¥ÂÂå åÂ
Â¥ tuttoolbar.jar!/ï¼Âä»Âæ¼ chrome/ å content/ ç®éÂÂä¸ÂéÂÂï¼ÂéÂÂæÂÂè¿°äºÂåªå JAR éÂÂè¦Â被åÂÂåºçÂÂãÂÂéÂÂå JAR çÂÂæªÂÃ¥ÂÂå¿Â
é Âè¦Âè·Âå¥Â件çÂÂæªÂÃ¥ÂÂç¸åÂÂï¼ÂÃ¥ÂÂ樣å°ï¼Âå¿Â
é Âè·ÂæªÂÃ¥ÂÂä¸Â樣使ç¨å°Â寫åÂÂé«ÂãÂÂ注æÂÂï¼Âé©ÂÃ¥ÂÂèÂÂä¸Âæ¯æÂÂÃ¥ÂÂé¯誤ï¼ÂéÂÂæ¯å¿Â
è¦ÂçÂÂãÂÂå¦ä¸ÂÃ¥ÂÂéÂÂè¦Âä¿®æ¹çÂÂè·¯å¾Âæ¯ skin ï¼Âä¾ÂçÂÂçÂÂä¿®æ¹å¾ÂçÂÂÃ¥Â
§å®¹ï¼ | |
<pre> | <pre> | ||
content tuttoolbar jar:chrome/tuttoolbar.jar!/content/ | content tuttoolbar jar:chrome/tuttoolbar.jar!/content/ | ||
行 1,661: | 行 1,662: | ||
skin tuttoolbar classic/1.0 jar:chrome/tuttoolbar.jar!/skin/</pre> | skin tuttoolbar classic/1.0 jar:chrome/tuttoolbar.jar!/skin/</pre> | ||
− | == | + | == 建章JAR æªÂæ¡ (Creating the JAR File) == |
− | + | 第ä¸ÂÃ¥ÂÂè¦Âå°Âè£ÂçÂÂæ¯ JAR æªÂæ¡ÂãÂÂé¦ÂÃ¥Â
ÂæÂÂÃ¥ÂÂèÂÂç chrome ç®éÂÂï¼ÂÃ¥ÂÂ
å«亠XULãÂÂJavaScriptãÂÂCSS 以åÂÂÃ¥ÂÂçÂÂãÂÂæªÂæ¡ÂçµÂæ§Âå¦Âä¸Âï¼ | |
<pre> | <pre> | ||
+- TutToolbar/ | +- TutToolbar/ | ||
行 1,680: | 行 1,681: | ||
+- web.png | +- web.png | ||
+- tuttoolbar.css</pre> | +- tuttoolbar.css</pre> | ||
− | + | å°Â裠JAR æÂÂæ¯ XPI æÂÂï¼ÂæÂÂ容æÂÂç¯çÂÂé¯誤就æ¯éºæ¼ÂäºÂç¸éÂÂçÂÂæªÂæ¡ÂãÂÂå¦ÂæÂÂæÂÂÃ¥ÂÂÃ¥ÂÂ裠JAR æªÂæ¡Âæ¯åÂÂç®éÂÂï¼Â裡é¢åÂÂ
å«äºÂï¼ | |
<pre> | <pre> | ||
+- content/ | +- content/ | ||
行 1,692: | 行 1,693: | ||
+- web.png | +- web.png | ||
+- tuttoolbar.css</pre> | +- tuttoolbar.css</pre> | ||
− | + | éÂÂæ¯æÂÂç¨ UNIX å·¥åÂ
·çÂÂæ¹å¼Â(å½令åÂÂ模å¼Â)ï¼ | |
<pre> | <pre> | ||
zip -r tuttoolbar.jar content/* skin/*</pre> | zip -r tuttoolbar.jar content/* skin/*</pre> | ||
− | ( | + | (è¯èÂÂ
ï¼Âä¸Âè¬ Windows 使ç¨èÂÂ
å¯以ç´æ¥尠content å skin ç®éÂÂ以 zip æ ¼å¼Âå£Â縮æÂÂå¯æªÂå .jar çÂÂæªÂæ¡ÂãÂÂ) |
− | == | + | == 建章XPI æªÂæ¡Â(Creating the XPI File) == |
− | + | å¨建ç«Â好 JAR æªÂæ¡Âä¹Âå¾Âï¼ÂæÂÂÃ¥ÂÂå¿Â
é Â建章XPI æªÂæ¡Âï¼ÂéÂÂæ¯çÂÂæ£你è¦Â給使ç¨èÂÂ
ç¨çÂÂå¥Â件å®Âè£ÂæªÂãÂÂæÂÂÃ¥ÂÂå¿Â
é Âå¨æÂÂä¸Â層ç®éÂÂä¸Â建ç«ÂéÂÂÃ¥ÂÂæªÂæ¡Âï¼ÂçµÂæ§Âå¦Âä¸Âï¼ | |
<pre> | <pre> | ||
+- TutToolbar/ | +- TutToolbar/ | ||
行 1,717: | 行 1,718: | ||
+- web.png | +- web.png | ||
+- tuttoolbar.css</pre> | +- tuttoolbar.css</pre> | ||
− | + | è· JAR æªÂæ¡Âä¸Â樣ï¼ÂXPI å¿Â
é Âç¶ÂæÂÂç¸å°ÂçÂÂè·¯å¾ÂãÂÂå¨ XPI æªÂæ¡Âä¸Âï¼ÂÃ¥ÂÂ
å«äºÂä¸ÂÃ¥ÂÂæªÂæ¡Âï¼Âå®Âè£Âæ¸Â
å®ãÂÂchrome æ¸Â
å®åÂÂÃ¥ÂÂÃ¥ÂÂ建ç«Âç JAR æªÂæ¡ÂãÂÂXPI 裡åÂÂ
å«äºÂï¼ | |
<pre> | <pre> | ||
+- install.rdf | +- install.rdf | ||
行 1,723: | 行 1,724: | ||
+- chrome/ | +- chrome/ | ||
+- tuttoolbar.jar</pre> | +- tuttoolbar.jar</pre> | ||
− | + | 使ç¨ UNIX å·¥åÂ
·çÂÂæ¹å¼Âï¼ | |
<pre> | <pre> | ||
zip tuttoolbar.xpi install.rdf chrome.manifest chrome/tuttoolbar.jar</pre> | zip tuttoolbar.xpi install.rdf chrome.manifest chrome/tuttoolbar.jar</pre> | ||
− | == | + | == å¥Â件å®Âè£Â測試 (Installing Your Toolbar Extension) == |
− | + | æÂÂ亠XPI æªÂæ¡Âä¹Âå¾Âï¼Âå°±å¯以éÂÂå§Âå®Âè£ÂçÂÂæÂ¥é©ÂãÂÂå¨ç¼表å¥Â件åÂÂï¼Âä½ ä¸Âå®Âè¦ÂÃ¥Â
Â確å®Âå¥Â件å¯以å®Âè£ÂãÂÂä¸Âå¯以使ç¨éÂÂç¼è¨Âå®ÂæªÂä¾Â測試å®Âè£Âï¼ÂÃ¥ÂÂ管å¨é£份è¨Âå®ÂæªÂå·²ç¶ÂæÂÂå¥Â件çÂÂå®Âè£ÂçÂÂæ‹ÂÂç¨你ä¸Âè¬使ç¨çÂÂï¼ÂæÂÂæ¯å¦ä¸ÂÃ¥ÂÂè¨Âå®ÂæªÂï¼Âä¾Âä¸Âé¢çÂÂæÂ¥é©Âä¾Â測試å®Âè£Âï¼ | |
− | # | + | # æªÂæ¡ > éÂÂÃ¥ÂÂæªÂæ¡ (æÂÂæ¯ç¨ Ctrl+O) ã |
− | # | + | # å¨å°Â話æ¡Âä¸Âï¼Âæ¾å°你ç XPI æªÂæ¡Âï¼Âé»Âé¸ãÂÂéÂÂÃ¥ÂÂãÂÂã |
− | + | å¦ÂæÂÂæ£確å°å®ÂæÂÂå¾Âï¼Âä½ æÂÂçÂÂå°å®Âè£Âç«é¢ãÂÂé¸æÂÂä½ è¦Âå®Âè£Âå¾Âï¼ÂéÂÂæ°éÂÂå FirefoxãÂÂä¹Âå¾Âï¼Âä½ æÂÂ該æÂÂçÂÂå°工åÂ
·åÂÂäºÂï¼ÂæÂÂÃ¥ÂÂä½ å®ÂæÂÂ第ä¸ÂÃ¥ÂÂå·¥åÂ
·åÂÂå¥Â件@| |
− | == | + | == å éÂÂå°Âè£ÂéÂÂ稠(Speeding Up the Packaging Process) == |
− | + | æÂÂÃ¥ÂÂå°Âè£Âå¥Â件å¾Âè®Â人åÂÂçÂ
©çÂÂï¼Âçºä½Âä¸Âç¨æÂÂè¿°æªÂä¾Âå®ÂæÂÂå¢ï¼Âå¦ÂæÂÂæÂÂå½令åÂÂ模å¼Âç ZIP å·¥åÂ
·ï¼Âä½ å¯以å°ÂéÂÂç¨ÂèªåÂÂÃ¥ÂÂãÂÂä¸Âé¢çÂÂç¯Âä¾Â使ç¨ DOS æ¹次æªÂå UNIX å£Â縮工åÂ
·ã | |
− | + | é¦ÂÃ¥Â
Â建ç«ÂÃ¥Â
©åÂÂæÂÂÃ¥ÂÂæªÂï¼ÂæÂÂä¸Â層ç®éÂÂç xpizip.txt ï¼Âå chrome ç®éÂÂä¸Âç jarzip.txt ã æªÂæ¡Âä¸ÂÃ¥ÂÂ
å«äºÂè¦Âå°Âè£ÂçÂÂé Â
ç®@[[http://www.borngeek.com/firefox/toolbar-tutorial/samples/xpizip.txt View xpizip.txt]] [[http://www.borngeek.com/firefox/toolbar-tutorial/samples/jarzip.txt View jarzip.txt]] | |
− | + | ä¸Âä¸ÂæÂ¥ï¼Âå¨æÂÂä¸Â層ç®éÂÂä¸Â建章DOS æ¹次æªÂ(.bat)ï¼ÂÃ¥Â
§å®¹å¦Âä¸Âï¼ | |
<pre> | <pre> | ||
zip -r chrome/tuttoolbar.jar -@ < chrome/jarzip.txt | zip -r chrome/tuttoolbar.jar -@ < chrome/jarzip.txt | ||
zip -r tuttoolbar.xpi -@ < xpizip.txt</pre> | zip -r tuttoolbar.xpi -@ < xpizip.txt</pre> | ||
− | + | å¦Âä½ æÂÂè¦Âï¼ÂéÂÂÃ¥ÂÂæÂÂè¿°æªÂç¸ç¶簡å®ãÂÂç¶èÂÂï¼Âä½ çÂÂæÂÂè¿°æªÂå¯è½æ¯ÂéÂÂÃ¥ÂÂæ´è¤ÂéÂÂãÂÂæÂÂç¨ä¾Â建章Googlebar Lite çÂÂæÂÂè¿°æªÂå¯以åÂÂæ´å¤ÂäºÂãÂÂå®Âå¯以çºæÂÂèªåÂÂæ´æ°æÂÂæÂÂçÂÂçÂÂæ¬代èÂÂï¼ÂÃ¥ÂÂå®ÂæÂÂæªÂæ¡ÂçÂÂå°Âè£ÂãÂÂéÂÂÃ¥ÂÂæÂÂè¿°æªÂæ¯ç¨ Perl å®ÂæÂÂçÂÂï¼ÂèÂÂä¸Â使ç¨ 1.0.x çÂÂå®Âè£Âæ¹æ¡Â(èÂÂéÂÂ份æÂÂÃ¥ÂÂæÂÂäºÂå¾®çÂÂä¸ÂÃ¥ÂÂ)ãÂÂæÂÂæÂÂä¾ÂéÂÂÃ¥ÂÂæÂÂè¿°æªÂ給æÂÂèÂÂ趣çÂÂ人ï¼Â[[http://www.borngeek.com/firefox/toolbar-tutorial/samples/build_script.txt View the Googlebar Lite Build Script]]ã | |
== (Ant Support) == | == (Ant Support) == | ||
− | + | å¦ÂæÂÂ你寧é¡Â使ç¨ Ant ä¾Â建ç«Âä½ çÂÂå¥Â件ï¼Âå¯以åÂÂè [http://www.borngeek.com/firefox/toolbar-tutorial/samples/ant_build.xml sample XML file] sent in by [http://www.clippingdale.com/ Brett Clippingdale]. éÂÂÃ¥ÂÂæÂÂè¿°æªÂæÂÂ該è·Âå®Âè£Âæ¸Â
å®æ¾置å¨åÂÂä¸ÂÃ¥ÂÂç®éÂÂï¼Âç¶å¾Â使ç¨ ant æÂÂ令ã | |
− | = | + | = 第åÂ
«ç« ï¼Â測試 (Testing Our Extension) = |
− | + | å¨第åÂÂç« è¨Âè«ÂçÂÂÃ¥ÂÂæÂ
ÂéÂÂç¼å°Âæ¼å¥Â件測試æÂÂå¾Â大çÂÂ幫å©ï¼Âä½Âæ¯éÂÂ裡éÂÂæÂÂä¸ÂäºÂç«Â
éÂÂæ¯éÂÂç¼èÂÂ
éÂÂè¦ÂçÂ¥éÂÂçÂÂãÂÂJavaScript æ¯å¾Âé£é¤é¯ç ï¼Â幸好 Firefox çÂÂä¸ÂäºÂç¹è²å¯以è®ÂæÂÂÃ¥ÂÂé¿åÂ
Âé£äºÂæ±人çÂÂè¦示(æ¤æ alert() å½å¼Âå¼å«)ã | |
− | == | + | == ç¶ Firefox æÂÂæ¯ÂæÂÂ該æÂÂ麼辦 (What to Do if Firefox Breaks) == |
− | + | æÂÂæÂÂÃ¥ÂÂå¥Â件æÂÂç¢çÂÂç½é£æ§çÂÂé¯誤ï¼Âå°Âè´ Firefox æÂÂçµÂéÂÂÃ¥ÂÂãÂÂç¶éÂÂ種æÂÂ
æ³Âç¼çÂÂæÂÂï¼Âä½ å¿Â
é ÂÃ¥Â
Â檢æ¥工ä½Â管çÂÂå¡æ¯å¦æÂÂç¶æÂÂç Firefox å¨å·è¡Âä¸Âï¼Â並æÂÂå®ÂéÂÂéÂÂãÂÂä¸Âæ¦確å®Âæ²Âæ Firefox å¨å·è¡Âï¼Âä½ éÂÂè¦Â移é¤æÂÂÃ¥ÂÂé¡ÂçÂÂå¥Â件ãÂÂ移é¤çÂÂæ¹æ³ÂÃ¥ÂÂ決æ¼你æ¯å¦æ£å¨使ç¨åÂÂæÂ
ÂéÂÂç¼系統ã | |
− | + | å¦ÂæÂÂä½ æ£å¨ç¨åÂÂæÂ
ÂéÂÂç¼ï¼Âåªè¦ÂçÂÂ覽åÂÂæÂ
ÂéÂÂç¼è¨Âå®ÂçÂÂå¥Â件ç®éÂÂ(第åÂÂç« )ï¼Âç¶å¾Âå°Âå¥Â件çÂÂæÂÂæ¨ÂæªÂæ¡Â(tuttoolbar@borngeek.com)移åÂÂå°æ«åÂÂçÂÂä½Âç½®ãÂÂç¨你çÂÂÃ¥ÂÂæÂ
ÂéÂÂç¼è¨Âå®ÂæªÂéÂÂæ°éÂÂå Firefox (Ã¥Â
Â許å®Âæ¸Â
é¤æÂÂæ°移é¤çÂÂå¥Â件)ï¼ ç¶å¾ÂÃ¥ÂÂ次éÂÂéÂÂçÂÂ覽å¨ãÂÂå¨你解決éÂÂÃ¥ÂÂå°Âè´ Firefox ç¶æÂÂçÂÂÃ¥ÂÂé¡Âä¹Âå¾Âï¼Âå°Âä½ çÂÂæÂÂæ¨ÂæªÂæ¡Â移åÂÂå°å¥Â件ç®éÂÂï¼Âç¶å¾ÂéÂÂæ°éÂÂå Firefox ã | |
− | + | å¦ÂæÂÂä½ æ²ÂæÂÂ使ç¨åÂÂæÂ
ÂéÂÂç¼çÂÂ話ï¼Âå°±ç¨ Firefox çÂÂå®ÂÃ¥Â
¨æ¨¡å¼Âä¾Â移é¤æÂÂÃ¥ÂÂé¡ÂçÂÂå¥Â件ãÂÂä½ å¯以ç¨åÂ
©ç¨®æ¹å¼Âä¾Âï¼ | |
− | # | + | # éÂÂ姠> æÂÂæÂÂç¨Âå¼ > Mozilla Firefox >> Mozilla Firefox (Safe Mode) ã |
− | # | + | # å¨ Firefox æ·å¾Âä¸Âå åÂ
Â¥ -safe-mode å½令åÂÂÃ¥ÂÂæ¸ã |
− | + | å¨å®ÂÃ¥Â
¨æ¨¡å¼Âä¸Âï¼ Firefox ä¸ÂæÂÂè¼ÂÃ¥Â
¥ä»»ä½Âå¥Â件æÂÂæ¯主é¡ÂãÂÂä¸Âæ¦å¨å®ÂÃ¥Â
¨æ¨¡å¼Âä¸Âï¼Âä½ å°±å¯以使ç¨å¥Â件管çÂÂå¡ä¾Â移é¤æÂÂÃ¥ÂÂé¡ÂçÂÂå¥Â件ãÂÂå¨移é¤å¥Â件ä¹Âå¾Âï¼Âè¨Âå¾Âå° -safe-mode å½令åÂÂÃ¥ÂÂæ¸移é¤(å¦ÂæÂÂä½ å¨æ·å¾Âä¸ÂæÂÂÃ¥ÂÂå åÂ
Â¥)ã | |
− | == | + | == æÂÂç¨çÂÂçÂÂ覽å¨è¨Âå® (Useful Browser Settings) == |
− | + | å¨ about:config ä»Âé¢ä¸Âï¼ÂæÂÂÃ¥Â
©åÂÂè¨Âå®Âå¯以è®Âä½ æ´容æÂÂéÂÂç¼ï¼ÂéÂÂæÂÂå½±é¿ JavaScript 主æ§å°çÂÂ輸åºè¨Âæ¯ã | |
− | + | 第ä¸ÂÃ¥ÂÂè¨Âå®Âæ¯ javascript.options.showInConsole ãÂÂç¶è¨Âå®Âçº true æÂÂï¼ÂæÂÂæÂÂå¥Â件ç¢çÂÂçÂÂé¯誤æÂÂæ¯è¦åÂÂé½æÂÂ被å³éÂÂå° JavaScript 主æ§å°ãÂÂé Âè¨Âå¼æ¯ false ï¼ æÂÂ以你å¿Â
é ÂéÂÂÃ¥ÂÂå®ÂãÂÂéÂÂÃ¥ÂÂè¨Âå®Âå°Âæ¼追蹤é¯誤æ¯å¾Âæ¹便çÂÂã | |
− | + | ä¸Âä¸ÂÃ¥ÂÂæ¯ javascript.options.strict ï¼Âé Âè¨Âå¼ä¹Âæ¯ false ãÂÂç¶è¨Âå®Âçº true æÂÂï¼ÂFirefox ç JavaScript èªÂæ³ÂæÂÂè®ÂæÂÂå´謹模å¼Âï¼Âå°Âä½ çÂÂç¨Âå¼Â碼è®ÂæÂÂå´格çÂÂç´ÂæÂÂãÂÂéÂÂè®Âä½ çÂÂç¨Âå¼Â碼æ´å®ÂÃ¥ÂÂï¼Âä¹Âæ´容æÂÂ追蹤ç¨Âå¼Â碼é¯誤ã | |
− | == JavaScript | + | == JavaScript 主æ§å°ç´Âé (Logging to the JavaScript Console) == |
− | + | 測試 JavaScript ç¨Âå¼Â碼çÂÂ好æ¹æ³Âå°±æ¯å¨ JavaScript 主æ§å°ä¸Âå°åºé¤é¯å¼ï¼Âä½ å¯以å¨ ãÂÂå·¥åÂ
· > JavaScript 主æ§å°ãÂÂéÂÂÃ¥ÂÂãÂÂæÂÂÃ¥ÂÂå¿Â
é ÂÃ¥Â
Âå¾Âå° nsIConsoleService ä»Âé¢çÂÂ實é«Â(instance)ï¼Âä¸Âé¢æ¯ç¨Âå¼Â碼çÂÂçÂÂ段@| |
<pre> | <pre> | ||
const TutTB_ConsoleService = | const TutTB_ConsoleService = | ||
行 1,785: | 行 1,786: | ||
classes['@mozilla.org/consoleservice;1']. | classes['@mozilla.org/consoleservice;1']. | ||
getService(Components.interfaces.nsIConsoleService);</pre> | getService(Components.interfaces.nsIConsoleService);</pre> | ||
− | + | 注æÂÂå°æÂÂÃ¥ÂÂç¨亠TutTB_ çÂÂÃ¥ÂÂç½®è©Âï¼Âå°±å¦ÂæÂÂ使ç¨æ¼æÂÂæÂÂå½å¼ÂèÂÂè®Âæ¸ä¸Â樣ãÂÂä¸Âæ¦æÂÂÃ¥ÂÂÃ¥ÂÂå¾ÂéÂÂÃ¥ÂÂæ§å¶å°實é«Â(console instance)ï¼ÂæÂÂÃ¥ÂÂå°±å¯以使ç¨å®Âä¾Â編寫èª己çÂÂè¨Âæ¯ãÂÂä¸Âé¢çÂÂå½å¼ÂæÂÂ幫æÂÂÃ¥ÂÂå®ÂæÂÂéÂÂ件äºÂï¼ | |
<pre> | <pre> | ||
function TutTB_Log(aMessage) | function TutTB_Log(aMessage) | ||
行 1,791: | 行 1,792: | ||
TutTB_ConsoleService.logStringMessage('Tut_Toolbar: ' + aMessage); | TutTB_ConsoleService.logStringMessage('Tut_Toolbar: ' + aMessage); | ||
}</pre> | }</pre> | ||
− | + | 實éÂÂä¸Âï¼Âä½ æÂÂ該æ¹è®Âå¨你çÂÂå¥Â件ä¸ÂãÂÂMy_Extension:ãÂÂçÂÂè¨Âæ¯é¨份åÂÂ稱ãÂÂèÂÂç±使ç¨你çÂÂå¥Â件åÂÂ稱ä¾Âç¶åÂÂç½®è©Âï¼Âä½ å¯以æ´容æÂÂÃ¥ÂÂå¾ÂåªäºÂè¨Âæ¯æ¯è¦ÂçÂ¥éÂÂçÂÂãÂÂç¾å¨ï¼Âè®Âå½å¼Âä½Âç¨ä¹Âå¾Âï¼ÂæÂÂÃ¥ÂÂå¯以å¨ç¨Âå¼Â碼ä¸ÂçÂÂä»»ä¸Âä½Âç½®ä¾Âå¼å«å®Âï¼Â以顯示é¤é¯è¨Âæ¯@| |
<pre>TutTB_Log("The value of the URL variable is: " + URL);</pre> | <pre>TutTB_Log("The value of the URL variable is: " + URL);</pre> | ||
− | + | è¨Âå¾Âä¸Âå®Âè¦Âå¨ç¼表你çÂÂå¥Â件åÂÂ移é¤éÂÂÃ¥ÂÂå½å¼ÂãÂÂä¸Âç¶ï¼ÂéÂÂä¸Âåªæ¯éÂÂä½Â主æ§å°ç´ÂéÂÂçÂÂéÂÂ度ï¼ÂéÂÂå¢Âå äºÂ使ç¨èÂÂ
主æ§å°è¦ÂçªÂçÂÂéÂÂå¿Â
è¦Âè¨Âæ¯ãÂÂè¦Âæ´é²ä¸ÂæÂ¥å°äºÂ解 JavaScript 主æ§å°ï¼Âå¯以åÂÂè [http://kb.mozillazine.org/JavaScript_Console MozillaZine knowledge base article] ã | |
− | == | + | == æ¨ÂæºÂ主æ§å°ç´Âé (Logging to the Standard Console) == |
− | + | å¦ä¸ÂÃ¥ÂÂç´ÂéÂÂé¤é¯è³Âè¨ÂçÂÂæ¹æ³Âï¼Âå°±æ¯使ç¨æ¨ÂæºÂ主æ§å°çÂÂæÂÂå·§ãÂÂå¨使ç¨éÂÂÃ¥ÂÂæ¹æ³Âä¹ÂÃ¥ÂÂï¼ÂæÂÂä¸ÂäºÂçÂÂ覽å¨çÂÂä¿®æ¹å¿Â
é Âè¦ÂÃ¥Â
Âå®ÂæÂÂãÂÂé¦ÂÃ¥Â
Âï¼ÂæÂÂÃ¥ÂÂå¿Â
é Âå åÂ
¥æ°çÂÂçÂÂ覽å¨è¨Âå®Âï¼Âå¨網åÂÂÃ¥ÂÂ輸åÂ
Â¥ about:config ï¼Â並æÂÂ丠Enter ãÂÂå³éÂ悯ÂæÂÂÃ¥ÂÂ表並é¸æ ãÂÂæ°墠> çÂÂÃ¥ÂÂå¼(Boolean)ãÂÂä¾Â建ç«Âä¸ÂÃ¥ÂÂæ°çÂÂå¸ÂæÂÂå¼è¨Âå®ÂãÂÂå°ÂéÂÂÃ¥ÂÂå¼è¨Âå®Âçº browser.dom.window.dump.enabled ï¼Â並åÂÂç¨å®Â(true)ã | |
− | + | ä¸Âä¸ÂæÂ¥ï¼Âæ¯å¨ Firefox æ·å¾Âä¸Âå åÂ
Â¥ -console å½令åÂÂ串ãÂÂ使ç¨éÂÂÃ¥ÂÂÃ¥ÂÂæ¸ï¼ÂæÂÂä½ æ¯Â次å·衠Firefox æÂÂï¼Â顯示æ¨ÂæºÂ輸åº主æ§å°ãÂÂä¸Âä½ÂéÂÂé Â
å®ÂæÂÂå¾Âï¼ Firefox ä¹ÂéÂÂÃ¥ÂÂäºÂï¼Âä»»ä½ÂèÂÂç± dump() å½å¼Âç¢çÂÂçÂÂ輸åºï¼Âé½æÂÂ顯示å¨主æ§å°è¦ÂçªÂä¸ÂãÂÂdump()å½å¼Â就妠JavaScript æ¨ÂæºÂç alert() å½å¼Âä¸Â樣ï¼ÂèªÂæ³Âä¹Âç¸似ã | |
− | == | + | == æÂÂ件ç©件模åÂÂ檢æÂ¥å¨ (The DOM Inspector) == |
− | + | å°Âæ¼è¨Âè¨Âå·¥åÂ
·åÂÂæÂÂ大çÂÂ幫å©就æ¯ DOM (Document Object Model) Inspector ï¼ÂéÂÂæ¯ä¸ÂÃ¥ÂÂå¯以è®Â你檢æÂÂ¥ XML æÂÂ件(Ã¥ÂÂ
å« XUL, HTML)çµÂæ§ÂçÂÂå·¥åÂ
·ãÂÂéÂÂÃ¥ÂÂå·¥åÂ
·è· Firefox Ã¥ÂÂ
è£Âå¨ä¸Âèµ·ï¼Âä½Âæ¯é Âè¨Âæ¯ä¸Âå®Âè£ÂçÂÂï¼Âä½ å¿Â
é Â使ç¨é²éÂÂå®Âè£Âä¾Âå®Âè£ÂéÂÂÃ¥ÂÂå·¥åÂ
·ãÂÂä¸Âæ¦å¯以使ç¨æÂÂï¼Âå°±æÂÂæÂÂè±Âå¯ÂçÂÂè³Âè¨Âå¯以ç²å¾Âï¼ÂæÂÂ以你è¦ÂÃ¥Â
Âå¸æÂÂå¦Âä½Â使ç¨å®Âã | |
− | + | å¨ä¸ÂäºÂ網é Âå¯以æ¾å°éÂÂ樣çÂÂä»Â紹@| |
* [http://books.mozdev.org/html/mozilla-app-b-sect-3.html The DOM Inspector] (from Creating Applications with Mozilla) | * [http://books.mozdev.org/html/mozilla-app-b-sect-3.html The DOM Inspector] (from Creating Applications with Mozilla) | ||
* [http://www.mozilla.org/projects/inspector/faq.html DOM Inspector FAQ] | * [http://www.mozilla.org/projects/inspector/faq.html DOM Inspector FAQ] | ||
− | + | éÂÂæ¯幫å©æÂÂÃ¥ÂÂå°Âæ¾ XUL è¨Âè¨ÂÃ¥ÂÂé¡ÂçÂÂæÂÂ好工åÂ
·ï¼Âå®Âå¯以è®Â你檢è¦Âå¤Âå XUL Ã¥Â
Âç´ çÂÂèªÂæ³ÂãÂÂæÂÂå¼·çÂÂ建è°你åÂȌ¸ç¿Âå¦Âä½Â使ç¨éÂÂÃ¥ÂÂå·¥åÂ
·ï¼ÂéÂÂé»Âç¸ç¶容æÂÂï¼ÂèÂÂä¸Âä½ æÂÂå°Âæ¼å¸æÂÂ使ç¨éÂÂé Â
å·¥åÂ
·æÂÂå°éÂÂ常å°é«ÂèÂÂã | |
− | {{link| | + | {{link|æÂÂ件å°Âæ¡Â|éÂÂç¼人å¡æÂÂ件主é Â}} |
於 2008年7月14日 (一) 09:22 的修訂
middletown church of the nazarene pizza buffalo grove il by-pass junko mizuno drag racer v3 online game mighty mighty bosstones music videos is harry on the boat movie cast qvideo2 o zone video clip dragostea din tei lanni barbie videos Ã¥ÂÂæÂÂ: Creating a Firefox Toolbar Extension (Firefox 1.5)[å·²æÂÂæ¬Â]
ä½Âè Born Geek
內容大綱
- 1 Ã¥ÂÂ訠(Instruction)
- 2 第ä¸Âç« ï¼ÂæºÂÃ¥ÂÂéÂÂ姠(Getting Started)
- 3 第äºÂç« ï¼Â建ç«Âæ¶æ§Â(Creating the Framework)
- 4 第ä¸Âç« ï¼Â建æ§Â工堷å (Structuring the Toolbar)
- 5 第åÂÂç« ï¼ÂÃ¥ÂÂæ ÂéÂÂç¼ (Dynamic Development)
- 6 第äºÂç« ï¼Âé¢æ¿製你(Skinning the Toolbar)
- 6.1 æ´æ°æªÂæ¡ÂçµÂ槠(Updating the File Structure)
- 6.2 æ´æ° Chrome 渠å® (Updating the Chrome Manifest)
- 6.3 建ç«ÂÃ¥ÂÂçÂÂæªÂæ¡ (Creating the Image Files)
- 6.4 èÂÂç±串æ¥樣å¼Â表å¥Âç¨åÂÂç (Applying the Images with CSS)
- 6.5 使ç¨樣å¼Â表 (Using the Style Sheet)
- 7 第åÂ
Âç« ï¼Â主ç¨Âå¼ (Scripting the Toolbar)
- 7.1 é£絠XUL è JavaScript (Tying XUL to JavaScript)
- 7.2 çºæÂÂéÂÂå ä¸ÂÃ¥ÂÂè½ (Adding Functionality to the Buttons)
- 7.3 æÂÂéÂÂé¸å®çÂÂ注æÂÂäºÂé  (A Special Note About Button-Menu Buttons)
- 7.4 çºæÂÂå°ÂÃ¥ÂÂå 堥åÂÂè½ (Adding Functionality to the Search Box)
- 7.5 Ã¥ÂÂæ Â置堥é¸å® (Dynamically Populating a Menu)
- 7.6 Ã¥ÂÂæ Âå 堥工堷åÂÂæÂÂé (Dynamically Adding Toolbar Buttons)
- 7.7 éÂÂéÂÂèÂÂÃ¥ÂÂÃ¥ÂÂæÂÂé (Disabling and Enabling Buttons)
- 7.8 Ã¥ÂÂæ Â顯示èÂÂé±èÂÂæÂÂé (Dynamically Showing and Hiding Buttons)
- 7.9 è®ÂÃ¥ÂÂèÂÂå²åÂÂ使ç¨è è¨Âå® (Reading and Storing User Preferences)
- 8 第ä¸Âç« ï¼Âå°Â裠(Packaging the Toolbar)
- 8.1 æ´æ° Chrome 渠å® (Updating the Chrome Manifest)
- 8.2 建章JAR æªÂæ¡ (Creating the JAR File)
- 8.3 建章XPI æªÂæ¡Â(Creating the XPI File)
- 8.4 å¥Â件å®Âè£Â測試 (Installing Your Toolbar Extension)
- 8.5 å éÂÂå°Âè£ÂéÂÂ稠(Speeding Up the Packaging Process)
- 8.6 (Ant Support)
- 9 第åÂ
«ç« ï¼Â測試 (Testing Our Extension)
- 9.1 ç¶ Firefox æÂÂæ¯ÂæÂÂ該æÂÂ麼辦 (What to Do if Firefox Breaks)
- 9.2 æÂÂç¨çÂÂçÂÂ覽å¨è¨Âå® (Useful Browser Settings)
- 9.3 JavaScript 主æ§å°ç´Âé (Logging to the JavaScript Console)
- 9.4 æ¨ÂæºÂ主æ§å°ç´Âé (Logging to the Standard Console)
- 9.5 æÂÂ件ç©件模åÂÂ檢æÂ¥å¨ (The DOM Inspector)
Ã¥ÂÂ訠(Instruction)
éÂÂ份æÂÂÃ¥ÂÂå°Â說æÂÂå¦Âä½Â建章Firefox çÂÂ工堷åÂÂå¥Â件(æ¯æ´ 1.5 æÂÂæ´æ°çÂÂçÂÂæ¬)ãÂÂ
éÂÂ份æÂÂ件æÂÂä¾Âå¥Â件å¦Âä½ÂéÂÂç¼çÂÂæ¦Âè¦ÂãÂÂå¿ è¦ÂçÂÂ工堷ãÂÂ以åÂÂ建ç«Â工堷åÂÂçÂÂç´°ç¯ÂãÂÂå¥Â件éÂÂç¼æ¯ä¸Âé£çÂÂï¼ÂÃ¥ÂÂ管忠é Âå ·åÂÂæÂÂäºÂåºç¤ÂçÂÂç¨Âå¼Âè¨Âè¨ÂçÂ¥èÂÂãÂÂ
æÂÂä¸Â種æÂÂè¡Âæ¯æÂÂ建è°你忠é Âç¨Âå¾®çÂÂæÂÂçÂÂï¼ÂXMLãÂÂJavaScriptãÂÂCSSãÂÂéÂÂä¸ÂÃ¥ÂÂæÂÂè¡Âå¸ç¿Âèµ·ä¾Âé½ä¸Âé£ï¼ÂèÂÂä¸Â網路ä¸ÂæÂÂ許å¤Âä¸Âé¯çÂÂæÂÂå¸ãÂÂ
Firefox 1.5 çÂÂå¨å¥Â件éÂÂç¼ä¸ÂæÂÂå¾Â大çÂÂæ¹åÂÂï¼ÂéÂÂÃ¥ÂÂçÂÂæ¬æ¯Âå ÂÃ¥ÂÂçÂÂçÂÂæ¾´容æÂÂ建ç«Âå¥Â件ã éÂÂ份æÂÂÃ¥ÂÂå©ç¨äºÂæ¹åÂÂçÂÂé¨份ï¼Âå¿ è¦ÂæÂÂï¼ÂæÂÂæÂÂæÂÂåºè®ÂÃ¥ÂÂçÂÂé¨份ãÂÂå¦ÂæÂÂä½ ç¼ç¾é¯誤çÂÂå°æ¹ï¼ÂæÂÂæ¯æÂÂä»»ä½Â建è°ï¼Âè«Âè¯絡ä½Âè ãÂÂ
第ä¸Âç« ï¼ÂæºÂÃ¥ÂÂéÂÂ姠(Getting Started)
éÂÂå§Âä¹Âå (Before We Start)
å¨æÂÂÃ¥ÂÂéÂÂå§Â製ä½Â第ä¸Â份工堷åÂÂå¥Â件ä¹ÂÃ¥ÂÂï¼ÂæÂÂä¸ÂäºÂéÂÂ常æÂÂç¨çÂÂæ±西æ¯你忠é Âè¦Âå ÂçÂ¥éÂÂçÂÂãÂÂ
ä¸Âè¼ÂæÂÂå (Tutorial Downloads)
å¨éÂÂ份æÂÂÃ¥ÂÂçÂÂæÂÂå¾Âï¼ÂæÂÂÃ¥ÂÂå°Â建ç«Âä¸Âå Googlebar Lite çÂÂç°¡åÂÂçÂÂæ‹ÂÂçºäºÂå°ÂéÂÂç¨ÂçÂÂå¸ç¿ÂæÂÂæÂÂ幫å©ï¼Âä½ å¯以ä¸Âè¼ÂéÂÂÃ¥ÂÂ工堷åÂÂçÂÂéÂÂç¼çÂÂæ‹ÂÂ堩份å¯å¾Âå°çÂÂçÂÂæ¬ï¼Â
- Example Toolbar XPI : éÂÂæ¯æÂÂÃ¥ÂÂå°Âè¦Â建ç«ÂçÂÂå¥Â件çÂÂå®Âè£ÂçÂÂæ‹ÂÂ
- Example Toolbar Source Code: éÂÂ份 zip æªÂæ¡Âå å«建ç«Â工堷åÂÂçÂÂÃ¥ÂÂå§Â碼ãÂÂ
注æÂÂå°éÂÂ份 xpi æªÂæ¡Âä¹Âå å«äºÂÃ¥ÂÂå§Â碼ãÂÂæÂÂè¡Âä¸ÂèÂÂè¨Âï¼Âä½ åªè¦Âä¸Âè¼ xpi çÂÂæªÂæ¡Âï¼Â並ç¨ zip çÂÂ解å£Â縮ç¨Âå¼Â解é xpi æªÂï¼Â以åÂÂå ¶ä¸Âç jar æªÂãÂÂ第äºÂ份æªÂæ¡Âåªæ¯çºäºÂæ¹便èÂÂå·²ãÂÂ
æÂÂç¨çÂÂÃ¥ÂÂèÂÂæÂÂç» (Useful References)
æÂÂå¼·çÂÂ建è°你å°Âä¸ÂÃ¥ÂÂçÂÂ網åÂÂå 堥æ¸籤ï¼Âå¨æÂÂå¸ç¿Âå¥Â件éÂÂç¼çÂÂéÂÂç¨Âï¼ÂéÂÂäºÂ網é Âå°ÂæÂÂéÂÂ常çÂÂæÂÂ幫å©ï¼ÂæÂÂç¸信å°Âä½ ä¾Â說ä¹Âæ¯ãÂÂ(Ã¥ÂÂÃ¥ÂÂé  çºåÂÂä½Âè æÂÂä¾Â)
- XUL Planet Element Reference(è±)
- MozillaZine Extension Development Forum(è±)
- Search the Firefox Source Code(è±)
- roachfiend.com Extension Tutorial(è±)
- Building an Extension - Mozilla Developer Center(è±)
- Ã¥ÂÂæÂÂæ û Hello WorldâÂÂâÂÂéÂÂç¼你çÂÂ第ä¸ÂÃ¥ÂÂFirefoxæ´å±Â(ç°¡)
- limodouçÂÂå¸ç¿Âè¨Âé - XUL(ç°¡)
- The Art of IT û åºæ¼ Mozilla çÂÂæ´å±ÂéÂÂç¼(ç°¡)
å¿ éÂÂå Âå¸ç¿Âç (Learning the Prerequisites)
å¦ÂæÂÂä¹ÂÃ¥ÂÂæÂÂæÂÂå°çÂÂï¼ÂFirefox å¥Â件éÂÂç¼éÂÂè¦Âå ÂçÂ¥éÂÂä¸Âé»ÂéÂÂæ¼ XMLãÂÂJavaScriptãÂÂÃ¥ÂÂCSS çÂÂæÂÂè¡ÂãÂÂéÂÂä¸ÂÃ¥ÂÂ主é¡Âé½æ¯ç¸ç¶容æÂÂäºÂ解çÂÂï¼ÂæÂÂä¹ÂæÂÂæÂÂä¾ÂäºÂä¸ÂäºÂéÂÂæ¼éÂÂä¸Âé  æÂÂè¡ÂçÂÂ說æÂÂãÂÂ
ä½ å°ÂæÂÂéÂÂè¦ÂçÂÂ工堷 (Tools You Will Need)
çºäºÂè¨Âè¨Âå¥Â件ï¼Âä½ éÂÂè¦Âå¹¾åÂÂ工堷è»Âé«Âï¼ÂéÂÂäºÂè»Âé«Âé½æ¯å Âè²»å¯åÂÂå¾ÂçÂÂãÂÂæÂÂÃ¥ÂÂè¦Âè¨Âè¨ÂçÂÂå¹¾åÂÂæªÂæ¡Âé½æ¯æ¨ÂæºÂæÂÂÃ¥ÂÂæªÂãÂÂå æ¤ï¼Âä½ éÂÂè¦Âä¸ÂÃ¥ÂÂä¸Âé¯çÂÂæÂÂÃ¥ÂÂ編輯å¨ãÂÂæÂÂå¼·çÂÂÃ¥ÂÂå°Â使ç¨é¡Âä¼¼ Microsoft Word çÂÂç¨Âå¼ÂãÂÂ網路ä¸ÂæÂÂä¸ÂäºÂÃ¥ÂÂåºçÂÂå Âè²»ç¨Âå¼Âè¨Âè¨ÂæÂÂÃ¥ÂÂ編輯å¨ï¼ÂéÂÂäºÂ編輯å¨å°Âä½ æÂÂéÂÂ常大çÂÂ幫å©ï¼Âä¾Âå¦ÂèªåÂÂ縮æÂÂãÂÂ強調èªÂæ³ÂçÂÂçÂÂãÂÂå¹¾åÂÂÃ¥ÂÂæ¡è¿ÂçÂÂ編輯å¨å å« Crimson EditorãÂÂTextPadãÂÂå JCreatorãÂÂEmEditorãÂÂ
第äºÂÃ¥ÂÂä½ æÂÂç¨å°çÂÂ工堷æ¯ zip æªÂçÂÂå£Â縮è»Âé«ÂãÂÂéÂÂç¶æÂÂå ¶ä»ÂéÂÂå¤ÂæÂÂç¨çÂÂ工堷ï¼ÂÃ¥ÂÂæ¯ 7-ZipãÂÂå WinRARï¼Âä½ÂæÂÂÃ¥ÂÂ人æ¯使ç¨ WinZipãÂÂç¶å°Âè£Âå¥Â件æÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂç¨å°éÂÂÃ¥ÂÂ工堷ãÂÂå¦ÂæÂÂä½ æÂÂç®ÂÃ¥ÂÂå¾Âå¤Âå¥Â件çÂÂéÂÂç¼ï¼ÂæÂÂ建è°你æ¾æÂÂå½令åÂÂä»Âé¢çÂÂå£Â縮工堷ãÂÂ使ç¨å½令åÂÂå¯以è¼ÂæÂÂå°å°Âå°Âè£ÂéÂÂç¨ÂèªåÂÂÃ¥ÂÂï¼Âä¹ÂçÂÂä¸Â你大éÂÂçÂÂæÂÂéÂÂãÂÂ
æªÂæ¡ÂçµÂæ§Âä½Âå± (File Structure Layout)
å¥Â件éÂÂç¼éÂÂè¦Âç¹å®ÂçÂÂå §é¨çµÂæ§Âï¼ÂæÂÂ以æÂÂÃ¥ÂÂå¿ é Â確å®ÂéÂÂä¸ÂæÂ¥æ¯æ£確çÂÂãÂÂå¦åÂÂï¼Âå°Âä¸ÂæÂÂç¼çÂÂä½Âç¨ãÂÂé¦Âå Âï¼ÂçºæÂÂÃ¥ÂÂçÂÂå¥Â件建ç«ÂæÂÂä¸Â層çÂÂç®éÂÂãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂ使ç¨ TutToolbar ç¶ä½Âç®éÂÂÃ¥ÂÂ稱(é¿å Â使ç¨空ç½æÂÂÃ¥ÂÂ)ãÂÂå¨éÂÂÃ¥ÂÂæ°建ç«Â好ç TutToolbar ç®éÂÂ裡ï¼ÂæÂÂÃ¥ÂÂéÂÂè¦ÂÃ¥ÂÂ建ç«Â第äºÂÃ¥ÂÂç®éÂÂãÂÂéÂÂÃ¥ÂÂç®éÂÂå½åÂÂçº chrome (使ç¨å°Â寫) ãÂÂæ¢ç¶æÂÂÃ¥ÂÂéÂÂ麼åÂÂæ¡建ç«Âç®éÂÂï¼Âé£就åÂÂä¾Â建ç«Â第ä¸ÂÃ¥ÂÂå§ï¼ÂéÂÂ次å¨ chrome ç®éÂÂ裡建ç«Âä¸ÂÃ¥ÂÂÃ¥ÂÂ稱çº content çÂÂç®éÂÂ(使ç¨å°Â寫)ãÂÂéÂÂ裡æ¯æÂÂÃ¥ÂÂçÂÂç®éÂÂçµÂæ§ÂçÂÂèµ·ä¾ÂçÂÂ樣åÂÂï¼Â
+- TutToolbar/ +- chrome/ +- content/
æÂÂè æ¯
TutToolbar/ TutToolbar/chrome/ TutToolbar/chrome/content/
第äºÂç« ï¼Â建ç«Âæ¶æ§Â(Creating the Framework)
å¥Â件çÂÂæ¶æ§Âæ¯ç¨ä¾ÂÃ¥ÂÂ訴 Firefox å¥Â件æ¯å¦Âä½Â被延伸çÂÂï¼ÂæªÂæ¡ÂçÂÂçµÂæ§ÂãÂÂ被誰建ç«ÂãÂÂæÂÂæ¯å¥Â件çÂÂå ¨çÂÂå¯ä¸Â代èÂÂ(GUID)ãÂÂå¨ Firefox 1.5 éÂÂÃ¥ÂÂçÂÂæ¬ï¼Âå¥Â件éÂÂç¼å¨éÂÂÃ¥ÂÂé¨份æÂÂå¾Â大çÂÂè®ÂÃ¥ÂÂãÂÂÃ¥ÂÂæά 1.0.x çÂÂæ¯å¾Âæ²ÂéÂÂçÂÂæÂÂå·§ï¼Âå¨ 1.5 çÂÂå·²ç¶Âè®Âå¾Âæ´æ´æ½ÂãÂÂæ´簡å®ãÂÂ
å®Âè£Â渠å® (Installer Manifest)
éÂÂ份渠å®æ¯ç¨ä¾ÂæÂÂä¾ Firefox éÂÂæ¼å¥Â件çÂÂç´°ç¯ÂãÂÂæÂÂä¸ÂäºÂéÂÂè¦ÂçÂÂé  ç®æ¾置å¨éÂÂÃ¥ÂÂæªÂæ¡Âï¼ÂæÂÂ以æÂÂÃ¥ÂÂå¿ é Â確å®ÂéÂÂé¨份æ¯æ£確çÂÂãÂÂå¨你çÂÂæÂÂä¸Â層ç®éÂÂ裡ï¼Â建ç«Âä¸ÂÃ¥ÂÂæªÂæ¡ install.rdf ãÂÂç¶你建ç«Â好éÂÂÃ¥ÂÂæªÂæ¡Âï¼Âä½ æÂÂçÂÂå°éÂÂ樣çÂÂçµÂæ§Âï¼Â
+- TutToolbar/ +- install.rdf +- chrome/ +- content/
å¨æÂÂÃ¥ÂÂéÂÂå·¥åÂÂï¼Âè®ÂæÂÂÃ¥ÂÂçÂÂçÂÂéÂÂÃ¥ÂÂç¯Âä¾ÂãÂÂæÂÂæÂÂæÂÂÃ¥ÂÂå¿ é Â編輯çÂÂé¨份已ç¶Â被çªÂ顯åºä¾ÂäºÂï¼Âæ²ÂæÂÂ被çªÂ顯çÂÂé¨份æ¯ä¸Âå¯以修æ¹çÂÂãÂÂæÂ¥èÂÂï¼ÂæÂÂÃ¥ÂÂä¾ÂçÂÂéÂÂ份æªÂæ¡ÂçÂÂ堧容ï¼ÂæÂÂå°ÂæÂÂ解éÂÂæ¯ÂÃ¥ÂÂé¨份çÂÂç´°ç¯Âï¼ÂèÂÂä¸Âå¯以éÂÂå§Â編輯屬æ¼èª己çÂÂå¥Â件ãÂÂ
<?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <!-- Required Items --> <em:id>yourextension@yoursite.com</em:id> <em:name>Your Extension's Name</em:name> <em:version>1.0</em:version> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>1.5</em:minVersion> <em:maxVersion>1.5.0.*</em:maxVersion> </Description> </em:targetApplication> <!-- Optional Items --> <em:creator>Your Name</em:creator> <em:description>A description of the extension</em:description> <em:homepageURL>http://www.yoursite.com/</em:homepageURL> </Description> </RDF>
å¨æÂÂä¸Âé¢第ä¸Âè¡Â表示éÂÂæ¯ä¸Â份 XML æ ¼å¼ÂçÂÂæªÂæ¡ÂãÂÂ第äºÂè¡Âï¼Â以 <RDF> éÂÂé ÂçÂÂï¼Âæ¯éÂÂ份æÂÂ件çÂÂåºæ¬å Âç´ (root element)ãÂÂå®ÂçÂÂ責任æ¯辨åÂ¥éÂÂé¨份æ¯ RDF (Resource Description Framework) æ ¼å¼ÂãÂÂä¸Âä¸ÂÃ¥ÂÂæ¨Â籤(Tag) <Description> Ã¥ÂÂ樣å°æ¯ç¨ä¾Â辨åÂ¥çºå®Âè£Â渠å®ãÂÂç¾å¨ï¼Âä¹Âå³çÂÂæ±西é½çµÂæÂÂäºÂï¼Âè®ÂæÂÂÃ¥ÂÂçÂÂçÂÂ第ä¸Âé¨份忠é Âè¦Â編輯çÂÂï¼Â
<em:id>yourextension@yoursite.com</em:id> <em:name>Your Extension's Name</em:name> <em:version>1.0</em:version>
第ä¸ÂÃ¥ÂÂæÂÂÃ¥ÂÂéÂÂè¦ÂæÂÂå¿ÂçÂÂæ¯å¥Â件çÂÂèÂÂå¥èÂÂ碼ãÂÂå¨ Firefox 1.5 ä¹ÂÃ¥ÂÂçÂÂçÂÂæ¬ï¼Âå¿ é Â使ç¨堨çÂÂå¯ä¸Â代èÂÂ(globally unique identifier)ï¼Âå³ GUIDãÂÂÃ¥ÂÂ管 GUID éÂÂæ¯被æ¯æ´çÂÂï¼Âæ°çÂÂæ ¼å¼ÂÃ¥ÂȾ´容æÂÂ使ç¨ãÂÂå å éÂÂè¦Â使ç¨你çÂÂå¥Â件åÂÂ稱ï¼Â@符èÂÂï¼ÂÃ¥ÂÂå ä¸Âä½ çÂÂ網ç«ÂçÂÂæÂÂä¸Â層網åÂÂãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂä¸Âï¼ÂæÂÂÃ¥ÂÂçºéÂÂÃ¥ÂÂ工堷åÂÂ使ç¨éÂÂÃ¥ÂÂå¼ tuttoolbar@borngeek.com ãÂÂ
æÂ¥èÂÂæ¯å¥Â件çÂÂÃ¥ÂÂ稱(éÂÂæÂÂ顯示å¨å¥Â件管çÂÂå¡裡)ãÂÂå¨æÂÂÃ¥ÂÂçÂÂç¯Âä¾Â裡ï¼Â使ç¨ Toolbar Tutorial çºéÂÂÃ¥ÂÂå¥Â件çÂÂÃ¥ÂÂ稱ãÂÂ確å®ÂéÂÂÃ¥ÂÂÃ¥ÂÂ稱ä¸Âå å«çÂÂæᬏÂÂï¼Âå çºçÂÂæᬏÂÂæÂÂå®Âèª己å°Â屬çÂÂæ¨Â籤ãÂÂæÂÂÃ¥ÂÂè¦Â編輯çÂÂéÂÂÃ¥ÂÂæ¨Â籤就å¨ä¸Âä¸Âè¡ÂãÂÂæ¢ç¶éÂÂæ¯æÂÂÃ¥ÂÂ試åÂÂè¦ÂÃ¥ÂÂçÂÂ第ä¸ÂÃ¥ÂÂ工堷åÂÂå¥Â件ï¼Âè®ÂéÂÂÃ¥ÂÂå¼çº 1.0 ãÂÂè¦Â注æÂÂå°ï¼Âå¨çÂÂ實çÂÂæ æ³Â裡ï¼Âç¶你ç¼表æ°çÂÂæÂÂå¥Â件æÂÂï¼Âå¿ é Âæ´æ°éÂÂÃ¥ÂÂå¼ï¼ÂæÂÂ述解è¯ç¨Âå¼Â(Scripter)å¨èªåÂÂæ´æ°éÂÂç¨ÂæÂÂä¸ÂæÂÂç¼çÂÂÃ¥ÂÂé¡ÂãÂÂå¨æÂÂçÂÂå¥Â件裡ï¼ÂæÂÂå©ç¨äºÂæÂÂè¿°èªÂæ³ (以 Perl 寫æÂÂ)ãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂçÂÂ第ä¸Âç« ï¼ÂæÂÂå°ÂæÂÂÃ¥ÂÂ訴你æÂÂå¦Âä½Â使ç¨ãÂÂ
ä¸Âä¸ÂÃ¥ÂÂÃ¥ÂÂå¡Âä¹Âæ¯éÂÂÃ¥ÂÂå®Âè£Â渠å®éÂÂè¦ÂçÂÂä¸Âé¨åÂÂï¼ÂæÂ¥èÂÂä¾ÂçÂÂçÂÂéÂÂé¨份ï¼Â
<em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>1.5</em:minVersion> <em:maxVersion>1.5.0.*</em:maxVersion> </Description> </em:targetApplication>
éÂÂÃ¥ÂÂÃ¥ÂÂå¡Âæ¯ç¨ä¾ÂæÂÂ示å¥Â件è¦Âç¨å¨åªåÂÂç¨Âå¼ÂãÂÂå¨éÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂï¼ÂæÂÂÃ¥ÂÂè¦ÂéÂÂç¼ Firefox çÂÂå¥Â件ãÂÂå æ¤ï¼Â<em:id> éÂÂÃ¥ÂÂå Âç´ æÂÂå®Â亠Firefox ç GUID ãÂÂä½ ä¸ÂæÂÂ該æ¹è®ÂéÂÂÃ¥ÂÂå¼ï¼Âå¦åÂÂï¼ÂæÂÂè®Âä½ çÂÂå¥Â件ç¡æ³Â被æ£確å°å®Âè£ÂãÂÂ
å¯ä¸Âå ©åÂÂæÂÂÃ¥ÂÂéÂÂè¦Âè®ÂÃ¥ÂÂçÂÂï¼Âæ¯éÂÂå ©åÂÂå Âç´ ï¼Â<em:minVersion> ã <em:maxVersion> ãÂÂéÂÂå ©åÂÂå Âç´ æÂÂæÂÂå¥Â件é©åÂÂç¨å¨ Firefox çÂÂåªåÂÂçÂÂæ¬ ( minVersion æ¯æÂÂä½Âæ¯æ´çÂÂæ¬ï¼Âè maxVersion æ¯æÂÂé«Âæ¯æ´çÂÂæ¬) ã å¨æÂÂÃ¥ÂÂçÂÂç¯Âä¾Âï¼ÂæÂÂÃ¥ÂÂæÂÂ使ç¨ 1.5 (minVersion) è 1.5.0.* ï¼ÂmaxVersion)ãÂÂå çºæÂÂÃ¥ÂÂå©ç¨ Firefox 1.5 çÂÂéÂÂç¼ç°å¢Âï¼ÂæÂÂ以ä¸Âå¯以æ minVersion è¨Âå®ÂçÂÂ毠1.5 éÂÂå°ÂãÂÂ
注æÂÂå°ï¼Âä½ æÂÂ使ç¨çÂÂçÂÂæᬏÂÂå¿ é Âéµå®Âæ¨ÂæºÂÃ¥ÂÂå®ÂãÂÂèÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂï¼ÂãÂÂ1.5 Release Candidate 1ãÂÂæ¯ä¸Âè¡ÂçÂÂãÂÂç®å Firefox çÂÂçÂÂæ¬çµÂæ§Âæ¯ç¸ç¶å´謹çÂÂï¼Âå¨ Mozilla Developer Center çÂÂæÂÂç« Toolkit Version Format æÂÂ詳細çÂÂæÂÂè¿°ãÂÂæÂÂ建è°你è®ÂéÂÂç¯ÂæÂÂç« ï¼Â以äºÂ解æÂÂ樣çÂÂÃ¥ÂÂ串æ¯被å Â許çÂÂãÂÂ
å¨å®Âè£Â渠å®çÂÂæÂÂå¾Âï¼Âæ¯ç¨ä¾ÂæÂÂè¿°å¥Â件çÂÂè³ÂæÂÂå®Â義ï¼ÂæÂÂ稱ä¸Âç¹¼è³ÂæÂÂ(meta-data)ï¼Â
<!-- Optional Items --> <em:creator>Your Name</em:creator> <em:description>A description of the extension</em:description> <em:homepageURL>http://www.yoursite.com/</em:homepageURL>
å°±å¦Â註éÂÂä¸Â樣ï¼ÂéÂÂäºÂå Âç´ æ¯éÂÂå¿ è¦ÂçÂÂãÂÂ<em:creator> å Â許å¥Â件ä½Âè æÂÂæÂÂèª己çÂÂÃ¥ÂÂÃ¥ÂÂï¼ÂéÂÂ樣å¥人就çÂ¥éÂÂæ¯誰製ä½ÂéÂÂÃ¥ÂÂå¥Â件ãÂÂä¸Âä¸ÂÃ¥ÂÂï¼Â<em:description> å Â許æÂÂÃ¥ÂÂå°ÂæÂÂÃ¥ÂÂçÂÂå¥Â件åÂÂä¸ÂäºÂ說æÂÂï¼ÂéÂÂÃ¥ÂÂ說æÂÂæÂÂ顯示å¨å¥Â件管çÂÂå¡ä¸ÂçÂÂå¥Â件åÂÂ稱åºÂä¸ÂãÂÂæÂÂå¾Âï¼Â<em:homepageURL> å Â許æÂÂÃ¥ÂÂæÂÂæÂÂå¥人å¯以å¨åª裡æ¾å°æÂÂÃ¥ÂÂçÂÂå¥Â件ãÂÂ
注æÂÂå°ï¼ÂéÂÂäºÂä¸Âæ¯å¯ä¸ÂçÂÂè³ÂæÂÂå®Â義ï¼ÂÃ¥ÂÂæÂÂä¹ÂæÂÂ許å¤Âå ¶ä»Âå¯é¸ç¨çÂÂé  ç®ãÂÂèÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂï¼ÂæÂÂÃ¥ÂÂå Âç´ å¯以å¨å¥Â件管çÂÂå¡ä¸Â使ç¨æÂÂÃ¥ÂÂèª己çÂÂÃ¥ÂÂ示(icon)ã å¦ä¸ÂÃ¥ÂÂå Âç´ å Â許æÂÂÃ¥ÂÂæÂÂå®Âèªè¨Âé¸頠çÂÂä½Âç½®æÂÂæ¯ãÂÂéÂÂæ¼ãÂÂçÂÂå°Â話è¦ÂçªÂãÂÂå ¨é¨å¯ç¨çÂÂå Âç´ (ä¹Âå«åÂÂ屬æ§ properties )ï¼Âå¯以çÂÂçÂÂå¨Mozilla Developer Center ä¸ÂçÂÂæÂÂç« Installer Manifests ãÂÂæÂÂå¾Âä¸Âé»Âè¦Â注æÂÂçÂÂï¼ÂæÂÂæÂÂçÂÂå Âç´ æ¯ä¸ÂéÂÂè¦ÂæÂÂç §é ÂåºÂçÂÂãÂÂä¹Âå°±æ¯說ï¼Âä½ å¯以å°Âå®ÂÃ¥ÂÂæ¾å¨æªÂæ¡Âä¸Âä»»ä½Âå°æ¹ï¼Âå å è¦Â注æÂÂçÂÂæ¯ï¼Âå°Âå®ÂÃ¥ÂÂæ¾置å¨ <Description> è </Description> ä¹ÂéÂÂãÂÂ
ç¾å¨ï¼ÂæÂÂÃ¥ÂÂäºÂ解äºÂå®Âè£Â渠å®ï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂæÂÂå¾ÂçÂÂ樣åÂÂï¼ÂéÂÂÃ¥ÂÂçÂÂæ¬å°Â被使ç¨å¨éÂÂ份æÂÂÃ¥ÂÂä¸ÂãÂÂä½ å¯以ç´æÂ¥å°Âä¸Âé¢çÂÂé¨份ï¼Âè¤Â製å¨ install.rdf ä¸ÂãÂÂ
<?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <!-- Required Items --> <em:id>tuttoolbar@borngeek.com</em:id> <em:name>Tutorial Toolbar</em:name> <em:version>1.0</em:version> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>1.5</em:minVersion> <em:maxVersion>1.5.0.*</em:maxVersion> </Description> </em:targetApplication> <!-- Optional Items --> <em:creator>Jonah Bishop</em:creator> <em:description>An example toolbar extension.</em:description> <em:homepageURL>http://www.borngeek.com/firefox/</em:homepageURL> </Description> </RDF>
Chrome 渠å® (Chrome Manifest)
Chrome 渠å®æ¯ Firefox 1.5 æÂÂéÂÂå§ÂæÂÂçÂÂãÂÂå¨ä¹ÂÃ¥ÂÂï¼ÂæÂÂæÂÂçÂÂè³ÂæÂÂ被è¨Âå®Âå¨堩åÂÂå°æ¹ï¼Âå®Âè£Â渠å®(installer manifest)ãÂÂå contents.rdf ãÂÂèÂÂç¾å¨ï¼Âæ°çÂÂæ ¼å¼Â顯å¾Âæ´簡å®ãÂÂÃ¥ÂÂ次å¨æÂÂä¸Â層ç®éÂÂ建ç«Âå¦å¤Âä¸ÂÃ¥ÂÂæªÂæ¡ chrome.manifest ãÂÂä¸Âé¢æ¯æªÂæ¡ÂçµÂæ§ÂçÂÂèµ·ä¾ÂçÂÂ樣åÂÂï¼Â
+- TutToolbar/ +- install.rdf +- chrome.manifest +- chrome/ +- content/
Chrome 渠å®æ¯ç¨ä¾ÂÃ¥ÂÂ訴 Firefox ï¼ÂæÂÂÃ¥ÂÂçÂÂå¥Â件æÂÂä¾ÂçÂÂå°Âè£Â(package)èÂÂè¦Âè¼Â(overlay)ãÂÂå¨æÂÂÃ¥ÂÂéÂÂå§Â建ç«Âä¹ÂÃ¥ÂÂï¼Âå ÂçÂÂÃ¥ÂÂç¯Âä¾Âï¼Â
content myextension chrome/content/ overlay chrome://browser/content/browser.xul chrome://myextension/content/overlay.xul locale myextension en-US chrome/locale/en-US/ skin myextension classic/1.0 chrome/skin/
èÂÂæ©å Â使ç¨ç contents.rdf (éÂÂ常趠éÂÂ20è¡Â) æ¯Âè¼Âï¼Âç¾å¨çÂÂæ¹å¼Âè®Âå¾ÂéÂÂ常簡å®ï¼Â第ä¸Âè¡Â使ç¨你æÂÂå®ÂçÂÂå°Âè£ÂÃ¥ÂÂ稱ä¾ÂçÂȎÂÂï¼Â並æÂÂæÂÂæ¾置å¨ content ç®éÂÂãÂÂéÂÂå°Âå Â許 chrome è³ÂæºÂèÂÂå¥åÂÂ串(Uniform Resource Identifierï¼Â簡稱 URI) ï¼Â妠chrome://myextension/content/ï¼Âå¨æÂÂÃ¥ÂÂçÂÂå¥Â件層ç´Âä¸ÂæÂÂÃ¥ÂÂé©ç¶çÂÂå°æ¹ãÂÂ注æÂÂï¼Âå°Âè£ÂÃ¥ÂÂ稱åªè½以å°Â寫表示ï¼Âå ¶ä»Âæ··åÂÂ大å°Â寫ï¼ÂæÂÂæ¯堨é¨大寫çÂÂÃ¥ÂÂ稱é½æ¯ä¸Âå Â許çÂÂãÂÂ
注æÂÂå°ï¼Âcontent ç®éÂÂçÂÂä½Âç½®æ¯ç¸å°Âæ¼å¥Â件çÂÂæ ¹ç®éÂÂãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂï¼ÂæÂÂÃ¥ÂÂ使ç¨ tuttoolbar ç¶ä½Âå°Âè£ÂÃ¥ÂÂ稱ãÂÂ
第äºÂè¡ÂçÂȎ chrome://browser/content/browser.xul çÂÂè¦Âè¼Â(overlay)ï¼ÂéÂÂå Â許你æ°å¢ÂæÂÂä¿®æ¹ Firefox 主è¦ÂçªÂçÂÂ使ç¨è ä»Âé¢(user interface)ãÂÂ
å¨ä¸Âé¢çÂÂç¯Âä¾Âï¼Âchrome://myextension/content/overlay.xul æÂÂå®ÂäºÂè¦Âè¼Â(overlay)çÂÂXUL æªÂæ¡ÂãÂÂ
æÂÂå¥話說ï¼Âä½Âæ¼å¥Â件丠content ç®éÂÂç overlay.xul æªÂæ¡Âï¼Âæ¯æÂÂÃ¥ÂÂå°Âè¦Âæ°å¢ÂçÂÂ使ç¨è ä»Âé¢(工堷åÂÂ)ãÂÂå¨éÂÂÃ¥ÂÂé¨份ï¼ÂæÂÂÃ¥ÂÂè¦Â使ç¨çÂÂå¼çº chrome://tuttoolbar/content/tuttoolbar.xul ã ä¸Âä¸Âè¡Â說æÂÂå°åÂÂÃ¥ÂÂå¦Âä½Â建ç«Â(how a locale can be created)ãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂä¸Âï¼ÂæÂÂÃ¥ÂÂä¸Âè¨Âè¨Âå°åÂÂÃ¥ÂÂ(éÂÂç¶éÂÂç¨Âå¾Âç°¡å®)ï¼ÂéÂÂå°Âå¨æªä¾ÂÃ¥ÂÂÃ¥ÂÂè¨Âè«ÂãÂÂ
æÂÂå¾Âä¸Âè¡Âè¨Âå®ÂäºÂé¢æ¿(skin)ï¼ÂæÂÂÃ¥ÂÂå°Â使ç¨éÂÂÃ¥ÂÂæÂÂå·§ä¾Âç¾ÂÃ¥ÂÂæÂÂÃ¥ÂÂçÂÂ工堷åÂÂãÂÂç¾å¨ï¼Âå ÂçÂ¥éÂÂå®Âï¼ÂæÂÂÃ¥ÂÂå°Âå¨第äºÂç« åÂÂÃ¥ÂÂä¾Âè¨Âè«ÂéÂÂé»Âã ä¸ÂÃ¥ÂÂé½å¾Âç°¡å®ï¼Âä¸Âæ¯åÂÂï¼Âä¸Âé¢æ¯æÂÂÃ¥ÂÂå°ÂæÂÂ使ç¨ç chrome 渠å®ï¼ÂéÂÂåªæ¯åÂÂæÂÂÃ¥ÂÂï¼Âä¹Âå¾ÂæÂÂÃ¥ÂÂå°ÂæÂÂå 堥é¢æ¿çÂÂè³Âè¨ÂãÂÂÃ¥ÂÂä¸Â次ï¼Âå°Âä¸Âé¢çÂÂç¨Âå¼Â碼è¤Â製å°æÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂ建ç«Âç chrome.manifest ãÂÂ
content tuttoolbar chrome/content/ overlay chrome://browser/content/browser.xul chrome://tuttoolbar/content/tuttoolbar.xul
ç¾å¨æ¶æ§Âå·²ç¶Âå¯以äºÂï¼ÂæÂ¥èÂÂè®ÂæÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂäºÂæÂÂ趣çÂÂäºÂå§ï¼Â
第ä¸Âç« ï¼Â建æ§Â工堷å (Structuring the Toolbar)
Firefox å¥Â件çÂÂ使ç¨è ä»Âé¢é¨份æ¯使ç¨ XUL æÂÂè¡ (é³ï¼Âzool)ï¼ÂéÂÂæ¯ä¸Â種ç¨ä¾Âè¨Âè¨Â使ç¨è ä»Âé¢çÂÂæ¨Â示èªÂè¨ÂãÂÂXUL å¯以æ³æÂÂæ¯ä¸Â種 XML çÂÂ調å³æÂÂ(æÂÂæ¨æÂÂéÂÂå åÂÂè½çÂÂ)ï¼ å®Âä¸ÂéÂÂæ¯使ç¨é Âè¨Âå Âç´ ç XML (ä¹Âå«å widgets)ãÂÂ使ç¨ XUL çÂÂ好èÂÂï¼Âæ¯å çºå®Â使ç¨äºÂÃ¥ÂÂæ Âè¦Âè¼Â(dynamic overlays)çÂÂæÂÂè¡ÂãÂÂÃ¥ÂÂæ Âè¦Âè¼ÂæÂÂè¡Âå¯以è®ÂéÂÂç¼è ä¸ÂéÂÂè¦Âæ¹è®ÂÃ¥ÂÂæ¬ä»Âé¢çÂÂç¨Âå¼Â碼çÂÂæ æ³Âä¸Âï¼Âå»修æ¹è¦ÂçªÂçÂÂ使ç¨è ä»Âé¢ãÂÂå¨ä¸ÂéÂÂæ´åÂÂÃ¥ÂÂå§Âç¨Âå¼Â碼çÂÂæ æ³Âä¸Âï¼Âå¯以è®ÂæÂÂÃ¥ÂÂå°Â注æ¼è¨Âè¨ÂæÂÂÃ¥ÂÂçÂÂå¥Â件ï¼ÂèÂÂä¸Âç¨æÂÂå¿ÂéÂÂè¦ÂéÂÂè¤ÂéÂÂç¼çÂÂÃ¥ÂÂé¡ÂãÂÂå¨éÂÂÃ¥ÂÂç« ç¯Âï¼ÂæÂÂÃ¥ÂÂè¦Âä¾ÂçÂÂçÂÂè¨Âè¨Â工堷åÂÂç XUL å¿ è¦Âæ¨Â示ãÂÂè¨Âä½Âï¼ÂXUL å å æ¯ç¨ä¾Â建æ§Â工堷åÂÂèÂÂå·²ãÂÂçºäºÂè®Â工堷åÂÂå¯以éÂÂä½Âï¼ÂæÂÂÃ¥ÂÂå¿ é Â使ç¨ JavaScript ï¼ÂéÂÂé¨份å°Âå¨第å Âç« æÂÂå°ãÂÂ
å¨ content ç®éÂÂ裡ï¼Â建ç«Âä¸ÂÃ¥ÂÂæªÂÃ¥ÂÂçº tuttoolbar.xul çÂÂæªÂæ¡ÂãÂÂå¨你建ç«Â好ä¹Âå¾Âï¼Âç®éÂÂçÂÂçµÂæ§ÂæÂÂæ¯éÂÂ樣ï¼Â
+- TutToolbar/ +- install.rdf +- chrome.manifest +- chrome/ +- content/ +- tuttoolbar.xul
ç¾å¨ï¼ÂæÂÂÃ¥ÂÂå·²ç¶Â建ç«Â好éÂÂÃ¥ÂÂæªÂæ¡Âï¼Âå¯以éÂÂè¡Âå°éÂÂå§Âè¨Âè«Â堧容ãÂÂé¨èÂÂé²è¡ÂçÂÂè ³æÂ¥ï¼ÂæÂÂæÂÂå°ÂæªÂæ¡ÂçÂÂæÂÂæÂÂ堧容ï¼Âä¸ÂæÂ¥ä¸ÂæÂ¥å°ä»Âç´¹ãÂÂéÂÂæÂÂè®ÂéÂÂç¨ÂçÂÂèµ·ä¾Âæ´簡å®ï¼Âå¨éÂÂç« ç¯ÂçÂÂæÂÂå¾Âï¼ÂéÂÂÃ¥ÂÂæªÂæ¡ÂæÂÂç¸ç¶å¥堨ãÂÂ
å çº XUL åªæ¯ä¸Â種 XML çÂÂ調å³æÂÂï¼ÂæÂÂ以第ä¸Âè¡Âå¿ é Âæ¯使ç¨ XML çÂÂ宣åÂÂï¼Â
<?xml version="1.0"?>
ç¾å¨ï¼Â宣åÂÂéÂÂæ¯ä¸Âå XML çÂÂæªÂæ¡Âä¹Âå¾Âï¼ÂæÂÂÃ¥ÂÂå°±å¯以éÂÂå§ÂèÂÂç± overlay å Âç´ è¨Âè¨Âè¦Âè¼ÂäºÂãÂÂéÂÂÃ¥ÂÂå Âç´ å°ÂæÂÂæ¯éÂÂæ´份æÂÂ件çÂÂæ ¹å Âç´ ãÂÂæÂÂå¥話說ï¼ÂæÂÂæÂÂå ¶ä»ÂçÂÂå Âç´ å¿ é Âå¨ <overlay> è </overlay> ä¹ÂéÂÂãÂÂéÂÂæ¯ overlay çÂÂèµ·ä¾ÂçÂÂ樣åÂÂï¼Â
<overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> </overlay>
éÂÂÃ¥ÂÂå Âç´ æÂÂå ©åÂÂ屬æ§ï¼Âid è xmlns ãÂÂéÂÂè· HTML é¡Âä¼¼ï¼Âid çÂÂå¼忠é Âæ¯å¯ä¸ÂçÂÂãÂÂæ´éÂÂè¦ÂçÂÂæ¯ï¼ÂéÂÂä¹Âå¿ é Âæ¯æ´åÂÂçÂÂ覽å¨å¯ä¸ÂçÂÂå¼ãÂÂéÂÂ裡æÂÂä¸ÂÃ¥ÂÂå¯以è®Â你確å®ÂæÂÂ使ç¨ç ID æ¯å¯ä¸ÂçÂÂæ¹æ³ÂãÂÂä¾Âå¦Âï¼Âä¸Âé¢çÂÂç¯Âä¾ÂãÂÂä½ å¯以注æÂÂå°æÂÂ使ç¨亠TutTB éÂÂé ÂçÂÂÃ¥ÂÂç¼ä¾Âå®Â義 id 屬æ§çÂÂå¼ãÂÂ使ç¨符åÂÂä½ çÂÂå¥Â件åÂÂ稱éÂÂé ÂçÂÂÃ¥ÂÂç¼ï¼ÂéÂÂæÂÂ使 ID æ¯å¯ä¸ÂçÂÂå¯è½æ§æÂÂé«ÂãÂÂ並ä¸Â注æÂÂå°ï¼Â實éÂÂçÂÂå¼æ¯ä¸ÂéÂÂè¦Âå å« overlay çÂÂÃ¥ÂÂç¼ï¼ÂæÂÂéÂÂ麼åÂÂæ¯æ¹便æÂÂ追蹤æÂÂ使ç¨çÂÂÃ¥ÂÂ稱æ¯åÂÂä»Â麼ç¨çÂÂãÂÂ
第äºÂÃ¥ÂÂ屬æ§ï¼Âxmlnsï¼Âç¨ä¾ÂæÂÂå®Â使ç¨æ¼è¦Âè¼ÂçÂÂå½åÂÂ空éÂÂãÂÂæ¢ç¶éÂÂæ¯ XUL æÂÂ件ï¼ÂæÂÂÃ¥ÂÂå¿ é Âå®Â義 XUL çÂÂå½åÂÂ空éÂÂï¼ÂéÂÂæ¯你æÂÂä¸Âç´ç¨å°çÂÂå¼ãÂÂ
工堷箱èÂÂ工堷å (The Toolbox and Toolbar)
æÂÂæÂÂçÂÂ工堷åÂÂæÂÂ該被éÂÂä¸Âå¨工堷箱ä¸ÂãÂÂæÂÂÃ¥ÂÂ使ç¨ toolbox å Âç´ ä¾ÂæÂÂå®Âä¸ÂÃ¥ÂÂ工堷箱(è¨Âä½Âï¼ÂéÂÂÃ¥ÂÂå Âç´ å¿ é Â被æ¾置å¨ overlay ä¹ÂéÂÂãÂÂ)ï¼Â
<toolbox id="navigator-toolbox"> </toolbox>
注æÂÂå°ï¼ÂéÂÂå id 屬æ§æÂÂä¸ÂÃ¥ÂÂé Âè¨Âå¼ï¼Ânavigator-toolbox ã éÂÂÃ¥ÂÂç¹å®ÂçÂÂå¼表示çº Firefox è¦ÂçªÂä¸Â主è¦ÂçÂÂ工堷箱å Âç´ ï¼Âè·ÂçÂÂ覽工堷åÂÂãÂÂé¸å®åÂÂãÂÂ網åÂÂÃ¥ÂÂï¼ÂæÂÂæ¯堶ä»Âé¡Âä¼¼çÂÂæ§å¶é¸頠ä¸Â樣ãÂÂèÂÂç±æÂÂå®ÂéÂÂÃ¥ÂÂç¹åÂ¥çÂÂ工堷åÂÂï¼ÂæÂÂÃ¥ÂÂå¯以確å®ÂéÂÂÃ¥ÂÂ工堷åÂÂæÂÂèÂÂå ¶ä»ÂçÂÂ工堷åÂÂé æÂÂå¨ä¸Âèµ·ãÂÂæÂÂ建è°你總æ¯è®Âä½ çÂÂ工堷åÂÂæ¾å¨éÂÂÃ¥ÂÂç¹å®ÂçÂÂ工堷箱ä¸Âï¼ÂéÂÂä¸Âåªè®Âä½ æÂÂçÂÂèµ·ä¾Âä¸Âè´çÂÂ工堷åÂÂï¼Âä¹Âå¯以è®Âä½ å¨ ãÂÂ檢è¦Â>工堷åÂÂã ä¸Âï¼Âå¿«éÂÂå°å°Âä½ çÂÂ工堷åÂÂé±èÂÂæÂÂæ¯顯示ãÂÂ
è®ÂæÂÂÃ¥ÂÂå°Â注æÂÂÃ¥ÂÂæ¾åÂÂå° toolbar å Âç´ ï¼ÂæÂÂÃ¥ÂÂæÂÂå°ÂéÂÂÃ¥ÂÂå Âç´ æ¾å¨ toolbox ä¹Âä¸ÂãÂÂçÂÂçÂÂéÂÂÃ¥ÂÂç¯Âä¾Âï¼Â
<toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden"> </toolbar>
è®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂéÂÂÃ¥ÂÂå Âç´ çÂÂ屬æ§ï¼Â
- toolbarname - éÂÂÃ¥ÂÂå Âç´ æÂÂå®Âå¥Â件çÂÂÃ¥ÂÂ稱(éÂÂæÂÂæ¯你å¨ãÂÂ檢è¦Â>工堷åÂÂãÂÂçÂÂå°çÂÂæÂÂÃ¥ÂÂ)ãÂÂ
- accesskey - 給éÂÂÃ¥ÂÂ工堷åÂÂæÂÂå®ÂÃ¥ÂÂæ¯Âï¼Âç¨ä¾Âç¶ä½Âå¿«éÂÂéµ使ç¨ãÂÂå¨éÂÂÃ¥ÂÂ工堷åÂÂæÂÂÃ¥ÂÂä¸Âï¼ÂæÂÂÃ¥ÂÂ使ç¨大寫ç T ãÂÂéÂÂç¶éÂÂæ¯éÂÂå¿ è¦ÂçÂÂ屬æ§ï¼ÂéÂÂæ¯強çÂÂ建è°你使ç¨å®Âï¼ÂéÂÂè½è®Â使ç¨è åªè¦Âç¨快éÂÂéµ就è½éÂÂÃ¥ÂÂæÂÂéÂÂéÂÂä½ çÂÂ工堷åÂÂãÂÂ
- class - çº工堷åÂÂæÂÂå®Âç¹å®ÂçÂÂ樣å¼Âé¡Âå¥ãÂÂé Âè¨Âå¼ chromeclass-toolbar æ¯ç¨ä¾Âè¦Âç¯Â工堷åÂÂ顯示模å¼ÂçÂÂé¡Âå¥ï¼ÂÃ¥ÂÂ樣å°ï¼ÂéÂÂæ¯建è°使ç¨çÂÂéÂÂå¿ è¦Â屬æ§ãÂÂ
- context - æÂÂå®Âç¶å¨工堷åÂÂä¸ÂæÂÂå³éµæÂÂï¼ÂæÂÂ顯示çÂÂ工堷åÂÂé¸å®(context menu)ãÂÂä½ å¯以æÂÂä¾Âä½ çÂÂé¸å® ID å¼ï¼ÂæÂÂæ¯使ç¨ toolbar-context-menu ä¾Âå°Âé¸å®æ¾置å¨ãÂÂ檢覠> 工堷åÂÂãÂÂãÂÂ
- hidden - æÂÂå®Â工堷åÂÂæ¯å¦é±èÂÂãÂÂé Âè¨ÂçÂÂæ æ³Âä¸Âï¼ÂæÂÂÃ¥ÂÂè¦Âè®Â使ç¨è çÂÂè¦ÂæÂÂÃ¥ÂÂçÂÂ工堷åÂÂï¼ÂæÂÂ以è¨Âå®ÂéÂÂÃ¥ÂÂå¼çº false (ç¸åÂÂçº ture )ãÂÂ
- persist - This attribute is a space separated list of attributes that should persist across browser sessions. å¨ä¸Âé¢çÂÂç¯Âä¾Âï¼ÂæÂÂ使ç¨ hidden ï¼Âç¨ä¾ÂÃ¥ÂÂ訴 Firefox å¨ sessions è¨Âä½Â工堷åÂÂçÂÂé±èÂÂçÂÂæ ÂãÂÂ注æÂÂå°ï¼Âå¦ÂæÂÂä½ çÂÂ工堷åÂÂæ²ÂæÂÂ使ç¨ id 屬æ§ï¼Âå persist 屬æ§ä¸ÂæÂÂç¼çÂÂä½Âç¨ï¼ÂæÂÂ以è¦Â確å®Âä½ æÂÂçº你çÂÂ工堷åÂÂæÂÂå® id å Âç´ ãÂÂ
ä½ å¯以å¨ XUL Planet toolbar element's attributes çÂÂå°å®Âæ´çÂÂÃ¥ÂÂèÂÂæÂÂçÂȋÂÂ
ç¾å¨ï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂ建ç«Â好çÂÂè¦Âè¼ÂæªÂæ¡Â[View XUL Overlay Revision 1]ï¼Â
<?xml version="1.0"?> <overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="navigator-toolbox"> <toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden"> </toolbar> </toolbox> </overlay>
工堷åÂÂæÂÂé (Toolbar Buttons)
å¨ Firefox ä¸Âï¼Â工堷åÂÂæÂÂéÂÂæÂÂä¸Â種ï¼Âä¸Âè‹ÂÂé¸å®ãÂÂæÂÂéÂÂé¸å®ãÂÂéÂÂäºÂé½æ¯ç¨ toolbarbutton ä¾Â建ç«ÂçÂÂï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂå¥çÂÂçÂÂãÂÂè¨Âä½Âï¼ÂéÂÂäºÂå Âç´ å¿ é Âæ¾å¨ toolbar å Âç´ ä¹Âä¸ÂãÂÂ
ä¸Âè¾ÂÂé (Normal Buttons)
éÂÂæ¯ç¨ä¾Â建ç«Âä¸ÂèÂÂæÂÂéÂÂï¼Â
<toolbarbutton id="TutTB-Web-Button" tooltiptext="Search the Web" label="Web Search" oncommand="TutTB_Search(event, 'web')" />
å®ÂæÂÂä¹Âå¾Âï¼Âä¾ÂçÂÂçÂÂéÂÂÃ¥ÂÂå Âç´ çÂÂ屬æ§ï¼Â
- tooltiptext - ç¶æ»Â鼠移åÂÂå°æÂÂéÂÂä¸ÂæÂÂåºç¾çÂÂ說æÂÂãÂÂ
- label - 工堷åÂÂæÂÂéÂÂ顯示çÂÂæÂÂÃ¥ÂÂãÂÂ
- oncommand - ç¶ oncommand äºÂ件觸ç¼æÂÂ(æÂÂä¸ÂæÂÂéÂÂ)ï¼Âä½ æÂÂæÂÂå®ÂçÂÂç¨Âå¼Â碼ãÂÂå¨éÂÂÃ¥ÂÂç¯Âä¾Âï¼Â使ç¨ TutTB_Search()å½å¼Âï¼ÂæÂÂÃ¥ÂÂå°Âå¨第å Â章詳細說æÂÂãÂÂ
ä½ å¯以å¨ XUL Planet toolbarbutton element's attributes æ¾å°å®Âæ´çÂÂÃ¥ÂÂèÂÂæÂÂçÂȋÂÂ
é¸å®æÂÂé (Menu Buttons)
ç¶é»ÂæÂÂæÂÂéÂÂé¸å®æÂÂï¼ÂæÂÂåºç¾ä¸ÂæÂÂå¼Âé¸å®ã åÂÂ管éÂÂÃ¥ÂÂæÂÂéÂÂæ¨Âè¨Âé¡Âä¼¼ä¸Âè¾ÂÂéÂÂæ¨Âè¨Âï¼ÂæÂÂÃ¥ÂÂéÂÂæ¯忠é Âå 堥 menupopup å Âç´ ï¼Âè®Âé¸å®以æÂÂÃ¥ÂÂæ³è¦ÂçÂÂ樣åÂÂåºç¾ãÂÂçºäºÂç°¡æ½Âé»Âï¼Âä¸Âé¢çÂÂç¯Âä¾Âåªå å«堩åÂÂé¸å®頠ç®ãÂÂ
<toolbarbutton id="TutTB-MainMenu" type="menu" tooltiptext="Tutorial Toolbar Main Menu"> <menupopup> <menuitem label="Google Home Page" accesskey="G" tooltiptext="Navigate to Google" oncommand="TutTB_LoadURL('http://www.google.com/')" /> <menuseparator /> <menuitem label="Born Geek Website" accesskey="B" tooltiptext="Navigate to Born Geek" oncommand="TutTB_LoadURL('http://www.borngeek.com/')" /> </menupopup> </toolbarbutton>
toolbarbutton æÂÂå ©åÂÂè¦Â注æÂÂçÂÂè®ÂÃ¥ÂÂãÂÂ第ä¸Âï¼Âtype 屬æ§æÂÂå®Â亠menu çÂÂå¼ï¼Â說æÂÂäºÂéÂÂæ¯åÂÂé¸å®æÂÂéÂÂï¼ÂèÂÂä¸Âæ¯ä¸Âè¾ÂÂéÂÂãÂÂ第äºÂï¼Âä½ æÂÂ注æÂÂå°éÂÂ裡é¢æ²Âæ oncommand 屬æ§ãÂÂå çºé¸å®æÂÂéÂÂçÂÂå¯ä¸Âç®çÂÂæ¯çºäºÂ顯示跳åºå¼Âé¸å®ï¼Â並ä¸ÂéÂÂè¦Âå·è¡Âä»»ä½Âç¨Âå¼Â碼ï¼ÂèÂÂ顯示é¸å®çÂÂÃ¥ÂÂä½ÂæÂÂç± Firefox èªåÂÂå®ÂæÂÂãÂÂ
ä¹Âè«Â注æÂÂå° menupopup ï¼Âmenuitem ï¼Âmenuseparator éÂÂä¸ÂÃ¥ÂÂå Âç´ ãÂÂmenupopup æÂÂæÂÂé¸å®頠ç®çÂÂ容å¨ï¼Âç¨ä¾Â建ç«ÂèÂÂ顯示é¸å®ãÂÂå¨éÂÂÃ¥ÂÂç¯Âä¾Â裡ï¼ÂéÂÂÃ¥ÂÂå Âç´ æ²ÂæÂÂ屬æ§ãÂÂÃ¥ÂÂ樣å°ï¼Âmenuseparator ä¹Âå¾Âç°¡å®ï¼Âå¨ä¸ÂæÂÂå¼Âé¸å®ä¸Âæ¾置水平åÂÂéÂÂç·Âï¼Âç¨ä¾ÂÃ¥ÂÂéÂÂä¸ÂÃ¥ÂÂçÂÂé¸å®ãÂÂ
menuitem ç¨Âå¾®æÂÂé»Âè¤ÂéÂÂãÂÂå¨ä¸Âé¢çÂÂç¯Âä¾Âï¼ÂæÂÂÃ¥ÂÂæÂÂå®ÂçÂÂ屬æ§ï¼Â
- label - æÂÂå®Âé¸å®頠ç®çÂÂæÂÂÃ¥ÂÂãÂÂ
- tooltiptext - éÂÂÃ¥ÂÂ屬æ§就åÂÂæ¯æÂÂÃ¥ÂÂå¨ toolbarbutton çÂÂå°çÂÂï¼Âä½Âæ¯æÂÂä¸Âé»Âè¦Âè¦åÂÂçÂÂãÂÂç±æ¼ Firefox ç bug (bug #147670)ï¼ÂéÂÂÃ¥ÂÂ屬æ§æ¯忠è¦ÂçÂÂãÂÂå¦ÂæÂÂ你決å®Âå¾ menuitem ä¸ÂåªæÂÂéÂÂÃ¥ÂÂ屬æ§ï¼Âç¶使ç¨è å°Âæ»Â鼠移åÂÂå°é¸å®頠ç®æÂÂï¼ÂæÂÂçÂÂä¸Âå°æÂÂ示說æÂÂãÂÂé¸å®ä¸ÂæÂÂ顯示工堷æÂÂ示ï¼ÂéÂÂçÂÂæ¯åÂÂ令人ä¸Â滿æÂÂçÂÂãÂÂç¹è²ãÂÂï¼Â
ä½ å¯以å¨ XUL Planet menuitem element's attributes æ¾å°å®Âæ´çÂÂÃ¥ÂÂèÂÂæÂÂçÂȋÂÂ
æÂÂéÂÂé¸å® (Button-Menu Buttons)
第ä¸Âä¹Âæ¯æÂÂå¾ÂçÂÂæÂÂéÂÂé¸å®æ¯ä¸Â種ä¹Âä¸ÂæÂÂè¤ÂéÂÂçÂÂãÂÂ實éÂÂä¸Âï¼ÂçµÂÃ¥ÂÂäºÂÃ¥ÂÂ堩種æÂÂéÂÂï¼ÂæÂÂä¾Âå¯é»ÂæÂÂæÂÂéÂÂçÂÂä¸ÂæÂÂå¼Âé¸å®ãÂÂ
ãÂÂä¸Âä¸Âé ÂãÂÂèÂÂãÂÂä¸Âä¸Âé ÂãÂÂçÂÂ覽é¸å®æ¯éÂÂÃ¥ÂÂæÂÂéÂÂé¸å®çÂÂç¯Âä¾Âï¼ÂéÂÂæ¯éÂÂè¦Â建ç«ÂçÂÂæ¨Âè¨Âï¼Â
<toolbarbutton id="TutTB-Combined-Button" label="Search" type="menu-button" tooltiptext="Combined Search" oncommand="TutTB_Search(event, 'web')"> <menupopup> <menuitem id="TutTB-Combined-Web" label="Web Search" class="menuitem-iconic" tooltiptext="Search the Web" oncommand="TutTB_Search(event, 'web'); event.preventBubble();" /> <menuitem id="TutTB-Combined-Image" label="Image Search" class="menuitem-iconic" tooltiptext="Search Images" oncommand="TutTB_Search(event, 'image'); event.preventBubble();" /> </menupopup> </toolbarbutton>
æÂÂå ©åÂÂå¼å¾Â注æÂÂçÂÂè®ÂÃ¥ÂÂï¼Âå¨ toolbarbutton ç type 屬æ§æÂÂå®ÂäºÂå¼ menu-button ï¼ÂèÂÂä¸ÂæÂÂå¦å¤Âä¸Âè¡Âç¨Âå¼Â碼 oncommand ï¼ÂæÂÂæÂÂå¨第å Â章解éÂÂéÂÂé¡Âå¤ÂçÂÂç¨Âå¼Â碼ãÂÂæÂ¥èÂÂ注æÂÂå°ï¼ÂéÂÂ裡æÂÂè·ÂãÂÂä¸Âè¾ÂÂéÂÂãÂÂä¸Â樣ç toolbarbutton æ oncommand 屬æ§ï¼Â以åÂÂå¨ãÂÂé¸å®æÂÂéÂÂãÂÂ裡çÂÂå·¢çÂÂå Âç´ menupopup è menuitem ãÂÂ
ç¾å¨ï¼ÂæÂÂÃ¥ÂÂè¨Âè«Âå®Âä¸ÂÃ¥ÂÂçÂÂæÂÂéÂÂï¼Âä¾ÂçÂÂçÂÂç¨Âå¼Â碼çÂÂ樣åÂÂ[View XUL Overlay Revision 2]ï¼Â
<?xml version="1.0"?> <overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="navigator-toolbox"> <toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden"> <toolbarbutton id="TutTB-MainMenu" type="menu" tooltiptext="Tutorial Toolbar Main Menu"> <menupopup> <menuitem label="Google Home Page" accesskey="G" tooltiptext="Navigate to Google" oncommand="TutTB_LoadURL('http://www.google.com/')" /> <menuseparator /> <menuitem label="Born Geek Website" accesskey="B" tooltiptext="Navigate to Born Geek" oncommand="TutTB_LoadURL('http://www.borngeek.com/')" /> </menupopup> </toolbarbutton> <toolbarbutton id="TutTB-Combined-Button" label="Search" type="menu-button" tooltiptext="Combined Search" oncommand="TutTB_Search(event, 'web')"> <menupopup> <menuitem id="TutTB-Combined-Web" label="Web Search" class="menuitem-iconic" tooltiptext="Search the Web" oncommand="TutTB_Search(event, 'web'); event.preventBubble();" /> <menuitem id="TutTB-Combined-Image" label="Image Search" class="menuitem-iconic" tooltiptext="Search Images" oncommand="TutTB_Search(event, 'image'); event.preventBubble();" /> </menupopup> </toolbarbutton> <toolbarbutton id="TutTB-Web-Button" tooltiptext="Search the Web" label="Web Search" oncommand="TutTB_Search(event, 'web')" /> </toolbar> </toolbox> </overlay>
ä¸ÂæÂÂå¼Â編輯å (Drop-Down Edit Box)
ä¸Âä¸ÂÃ¥ÂÂæÂÂÃ¥ÂÂè¦Âå¨工堷åÂÂå 堥çÂÂæ¯ä¸ÂæÂÂå¼Â編輯åÂÂãÂÂéÂÂæ¯ç¨ menulist ä¾Â建ç«ÂçÂÂï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂç¨Âå¼Â碼ï¼Â
<toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> <menulist id="TutTB-SearchTerms" editable="true" flex="1" minwidth="100" width="250" onkeypress="TutTB_KeyHandler(event);"> <menupopup id="TutTB-SearchTermsMenu" onpopupshowing="TutTB_Populate()" /> </menulist> </toolbaritem>
注æÂÂå°ï¼ÂæÂÂÃ¥ÂÂæ menulist æ¾å¨ toolbaritem ä¹Âä¸ÂãÂÂä»»ä½Âä¸ÂÃ¥ÂÂå¨ toolbar çÂÂé  ç®é½ä¸Âæ¯工堷åÂÂæÂÂéÂÂï¼Âå¨ toolbaritem 裡é ÂçÂÂæÂÂæ¯ãÂÂä¹Âè«Â注æÂÂå°ï¼ÂæÂÂÃ¥ÂÂçº toolbaritem æÂÂå®Â亠id ï¼Âä¸Âè¨Âå®ÂäºÂ寬度(èÂÂç±å©ç¨亠persist 屬æ§)ãÂÂ
menulist æÂÂæ¯çÂÂæ£ç¨ä¾Â建ç«Âä¸ÂæÂÂå¼Â編輯åÂÂçÂÂãÂÂæÂÂå¹¾åÂÂå¨éÂÂÃ¥ÂÂå Âç´ åºç¾çÂÂæ°屬æ§ï¼Â
- editable - ç¶è¨Âå®Âçº true æÂÂï¼Â使ç¨è å¯以å¨編輯åÂÂä¸ÂæÂÂÃ¥ÂÂãÂÂ
- flex - 使éÂÂÃ¥ÂÂå Âç´ æ¯å¯è®ÂÃ¥ÂÂçÂÂãÂÂéÂÂæ¯åÂÂæ´æ¸å¼ï¼Âç¸å°Âæ¼堶ä»Âå¯è®ÂÃ¥ÂÂ工堷åÂÂå Âç´ ï¼ÂæÂÂå®Â堶大å°ÂãÂÂè¨Âå®Âå¼ 2 代表èÂÂè¨Âå®Âå¼ 1 çÂÂå ©åÂÂ寬ï¼Â0 Ã¥ÂÂæ¯ä¸Âè½è®ÂÃ¥ÂÂçÂÂåºå®Â寬度ãÂÂ
- minwidth - æÂÂå°Â寬度ï¼Âå®ä½ÂçºåÂÂç´ ãÂÂ
- width - Ã¥ÂÂå§Â寬度ï¼Âå®ä½ÂçºåÂÂç´ ãÂÂ
- onkeypress - ç¶使ç¨è 輸堥æÂÂÃ¥ÂÂæÂÂï¼Âç¨ä¾Âå·è¡ÂçÂÂç¨Âå¼Â碼ãÂÂ
ä½ å¯以å¨ XUL Planet menulist element's attributes çÂÂå°å®Âæ´çÂÂÃ¥ÂÂèÂÂæÂÂçÂȋÂÂ
è·ÂæÂÂÃ¥ÂÂä¹ÂÃ¥ÂÂçÂÂå°çÂÂãÂÂé¸å®æÂÂéÂÂãÂÂä¸Â樣ï¼Âå¨ menulist 裡ç menupopup å å«亠menuitem å Âç´ ãÂÂonpopupshowing éÂÂÃ¥ÂÂäºÂ件æÂÂå¨編輯åÂÂçÂÂé¸å®頠ç®顯示åÂÂ觸ç¼ï¼Âå ¶ä¸ÂæÂÂå®Âä¸ÂÃ¥ÂÂè½åÂÂæ Â寫堥é¸å®頠ç®çÂÂå½å¼Âï¼ÂéÂÂÃ¥ÂÂå½å¼ÂæÂÂÃ¥ÂÂç¨Âå¾ÂæÂÂæÂÂÃ¥ÂÂãÂÂä½ ä¹Âå¯以å 堥éÂÂæ ÂçÂÂé¸å®ï¼ÂéÂÂç¨Âè·ÂãÂÂé¸å®æÂÂéÂÂãÂÂæ¯ä¸Â樣çÂÂãÂÂ
ç¾å¨ï¼ÂéÂÂÃ¥ÂÂå¥Â件已ç¶Âè®Âå¾Âæ´堷é«Âä¸Âé»ÂäºÂï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂç¨Âå¼Â碼[View XUL Overlay Revision 3]ï¼Â
<?xml version="1.0"?> <overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="navigator-toolbox"> <toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden"> <toolbarbutton id="TutTB-MainMenu" type="menu" tooltiptext="Tutorial Toolbar Main Menu"> <menupopup> <menuitem label="Google Home Page" accesskey="G" tooltiptext="Navigate to Google" oncommand="TutTB_LoadURL('http://www.google.com/')" /> <menuseparator /> <menuitem label="Born Geek Website" accesskey="B" tooltiptext="Navigate to Born Geek" oncommand="TutTB_LoadURL('http://www.borngeek.com/')" /> </menupopup> </toolbarbutton> <toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> <menulist id="TutTB-SearchTerms" editable="true" flex="1" minwidth="100" width="250" onkeypress="TutTB_KeyHandler(event);"> <menupopup id="TutTB-SearchTermsMenu" onpopupshowing="TutTB_Populate()" /> </menulist> </toolbaritem> <toolbarbutton id="TutTB-Combined-Button" label="Search" type="menu-button" tooltiptext="Combined Search" oncommand="TutTB_Search(event, 'web')"> <menupopup> <menuitem id="TutTB-Combined-Web" label="Web Search" class="menuitem-iconic" tooltiptext="Search the Web" oncommand="TutTB_Search(event, 'web'); event.preventBubble();" /> <menuitem id="TutTB-Combined-Image" label="Image Search" class="menuitem-iconic" tooltiptext="Search Images" oncommand="TutTB_Search(event, 'image'); event.preventBubble();" /> </menupopup> </toolbarbutton> <toolbarbutton id="TutTB-Web-Button" tooltiptext="Search the Web" label="Web Search" oncommand="TutTB_Search(event, 'web')" /> </toolbar> </toolbox> </overlay>
å¯調æ´çÂÂ移é§Âæ¨Â訠(Resizing Gripper)
éÂÂè¨Âå¾Âä¹ÂÃ¥ÂÂå å«å¨ menulist 丠toolbaritem å Âç´ æÂÂæÂÂå°ç persist 屬æ§åÂÂï¼Âè¨Âå®ÂéÂÂÃ¥ÂÂ屬æ§以è®ÂæÂÂÃ¥ÂÂå¨çÂÂ覽å¨使ç¨æÂÂéÂÂï¼Âå¯以å²åÂÂæÂÂå°ÂÃ¥ÂÂçÂÂ寬度ãÂÂçºäºÂè®Â使ç¨è å¯以æ¹è®Â寬度ï¼ÂæÂÂÃ¥ÂÂè¦ÂæÂÂ侠移é§Âæ¨Â訠ãÂÂç¨ä¾ÂÃ¥ÂÂéÂÂ件äºÂçÂÂå Âç´ æ¯ splitter ï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂç¨Âå¼Â碼ï¼Â
<splitter id="TutTB-ResizeSplitter" state="open" collapse="none" resizebefore="closest" resizeafter="farthest" tooltiptext="Resize the Search Box"> <vbox id="TutTB-ResizeBar" /> </splitter>
éÂÂæ¯ splitter çÂÂ屬æ§ï¼Â
- state - æÂÂå®ÂÃ¥ÂÂå²æ¨Âè¨Âæ¯å¦æºçÂÂ(é±èÂÂ)堧容@open å¼æÂÂå®Âä¸Â管æ¯å¦æÂÂ堧容çÂÂ顯示ãÂÂ
- collapse - 決å®ÂåªéÂÂç splitter 被é±èÂÂãÂÂæÂÂÃ¥ÂÂ使ç¨ none ï¼Âä¸Âè®Âä»»ä½Âä¸ÂéÂÂç splitter 被é±èÂÂãÂÂ
- resizebefore - ç¶ splitter æ¹è®ÂæÂÂï¼ÂæÂÂå® splitter å·¦éÂÂçÂÂåªåÂÂå Âç´ å¿ é Â被éÂÂæ°調æ´ãÂÂç¶ splitter 移åÂÂæÂÂï¼Â使ç¨ closest ä¾ÂéÂÂæ°調æ´æÂÂé 迠splitter å·¦éÂÂçÂÂ編輯åÂÂãÂÂ
- resizeafter - ç¶ splitter æ¹è®ÂæÂÂï¼ÂæÂÂå® splitter å³éÂÂçÂÂåªåÂÂå Âç´ å¿ é Â被éÂÂæ°調æ´ãÂÂå¨éÂÂÃ¥ÂÂç¯Âä¾Â裡ï¼ÂæÂÂÃ¥ÂÂ使ç¨ farthest ä¾ÂéÂÂæ°調æ´æÂÂå³éÂÂçÂÂå½Âæ§空éÂÂãÂÂ
vbox æ¯ç¨ä¾Âè¨Âå®Â樣å¼ÂçÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂå¨第äºÂç« è¨Âè«Âé¢æ¿æÂÂï¼ÂæÂÂå°éÂÂé»Âã 你å¯以å¨ XUL Planet splitter element's attributes çÂÂå°æ´å®Âæ´çÂÂÃ¥ÂÂèÂÂæÂÂçÂȋÂÂ
è®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂå å« splitter è toolbaritem çÂÂè¦Âè¼Âç¨Âå¼Â碼[View XUL Overlay Revision 4]ï¼Â
<?xml version="1.0"?> <overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="navigator-toolbox"> <toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden"> <toolbarbutton id="TutTB-MainMenu" type="menu" tooltiptext="Tutorial Toolbar Main Menu"> <menupopup> <menuitem label="Google Home Page" accesskey="G" tooltiptext="Navigate to Google" oncommand="TutTB_LoadURL('http://www.google.com/')" /> <menuseparator /> <menuitem label="Born Geek Website" accesskey="B" tooltiptext="Navigate to Born Geek" oncommand="TutTB_LoadURL('http://www.borngeek.com/')" /> </menupopup> </toolbarbutton> <toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> <menulist id="TutTB-SearchTerms" editable="true" flex="1" minwidth="100" width="250" onkeypress="TutTB_KeyHandler(event);"> <menupopup id="TutTB-SearchTermsMenu" onpopupshowing="TutTB_Populate()" /> </menulist> </toolbaritem> <splitter id="TutTB-ResizeSplitter" state="open" collapse="none" resizebefore="closest" resizeafter="farthest" tooltiptext="Resize the Search Box"> <vbox id="TutTB-ResizeBar" /> </splitter> <toolbaritem flex="0"> <toolbarbutton id="TutTB-Combined-Button" label="Search" type="menu-button" tooltiptext="Combined Search" oncommand="TutTB_Search(event, 'web')"> <menupopup> <menuitem id="TutTB-Combined-Web" label="Web Search" class="menuitem-iconic" tooltiptext="Search the Web" oncommand="TutTB_Search(event, 'web'); event.preventBubble();" /> <menuitem id="TutTB-Combined-Image" label="Image Search" class="menuitem-iconic" tooltiptext="Search Images" oncommand="TutTB_Search(event, 'image'); event.preventBubble();" /> </menupopup> </toolbarbutton> <toolbarbutton id="TutTB-Web-Button" tooltiptext="Search the Web" label="Web Search" oncommand="TutTB_Search(event, 'web')" /> </toolbaritem> </toolbar> </toolbox> </overlay>
çºäºÂé¿å Â移é§Âæ¨Âè¨Âè¨ÂÃ¥ÂÂçÂÂ細微顯示åÂÂé¡Âï¼ÂæÂÂÃ¥ÂÂéÂÂéÂÂè¦Â建ç«Âé¡Âå¤Âç toolbaritem ï¼ÂéÂÂèÂÂæÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂå¨ãÂÂé¸å®æÂÂéÂÂãÂÂä¸ÂçÂÂæÂÂå°ÂæÂÂéÂÂæÂÂÃ¥ÂÂçÂÂä¸Â樣ã åÂÂä¸Â次確宠flex 屬æ§çÂÂå¼çº 0ï¼ÂéÂÂå°ÂæÂÂé¿å Âï¼Âç¶æÂÂÃ¥ÂÂçÂÂé¸å®æÂÂéÂÂ被æÂÂæ³å°左éÂÂæÂÂ被移é¤ãÂÂ
æÂ¥èÂÂï¼Âè®ÂæÂÂÃ¥ÂÂÃ¥ÂÂä¾Âå¢Âå 堩åÂÂé  ç®ãÂÂé¦Âå Âï¼Âå° toolbarseparator æ¾置å¨æÂÂå¾Âå ©åÂÂæÂÂéÂÂä¸Âï¼Âæ¤ç®çÂÂæ¯çºäºÂè£Â飾ãÂÂÃ¥ÂÂä¾Âï¼Âå° toolbarspring æ¾置å¨æÂÂå¾Âç toolbaritem å Âç´ ä¹Âå¾ÂãÂÂThis spring will allow us to drag the resizer all the way to the right, so that we can see the full resizing effect in action. éÂÂå ©åÂÂæ¨Â示æ¯å¾Âç°¡å®çÂÂï¼ÂÃ¥ÂÂæ¯éÂÂ樣ï¼Â
<toolbarseparator /> <toolbarspring />
è®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂå®Âæ´çÂÂè¦Âè¼Âç¯Âä¾Â[View XUL Overlay Revision 5]ï¼Â
<?xml version="1.0"?> <overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="navigator-toolbox"> <toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden"> <toolbaritem flex="0"> <toolbarbutton id="TutTB-MainMenu" type="menu" tooltiptext="Tutorial Toolbar Main Menu"> <menupopup> <menuitem label="Google Home Page" accesskey="G" tooltiptext="Navigate to Google" oncommand="TutTB_LoadURL('http://www.google.com/')" /> <menuseparator /> <menuitem label="Born Geek Website" accesskey="B" tooltiptext="Navigate to Born Geek" oncommand="TutTB_LoadURL('http://www.borngeek.com/')" /> </menupopup> </toolbarbutton> </toolbaritem> <toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> <menulist id="TutTB-SearchTerms" editable="true" flex="1" minwidth="100" width="250" onkeypress="TutTB_KeyHandler(event);"> <menupopup id="TutTB-SearchTermsMenu" onpopupshowing="TutTB_Populate()" /> </menulist> </toolbaritem> <splitter id="TutTB-ResizeSplitter" state="open" collapse="none" resizebefore="closest" resizeafter="farthest" tooltiptext="Resize the Search Box"> <vbox id="TutTB-ResizeBar" /> </splitter> <toolbaritem flex="0"> <toolbarbutton id="TutTB-Combined-Button" label="Search" type="menu-button" tooltiptext="Combined Search" oncommand="TutTB_Search(event, 'web')"> <menupopup> <menuitem id="TutTB-Combined-Web" label="Web Search" class="menuitem-iconic" tooltiptext="Search the Web" oncommand="TutTB_Search(event, 'web'); event.preventBubble();" /> <menuitem id="TutTB-Combined-Image" label="Image Search" class="menuitem-iconic" tooltiptext="Search Images" oncommand="TutTB_Search(event, 'image'); event.preventBubble();" /> </menupopup> </toolbarbutton> <toolbarseparator /> <toolbarbutton id="TutTB-Web-Button" tooltiptext="Search the Web" label="Web Search" oncommand="TutTB_Search(event, 'web')" /> </toolbaritem> <toolbarspring /> </toolbar> </toolbox> </overlay>
第åÂÂç« ï¼ÂÃ¥ÂÂæ ÂéÂÂç¼ (Dynamic Development)
(è¯è ï¼Âå¦ÂæÂÂä¸Âæ³ç¨æ¤éÂÂç¼ç°å¢Âï¼Âå¯以çÂ¥éÂÂæ¤章ï¼Â並ç¨第ä¸Âç« çÂÂæ¹å¼Â測試å¥Â件ãÂÂ)
å¨ Firefox 1.5 ä¸Âï¼ÂÃ¥ÂÂæ Âå¥Â件éÂÂç¼æ¯æ°çÂÂæÂÂè¡Âï¼Âå°ÂéÂÂç¼è èÂÂè¨Âï¼ÂéÂÂæ¯æÂÂæÂÂç¨çÂÂéÂÂå åÂÂè½ãÂÂéÂÂé  æÂÂè¡Âå¯以è®Âä½ å¨éÂÂç¼å¥Â件æÂÂï¼Âå³æÂÂå°çÂÂå°çµÂæÂÂãÂÂç¶你è¦Â測試 XUL è¦Âè¼ÂæÂÂæ¯ JavaScript ç¨Âå¼Â碼æÂÂï¼Âä¸Âç¨æ¯Â次åÂÂéÂÂæ°å°Âè£Âå¥Â件ãÂÂéÂÂä¸Âåªç¯ÂçÂÂäºÂä½ çÂÂæÂÂéÂÂï¼Âä¹Âè®Âä½ è½æ´快éÂÂå°é¤é¯ãÂÂ
é£麼ï¼ÂéÂÂé  ç¹è²æ¯å¦Âä½ÂéÂÂä½ÂçÂÂå¢ï¼ÂéÂÂå°±è¦ÂæÂÂè¬ÂæÂÂÃ¥ÂÂå¨第äºÂ章建ç«Âç chrome 渠å®äºÂãÂÂç´å°ç¾å¨çºæ¢ï¼ÂæÂÂé½éÂÂæ²Âè·Â你說 chrome 渠å®試ä½ÂçÂÂ麼ç¨éÂÂãÂÂå¨éÂÂÃ¥ÂÂæÂÂÃ¥ÂÂä¸Âï¼ÂæÂÂÃ¥ÂÂä¸ÂéÂÂå§Â建ç«ÂçÂÂçÂÂæ¬就æ¯ç¹åÂ¥çºåÂÂæ ÂéÂÂç¼èÂÂè¨Âè¨ÂçÂÂãÂÂæÂÂè¨Âä¹Âï¼ÂæÂÂÃ¥ÂÂä¸Âå¿ éÂÂæ°å°Âè£Âé£份çÂÂæÂÂå¥Â件ï¼Âä½ÂéÂÂæ¯æÂÂäºÂæ¹è®ÂéÂÂè¦Âå®ÂæÂÂï¼ÂæÂÂå¯以å°Âè£ÂãÂÂæÂÂå¹¾åÂÂç¨ä¾ÂãÂÂÃ¥ÂÂÃ¥ÂÂãÂÂå¥Â件åÂÂæ ÂéÂÂç¼çÂÂæÂ¥é©Âï¼Âå¨é£ä¹ÂÃ¥ÂÂï¼ÂæÂÂè¦Âå Â給你幾åÂÂ建è°ãÂÂ
注æÂÂäºÂé  (A Word of Warning)
å¥Â件éÂÂç¼æÂÂæÂÂæÂÂæÂÂé»Âå±éªï¼Â尤堶æ¯è¨Â訠XUL è¦Âè¼ÂæªÂæ¡ÂæÂÂãÂÂæÂÂå¼·çÂÂ建è°你è¦Âé¿å ÂéÂÂç¼å¥Â件è·Â平常çÂÂ覽網é Âå ±ç¨ä¸ÂÃ¥ÂÂè¨Âå®ÂæªÂ(profile)ãÂÂæÂÂè¨Âä¹Âï¼Âä½ å¿ é Âçº你çÂÂéÂÂç¼ç°å¢Â建ç«Âä¸ÂÃ¥ÂÂæ°çÂÂè¨Âå®ÂæªÂãÂÂéÂÂå¯以é¿å Â你失å»ä¸ÂäºÂéÂÂéµçÂÂè³ÂæÂÂï¼Âå¦Âï¼Âå²åÂÂçÂÂå¯Â碼ãÂÂcookiesãÂÂæ¸籤æÂÂæ¯堶ä»Âä½ ä¸Âæ³éº失çÂÂæ±西ãÂÂ
æÂÂå¸ÂæÂÂè½åÂÂå¿« Born Geek å¨ç¼表éÂÂæ¼å¦Âä½Â建ç«ÂèÂÂ使ç¨è¨Âå®ÂæªÂçÂÂæÂÂå¸ãÂÂå¨é£ä¹ÂÃ¥ÂÂï¼Âä½ å¯以å ÂçÂÂçÂÂå¨ Mozilla.org çÂÂè¨Âå®ÂæªÂæÂÂ件ãÂÂ建ç«ÂèÂÂ使ç¨è¨Âå®ÂæªÂæ¯å¾Âç°¡å®çÂÂï¼ÂéÂÂæÂÂé¿å Âè®Âä½ é ÂçÂÂçÂÂæ æ³Âç¼çÂÂãÂÂ
å¦Âä½ÂÃ¥ÂÂæ ÂéÂÂç¼ (How to Develop Dynamically)
æÂÂ主è¦ÂçÂÂå·¥ä½Âï¼ÂæÂÂÃ¥ÂÂå·²ç¶Âå¨ chrome 渠å®å®ÂæÂÂ(å³使你éÂÂä¸ÂäºÂ解æÂÂÃ¥ÂÂé£æÂÂÃ¥ÂÂäºÂä»Â麼)ãÂÂç¾å¨ï¼ÂæÂÂÃ¥ÂÂéÂÂè¦ÂçÂÂï¼Âæ¯ä¸ÂÃ¥ÂÂå° Firefox æÂÂÃ¥ÂÂ硬ç¢Âä¸Âå¥Â件ä½Âç½®çÂÂæªÂæ¡Âï¼ÂæÂÂÃ¥ÂÂå°ÂèÂÂç± pointer æªÂæ¡Âä¾Âå®ÂæÂÂãÂÂ
é¦Âå Âï¼Âå¨你çÂÂé»蠦çÂÂé¨便ä¸ÂÃ¥ÂÂå°æ¹ï¼Â以æÂÂÃ¥ÂÂå¨å®Âè£Â渠å®(install manifest)ä¸ÂæÂÂ使ç¨ç GUID Ã¥ÂÂ稱ï¼Â建ç«Âä¸ÂÃ¥ÂÂæÂÂÃ¥ÂÂæªÂãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂä¸Âï¼ÂæÂÂÃ¥ÂÂ使ç¨ tuttoolbar@borngeek.com ä½ÂçºæªÂÃ¥ÂÂãÂÂä¸Â幸çÂÂæ¯ï¼Âå¨微è»Âè¦ÂçªÂç°å¢Â裡ï¼ÂãÂÂ.comãÂÂçÂÂæªÂæ¡Âæ¯被ç¨ä¾Âç¶ä½Âå·è¡ÂæªÂï¼ÂèÂÂæÂÂÃ¥ÂÂéÂÂè¦ÂçÂÂæ¯æÂÂÃ¥ÂÂæªÂãÂÂä½ å¯以æÂÂãÂÂ.comãÂÂæ¿æÂÂï¼Âä½Âä¹Âè¨Âå¾Âå»修æ¹å¨å®Âè£Â渠å®ç GUIDï¼Â確ä¿Âå ©åÂÂÃ¥ÂÂ稱æ¯ä¸Â樣çÂÂãÂÂ
å¨éÂÂÃ¥ÂÂæªÂæ¡Â裡ï¼ÂæÂÂÃ¥ÂÂå°Âè¦Â輸堥ä¸Âè¡ÂæÂÂÃ¥ÂÂï¼Âå¥Â件å²åÂÂçÂÂçµÂå°Âä½Âç½®ï¼Âä¹Âå°±æ¯åÂÂæ¾ install.rdf è chrome.manifest æªÂæ¡ÂçÂÂç®éÂÂãÂÂå¨æÂÂçÂÂä¾ÂÃ¥ÂÂï¼Âå²åÂÂè·¯å¾Âå¦Âä¸Âï¼Â
C:\Born Geek\TutToolbar
ä½ å¿ é Â使ç¨你èª己è¨Âå®ÂçÂÂè·¯å¾Âï¼Âé¤éÂÂä½ çÂÂè·¯å¾Âè·ÂæÂÂçÂÂä¸Â樣ãÂÂ輸堥å®Âè·¯å¾Âå¾Âï¼Âå²åÂÂæªÂæ¡ÂãÂÂ
ç¾å¨ï¼ÂæÂÂÃ¥ÂÂå¿ é Âå°ÂéÂÂÃ¥ÂÂæªÂæ¡Â移åÂÂå°è·ÂéÂÂç¼ç°å¢ÂçÂÂè¨Âå®ÂæªÂ(profile)Ã¥ÂÂä¸ÂÃ¥ÂÂç®éÂÂ(å¦Âï¼ÂC:\Documents and Settings\Administrator\Application Data\Mozilla\Firefox\Profiles)ãÂÂæÂÂÃ¥ÂÂÃ¥ÂÂæÂÂå°çÂÂè¨Âå®ÂæªÂæÂÂ件æÂÂè¨Âè«Âå°è¨Âå®ÂæªÂç®éÂÂçÂÂä½Âç½®ãÂÂç¶你æ¾å°è¨Âå®ÂæªÂç®éÂÂæÂÂï¼Âå°ÂæÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂ建ç«Âç pointer æªÂæ¡Â移åÂÂå°該ç®éÂÂç extensions ç®éÂÂä¸ÂãÂÂéÂÂæ¯æÂÂçÂÂä¾ÂÃ¥ÂÂï¼Â
+- tl5wlpz3.Nightly/ +- bookmarkbackups/ +- chrome/ +- extensions/ +- tuttoolbar@borngeek.com +- (... other files and folders ...)
ä½ å¯以çÂÂå°æÂÂçÂÂè¨Âå®ÂæªÂæÂÂä¸Â層ç®éÂÂï¼ÂæÂÂ使ç¨以ãÂÂNightlyãÂÂçºåÂÂçÂÂè¨Âå®ÂæªÂï¼Âä¾Âä½ÂçºæÂÂçÂÂå¥Â件éÂÂç¼ç°å¢ÂãÂÂä¸Âæ¦你æ pointer æªÂæ¡Âæ¾å¨é©ç¶çÂÂä½Âç½®ï¼ÂéÂÂå Firefoxï¼Â確å®Â你使ç¨çÂÂæ¯å¥Â件éÂÂç¼çÂÂè¨Âå®ÂæªÂ(Ã¥ÂÂ次æÂÂéÂÂï¼ÂÃ¥ÂÂÃ¥ÂÂæÂÂå°çÂÂè¨Âå®ÂæªÂæÂÂ件æÂÂÃ¥ÂÂ訴你å¦Âä½ÂéÂÂ樣åÂÂ)ã å°ç®åÂÂçºæ¢ï¼Âå¦ÂæÂÂä½ æ¯Â樣é½åÂÂçÂÂæ£確ï¼Âä½ æÂÂçÂÂå°æ²ÂæÂÂé¢æ¿çÂÂç°è²工堷åÂÂãÂÂ
éÂÂç¼é±æ (The Development Cycle)
ç¾å¨ï¼ÂæÂÂÃ¥ÂÂå·²ç¶ÂÃ¥ÂÂÃ¥ÂÂäºÂÃ¥ÂÂæ ÂéÂÂç¼ç°å¢Âï¼Âé£è¦Âå¦Âä½ÂÃ¥ÂȌ©ç¨å¢ï¼ÂéÂÂç¨Â堶實æ¯éÂÂ常簡å®çÂÂï¼Â
- 編輯你çÂÂå¥Â件æªÂæ¡Â
- éÂÂæ°éÂÂÃ¥ÂÂå·²æ´æ¹æªÂæ¡ÂæÂÂå¥Âç¨çÂÂè¦ÂçªÂï¼ÂæÂÂæ¯使ç¨ Extension Developer's Extension çÂÂéÂÂæ°æ´çÂÂ(Reload Chrome)ãÂÂ
æÂÂ堩件äºÂæ¯你è¦ÂçÂ¥éÂÂçÂÂï¼Â
- å¦ÂæÂÂä½ æ¹è®Â亠chrome.manifest æªÂæ¡Âï¼Âä½ å¿ é ÂéÂÂæ°éÂÂå Firefox (éÂÂÃ¥ÂÂæªÂæ¡ÂåªæÂÂå¨ç¨Âå¼ÂÃ¥ÂÂÃ¥ÂÂæÂÂæÂÂç¼çÂÂä½Âç¨)ãÂÂ
- å¦ÂæÂÂä½ æ¹è®Â亠install.rdf æªÂæ¡Âï¼Âä½ å¿ é Âæ¹讠pointer æªÂæ¡ÂæÂÂæÂÂÃ¥ÂÂç®éÂÂçÂÂä¿®æ¹æÂÂéÂÂãÂÂå¨ Linux ä¸Âï¼Âä½ åªè¦Â使ç¨ touch æÂÂ令ãÂÂèÂÂå¨ Windows 裡就æÂÂé»Âé£度ï¼Âé¤éÂÂä½ å®Âè£ÂäºÂå¯以使ç¨ touch æÂÂ令ç Cygwin 工堷ãÂÂå¯ä¸Âè¦ÂÃ¥ÂÂçÂÂï¼Âå°±æ¯å¨å¥Â件æÂÂä¸Â層ç®éÂÂ建ç«Âä¸ÂÃ¥ÂÂæ°ç®éÂÂï¼Âç¶å¾Âåªé¤æ°ç®éÂÂ以æ¹è®Âç®éÂÂçÂÂãÂÂä¸Âä¸Â次修æ¹ãÂÂæÂÂéÂÂãÂÂ
ä½ å¯以çÂÂå°ï¼ÂæÂÂÃ¥ÂÂæÂÂäºÂæ¹便çÂÂéÂÂç¼èÂÂé¤é¯工堷ãÂÂéÂÂÃ¥ÂÂéÂÂæ¼ï¼Âå¨ 1.5 çÂÂä¹ÂÃ¥ÂÂçÂÂæ¨ÂæºÂéÂÂç¨Âï¼Âå°±æ¯æ¯Â次å¨å¥Â件éÂÂç¼éÂÂç¨Âé½è¦Âå°Âè£ÂæªÂæ¡ÂãÂÂ
ç¾å¨ï¼Âè®ÂæÂÂÃ¥ÂÂæÂÂéÂÂÃ¥ÂÂéÂÂéÂÂçÂÂ工堷åÂÂè®Âå¾Âæ´æ¼Â亮ä¸Âé»Âå§ï¼Â
第äºÂç« ï¼Âé¢æ¿製你(Skinning the Toolbar)
é¢æ¿æ¯ç±樣å¼Âæ¨ÂæºÂèÂÂÃ¥ÂÂçÂÂæÂÂæ§ÂæÂÂçÂÂãÂÂè¨Âä½Âï¼ÂÃ¥ÂÂ管è¨Âè¨Âé¢æ¿æ¯éÂÂå¿ è¦ÂçÂÂï¼Âä½Âæ¯å®Âè½æÂÂÃ¥ÂÂå¥Â件çÂÂÃ¥ÂÂ質ãÂÂç¢ç«Â使ç¨è å°Âå¥Â件çÂÂ第ä¸Âå°象æ¯å®ÂçÂÂå¤Âè§Âï¼ÂèÂÂä¸Âæ¯å®ÂçÂÂÃ¥ÂÂè½ãÂÂç¶èÂÂï¼Âå¦ÂæÂÂ你覺å¾Â使ç¨æÂÂÃ¥ÂÂæ¨Â籤è®Âä½ æ¯Âè¼Âèªå¨ï¼ÂæÂÂæ¯ä¸ÂéÂÂè¦Â建ç«Âå¤Âè§Âï¼Âä½ å¯以çÂ¥éÂÂéÂÂÃ¥ÂÂç« ç¯ÂãÂÂ
æ´æ°æªÂæ¡ÂçµÂ槠(Updating the File Structure)
è¨Âè¨Âé¢æ¿çÂÂ第ä¸Âæ¥就æ¯建ç«Âä¸ÂÃ¥ÂÂç®éÂÂï¼Âç¨ä¾ÂÃ¥ÂÂæ¾éÂÂæ¼é¢æ¿çÂÂæªÂæ¡ÂãÂÂå¨ chrome ç®éÂÂä¸Â建ç«Âä¸Âå skin ç®éÂÂãÂÂæªÂæ¡ÂçµÂæ§ÂæÂÂÃ¥ÂÂéÂÂ樣ï¼Â
+- TutToolbar/ +- install.rdf +- chrome.manifest +- chrome/ +- content/ +- tuttoolbar.xul +- skin/
ç¾å¨æÂÂÃ¥ÂÂæÂÂÃ¥ÂÂæ¾é¢æ¿æªÂæ¡ÂçÂÂå°æ¹äºÂï¼Âä¹Âå¾Âå¿ é Âè¦Âå¨ chrome 裡註åÂÂéÂÂÃ¥ÂÂä½Âç½®ãÂÂ
æ´æ° Chrome 渠å® (Updating the Chrome Manifest)
éÂÂè¨Âå¾ÂæÂÂÃ¥ÂÂå¨第äºÂ章建ç«Âç chrome 渠å®åÂÂï¼ÂæÂÂÃ¥ÂÂå¿ é Âå¨éÂÂÃ¥ÂÂæªÂæ¡Âå 堥ä¸Âè¡Âç¨Âå¼Â碼ï¼Âç¨ä¾Â註åÂÂæÂÂÃ¥ÂÂçÂÂé¢æ¿ãÂÂæ°å 堥çÂÂä½Âç½®(第ä¸Âè¡Â)ï¼Â
content tuttoolbar chrome/content/ overlay chrome://browser/content/browser.xul chrome://tuttoolbar/content/tuttoolbar.xul skin tuttoolbar classic/1.0 chrome/skin/
æ°å 堥çÂÂéÂÂä¸Âè¡Âç¸ç¶簡å®ï¼ÂèÂÂä¸ÂåªæÂÂÃ¥ÂÂÃ¥ÂÂé¨份ãÂÂ第ä¸Âé¨份ï¼Âskin 說æÂÂéÂÂä¸Âè¡Âè¦Â註åÂÂé¢æ¿çÂÂè³Âè¨ÂãÂÂæÂ¥èÂÂæ¯å¥Â件çÂÂÃ¥ÂÂ稱ï¼ÂéÂÂ裡使ç¨ tuttoolbar ç¶ä½ÂæÂÂÃ¥ÂÂçÂÂå¥Â件åÂÂ稱ãÂÂ第ä¸Âé¨份ï¼Â說æÂÂæÂÂÃ¥ÂÂå°ÂæÂÂæ´å±ÂçÂÂå·²å®Âè£Âå¥Â件åÂÂ稱ï¼ÂãÂÂclassic/1.0ãÂÂæ¯你æÂÂä¸Âç´ç¨å°çÂÂå¼ãÂÂæÂÂå¾Âï¼Âä¹Âæ¯æÂÂéÂÂè¦ÂçÂÂé¨份ï¼Âå°±æ¯å å«é¢æ¿æªÂæ¡ÂçÂÂç®éÂÂè·¯å¾ÂãÂÂ注æÂÂå°éÂÂÃ¥ÂÂè·¯å¾Âå¾Âé¢çÂÂæÂÂç·Â(/)ï¼ÂéÂÂÃ¥ÂÂæÂÂç·Âæ¯忠è¦ÂçÂÂï¼Â確å®Âä½ æÂÂ輸堥ãÂÂ
建ç«ÂÃ¥ÂÂçÂÂæªÂæ¡ (Creating the Image Files)
æÂÂÃ¥ÂÂæÂÂè®Âæ¯ÂÃ¥ÂÂ工堷åÂÂæÂÂéÂÂ使ç¨åÂÂèªçÂÂÃ¥ÂÂÃ¥ÂÂãÂÂ注æÂÂå°ï¼ÂéÂÂä¸Âæ¯æÂÂæÂÂæÂÂçÂÂæÂÂæ¯精緻çÂÂä½Âæ³Âï¼Âä½Âæ¯å¯以è®Â人æ´容æÂÂäºÂ解ãÂÂæ´好çÂÂæ¹å¼Âæ¯使ç¨åÂÂÃ¥ÂÂ樣å¼Â表ï¼Âä½Âæ¯é£趠åºéÂÂ份æÂÂÃ¥ÂÂçÂÂç¯ÂÃ¥ÂÂãÂÂ
æÂÂÃ¥ÂÂéÂÂè¦ÂäºÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂä¾Â工堷åÂÂçÂÂçµÂÃ¥ÂÂé¸å®使ç¨ï¼Â主è¦Âé¸å®ãÂÂç¶ÂÃ¥ÂÂæÂÂå°ÂæÂÂéÂÂãÂÂ網é ÂæÂÂå°ÂæÂÂéÂÂãÂÂÃ¥ÂÂçÂÂæÂÂå°Âé¸å®以åÂÂå¯調æ´çÂÂ移é§Âæ¨Âè¨ÂãÂÂå¨ä¸Âé¢çÂÂÃ¥ÂÂ表ä¸Âï¼ÂæÂÂäºÂÃ¥ÂÂæÂÂç¨å¨éÂÂÃ¥ÂÂå¥Â件çÂÂÃ¥ÂÂÃ¥ÂÂãÂÂ注æÂÂï¼ éÂÂäºÂÃ¥ÂÂÃ¥ÂÂé½æ¯éÂÂæÂÂç PNG æ ¼å¼ÂæªÂæ¡Âï¼Âå¦ÂæÂÂ你使ç¨ IE æÂÂæ¯堶ä»ÂçÂÂ覽å¨ï¼Âå¯è½ä¸Âè½æ£確å°顯示ãÂÂ
主è¦Âé¸å®åÂÂ示 Main Menu Icon (main.png): http://wiki.moztw.org/uimages/b/b7/Borngeek_main.png
ç¶ÂÃ¥ÂÂæÂÂå°ÂÃ¥ÂÂ示 Combined Search Icon (combined.png): http://wiki.moztw.org/uimages/3/36/Borngeek_combined.png
網é ÂæÂÂå°ÂÃ¥ÂÂ示 Web Search Icon (web.png): http://wiki.moztw.org/uimages/9/9c/Borngeek_web.png
Ã¥ÂÂçÂÂæÂÂå°ÂÃ¥ÂÂ示 Images Search Icon (images.png): http://wiki.moztw.org/uimages/6/61/Borngeek_images.png
å¯調æ´移é§Âæ¨Âè¨ÂÃ¥ÂÂ示 Resizing Gripper Icon (gripper.png): http://wiki.moztw.org/uimages/5/50/Borngeek_gripper.png
å°ÂéÂÂäºÂÃ¥ÂÂÃ¥ÂÂå²åÂÂå¨æÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂ建ç«Âç skin ç®éÂÂ裡ï¼ÂæªÂæ¡ÂçµÂæ§ÂæÂÂÃ¥ÂÂéÂÂ樣ï¼Â
+- TutToolbar/ +- install.rdf +- chrome.manifest +- chrome/ +- content/ +- tuttoolbar.xul +- skin/ +- combined.png +- gripper.png +- images.png +- main.png +- web.png
èÂÂç±串æ¥樣å¼Â表å¥Âç¨åÂÂç (Applying the Images with CSS)
ç¾å¨ï¼ÂæÂÂéÂÂäºÂÃ¥ÂÂÃ¥ÂÂå¯以使ç¨ï¼Âé¢æ¿ç®éÂÂä¹Âå·²ç¶Â註åÂÂï¼ÂæÂÂÃ¥ÂÂå¯以éÂÂå§ÂæÂÂÃ¥ÂÂÃ¥ÂÂå¥Âç¨å¨工堷åÂÂæÂÂéÂÂä¸ÂäºÂãÂÂæÂÂÃ¥ÂÂå°ÂæÂÂèÂÂç± CSS ä¾Âå®ÂæÂÂãÂÂå°±å¦ÂæÂÂå¨æÂÂÃ¥ÂÂä¸ÂéÂÂå§ÂæÂÂå°çÂÂï¼Âå¦ÂæÂÂä½ å° CSS ä¸ÂçÂÂæÂÂï¼Âå¯以åÂÂè W3Schools ç excellent CSS tutorial ãÂÂ
è®ÂæÂÂÃ¥ÂÂéÂÂå§Â建章CSS æªÂæ¡Âå§ï¼Âå¨ skin ç®éÂÂä¸Âï¼Â建ç«Âä¸ÂÃ¥ÂÂæªÂÃ¥ÂÂçº tuttoolbar.css çÂÂæªÂæ¡Âï¼ÂæÂÂéÂÂÃ¥ÂÂæªÂæ¡Âè·ÂÃ¥ÂÂÃ¥ÂÂæ¾å¨ä¸Âèµ·ãÂÂæªÂæ¡ÂçµÂæ§Âå¦Âä¸Âï¼Â
+- TutToolbar/ +- install.rdf +- chrome.manifest +- chrome/ +- content/ +- tuttoolbar.xul +- skin/ +- combined.png +- gripper.png +- images.png +- main.png +- web.png +- tuttoolbar.css
å¨說æÂÂç´°ç¯ÂÃ¥ÂÂï¼Âå Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂ樣å¼Â表çÂÂ堧容ï¼Â
#TutTB-MainMenu { list-style-image: url("chrome://tuttoolbar/skin/main.png"); } #TutTB-Combined-Button { list-style-image: url("chrome://tuttoolbar/skin/combined.png"); } #TutTB-Combined-Button > .toolbarbutton-menubutton-button { -moz-box-orient: horizontal; } #TutTB-Web-Button, #TutTB-Combined-Web { list-style-image: url("chrome://tuttoolbar/skin/web.png"); } #TutTB-Combined-Image { list-style-image: url("chrome://tuttoolbar/skin/images.png"); } #TutTB-ResizeBar { background-image: url("chrome://tuttoolbar/skin/gripper.png"); min-height: 22px; min-width: 3px; } #TutTB-ResizeSplitter { background: transparent; border: none !important; }
第ä¸Âé  è¦ÂÃ¥ÂÂæ¯æÂÂå®Â該åÂÂÃ¥ÂÂ給ãÂÂ主è¦Âé¸å®ãÂÂæÂÂéÂÂ使ç¨ãÂÂÃ¥ÂÂ顧ä¸Âä¸Â第ä¸Âç« ï¼ÂæÂÂÃ¥ÂÂ給äºÂ該æÂÂéÂÂä¸Âå ID å¼ï¼ÂTutTB-MainMenuï¼ÂæÂÂÃ¥ÂÂç¨該å¼ä¾Âè¨Âå®ÂæÂÂéÂÂ顯示çÂÂÃ¥ÂÂÃ¥ÂÂãÂÂå¨åÂÂé¢çÂÂäºÂèÂÂ(#)æ¯ ID é¸åÂÂå¨(ID selector)ï¼Âä¹Âå°±æ¯ç¨ä¾ÂæÂÂå® CSS å Âç´ è¦ÂÃ¥ÂÂçÂÂç¹å®ÂèÂÂå¥å¼ãÂÂå¨工堷åÂÂæÂÂéÂÂ裡ï¼ÂæÂÂÃ¥ÂÂ使ç¨ CSS 屬æ§ç list-style-image ä¾ÂæÂÂå®ÂÃ¥ÂÂÃ¥ÂÂãÂÂ注æÂÂå°æÂÂÃ¥ÂÂ使ç¨çÂÂæ¯ chrome è·¯å¾Âï¼Âä¹Âå°±æ¯å¥Â件æªÂæ¡ÂçµÂæ§Âä¸ÂçÂÂÃ¥ÂÂÃ¥ÂÂè·¯å¾Âï¼Â常ç¨çÂÂæ ¼å¼Âå¦Âä¸Âï¼Â
chrome://<packagename>/skin/<image_file_name>
å¨æÂÂÃ¥ÂÂçÂÂç¯Âä¾Â裡ï¼Âå°Âè£ÂÃ¥ÂÂ稱(package name)æ¯ tuttoolbarï¼ÂèÂÂ主è¦Âé¸å®使ç¨çÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂ稱çº main.pngãÂÂä½ å¯以çÂÂå°ï¼ÂæÂÂæÂÂçÂÂ工堷åÂÂæÂÂéÂÂ使ç¨é¡Âä¼¼çÂÂè¦ÂÃ¥ÂÂï¼Âå¨ç¶ÂÃ¥ÂÂæÂÂå°ÂæÂÂéÂÂçÂÂé¸å®頠ç®ä¹Âæ¯ä¸Â樣ãÂÂThere's one caveat to handling menu item icons, however. Ã¥ÂÂæ³ä¸Âä¸Âï¼Âå¨ç¶ÂÃ¥ÂÂæÂÂå°Âé¸å®ä¸Âï¼ÂæÂÂÃ¥ÂÂçºé¸å®頠ç®使ç¨äºÂä¸ÂÃ¥ÂÂç¹åÂ¥çÂÂé¡Âå¥å¼ï¼Âmenuitem-iconicï¼ÂéÂÂæ¯ Firefox 堧建çÂÂãÂÂéÂÂÃ¥ÂÂå¼ãÂÂÃ¥ÂÂÃ¥ÂÂãÂÂÃ¥ÂÂ示æ¯æ´使ç¨å®ÂçÂÂæ¯ÂÃ¥ÂÂé¸å®頠ç®ãÂÂ
æ³忠你ä¹Â注æÂÂå°äºÂéÂÂÃ¥ÂÂç¶ÂÃ¥ÂÂæÂÂå°ÂæÂÂéÂÂçÂÂç¹å®Âè¦ÂÃ¥ÂÂï¼Â
#TutTB-Combined-Button > .toolbarbutton-menubutton-button { -moz-box-orient: horizontal; }
éÂÂÃ¥ÂÂç¹åÂ¥ç CSS 屬æ§å¨éÂÂ裡使ç¨ -moz-box-orientï¼ÂéÂÂæÂÂå®ÂæÂÂéÂÂçÂÂæ¨Â籤該å¦Âä½Â顯示ï¼Âæ°´å¹³æÂÂæ¯åÂÂç´顯示ãÂÂ工堷åÂÂæÂÂéÂÂæ¨Â籤çÂÂé Âè¨Âå¼æ¯åÂÂç´顯示ï¼Âä¹Âå°±æ¯顯示å¨åÂÂ示ä¸Âæ¹ãÂÂå¨éÂÂÃ¥ÂÂç¯Âä¾Âï¼Âä¸Â使ç¨éÂÂ樣çÂÂæ¹å¼Âï¼ÂæÂÂ以æÂÂÃ¥ÂÂæ¹çº水平顯示ï¼Â以使æ¨Â籤顯示å¨åÂÂ示ä¹Âå¾ÂãÂÂ
å¨èÂÂçÂÂå¯調æ´çÂÂ移é§Âæ¨Âè¨Â(resizing gripper)æÂÂï¼ÂæÂÂå ©æ¢Â樣å¼Â表çÂÂè¦ÂÃ¥ÂÂãÂÂéÂÂè¨Âå¾Âå¨第åÂÂ章裡ï¼ÂæÂÂÃ¥ÂÂå¨åÂÂé¢çÂÂå Âç´ (splitter element)使ç¨ç vbox å Âç´ åÂÂï¼ÂæÂÂÃ¥ÂÂçº移é§Âæ¨Âè¨Â使ç¨亠vbox ä¾Â顯示èÂÂæ¯åÂÂÃ¥ÂÂãÂÂéÂÂ次ï¼ÂæÂÂÃ¥ÂÂ使ç¨ background-image 屬æ§ãÂÂæÂÂÃ¥ÂÂå¿ é ÂèÂÂç± min-height è min-width 屬æ§ï¼ÂæÂÂä¾ÂæÂÂå°Âé«Â度èÂÂæÂÂå°Â寬度ï¼Â以è®Â移é§Âæ¨Âè¨Â顯示åºä¾ÂãÂÂvbox è hbox 屬æ§çÂÂé Âè¨Âå¼å¯è½æ¯ä¾Â堧容大å°Âå¤å®ÂãÂÂç±æ¼ vbox æ¯空çÂÂï¼Âé Âè¨Âå¼就æ¯ 0ï¼ÂéÂÂä¹Âé¿å ÂæÂÂÃ¥ÂÂæÂÂçÂÂå°èÂÂæ¯åÂÂÃ¥ÂÂãÂÂ
æÂÂÃ¥ÂÂä¹ÂçºåÂÂé¢çÂÂå Âç´ æÂÂä¾Âä¸Âæ¢Âè¦ÂÃ¥ÂÂã æÂÂÃ¥ÂÂè®ÂèÂÂæ¯æ¯éÂÂæÂÂçÂÂï¼ÂèÂÂä¸Âä¸Â使ç¨éÂÂæ¡Â(Ã¥ÂÂé¢å Âç´ çÂÂé Âè¨Âå¼æ¯æÂÂ使ç¨éÂÂæ¡ÂçÂÂ)ãÂÂç¾å¨ï¼ÂCSS æªÂæ¡Âå·²ç¶Âå®ÂæÂÂï¼ÂæÂÂÃ¥ÂÂè¦Âè¨Âå®Âè¦Âè¼Â(overlay)以使ç¨å®ÂãÂÂ
使ç¨樣å¼Â表 (Using the Style Sheet)
åªæÂÂä¸Âè¡Âç¨Âå¼Â碼æ¯éÂÂè¦Â被å 堥å¨ XUL è¦Âè¼ÂçÂÂï¼ÂéÂÂç¨ä¾ÂÃ¥ÂÂÃ¥ÂÂæÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂ建ç«ÂçÂÂ樣å¼Â表ãÂÂéÂÂå¿ é Âæ¾置å¨ XML 宣åÂÂæÂÂ令çÂÂä¸Âæ¹ï¼Â以åÂÂè¦Âè¼Â(overlay)å Âç´ ä¹ÂÃ¥ÂÂãÂÂä¸Âé¢ï¼ÂæÂÂÃ¥ÂÂåºè¦Âè¼ÂæªÂæ¡ÂçÂÂÃ¥ÂÂå¹¾è¡ÂéÂÂè¦Âæ´åÂÂçÂÂå°æ¹ï¼Â
<?xml version="1.0"?> <?xml-stylesheet href="chrome://tuttoolbar/skin/tuttoolbar.css" type="text/css"?> <overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> (... rest of XUL overlay file ...)
å°±åÂÂæÂÂÃ¥ÂÂå¨樣å¼Â表ä¸ÂçÂÂå°çÂÂÃ¥ÂÂÃ¥ÂÂä¸Â樣ï¼Âchrome è·¯å¾Â被ç¨ä¾ÂæÂÂå®Âä½Âç½®ãÂÂè type 屬æ§åªæ¯æÂÂæÂÂéÂÂæ¯ CSS çÂÂæªÂæ¡ÂãÂÂç¾å¨è®ÂæÂÂÃ¥ÂÂçÂÂçÂÂè¦Âè¼ÂæªÂæ¡Âå¨å 堥éÂÂä¸Âè¡Âå¾ÂçÂÂå®Âæ´堧容[View XUL Overlay Revision 6]ï¼Â
<?xml version="1.0"?> <?xml-stylesheet href="chrome://tuttoolbar/skin/tuttoolbar.css" type="text/css"?> <overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="navigator-toolbox"> <toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden"> <toolbaritem flex="0"> <toolbarbutton id="TutTB-MainMenu" type="menu" tooltiptext="Tutorial Toolbar Main Menu"> <menupopup> <menuitem label="Google Home Page" accesskey="G" tooltiptext="Navigate to Google" oncommand="TutTB_LoadURL('http://www.google.com/')" /> <menuseparator /> <menuitem label="Born Geek Website" accesskey="B" tooltiptext="Navigate to Born Geek" oncommand="TutTB_LoadURL('http://www.borngeek.com/')" /> </menupopup> </toolbarbutton> </toolbaritem> <toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> <menulist id="TutTB-SearchTerms" editable="true" flex="1" minwidth="100" width="250" onkeypress="TutTB_KeyHandler(event);"> <menupopup id="TutTB-SearchTermsMenu" onpopupshowing="TutTB_Populate()" /> </menulist> </toolbaritem> <splitter id="TutTB-ResizeSplitter" state="open" collapse="none" resizebefore="closest" resizeafter="farthest" tooltiptext="Resize the Search Box"> <vbox id="TutTB-ResizeBar" /> </splitter> <toolbaritem flex="0"> <toolbarbutton id="TutTB-Combined-Button" label="Search" type="menu-button" tooltiptext="Combined Search" oncommand="TutTB_Search(event, 'web')"> <menupopup> <menuitem id="TutTB-Combined-Web" label="Web Search" class="menuitem-iconic" tooltiptext="Search the Web" oncommand="TutTB_Search(event, 'web'); event.preventBubble();" /> <menuitem id="TutTB-Combined-Image" label="Image Search" class="menuitem-iconic" tooltiptext="Search Images" oncommand="TutTB_Search(event, 'image'); event.preventBubble();" /> </menupopup> </toolbarbutton> <toolbarseparator /> <toolbarbutton id="TutTB-Web-Button" tooltiptext="Search the Web" label="Web Search" oncommand="TutTB_Search(event, 'web')" /> </toolbaritem> <toolbarspring /> </toolbar> </toolbox> </overlay>
å¥å¿Âè¨Âè¦Â測試ï¼Âç¨åÂÂæ ÂéÂÂç¼ç Firefox å¯æÂŽÂÂÃ¥ÂÂï¼Âç¶å¾ÂçÂÂçÂÂå¥Â件çÂÂ樣åÂÂãÂÂæÂ¥ä¸Âä¾Âï¼ÂæÂÂÃ¥ÂÂè¦Âçº工堷åÂÂ注堥çÂÂå½ãÂÂ
第å Âç« ï¼Â主ç¨Âå¼ (Scripting the Toolbar)
å¥Â件éÂÂ常æ¯ç¨ JavaScript å·è¡ÂçÂÂï¼ÂéÂÂæ¯ä¸Â種簡å®æÂÂå¸çÂÂç¨Âå¼ÂèªÂè¨ÂãÂÂä½ å°ÂæÂÂç¼ç¾ï¼ÂæÂÂÃ¥ÂÂçÂÂ工堷åÂÂå¥Â件çÂÂç¨Âå¼Â碼æ¯éÂÂ常簡å®çÂÂãÂÂæÂÂÃ¥ÂÂå°ÂæÂÂ大éÂÂ使ç¨æÂÂ件ç©件模åÂÂ(DOM)ï¼ÂéÂÂå¯以è®ÂæÂÂÃ¥ÂÂèÂÂçÂÂå®ç¨çÂÂå Âç´ ãÂÂ
å¨æÂÂÃ¥ÂÂéÂÂå§ÂÃ¥ÂÂï¼Âä½ è¦Âå ÂçÂ¥éÂÂä¸ÂÃ¥ÂÂéÂÂé»ÂãÂÂid 屬æ§忠é Âæ¯æ´åÂÂçÂÂ覽å¨å¯ä¸ÂçÂÂï¼Âè JavaScript çÂÂè®Âæ¸åÂÂå½å¼Âä¹Âæ¯ãÂÂå¨çÂÂ覽å¨è¦Âè¼Âä¸ÂçÂÂJavaScript æ¯堨åÂÂæ§çÂÂï¼Âå æ¤æÂÂæÂÂæÂÂéÂÂÃ¥ÂÂéÂÂå¶ãÂÂæÂÂÃ¥ÂÂå°ÂæÂÂ使ç¨跠XUL å Âç´ ä¸Â樣çÂÂæÂÂå·§ï¼ÂæÂÂæÂÂçÂÂè®Âæ¸åÂÂå½å¼ÂçÂÂÃ¥ÂÂ稱ï¼Âå°ÂæÂÂæÂÂ以æÂÂÃ¥ÂÂå¥Â件çºåÂÂèµ·å§ÂÃ¥ÂÂ稱ãÂÂæÂÂÃ¥ÂÂ使ç¨ TutTB_ ç¶ä½Âèµ·å§ÂÃ¥ÂÂ稱ï¼ÂæÂÂ以æÂÂÃ¥ÂÂçÂÂæÂÂå°Âå½å¼ÂæÂÂæ¯ TutTB_Search()ãÂÂ
ç¾å¨ï¼Âè®ÂæÂÂÃ¥ÂÂ建章JavaScript æªÂæ¡ÂãÂÂå¨ content ç®éÂÂä¸Âï¼Â建ç«Âä¸Âå tuttoolbar.js çÂÂæÂÂÃ¥ÂÂæªÂãÂÂç®éÂÂçµÂæ§Âå¦Âä¸Âï¼Â
+- TutToolbar/ +- install.rdf +- chrome.manifest +- chrome/ +- content/ +- tuttoolbar.xul +- tuttoolbar.js +- skin/ +- combined.png +- gripper.png +- images.png +- main.png +- web.png +- tuttoolbar.css
å¨建ç«Âä»»ä½Âç¨Âå¼Â碼åÂÂï¼Âå ÂÃ¥ÂÂ訴 XUL æªÂæ¡Â該å¦Âä½Â使ç¨ JavaScript æªÂæ¡ÂãÂÂ
é£絠XUL è JavaScript (Tying XUL to JavaScript)
æÂÂÃ¥ÂÂç XUL æªÂæ¡ tuttoolbar.xul éÂÂè¦Â被åÂÂçÂ¥ç¸å°ÂæÂÂç JavaScript æªÂï¼ÂæÂÂÃ¥ÂÂå¯以使ç¨ä¸Âé¢çÂÂæÂÂè¿°ï¼Â
<script type="application/x-javascript" src="chrome://tuttoolbar/content/tuttoolbar.js" />
éÂÂå¿ é Âæ¾置å¨ overlay å Âç´ ä¹Âä¸ÂãÂÂtype 屬æ§æ¯æÂÂå®Â使ç¨ JavaScriptï¼Âsrc 屬æ§æ¯æÂÂå®ÂÃ¥ÂÂÃ¥ÂÂ建ç«Âç JavaScript æªÂãÂÂ堧容å¦Âä¸Â[View XUL Overlay Revision 7]ï¼Â
<?xml version="1.0"?> <?xml-stylesheet href="chrome://tuttoolbar/skin/tuttoolbar.css" type="text/css"?> <overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="chrome://tuttoolbar/content/tuttoolbar.js" /> <toolbox id="navigator-toolbox"> <toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden"> <toolbaritem flex="0"> <toolbarbutton id="TutTB-MainMenu" type="menu" tooltiptext="Tutorial Toolbar Main Menu"> <menupopup> <menuitem label="Google Home Page" accesskey="G" tooltiptext="Navigate to Google" oncommand="TutTB_LoadURL('http://www.google.com/')" /> <menuseparator /> <menuitem label="Born Geek Website" accesskey="B" tooltiptext="Navigate to Born Geek" oncommand="TutTB_LoadURL('http://www.borngeek.com/')" /> </menupopup> </toolbarbutton> </toolbaritem> <toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> <menulist id="TutTB-SearchTerms" editable="true" flex="1" minwidth="100" width="250" onkeypress="TutTB_KeyHandler(event);"> <menupopup id="TutTB-SearchTermsMenu" onpopupshowing="TutTB_Populate()" /> </menulist> </toolbaritem> <splitter id="TutTB-ResizeSplitter" state="open" collapse="none" resizebefore="closest" resizeafter="farthest" tooltiptext="Resize the Search Box"> <vbox id="TutTB-ResizeBar" /> </splitter> <toolbaritem flex="0"> <toolbarbutton id="TutTB-Combined-Button" label="Search" type="menu-button" tooltiptext="Combined Search" oncommand="TutTB_Search(event, 'web')"> <menupopup> <menuitem id="TutTB-Combined-Web" label="Web Search" class="menuitem-iconic" tooltiptext="Search the Web" oncommand="TutTB_Search(event, 'web'); event.preventBubble();" /> <menuitem id="TutTB-Combined-Image" label="Image Search" class="menuitem-iconic" tooltiptext="Search Images" oncommand="TutTB_Search(event, 'image'); event.preventBubble();" /> </menupopup> </toolbarbutton> <toolbarseparator /> <toolbarbutton id="TutTB-Web-Button" tooltiptext="Search the Web" label="Web Search" oncommand="TutTB_Search(event, 'web')" /> </toolbaritem> <toolbarspring /> </toolbar> </toolbox> </overlay>
çºæÂÂéÂÂå ä¸ÂÃ¥ÂÂè½ (Adding Functionality to the Buttons)
éÂÂè¨Âå¾ÂæÂÂÃ¥ÂÂçº工堷åÂÂæÂÂéÂÂæÂÂä¾Âç oncommand 屬æ§åÂÂï¼ÂéÂÂÃ¥ÂÂ屬æ§æ¯æÂÂå®Âç¨Âå¼Â碼å·è¡ÂçÂÂäºÂ件ãÂÂæÂÂÃ¥ÂÂä¹Âå¯以使ç¨ onclick 代æ¿ oncommandï¼Âä½Âæ¯ onclick å°Âéµç¤ç¡æÂÂï¼Âè oncommand å¯以åÂÂæÂÂÃ¥ÂÂæÂÂéµç¤èÂÂæ»Âé¼ çÂÂÃ¥ÂÂä½ÂãÂÂè®ÂæÂÂÃ¥ÂÂÃ¥ÂÂ顧ä¸Âä¸ÂæÂÂå°ÂæÂÂéÂÂï¼Â
oncommand="TutTB_Search(event, 'web')"
éÂÂÃ¥ÂÂå¼å¼å« TutTB_Search() å½å¼Âï¼Âå ¶ä¸Âå å«堩åÂÂå¼ï¼ÂéÂÂÃ¥ÂÂå½å¼Âå¼å«çÂÂäºÂ件(event)ï¼Â以åÂÂæÂÂå°ÂçÂÂ網é Â(web)ãÂÂ
ç¨Âå¼Â碼å¦Âä¸Â[View JavaScript Revision 1]ï¼Â
//////////////////////////////////////////////////////////////////////////////// // TutTB_Search() å½å¼ÂæÂÂçºæÂÂÃ¥ÂÂå®ÂæÂÂæÂÂå°ÂãÂÂevent Ã¥ÂÂæ¸æÂÂ觸ç¼å½å¼ÂçÂÂå¼å«ï¼Âtype Ã¥ÂÂæ¸ // çºæÂÂå°ÂçÂÂé¡ÂÃ¥ÂÂã //////////////////////////////////////////////////////////////////////////////// function TutTB_Search(event, type) { // å°Âè¦ÂçÂÂ覽çÂÂ網å var URL = ""; // 辨åÂ¥æÂÂå°Âæ¬Âä½Âæ¯å¦çº空å¼ var isEmpty = false; // èÂÂçÂÂæÂÂå°Âæ¬Âä½ ( <menulist> å Âç´ ) var searchTermsBox = document.getElementById("TutTB-SearchTerms"); // å¾ÂæÂÂå°Âæ¬Âä½ÂÃ¥ÂÂåºåÂÂ串ï¼Âæ´çÂÂå¿ è¦ÂçÂÂ空ç½ // å¯以å¨ä¸Âé¢çÂÂç TutTB_TrimString() å½å¼ÂéÂÂä½ÂçÂÂ細篠var searchTerms = TutTB_TrimString(searchTermsBox.value); if(searchTerms.length == 0) // Is the search terms box empty? isEmpty = true; // If so, set the isEmpty flag to true else // If not, convert the terms to a URL-safe string searchTerms = TutTB_ConvertTermsToURI(searchTerms); // é¸æÂÂæÂÂå°ÂçÂÂé¡Âå // å¦ÂæÂÂæ¬Âä½Âæ¯空ç½çÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂå¼Âå°Â使ç¨è å° Google 網é Âä¸Âé©ç¶çÂÂå°æ¹ã // å¦åÂÂï¼ÂæÂÂå°Â輸堥çÂÂæÂÂÃ¥ÂÂã switch(type) { // 建ç«ÂÃ¥ÂÂçÂÂæÂÂå°ÂçÂÂ網å case "image": if(isEmpty) { URL = "http://images.google.com/"; } else { URL = "http://images.google.com/images?q=" + searchTerms; } break; // 建ç«Â網é ÂæÂÂå°ÂçÂÂ網å case "web": default: if(isEmpty) { URL = "http://www.google.com/"; } else { URL = "http://www.google.com/search?q=" + searchTerms; } break; } // 使ç¨ TutTB_LoadURL å½å¼Âå¨çÂÂ覽è¦ÂçªÂä¸Âè¼Â堥網å TutTB_LoadURL(URL); } //////////////////////////////////////////////////////////////////////////////// // TutTB_TrimString() å½å¼ÂæÂÂä¿®åªåÂÂ串çÂÂÃ¥ÂÂå¾Â空ç½é¨份ï¼Âç¶å¾Âå°ÂæÂÂæÂÂçÂÂ空ç½é¨份è½ÂæÂÂæ // å®ä¸ÂÃ¥ÂÂ空ç½ï¼Âç¶å¾Âå³åÂÂä¿®æ¹å¾ÂÃ¥ÂÂ串ã //////////////////////////////////////////////////////////////////////////////// function TutTB_TrimString(string) { // å¦ÂæÂÂå³堥çÂÂÃ¥ÂÂ串ç¡æÂÂï¼ÂæÂÂæ¯æ²ÂæÂÂæ±西ï¼ÂÃ¥ÂÂå³åÂÂ空å¼ if (!string) return ""; string = string.replace(/^\s+/, ''); // Remove leading whitespace string = string.replace(/\s+$/, ''); // Remove trailing whitespace // å°ÂæÂÂæÂÂ空ç½é¨份ç¨å®ä¸Â空ç½代æ¿ string = string.replace(/\s+/g, ' '); return string; // å³åÂÂæ¹è®Âå¾ÂçÂÂå¼ } //////////////////////////////////////////////////////////////////////////////// // TutTB_ConvertTermsToURI() å½å¼Âå°Âå³堥çÂÂæÂÂå°ÂÃ¥ÂÂ串è½ÂæÂÂçºå®Âå ¨çÂÂ網å //////////////////////////////////////////////////////////////////////////////// function TutTB_ConvertTermsToURI(terms) { // 建ç«Âé£åÂÂÃ¥ÂÂæ¾æ¯ÂÃ¥ÂÂæÂÂå°ÂÃ¥ÂÂ串 var termArray = new Array(); // ç¨空ç½åÂÂå ÂÃ¥ÂÂå²åÂÂ串 termArray = terms.split(" "); // ç¨ä¾ÂÃ¥ÂÂæ¾å®Âå ¨çÂÂ網å var result = ""; // å¨åÂÂ串ä¸ÂéÂÂè¿´ for(var i=0; i<termArray.length; i++) { // å¨第ä¸ÂÃ¥ÂÂÃ¥ÂÂ串å¾ÂçÂÂæÂÂæÂÂçÂÂÃ¥ÂÂ串æÂÂç¨å èÂÂ(+)éÂÂé if(i > 0) result += "+"; // 使ç¨ Firefox 堧建ç encodeURIComponent() å½å¼Âå 寠result += encodeURIComponent(termArray[i]); } return result; // å³åÂÂçµÂæ } //////////////////////////////////////////////////////////////////////////////// // TutTB_LoadURL() å½å¼Âå¨çÂÂ覽å¨ä¸Âè¼Âå ¥ç¹å®ÂçÂÂ網å //////////////////////////////////////////////////////////////////////////////// function TutTB_LoadURL(url) { // å¨網åÂÂÃ¥ÂÂè¨Âå®Âå³堥çÂÂ網å window._content.document.location = url; // Make sure that we get the focus window.content.focus(); }
éÂÂÃ¥ÂÂä½ ç Firefox éÂÂç¼çÂÂæ¬ï¼Âå¨æÂÂÃ¥ÂÂçÂÂ工堷åÂÂå¥Â件輸堥æÂÂå°ÂçÂÂå¼ï¼Âç¶å¾ÂæÂÂä¸Â網é ÂæÂÂå°ÂæÂÂéÂÂãÂÂç¨Âå¼Â碼æÂÂ該æÂÂå·è¡Âï¼Âç¶å¾ÂæÂÂåºç¾æÂÂå°ÂçµÂæÂÂãÂÂéÂÂÃ¥ÂÂÃ¥ÂÂæ ÂéÂÂç¼çÂÂæ¬確實æ¯ç¸ç¶便å©çÂÂå§ï¼Â
æÂÂéÂÂé¸å®çÂÂ注æÂÂäºÂé  (A Special Note About Button-Menu Buttons)
å¨æÂÂÃ¥ÂÂé²堥ä¸Âä¸Â張章ç¯Âä¹ÂÃ¥ÂÂï¼ÂæÂÂä¸Âé»ÂéÂÂæ¼æÂÂéÂÂé¸å®æÂÂè¦Â注æÂÂçÂÂãÂÂÃ¥ÂÂæ³ä¸Âä¸Âï¼ÂéÂÂé¡ÂÃ¥ÂÂçÂÂæÂÂéÂÂæÂÂä¾Âå¯以é»ÂæÂÂçÂÂæÂÂéÂÂèÂÂå½Âåºå¼Âé¸å®(主è¦Âç¯Âä¾Âçºå¾ÂÃ¥ÂÂèÂÂÃ¥ÂÂå¾ÂçÂÂ覽)ãÂÂä¹Âæ³ä¸Âä¸Âï¼Âtoolbarbutton 以åÂÂå å« oncommand ç menuitem å Âç´ ãÂÂç¶工堷åÂÂæÂÂéÂÂçÂÂä¸Âé¨åÂÂ被åÂÂÃ¥ÂÂï¼Âtoolbarbutton å Âç´ ç oncommand ç¨Âå¼Â碼å¦Âä½ æÂÂæÂÂæÂÂçÂÂ被å·è¡ÂãÂÂä½Âæ¯ï¼Âç¶使ç¨è åÂÂÃ¥ÂÂäºÂmenuitem å Âç´ çÂÂå ¶ä¸Âä¸ÂÃ¥ÂÂæÂÂï¼ÂæÂÂç¼çÂÂä»Â麼äºÂï¼Â
ä¸Âåªæ¯ menuitem å Âç´ ç oncommand äºÂ件å·è¡Âï¼Âtoolbarbutton å Âç´ çÂÂäºÂ件ä¹Â被å·è¡ÂãÂÂæÂÂ以堩åÂÂäºÂ件æ¯åÂÂæÂÂå·è¡ÂçÂÂï¼ÂÃ¥ÂÂ管你åªæ¯æ³è¦Âå ¶ä¸Âä¸Â件被å·è¡ÂãÂÂå çº toolbarbutton äºÂ件æ¯æÂÂå¾Âç¼çÂÂçÂÂï¼ÂæÂÂ以實éÂÂå·è¡ÂçÂÂæ¯ toolbarbutton äºÂ件ãÂÂæÂÂå¥話說ï¼Âmenuitem äºÂ件æ²ÂæÂÂæ©ÂæÂÂå·è¡ÂãÂÂé£æÂÂÃ¥ÂÂè¦ÂæÂÂ樣解決éÂÂÃ¥ÂÂÃ¥ÂÂé¡Âå¢ï¼ÂäºÂ實ä¸Âï¼Âæ¯æÂÂ辦æ³ÂçÂÂãÂÂè®ÂæÂÂÃ¥ÂÂå¾ÂÃ¥ÂÂçÂÂç menuitem å Âç´ ï¼Â
<menuitem id="TutTB-Combined-Image" label="Image Search" class="menuitem-iconic" tooltiptext="Search Images" oncommand="TutTB_Search(event, 'image'); event.preventBubble();" />
èÂÂç±使ç¨ DOM å½张preventBubble()ï¼ÂæÂÂÃ¥ÂÂå¯以é¿堠oncommand 被å·è¡ÂãÂÂçºäºÂé¿å Âå¤Âé·夢å¤Âï¼Âè¨Âä½Âä¸Â件äºÂï¼Âç¶你建ç«ÂæÂÂéÂÂé¸å®æÂÂï¼Âè¨Âå¾Âå¨ menuitem å Âç´ ç oncommand 屬æ§å 堥 event.preventBubble()ãÂÂ
çºæÂÂå°ÂÃ¥ÂÂå 堥åÂÂè½ (Adding Functionality to the Search Box)
ç¾å¨ï¼ÂæÂÂÃ¥ÂÂå·²ç¶Âè®ÂæÂÂå°ÂæÂÂéÂÂå¯以使ç¨ï¼ÂæÂ¥ä¸Âä¾Âï¼ÂæÂÂÃ¥ÂÂéÂÂè¦Â幫æÂÂå°ÂÃ¥ÂÂå 堥ä¸ÂäºÂÃ¥ÂÂè½ãÂÂè®Â使ç¨è å¯以å¨輸堥åÂÂ串å¾ÂæÂÂä¸ÂãÂÂEnterãÂÂ以å·è¡ÂæÂÂå°ÂãÂÂè¦ÂæÂÂ麼åÂÂå¢ï¼Âè®ÂæÂÂÃ¥ÂÂçÂÂçÂÂè¦Â使ç¨çÂÂå½å¼Âï¼Â
<toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> <menulist id="TutTB-SearchTerms" editable="true" flex="1" minwidth="100" width="250" onkeypress="TutTB_KeyHandler(event);"> <menupopup id="TutTB-SearchTermsMenu" onpopupshowing="TutTB_Populate()" /> </menulist> </toolbaritem>
éÂÂ次ï¼ÂæÂÂÃ¥ÂÂ使ç¨ onkeypress 代æ¿ oncommandãÂÂéÂÂÃ¥ÂÂäºÂ件æÂÂå¨使ç¨è å¨æÂÂå°ÂÃ¥ÂÂæÂÂä¸ÂæÂÂéµæÂÂ觸ç¼ãÂÂå¨éÂÂÃ¥ÂÂç¯Âä¾Âï¼ÂæÂÂÃ¥ÂÂ建ç«Âä¸ÂÃ¥ÂÂç¸ç¶簡å®ç TutTB_KeyHandler()å½å¼Âï¼Â
function TutTB_KeyHandler(event) { if(event.keyCode == event.DOM_VK_RETURN) TutTB_Search(event, 'web'); }
éÂÂÃ¥ÂÂå½å¼Âåªä¸ÂéÂÂæ¯è¦Â檢æÂ¥ãÂÂEnterãÂÂæ¯å¦被æÂÂä¸ÂãÂÂå¦ÂæÂÂæ¯ï¼ÂTutTB_Search()æÂÂ被å¼å«ãÂÂå¦åÂÂï¼Âä¸ÂÃ¥ÂÂä»»ä½ÂäºÂãÂÂè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂå 堥æ¤å½å¼Âç JavaScript æªÂæ¡Â[View JavaScript Revision 2]ï¼Â
//////////////////////////////////////////////////////////////////////////////// // TutTB_Search() å½å¼ÂæÂÂçºæÂÂÃ¥ÂÂå®ÂæÂÂæÂÂå°ÂãÂÂevent Ã¥ÂÂæ¸æÂÂ觸ç¼å½å¼ÂçÂÂå¼å«ï¼Âtype Ã¥ÂÂæ¸ // çºæÂÂå°ÂçÂÂé¡ÂÃ¥ÂÂã //////////////////////////////////////////////////////////////////////////////// function TutTB_Search(event, type) { // å°Âè¦ÂçÂÂ覽çÂÂ網å var URL = ""; // 辨åÂ¥æÂÂå°Âæ¬Âä½Âæ¯å¦çº空å¼ var isEmpty = false; // èÂÂçÂÂæÂÂå°Âæ¬Âä½ ( <menulist> å Âç´ ) var searchTermsBox = document.getElementById("TutTB-SearchTerms"); // å¾ÂæÂÂå°Âæ¬Âä½ÂÃ¥ÂÂåºåÂÂ串ï¼Âæ´çÂÂå¿ è¦ÂçÂÂ空ç½ // å¯以å¨ä¸Âé¢çÂÂç TutTB_TrimString() å½å¼ÂéÂÂä½ÂçÂÂ細篠var searchTerms = TutTB_TrimString(searchTermsBox.value); if(searchTerms.length == 0) // æÂÂå°Âæ¬Âä½Âæ¯空ç½çÂÂÃ¥ÂÂï¼ isEmpty = true; // æ¯ï¼Âè¨Âå® isEmpty çº true else // ä¸Âï¼Âè½ÂæÂÂçºå®Âå ¨çÂÂ網å searchTerms = TutTB_ConvertTermsToURI(searchTerms); // é¸æÂÂæÂÂå°ÂçÂÂé¡Âå // å¦ÂæÂÂæ¬Âä½Âæ¯空ç½çÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂå¼Âå°Â使ç¨è å° Google 網é Âä¸Âé©ç¶çÂÂå°æ¹ã // å¦åÂÂï¼ÂæÂÂå°Â輸堥çÂÂæÂÂÃ¥ÂÂã switch(type) { // 建ç«ÂÃ¥ÂÂçÂÂæÂÂå°ÂçÂÂ網å case "image": if(isEmpty) { URL = "http://images.google.com/"; } else { URL = "http://images.google.com/images?q=" + searchTerms; } break; // 建ç«Â網é ÂæÂÂå°ÂçÂÂ網å case "web": default: if(isEmpty) { URL = "http://www.google.com/"; } else { URL = "http://www.google.com/search?q=" + searchTerms; } break; } // 使ç¨ TutTB_LoadURL å½å¼Âå¨çÂÂ覽è¦ÂçªÂä¸Âè¼Â堥網å TutTB_LoadURL(URL); } //////////////////////////////////////////////////////////////////////////////// // TutTB_TrimString() å½å¼ÂæÂÂä¿®åªåÂÂ串çÂÂÃ¥ÂÂå¾Â空ç½é¨份ï¼Âç¶å¾Âå°ÂæÂÂæÂÂçÂÂ空ç½é¨份è½ÂæÂÂæ // å®ä¸ÂÃ¥ÂÂ空ç½ï¼Âç¶å¾Âå³åÂÂä¿®æ¹å¾ÂÃ¥ÂÂ串ã //////////////////////////////////////////////////////////////////////////////// function TutTB_TrimString(string) { // å¦ÂæÂÂå³堥çÂÂÃ¥ÂÂ串ç¡æÂÂï¼ÂæÂÂæ¯æ²ÂæÂÂæ±西ï¼ÂÃ¥ÂÂå³åÂÂ空å¼ if (!string) return ""; string = string.replace(/^\s+/, ''); // Remove leading whitespace string = string.replace(/\s+$/, ''); // Remove trailing whitespace // å°ÂæÂÂæÂÂ空ç½é¨份ç¨å®ä¸Â空ç½代æ¿ string = string.replace(/\s+/g, ' '); return string; // å³åÂÂæ¹è®Âå¾ÂçÂÂå¼ } //////////////////////////////////////////////////////////////////////////////// // TutTB_ConvertTermsToURI() å½å¼Âå°Âå³堥çÂÂæÂÂå°ÂÃ¥ÂÂ串è½ÂæÂÂçºå®Âå ¨çÂÂ網å //////////////////////////////////////////////////////////////////////////////// function TutTB_ConvertTermsToURI(terms) { // 建ç«Âé£åÂÂÃ¥ÂÂæ¾æ¯ÂÃ¥ÂÂæÂÂå°ÂÃ¥ÂÂ串 var termArray = new Array(); // ç¨空ç½åÂÂå ÂÃ¥ÂÂå²åÂÂ串 termArray = terms.split(" "); // ç¨ä¾ÂÃ¥ÂÂæ¾å®Âå ¨çÂÂ網å var result = ""; // å¨åÂÂ串ä¸ÂéÂÂè¿´ for(var i=0; i<termArray.length; i++) { // å¨第ä¸ÂÃ¥ÂÂÃ¥ÂÂ串å¾ÂçÂÂæÂÂæÂÂçÂÂÃ¥ÂÂ串æÂÂç¨å èÂÂ(+)éÂÂé if(i > 0) result += "+"; // 使ç¨ Firefox 堧建ç encodeURIComponent() å½å¼Âå 寠result += encodeURIComponent(termArray[i]); } return result; // å³åÂÂçµÂæ } //////////////////////////////////////////////////////////////////////////////// // TutTB_LoadURL() å½å¼Âå¨çÂÂ覽å¨ä¸Âè¼Âå ¥ç¹å®ÂçÂÂ網å //////////////////////////////////////////////////////////////////////////////// function TutTB_LoadURL(url) { // å¨網åÂÂÃ¥ÂÂè¨Âå®Âå³堥çÂÂ網å window._content.document.location = url; // Make sure that we get the focus window.content.focus(); } //////////////////////////////////////////////////////////////////////////////// // TutTB_KeyHandler() 檢æÂ¥ãÂÂEnterãÂÂæ¯å¦被輸堥ãÂÂæ¯çÂÂ話ï¼Âå°±å·è¡ÂæÂÂå° //////////////////////////////////////////////////////////////////////////////// function TutTB_KeyHandler(event) { // [ENTER]被æÂÂä¸ÂäºÂÃ¥ÂÂï¼Âå¦ÂæÂÂæ¯ï¼Âå·è¡ÂæÂÂå° if(event.keyCode == event.DOM_VK_RETURN) TutTB_Search(event, 'web'); }
å¨ä¸Â次ï¼Âå·è¡Âä½ ç Firefox éÂÂç¼çÂÂæ¬ï¼Âå¨æÂÂå°ÂÃ¥ÂÂ輸堥æÂÂå°ÂÃ¥ÂÂ串ï¼Âç¶å¾ÂæÂÂä¸ÂãÂÂEnterãÂÂãÂÂå°±åÂÂæ¯æÂÂä¸ÂæÂÂå°ÂæÂÂéÂÂä¸Â樣ï¼ÂæÂÂå°ÂçµÂæÂÂæÂÂ該æÂÂåºç¾ãÂÂç¾å¨ï¼ÂæÂÂÃ¥ÂÂçÂÂå¥Â件已ç¶ÂæÂÂäºÂçÂÂå½ï¼Â
Ã¥ÂÂæ Â置堥é¸å® (Dynamically Populating a Menu)
Ã¥ÂÂæ ÂçÂÂå°Âé¸å®頠ç®æ¾置å¨é¸å®裡æ¯å¾ÂæÂÂç¨çÂÂï¼ÂéÂÂ好éÂÂÃ¥ÂÂç¹è²æ¯å¾Â容æÂÂå®ÂæÂÂçÂÂãÂÂå¨éÂÂÃ¥ÂÂæÂÂÃ¥ÂÂ裡ï¼ÂæÂÂÃ¥ÂÂå°ÂæÂÂå¨æÂÂå°ÂÃ¥ÂÂä¸ÂæÂÂå¼Âé¸å®åÂÂæ ÂçÂÂå 堥ä¸ÂäºÂé  ç®ãÂÂè®ÂæÂÂÃ¥ÂÂçÂÂçÂÂç¨ä¾Â建ç«Â工堷åÂÂçÂÂé¨份ï¼Â
<toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> <menulist id="TutTB-SearchTerms" editable="true" flex="1" minwidth="100" width="250" onkeypress="TutTB_KeyHandler(event);"> <menupopup id="TutTB-SearchTermsMenu" onpopupshowing="TutTB_Populate()" /> </menulist> </toolbaritem>
注æÂÂå°ï¼Âå¨ menupopup å Âç´ ç onpopupshowing 屬æ§ãÂÂæÂÂÃ¥ÂÂæÂÂå® TutTB_Populate()å½å¼Âå¨æ¯Â次ãÂÂå½Âåºå¼Âé¸å®ãÂÂå³å°Â顯示æÂÂ被å·è¡Âï¼ÂéÂÂÃ¥ÂÂå½å¼Âå°ÂæÂÂ建ç«ÂæÂÂÃ¥ÂÂçÂÂÃ¥ÂÂæ Âé¸å®頠ç®ãÂÂè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂå½å¼ÂçÂÂç¨Âå¼Â碼[View TutTB_Populate() Code]ï¼Â
//////////////////////////////////////////////////////////////////////////////// // TutTB_Populate() å½å¼Âå¨工堷åÂÂæ¬Âä½ÂçÂÂä¸ÂæÂÂå¼Âé¸å®æ¾置åÂÂæ Âç¢çÂÂçÂÂé¸å®頠ç®ã // éÂÂç¶éÂÂä¸Âæ¯éÂÂ常實ç¨çÂÂï¼Âä½Âæ¯èÂÂç±éÂÂÃ¥ÂÂç¯Âä¾Âï¼ÂæÂÂÃ¥ÂÂå¯以çÂÂçÂÂÃ¥ÂÂæ Âé¸å®置堥çÂÂéÂÂä½Âæ¹å¼Âã //////////////////////////////////////////////////////////////////////////////// function TutTB_Populate() { // Ã¥ÂÂå¾Âå½Âåºé¸å®å Âç´ var menu = document.getElementById("TutTB-SearchTermsMenu"); // 移é¤å¨å½Âåºé¸å®ç®åÂÂçÂÂé  ç® for(var i=menu.childNodes.length - 1; i >= 0; i--) { menu.removeChild(menu.childNodes.item(i)); } // æÂÂå®Âè¦Âå¨é¸å®å¢Âå çÂÂé  ç®æ¸é var numItemsToAdd = 10; for(var i=0; i<numItemsToAdd; i++) { // 建ç«Âè¦Âå¢Âå çÂÂæ°é¸å®頠ç® var tempItem = document.createElement("menuitem"); // è¨Âå®Âæ°é¸å®頠ç®çÂÂæ¨Â籤 tempItem.setAttribute("label", "Dynamic Item Number " + (i+1)); // å¨é¸å®ä¸Âæ°å¢Âé  ç® menu.appendChild(tempItem); } }
éÂÂÃ¥ÂÂå½å¼Âç¯Âä¾Âä¸ÂæÂÂå½令æ¯Âå menuitem å Âç´ åÂȌ·è¡Âé¸æÂÂçÂÂæÂÂ令ãÂÂçºäºÂè®Âæ¯Âå menuitem çÂ¥éÂÂæÂÂ該å·è¡ÂçÂÂæÂÂ令ï¼ÂæÂÂÃ¥ÂÂå å åªè¦Âå 堥 setAttribute()å½å¼Âä¾ÂèÂÂçÂÂäºÂ件åÂÂå·è¡Âç¨Âå¼Â碼ãÂÂéÂÂæ¯èÂÂç oncommand äºÂ件çÂÂç¯Âä¾Âï¼Â
tempItem.setAttribute("oncommand", "TutTB_SomeFunction()");
å 堥 TutTB_Populate()å½å¼Âå¾Âç JavaScript æªÂæ¡Â[View JavaScript Revision 3]ï¼Â
//////////////////////////////////////////////////////////////////////////////// // TutTB_Search() å½å¼ÂæÂÂçºæÂÂÃ¥ÂÂå®ÂæÂÂæÂÂå°ÂãÂÂevent Ã¥ÂÂæ¸æÂÂ觸ç¼å½å¼ÂçÂÂå¼å«ï¼Âtype Ã¥ÂÂæ¸ // çºæÂÂå°ÂçÂÂé¡ÂÃ¥ÂÂã //////////////////////////////////////////////////////////////////////////////// function TutTB_Search(event, type) { // å°Âè¦ÂçÂÂ覽çÂÂ網å var URL = ""; // 辨åÂ¥æÂÂå°Âæ¬Âä½Âæ¯å¦çº空å¼ var isEmpty = false; // èÂÂçÂÂæÂÂå°Âæ¬Âä½ ( <menulist> å Âç´ ) var searchTermsBox = document.getElementById("TutTB-SearchTerms"); // å¾ÂæÂÂå°Âæ¬Âä½ÂÃ¥ÂÂåºåÂÂ串ï¼Âæ´çÂÂå¿ è¦ÂçÂÂ空ç½ // å¯以å¨ä¸Âé¢çÂÂç TutTB_TrimString() å½å¼ÂéÂÂä½ÂçÂÂ細篠var searchTerms = TutTB_TrimString(searchTermsBox.value); if(searchTerms.length == 0) // æÂÂå°Âæ¬Âä½Âæ¯空ç½çÂÂÃ¥ÂÂï¼ isEmpty = true; // æ¯ï¼Âè¨Âå® isEmpty çº true else // ä¸Âï¼Âè½ÂæÂÂçºå®Âå ¨çÂÂ網å searchTerms = TutTB_ConvertTermsToURI(searchTerms); // é¸æÂÂæÂÂå°ÂçÂÂé¡Âå // å¦ÂæÂÂæ¬Âä½Âæ¯空ç½çÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂå¼Âå°Â使ç¨è å° Google 網é Âä¸Âé©ç¶çÂÂå°æ¹ã // å¦åÂÂï¼ÂæÂÂå°Â輸堥çÂÂæÂÂÃ¥ÂÂã switch(type) { // 建ç«ÂÃ¥ÂÂçÂÂæÂÂå°ÂçÂÂ網å case "image": if(isEmpty) { URL = "http://images.google.com/"; } else { URL = "http://images.google.com/images?q=" + searchTerms; } break; // 建ç«Â網é ÂæÂÂå°ÂçÂÂ網å case "web": default: if(isEmpty) { URL = "http://www.google.com/"; } else { URL = "http://www.google.com/search?q=" + searchTerms; } break; } // 使ç¨ TutTB_LoadURL å½å¼Âå¨çÂÂ覽è¦ÂçªÂä¸Âè¼Â堥網å TutTB_LoadURL(URL); } //////////////////////////////////////////////////////////////////////////////// // TutTB_TrimString() å½å¼ÂæÂÂä¿®åªåÂÂ串çÂÂÃ¥ÂÂå¾Â空ç½é¨份ï¼Âç¶å¾Âå°ÂæÂÂæÂÂçÂÂ空ç½é¨份è½ÂæÂÂæ // å®ä¸ÂÃ¥ÂÂ空ç½ï¼Âç¶å¾Âå³åÂÂä¿®æ¹å¾ÂÃ¥ÂÂ串ã //////////////////////////////////////////////////////////////////////////////// function TutTB_TrimString(string) { // å¦ÂæÂÂå³堥çÂÂÃ¥ÂÂ串ç¡æÂÂï¼ÂæÂÂæ¯æ²ÂæÂÂæ±西ï¼ÂÃ¥ÂÂå³åÂÂ空å¼ if (!string) return ""; string = string.replace(/^\s+/, ''); // 移é¤åÂÂé¢空ç½ string = string.replace(/\s+$/, ''); // 移é¤å¾Âé¢空ç½ // å°ÂæÂÂæÂÂ空ç½é¨份ç¨å®ä¸Â空ç½代æ¿ string = string.replace(/\s+/g, ' '); return string; // å³åÂÂæ¹è®Âå¾ÂçÂÂå¼ } //////////////////////////////////////////////////////////////////////////////// // TutTB_ConvertTermsToURI() å½å¼Âå°Âå³堥çÂÂæÂÂå°ÂÃ¥ÂÂ串è½ÂæÂÂçºå®Âå ¨çÂÂ網å //////////////////////////////////////////////////////////////////////////////// function TutTB_ConvertTermsToURI(terms) { // 建ç«Âé£åÂÂÃ¥ÂÂæ¾æ¯ÂÃ¥ÂÂæÂÂå°ÂÃ¥ÂÂ串 var termArray = new Array(); // ç¨空ç½åÂÂå ÂÃ¥ÂÂå²åÂÂ串 termArray = terms.split(" "); // ç¨ä¾ÂÃ¥ÂÂæ¾å®Âå ¨çÂÂ網å var result = ""; // å¨åÂÂ串ä¸ÂéÂÂè¿´ for(var i=0; i<termArray.length; i++) { // å¨第ä¸ÂÃ¥ÂÂÃ¥ÂÂ串å¾ÂçÂÂæÂÂæÂÂçÂÂÃ¥ÂÂ串æÂÂç¨å èÂÂ(+)éÂÂé if(i > 0) result += "+"; // 使ç¨ Firefox 堧建ç encodeURIComponent() å½å¼Âå 寠result += encodeURIComponent(termArray[i]); } return result; // å³åÂÂçµÂæ } //////////////////////////////////////////////////////////////////////////////// // TutTB_LoadURL() å½å¼Âå¨çÂÂ覽å¨ä¸Âè¼Âå ¥ç¹å®ÂçÂÂ網å //////////////////////////////////////////////////////////////////////////////// function TutTB_LoadURL(url) { // å¨網åÂÂÃ¥ÂÂè¨Âå®Âå³堥çÂÂ網å window._content.document.location = url; // Make sure that we get the focus window.content.focus(); } //////////////////////////////////////////////////////////////////////////////// // TutTB_KeyHandler() 檢æÂ¥ãÂÂEnterãÂÂæ¯å¦被輸堥ãÂÂæ¯çÂÂ話ï¼Âå°±å·è¡ÂæÂÂå° //////////////////////////////////////////////////////////////////////////////// function TutTB_KeyHandler(event) { // [ENTER]被æÂÂä¸ÂäºÂÃ¥ÂÂï¼Âå¦ÂæÂÂæ¯ï¼Âå·è¡ÂæÂÂå° if(event.keyCode == event.DOM_VK_RETURN) TutTB_Search(event, 'web'); } //////////////////////////////////////////////////////////////////////////////// // TutTB_Populate() å½å¼Âå¨工堷åÂÂæ¬Âä½ÂçÂÂä¸ÂæÂÂå¼Âé¸å®æ¾置åÂÂæ Âç¢çÂÂçÂÂé¸å®頠ç®ã // éÂÂç¶éÂÂä¸Âæ¯éÂÂ常實ç¨çÂÂï¼Âä½Âæ¯èÂÂç±éÂÂÃ¥ÂÂç¯Âä¾Âï¼ÂæÂÂÃ¥ÂÂå¯以çÂÂçÂÂÃ¥ÂÂæ Âé¸å®置堥çÂÂéÂÂä½Âæ¹å¼Âã //////////////////////////////////////////////////////////////////////////////// function TutTB_Populate() { // Ã¥ÂÂå¾Âå½Âåºé¸å®å Âç´ var menu = document.getElementById("TutTB-SearchTermsMenu"); // 移é¤å¨å½Âåºé¸å®ç®åÂÂçÂÂé  ç® for(var i=menu.childNodes.length - 1; i >= 0; i--) { menu.removeChild(menu.childNodes.item(i)); } // æÂÂå®Âè¦Âå¨é¸å®å¢Âå çÂÂé  ç®æ¸é var numItemsToAdd = 10; for(var i=0; i<numItemsToAdd; i++) { // 建ç«Âè¦Âå¢Âå çÂÂæ°é¸å®頠ç® var tempItem = document.createElement("menuitem"); // è¨Âå®Âæ°é¸å®頠ç®çÂÂæ¨Â籤 tempItem.setAttribute("label", "Dynamic Item Number " + (i+1)); // å¨é¸å®ä¸Âæ°å¢Âé  ç® menu.appendChild(tempItem); } }
Ã¥ÂÂæ Âå 堥工堷åÂÂæÂÂé (Dynamically Adding Toolbar Buttons)
å 堥åÂÂæ Â工堷åÂÂæÂÂéÂÂå°±è·ÂÃ¥ÂÂæ Â置堥é¸å®ä¸Â樣簡å®ï¼ÂèÂÂä¸ÂéÂÂéÂÂ常ç¸似ãÂÂé¦Âå Âï¼ÂæÂÂÃ¥ÂÂéÂÂè¦Âä¸ÂÃ¥ÂÂå å«åÂÂæ ÂæÂÂéÂÂçÂÂ容å¨ãÂÂå¨éÂÂå Âï¼ toolbaritem å Âç´ æ¯ä¸Âé¯çÂÂé¸æÂÂï¼Âæ¨Âè¨Âå¦Âä¸Âï¼Â
<toolbaritem id="TutTB-DynButtonContainer" />
ç¾å¨ï¼Â容å¨已ç¶Âå¯以å©ç¨äºÂï¼ÂæÂÂÃ¥ÂÂå¯以使ç¨å®Âï¼Âä¾Âå 堥åÂÂæ  toolbarbutton å Âç´ ï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂä¸Âä¸Âå¯以è®ÂæÂÂÃ¥ÂÂå 堥åÂÂæ ÂæÂÂéÂÂçÂÂå½å¼Âç¯Âä¾Âï¼Â
function TutTB_AddDynamicButtons() { // Ã¥ÂÂå¾ÂæÂÂÃ¥ÂÂå¨ XUL æÂÂè¿°ä¸Âå¢Âå çÂÂ工堷åÂÂé  ç®ãÂÂ容å¨ã var container = document.getElementById("TutTB-DynButtonContainer"); // 移é¤æÂÂæÂÂÃ¥ÂÂå¨çÂÂæÂÂé for(i=container.childNodes.length; i > 0; i--) { container.removeChild(container.childNodes[0]); } // å¢Âå äºÂÃ¥ÂÂÃ¥ÂÂæ ÂæÂÂé for(var i=0; i<5; i++) { var tempButton = null; tempButton = document.createElement("toolbarbutton"); tempButton.setAttribute("label", "Button " + i); tempButton.setAttribute("tooltiptext", "Button " + i); tempButton.setAttribute("oncommand", "TutTB_SomeFunction()"); container.appendChild(tempButton); } }
éÂÂÃ¥ÂÂå½å¼ÂÃ¥ÂÂ置堥åÂÂæ Âé¸å®éÂÂ常ç¸似ãÂÂæÂÂÃ¥ÂÂå¾Â容å¨ä¸Â移é¤ç¾æÂÂçÂÂÃ¥ÂÂæ ÂæÂÂéÂÂï¼Âç¶å¾Âå 堥æ°çÂÂãÂÂ
Optional Programming Exerciseï¼Â試èÂÂç¨éÂÂÃ¥ÂÂæ¦Â念ä¾Âå¢Âå ãÂÂæÂÂå°ÂÃ¥ÂÂ串æÂÂéÂÂ(search word buttons)ãÂÂå°工堷åÂÂãÂÂç¶使ç¨è å¨æÂÂå°ÂÃ¥ÂÂ串æÂÂéÂÂéµ堥æÂÂÃ¥ÂÂæÂÂï¼ÂÃ¥ÂÂæ Âå°å¢Âå æÂÂéÂÂå°工堷åÂÂçÂÂæÂÂå¾Âï¼Âä¸ÂÃ¥ÂÂæÂÂéÂÂä¸ÂÃ¥ÂÂÃ¥ÂÂãÂÂéÂÂå ÂæÂÂå¹¾åÂÂæÂÂ示ï¼Â
- ä½ éÂÂè¦Âå¢Âå toolbaritem 容å¨å° XUL æÂÂè¿°æªÂçÂÂæÂÂå¾Â(right before the toolbarspring element is a good choice)ãÂÂ確宠ID æ¯å¯ä¸ÂçÂÂãÂÂ
- å¨ menulist å Âç´ ä¸Â使ç¨ oninput äºÂ件ï¼ÂéÂÂÃ¥ÂÂäºÂ件æÂÂå¨使ç¨è 輸堥æÂÂÃ¥ÂÂæÂÂ觸ç¼ãÂÂ
- ä½ å¼å«ç JavaScript æÂÂÃ¥ÂÂä¸ÂÃ¥ÂÂçÂÂäºÂï¼Â(a)å¨æÂÂå°Âæ¬Âä½Âä¸ÂÃ¥ÂÂå¾ÂæÂÂå°ÂæÂÂÃ¥ÂÂ(b)移é¤æÂÂæÂÂå ÂÃ¥ÂÂ建ç«ÂçÂÂÃ¥ÂÂæ ÂæÂÂéÂÂ(c)以空ç½åÂÂéÂÂæÂÂå°ÂæÂÂÃ¥ÂÂ(d)çºæ¯ÂÃ¥ÂÂç¨ç«ÂçÂÂæÂÂÃ¥ÂÂ建ç«ÂæÂÂéÂÂãÂÂ
éÂÂå°±æ¯æÂÂèÂÂç Googlebar Lite çÂÂæ¹å¼ÂãÂÂ
éÂÂéÂÂèÂÂÃ¥ÂÂÃ¥ÂÂæÂÂé (Disabling and Enabling Buttons)
(éÂÂé¨份åªæ¯åÂÂ訴你æÂÂ麼ç¨ï¼Âå¨éÂÂÃ¥ÂÂ工堷åÂÂç¯Âä¾Â並ä¸ÂæÂÂåºç¾)ãÂÂ
ä½ å¶ç¾å¯è½æÂÂæ³è¦ÂéÂÂéÂÂæÂÂæ¯åÂÂÃ¥ÂÂ工堷åÂÂæÂÂéÂÂãÂÂèÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂï¼ÂGooglebar Lite çÂÂé«Â亮度æ¨Âè¨ÂæÂÂéÂÂä¸ÂæÂÂå¨æÂÂå°Âæ¬Âä½Âæ²ÂæÂÂæÂÂå°ÂÃ¥ÂÂ串æÂÂç¼çÂÂä½Âç¨ï¼Âåªè½å·è¡Âæ¼æÂÂæÂÂå°ÂÃ¥ÂÂ串æÂÂãÂÂ
ä¸Âé¢çÂÂä¾ÂÃ¥ÂÂæ¯å¦Âä½Â建ç«Âä¸ÂÃ¥ÂÂå¯以æ§å¶éÂÂéÂÂçÂÂä¸Âè¬工堷åÂÂæÂÂéÂÂãÂÂÃ¥ÂÂ次æÂÂéÂÂï¼ÂéÂÂä¸Âæ¯實ç¨çÂÂç¯Âä¾Âï¼Âåªæ¯èÂÂæÂÂéÂÂÃ¥ÂÂæÂÂæÂÂæ¯å¯以åÂÂå¾Âå°çÂÂãÂÂæÂ¥èÂÂæ¯é¸å®頠ç®çÂÂæÂÂè¿°æ¨Âè¨Âï¼Â
<menuitem label="Toggle Web Search Button" tooltiptext="Toggle Web Search Button" oncommand="TutTB_ToggleWebSearchButton()" />
TutTB_ToggleWebSearchButton()å½å¼ÂçÂÂç¨Âå¼Â碼ï¼Â
function TutTB_ToggleWebSearchButton() { var button = document.getElementById("TutTB-Web-Button"); var value = button.disabled; if(value == true) button.disabled = false; else button.disabled = true; }
é¦Âå Âï¼ÂæÂÂÃ¥ÂÂå°ÂæÂÂèÂÂ趣çÂÂ工堷åÂÂæÂÂéÂÂ使ç¨ ID å¼以å getElementById()å½å¼ÂãÂÂåªè¦ÂæÂÂæÂÂéÂÂï¼ÂæÂÂÃ¥ÂÂå°±è½使ç¨ disabled 屬æ§æ§å¶該æÂÂéÂÂç©件çÂÂç¾æÂÂçÂÂæ Â(Ã¥ÂÂÃ¥ÂÂæÂÂéÂÂéÂÂ)ãÂÂå¦ÂæÂÂå¼çº trueï¼Â就使ç¨ false Ã¥ÂÂæ¶ÂæÂÂéÂÂéÂÂéÂÂï¼ÂÃ¥ÂÂä¹Â亦ç¶ãÂÂFirefox æÂÂ幫æÂÂÃ¥ÂÂèÂÂçÂÂæÂÂéÂÂçÂÂéÂÂéÂÂï¼Âè®Â該æÂÂéÂÂä¸Âè½é»ÂæÂÂ(note that the button's image may not appeared grayed out: we must rely on skinning for that)ãÂÂ
Ã¥ÂÂæ Â顯示èÂÂé±èÂÂæÂÂé (Dynamically Showing and Hiding Buttons)
(éÂÂé¨份åªæ¯åÂÂ訴你æÂÂ麼ç¨ï¼Âå¨éÂÂÃ¥ÂÂ工堷åÂÂç¯Âä¾Â並ä¸ÂæÂÂåºç¾)ãÂÂ
Googlebar Lite å Â許使ç¨è é¸æÂÂæÂÂéÂÂå¨工堷åÂÂæÂÂçÂÂå°çÂÂ樣åÂÂãÂÂä¹Âå°±æ¯說ï¼Â工堷åÂÂå¿ é Âè½夠åÂÂæ ÂçÂÂ顯示æÂÂæ¯é±èÂÂå¯ç¨çÂÂæÂÂéÂÂãÂÂéÂÂæ¯æÂÂÃ¥ÂÂè¦Âå®ÂæÂÂç JavaScriptç¨Âå¼Â碼çÂÂ段ï¼Â
var TB_Web = document.getElementById("TutTB-Web-Button"); TB_Web.setAttribute("hidden", !TutTB_ShowWebButton);
é¦Âå ÂæÂÂÃ¥ÂÂè®Â工堷åÂÂæÂÂéÂÂ使ç¨ getElementById() å½å¼Âï¼Âç¶å¾ÂæÂÂÃ¥ÂÂå¼å« setAttribute()å½å¼Âä¾Âæ¹讠hidden 屬æ§çÂÂå¼ãÂÂä½ æÂÂç¼ç¾éÂÂå hidden å¼è·ÂæÂÂå¨ TutTB_ShowWebButton æÂÂè¨Âå®ÂçÂÂç¸åÂÂãÂÂéÂÂÃ¥ÂÂå¼æ¯åÂÂå¸ÂæÂÂæ¨Â籤(boolean flag)ï¼Âç¨ä¾Â辨å¥使ç¨è æ¯å¦æ³è¦ÂçÂÂå°ãÂÂ網é ÂæÂÂå°ÂãÂÂæÂÂéÂÂãÂÂå²åÂÂå¨éÂÂÃ¥ÂÂè®Âæ¸çÂÂå¼ï¼Âæ¯å¾Â使ç¨è è¨Âå®Âä¸Âè®ÂÃ¥ÂÂå°çÂÂãÂÂç¹¼çºÂé±è®Âï¼Âä¾ÂçÂÂçÂÂæÂÂÃ¥ÂÂå¦Âä½ÂÃ¥ÂÂå°éÂÂé»ÂãÂÂ
è®ÂÃ¥ÂÂèÂÂå²åÂÂ使ç¨è è¨Âå® (Reading and Storing User Preferences)
(éÂÂé¨份åªæ¯åÂÂ訴你æÂÂ麼ç¨ï¼Âå¨éÂÂÃ¥ÂÂ工堷åÂÂç¯Âä¾Â並ä¸ÂæÂÂåºç¾)ãÂÂ
çºäºÂè®ÂÃ¥ÂÂæÂÂå²åÂÂçÂÂè¨Âå®Âï¼ÂæÂÂÃ¥ÂÂéÂÂè¦ÂÃ¥ÂÂå Firefox è¨Âå®ÂæÂÂÃ¥ÂÂä»Âé¢(preferences service interface)ãÂÂæÂÂÃ¥ÂÂå¯以建ç«Âä¸ÂÃ¥ÂÂè®Âæ¸ä¾Âå®ÂæÂÂï¼Â
const TutTB_PrefService = Components.classes["@mozilla.org/preferences-service;1"]. getService(Components.interfaces.nsIPrefService);
ä¸Âæ¦åÂÂÃ¥ÂÂè¨Âå®Âä»Âé¢ï¼ÂæÂÂÃ¥ÂÂå°±å¯以ç²å¾Âå¥Â件è¨Âå®ÂçÂÂä¸Âé¨åÂÂ(i.e. the location in the preferences "registry" where our extension's settings are kept)ï¼Â
const TutTB_Branch = TutTB_PrefService.getBranch("tuttoolbar.");
Ã¥ÂÂè¨ÂéÂÂÃ¥ÂÂå¥Â件ç¯Âä¾ÂçÂÂè¨Âå®Âèµ·å§Âæ¼ tuttoolbar æÂÂÃ¥ÂÂï¼Âå æ¤ï¼ÂæÂÂÃ¥ÂÂè¨Âå®ÂÃ¥ÂÂ串 getBranch() (堧建ç Fireofx å½å¼Â) ãÂÂéÂÂÃ¥ÂÂå½å¼Âå¯以è®ÂæÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂå¥Â件çÂÂè¨Âå®Âï¼ÂæÂÂå¾Âå¯以ç²å¾ÂÃ¥ÂÂå¥é¸頠çÂÂå¼ãÂÂéÂÂæ¯æÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂæÂÂå°ãÂÂ顯示網é ÂæÂÂå°ÂæÂÂéÂÂãÂÂé¸頠å¯以åÂÂå¾ÂçÂÂå¼ï¼Â
if(TutTB_Branch.prefHasUserValue("show.button.web")) TutTB_ShowWebButton = TutTB_Branch.getBoolPref("show.button.web"); else { TutTB_Branch.setBoolPref("show.button.web", false); TutTB_ShowWebButton = false; }
é¦Âå Âï¼ÂæÂÂÃ¥ÂÂ測試éÂÂÃ¥ÂÂè¨Âå®Âæ¯å¦åÂÂå¨æ¼è¨Âå®Â樹çÂÂçµÂæ§Â裡ãÂÂå¦ÂæÂÂÃ¥ÂÂå¨ï¼Âå°±ç¨ getBoolPref()å½å¼Âè®ÂÃ¥ÂÂå®ÂçÂÂå¼(å²åÂÂæ¼ TutTB_ShowWebButton è®Âæ¸)ãÂÂå¦åÂÂï¼ÂæÂÂÃ¥ÂÂå°±è¨Âå®Âçºé Âè¨Âå¼(è¨Âå®ÂçÂÂ樹èÂÂå ¨åÂÂè®Âæ¸)ãÂÂ
å²åÂÂè¨Âå®Âæ¯å¾Âç°¡å®çÂÂå§ï¼Âä½ åªè¦ÂæÂÂä¾Âè¨Âå®ÂçÂÂÃ¥ÂÂ稱ï¼Âç¶å¾Â使ç¨éÂÂÃ¥ÂÂå¼ï¼Â
TutTB_Branch.setBoolPref("show.button.web", TutTB_ShowWebButton);
ãÂÂè®ÂÃ¥ÂÂèÂÂå²åÂÂè¨Âå®ÂãÂÂç¨ä¾Âå²åÂÂä½ çÂÂå¥Â件è¨Âå®Âæ¯å¾Âæ¹便çÂÂæ¹å¼ÂãÂÂ大é¨åÂÂçÂÂå¥Â件é½使ç¨éÂÂÃ¥ÂÂÃ¥ÂÂè½ï¼ÂæÂÂ許å¤Âå¯使ç¨çÂÂç¯Âä¾ÂçÂÂèÂÂä½ å»ç Â究ãÂÂå¦å¤Âï¼Âå¯以çÂÂç MozillaZine knowledge base çÂÂæÂÂç« ãÂÂ
第ä¸Âç« ï¼Âå°Â裠(Packaging the Toolbar)
å°ç®åÂÂçºæ¢ï¼ÂæÂÂÃ¥ÂÂç¨åÂÂæ ÂéÂÂç¼ä¾ÂèÂÂçÂÂå®Âè£ÂçÂÂé¨份ãÂÂä½Âæ¯使ç¨è 並ä¸ÂæÂÂæ³ç¨éÂÂ樣çÂÂæ¹å¼Âä¾Âå®Âè£Âå¥Â件ï¼ÂæÂÂ以æÂÂÃ¥ÂÂå¿ é Âå°Âè£ÂæªÂæ¡ÂæÂÂä¸ÂÃ¥ÂÂå®Âè£ÂæªÂãÂÂæÂÂÃ¥ÂÂå°Âè¦Â建ç«Âå ©åÂÂæªÂæ¡Âï¼ÂXPI å JARãÂÂå¥被éÂÂ樣çÂÂæªÂæ¡ÂÃ¥ÂÂ稱給é¨ÂäºÂï¼Âä»ÂÃ¥ÂÂåªä¸ÂéÂÂæ¯ç¨ zip å£Â縮æªÂæ¡Âæ ¼å¼Âå½è£ÂçÂÂãÂÂ
ç¾å¨æ¯å£Â縮工堷ç¼æ®åÂÂæÂÂçÂÂæÂÂÃ¥ÂÂäºÂï¼ÂæÂÂÃ¥ÂÂ人建è°使ç¨ WinZip (å½令åÂÂ模å¼Â)ï¼Âä½Âæ¯網路ä¸Âä¹ÂæÂÂä¸Âå°Âå Âè²»çÂÂ工堷ãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂ丠@æÂÂæÂÂ使ç¨ UNIX å£Â縮工堷;å¨ Windows ä¸Âï¼Âå¯以使ç¨ Cygwin ãÂÂ
æ´æ° Chrome 渠å® (Updating the Chrome Manifest)
第ä¸ÂæÂ¥å°Âè£Âå å«äºÂæ´æ° chrome 渠å®ãÂÂ注æÂÂï¼Âå¦ÂæÂÂè¦Âç¹¼çºÂÃ¥ÂÂæ ÂéÂÂç¼ï¼Âä½ è¦ÂæÂÂå ©å chrome 渠å®ï¼Âä¸ÂÃ¥ÂÂæ¯å°Âè£Âç¨çÂÂï¼Âå¦ä¸ÂÃ¥ÂÂæ¯åÂÂæ ÂéÂÂç¼ç¨çÂÂãÂÂèÂÂçÂÂéÂÂå ©åÂÂæªÂæ¡Âæ¯å¾Â麻砩çÂÂï¼ÂæÂÂ以æÂÂÃ¥ÂÂåªéÂÂå°ÂæÂÂÃ¥ÂÂä¸Âå·²åÂÂå¨ç chrome 渠å®åÂÂèÂÂçÂÂãÂÂ注æÂÂï¼Âå¨æÂÂÃ¥ÂÂä¿®æ¹渠å®å¾Âï¼Âå°±ä¸Âè½ç¨å¨åÂÂæ ÂéÂÂç¼äºÂï¼Âé¤éÂÂä½ ä¿®æ¹åÂÂä¾ÂãÂÂè®ÂæÂÂÃ¥ÂÂå Âä¾ÂÃ¥ÂÂæ¶ä¸Âä¸Â渠å®çÂÂ堧容ï¼Â
content tuttoolbar chrome/content/ overlay chrome://browser/content/browser.xul chrome://tuttoolbar/content/tuttoolbar.xul skin tuttoolbar classic/1.0 chrome/skin/
æÂÂå ©åÂÂå°æ¹éÂÂè¦Âä¿®æ¹ï¼Âå ÂçÂÂçÂÂ第ä¸Âè¡Âï¼Â
content tuttoolbar jar:chrome/tuttoolbar.jar!/content/
æÂÂÃ¥ÂÂå 堥äºÂå ©åÂÂé  ç®ãÂÂé¦Âå Âæ¯ jar: ï¼Âæ¾置å¨路å¾ÂçÂÂÃ¥ÂÂé¢ãÂÂéÂÂæÂÂå® Firefox å¿ é Âå¾ JAR æªÂæ¡Âä¸ÂÃ¥ÂÂåºå¥Â件çÂÂ堧容ãÂÂÃ¥ÂÂä¾Âï¼ÂæÂÂÃ¥ÂÂå 堥 tuttoolbar.jar!/ï¼Âä»Âæ¼ chrome/ å content/ ç®éÂÂä¸ÂéÂÂï¼ÂéÂÂæÂÂè¿°äºÂåªå JAR éÂÂè¦Â被åÂÂåºçÂÂãÂÂéÂÂå JAR çÂÂæªÂÃ¥ÂÂå¿ é Âè¦Âè·Âå¥Â件çÂÂæªÂÃ¥ÂÂç¸åÂÂï¼ÂÃ¥ÂÂ樣å°ï¼Âå¿ é Âè·ÂæªÂÃ¥ÂÂä¸Â樣使ç¨å°Â寫åÂÂé«ÂãÂÂ注æÂÂï¼Âé©ÂÃ¥ÂÂèÂÂä¸Âæ¯æÂÂÃ¥ÂÂé¯誤ï¼ÂéÂÂæ¯忠è¦ÂçÂÂãÂÂå¦ä¸ÂÃ¥ÂÂéÂÂè¦Âä¿®æ¹çÂÂè·¯å¾Âæ¯ skin ï¼Âä¾ÂçÂÂçÂÂä¿®æ¹å¾ÂçÂÂ堧容ï¼Â
content tuttoolbar jar:chrome/tuttoolbar.jar!/content/ overlay chrome://browser/content/browser.xul chrome://tuttoolbar/content/tuttoolbar.xul skin tuttoolbar classic/1.0 jar:chrome/tuttoolbar.jar!/skin/
建章JAR æªÂæ¡ (Creating the JAR File)
第ä¸ÂÃ¥ÂÂè¦Âå°Âè£ÂçÂÂæ¯ JAR æªÂæ¡ÂãÂÂé¦Âå ÂæÂÂÃ¥ÂÂèÂÂç chrome ç®éÂÂï¼Âå å«亠XULãÂÂJavaScriptãÂÂCSS 以åÂÂÃ¥ÂÂçÂÂãÂÂæªÂæ¡ÂçµÂæ§Âå¦Âä¸Âï¼Â
+- TutToolbar/ +- install.rdf +- chrome.manifest +- chrome/ +- tuttoolbar.jar +- content/ +- tuttoolbar.xul +- tuttoolbar.js +- skin/ +- combined.png +- gripper.png +- images.png +- main.png +- web.png +- tuttoolbar.css
å°Â裠JAR æÂÂæ¯ XPI æÂÂï¼ÂæÂÂ容æÂÂç¯çÂÂé¯誤就æ¯éºæ¼ÂäºÂç¸éÂÂçÂÂæªÂæ¡ÂãÂÂå¦ÂæÂÂæÂÂÃ¥ÂÂÃ¥ÂÂ裠JAR æªÂæ¡Âæ¯åÂÂç®éÂÂï¼Â裡é¢å å«äºÂï¼Â
+- content/ +- tuttoolbar.xul +- tuttoolbar.js +- skin/ +- combined.png +- gripper.png +- images.png +- main.png +- web.png +- tuttoolbar.css
éÂÂæ¯æÂÂç¨ UNIX 工堷çÂÂæ¹å¼Â(å½令åÂÂ模å¼Â)ï¼Â
zip -r tuttoolbar.jar content/* skin/*
(è¯è ï¼Âä¸Âè¬ Windows 使ç¨è å¯以ç´æ¥尠content å skin ç®éÂÂ以 zip æ ¼å¼Âå£Â縮æÂÂå¯æªÂå .jar çÂÂæªÂæ¡ÂãÂÂ)
建章XPI æªÂæ¡Â(Creating the XPI File)
å¨建ç«Â好 JAR æªÂæ¡Âä¹Âå¾Âï¼ÂæÂÂÃ¥ÂÂå¿ é Â建章XPI æªÂæ¡Âï¼ÂéÂÂæ¯çÂÂæ£你è¦Â給使ç¨è ç¨çÂÂå¥Â件å®Âè£ÂæªÂãÂÂæÂÂÃ¥ÂÂå¿ é Âå¨æÂÂä¸Â層ç®éÂÂä¸Â建ç«ÂéÂÂÃ¥ÂÂæªÂæ¡Âï¼ÂçµÂæ§Âå¦Âä¸Âï¼Â
+- TutToolbar/ +- tuttoolbar.xpi +- install.rdf +- chrome.manifest +- chrome/ +- tuttoolbar.jar +- content/ +- tuttoolbar.xul +- tuttoolbar.js +- skin/ +- combined.png +- gripper.png +- images.png +- main.png +- web.png +- tuttoolbar.css
è· JAR æªÂæ¡Âä¸Â樣ï¼ÂXPI å¿ é Âç¶ÂæÂÂç¸å°ÂçÂÂè·¯å¾ÂãÂÂå¨ XPI æªÂæ¡Âä¸Âï¼Âå å«äºÂä¸ÂÃ¥ÂÂæªÂæ¡Âï¼Âå®Âè£Â渠å®ãÂÂchrome 渠å®åÂÂÃ¥ÂÂÃ¥ÂÂ建ç«Âç JAR æªÂæ¡ÂãÂÂXPI 裡å å«äºÂï¼Â
+- install.rdf +- chrome.manifest +- chrome/ +- tuttoolbar.jar
使ç¨ UNIX 工堷çÂÂæ¹å¼Âï¼Â
zip tuttoolbar.xpi install.rdf chrome.manifest chrome/tuttoolbar.jar
å¥Â件å®Âè£Â測試 (Installing Your Toolbar Extension)
æÂÂ亠XPI æªÂæ¡Âä¹Âå¾Âï¼Âå°±å¯以éÂÂå§Âå®Âè£ÂçÂÂæÂ¥é©ÂãÂÂå¨ç¼表å¥Â件åÂÂï¼Âä½ ä¸Âå®Âè¦Âå Â確å®Âå¥Â件å¯以å®Âè£ÂãÂÂä¸Âå¯以使ç¨éÂÂç¼è¨Âå®ÂæªÂä¾Â測試å®Âè£Âï¼ÂÃ¥ÂÂ管å¨é£份è¨Âå®ÂæªÂå·²ç¶ÂæÂÂå¥Â件çÂÂå®Âè£ÂçÂÂæ‹ÂÂç¨你ä¸Âè¬使ç¨çÂÂï¼ÂæÂÂæ¯å¦ä¸ÂÃ¥ÂÂè¨Âå®ÂæªÂï¼Âä¾Âä¸Âé¢çÂÂæÂ¥é©Âä¾Â測試å®Âè£Âï¼Â
- æªÂæ¡ > éÂÂÃ¥ÂÂæªÂæ¡ (æÂÂæ¯ç¨ Ctrl+O) ãÂÂ
- å¨å°Â話æ¡Âä¸Âï¼Âæ¾å°你ç XPI æªÂæ¡Âï¼Âé»Âé¸ãÂÂéÂÂÃ¥ÂÂãÂÂãÂÂ
å¦ÂæÂÂæ£確å°å®ÂæÂÂå¾Âï¼Âä½ æÂÂçÂÂå°å®Âè£Âç«é¢ãÂÂé¸æÂÂä½ è¦Âå®Âè£Âå¾Âï¼ÂéÂÂæ°éÂÂå FirefoxãÂÂä¹Âå¾Âï¼Âä½ æÂÂ該æÂÂçÂÂå°工堷åÂÂäºÂï¼ÂæÂÂÃ¥ÂÂä½ å®ÂæÂÂ第ä¸ÂÃ¥ÂÂ工堷åÂÂå¥Â件ï¼Â
å éÂÂå°Âè£ÂéÂÂ稠(Speeding Up the Packaging Process)
æÂÂÃ¥ÂÂå°Âè£Âå¥Â件å¾Âè®Â人åÂÂç ©çÂÂï¼Âçºä½Âä¸Âç¨æÂÂè¿°æªÂä¾Âå®ÂæÂÂå¢ï¼Âå¦ÂæÂÂæÂÂå½令åÂÂ模å¼Âç ZIP 工堷ï¼Âä½ å¯以å°ÂéÂÂç¨ÂèªåÂÂÃ¥ÂÂãÂÂä¸Âé¢çÂÂç¯Âä¾Â使ç¨ DOS æ¹次æªÂå UNIX å£Â縮工堷ãÂÂ
é¦Âå Â建ç«Âå ©åÂÂæÂÂÃ¥ÂÂæªÂï¼ÂæÂÂä¸Â層ç®éÂÂç xpizip.txt ï¼Âå chrome ç®éÂÂä¸Âç jarzip.txt ã æªÂæ¡Âä¸Âå å«äºÂè¦Âå°Âè£ÂçÂÂé  ç®@[View xpizip.txt] [View jarzip.txt]
ä¸Âä¸ÂæÂ¥ï¼Âå¨æÂÂä¸Â層ç®éÂÂä¸Â建章DOS æ¹次æªÂ(.bat)ï¼Â堧容å¦Âä¸Âï¼Â
zip -r chrome/tuttoolbar.jar -@ < chrome/jarzip.txt zip -r tuttoolbar.xpi -@ < xpizip.txt
å¦Âä½ æÂÂè¦Âï¼ÂéÂÂÃ¥ÂÂæÂÂè¿°æªÂç¸ç¶簡å®ãÂÂç¶èÂÂï¼Âä½ çÂÂæÂÂè¿°æªÂå¯è½æ¯ÂéÂÂÃ¥ÂÂæ´è¤ÂéÂÂãÂÂæÂÂç¨ä¾Â建章Googlebar Lite çÂÂæÂÂè¿°æªÂå¯以åÂÂæ´å¤ÂäºÂãÂÂå®Âå¯以çºæÂÂèªåÂÂæ´æ°æÂÂæÂÂçÂÂçÂÂæ¬代èÂÂï¼ÂÃ¥ÂÂå®ÂæÂÂæªÂæ¡ÂçÂÂå°Âè£ÂãÂÂéÂÂÃ¥ÂÂæÂÂè¿°æªÂæ¯ç¨ Perl å®ÂæÂÂçÂÂï¼ÂèÂÂä¸Â使ç¨ 1.0.x çÂÂå®Âè£Âæ¹æ¡Â(èÂÂéÂÂ份æÂÂÃ¥ÂÂæÂÂäºÂå¾®çÂÂä¸ÂÃ¥ÂÂ)ãÂÂæÂÂæÂÂä¾ÂéÂÂÃ¥ÂÂæÂÂè¿°æªÂ給æÂÂèÂÂ趣çÂÂ人ï¼Â[View the Googlebar Lite Build Script]ãÂÂ
(Ant Support)
å¦ÂæÂÂ你寧é¡Â使ç¨ Ant ä¾Â建ç«Âä½ çÂÂå¥Â件ï¼Âå¯以åÂÂè sample XML file sent in by Brett Clippingdale. éÂÂÃ¥ÂÂæÂÂè¿°æªÂæÂÂ該è·Âå®Âè£Â渠å®æ¾置å¨åÂÂä¸ÂÃ¥ÂÂç®éÂÂï¼Âç¶å¾Â使ç¨ ant æÂÂ令ãÂÂ
第堫章ï¼Â測試 (Testing Our Extension)
å¨第åÂÂç« è¨Âè«ÂçÂÂÃ¥ÂÂæ ÂéÂÂç¼å°Âæ¼å¥Â件測試æÂÂå¾Â大çÂÂ幫å©ï¼Âä½Âæ¯éÂÂ裡éÂÂæÂÂä¸ÂäºÂç« éÂÂæ¯éÂÂç¼è éÂÂè¦ÂçÂ¥éÂÂçÂÂãÂÂJavaScript æ¯å¾Âé£é¤é¯ç ï¼Â幸好 Firefox çÂÂä¸ÂäºÂç¹è²å¯以è®ÂæÂÂÃ¥ÂÂé¿å Âé£äºÂæ±人çÂÂè¦示(æ¤æ alert() å½å¼Âå¼å«)ãÂÂ
ç¶ Firefox æÂÂæ¯ÂæÂÂ該æÂÂ麼辦 (What to Do if Firefox Breaks)
æÂÂæÂÂÃ¥ÂÂå¥Â件æÂÂç¢çÂÂç½é£æ§çÂÂé¯誤ï¼Âå°Âè´ Firefox æÂÂçµÂéÂÂÃ¥ÂÂãÂÂç¶éÂÂ種æ æ³Âç¼çÂÂæÂÂï¼Âä½ å¿ é Âå Â檢æ¥工ä½Â管çÂÂå¡æ¯å¦æÂÂç¶æÂÂç Firefox å¨å·è¡Âä¸Âï¼Â並æÂÂå®ÂéÂÂéÂÂãÂÂä¸Âæ¦確å®Âæ²Âæ Firefox å¨å·è¡Âï¼Âä½ éÂÂè¦Â移é¤æÂÂÃ¥ÂÂé¡ÂçÂÂå¥Â件ãÂÂ移é¤çÂÂæ¹æ³ÂÃ¥ÂÂ決æ¼你æ¯å¦æ£å¨使ç¨åÂÂæ ÂéÂÂç¼系統ãÂÂ
å¦ÂæÂÂä½ æ£å¨ç¨åÂÂæ ÂéÂÂç¼ï¼Âåªè¦ÂçÂÂ覽åÂÂæ ÂéÂÂç¼è¨Âå®ÂçÂÂå¥Â件ç®éÂÂ(第åÂÂç« )ï¼Âç¶å¾Âå°Âå¥Â件çÂÂæÂÂæ¨ÂæªÂæ¡Â(tuttoolbar@borngeek.com)移åÂÂå°æ«åÂÂçÂÂä½Âç½®ãÂÂç¨你çÂÂÃ¥ÂÂæ ÂéÂÂç¼è¨Âå®ÂæªÂéÂÂæ°éÂÂå Firefox (å Â許å®Â渠é¤æÂÂæ°移é¤çÂÂå¥Â件)ï¼ ç¶å¾ÂÃ¥ÂÂ次éÂÂéÂÂçÂÂ覽å¨ãÂÂå¨你解決éÂÂÃ¥ÂÂå°Âè´ Firefox ç¶æÂÂçÂÂÃ¥ÂÂé¡Âä¹Âå¾Âï¼Âå°Âä½ çÂÂæÂÂæ¨ÂæªÂæ¡Â移åÂÂå°å¥Â件ç®éÂÂï¼Âç¶å¾ÂéÂÂæ°éÂÂå Firefox ãÂÂ
å¦ÂæÂÂä½ æ²ÂæÂÂ使ç¨åÂÂæ ÂéÂÂç¼çÂÂ話ï¼Âå°±ç¨ Firefox çÂÂå®Â堨模å¼Âä¾Â移é¤æÂÂÃ¥ÂÂé¡ÂçÂÂå¥Â件ãÂÂä½ å¯以ç¨堩種æ¹å¼Âä¾Âï¼Â
- éÂÂ姠> æÂÂæÂÂç¨Âå¼ > Mozilla Firefox >> Mozilla Firefox (Safe Mode) ãÂÂ
- å¨ Firefox æ·å¾Âä¸Âå 堥 -safe-mode å½令åÂÂÃ¥ÂÂæ¸ãÂÂ
å¨å®Â堨模å¼Âä¸Âï¼ Firefox ä¸ÂæÂÂè¼Â堥任ä½Âå¥Â件æÂÂæ¯主é¡ÂãÂÂä¸Âæ¦å¨å®Â堨模å¼Âä¸Âï¼Âä½ å°±å¯以使ç¨å¥Â件管çÂÂå¡ä¾Â移é¤æÂÂÃ¥ÂÂé¡ÂçÂÂå¥Â件ãÂÂå¨移é¤å¥Â件ä¹Âå¾Âï¼Âè¨Âå¾Âå° -safe-mode å½令åÂÂÃ¥ÂÂæ¸移é¤(å¦ÂæÂÂä½ å¨æ·å¾Âä¸ÂæÂÂÃ¥ÂÂå 堥)ãÂÂ
æÂÂç¨çÂÂçÂÂ覽å¨è¨Âå® (Useful Browser Settings)
å¨ about:config ä»Âé¢ä¸Âï¼ÂæÂÂå ©åÂÂè¨Âå®Âå¯以è®Âä½ æ´容æÂÂéÂÂç¼ï¼ÂéÂÂæÂÂå½±é¿ JavaScript 主æ§å°çÂÂ輸åºè¨Âæ¯ãÂÂ
第ä¸ÂÃ¥ÂÂè¨Âå®Âæ¯ javascript.options.showInConsole ãÂÂç¶è¨Âå®Âçº true æÂÂï¼ÂæÂÂæÂÂå¥Â件ç¢çÂÂçÂÂé¯誤æÂÂæ¯è¦åÂÂé½æÂÂ被å³éÂÂå° JavaScript 主æ§å°ãÂÂé Âè¨Âå¼æ¯ false ï¼ æÂÂ以你忠é ÂéÂÂÃ¥ÂÂå®ÂãÂÂéÂÂÃ¥ÂÂè¨Âå®Âå°Âæ¼追蹤é¯誤æ¯å¾Âæ¹便çÂÂãÂÂ
ä¸Âä¸ÂÃ¥ÂÂæ¯ javascript.options.strict ï¼Âé Âè¨Âå¼ä¹Âæ¯ false ãÂÂç¶è¨Âå®Âçº true æÂÂï¼ÂFirefox ç JavaScript èªÂæ³ÂæÂÂè®ÂæÂÂå´謹模å¼Âï¼Âå°Âä½ çÂÂç¨Âå¼Â碼è®ÂæÂÂå´格çÂÂç´ÂæÂÂãÂÂéÂÂè®Âä½ çÂÂç¨Âå¼Â碼æ´å®ÂÃ¥ÂÂï¼Âä¹Âæ´容æÂÂ追蹤ç¨Âå¼Â碼é¯誤ãÂÂ
JavaScript 主æ§å°ç´Âé (Logging to the JavaScript Console)
測試 JavaScript ç¨Âå¼Â碼çÂÂ好æ¹æ³Âå°±æ¯å¨ JavaScript 主æ§å°ä¸Âå°åºé¤é¯å¼ï¼Âä½ å¯以å¨ ãÂÂ工堷 > JavaScript 主æ§å°ãÂÂéÂÂÃ¥ÂÂãÂÂæÂÂÃ¥ÂÂå¿ é Âå Âå¾Âå° nsIConsoleService ä»Âé¢çÂÂ實é«Â(instance)ï¼Âä¸Âé¢æ¯ç¨Âå¼Â碼çÂÂçÂÂ段ï¼Â
const TutTB_ConsoleService = Components. classes['@mozilla.org/consoleservice;1']. getService(Components.interfaces.nsIConsoleService);
注æÂÂå°æÂÂÃ¥ÂÂç¨亠TutTB_ çÂÂÃ¥ÂÂç½®è©Âï¼Âå°±å¦ÂæÂÂ使ç¨æ¼æÂÂæÂÂå½å¼ÂèÂÂè®Âæ¸ä¸Â樣ãÂÂä¸Âæ¦æÂÂÃ¥ÂÂÃ¥ÂÂå¾ÂéÂÂÃ¥ÂÂæ§å¶å°實é«Â(console instance)ï¼ÂæÂÂÃ¥ÂÂå°±å¯以使ç¨å®Âä¾Â編寫èª己çÂÂè¨Âæ¯ãÂÂä¸Âé¢çÂÂå½å¼ÂæÂÂ幫æÂÂÃ¥ÂÂå®ÂæÂÂéÂÂ件äºÂï¼Â
function TutTB_Log(aMessage) { TutTB_ConsoleService.logStringMessage('Tut_Toolbar: ' + aMessage); }
實éÂÂä¸Âï¼Âä½ æÂÂ該æ¹è®Âå¨你çÂÂå¥Â件ä¸ÂãÂÂMy_Extension:ãÂÂçÂÂè¨Âæ¯é¨份åÂÂ稱ãÂÂèÂÂç±使ç¨你çÂÂå¥Â件åÂÂ稱ä¾Âç¶åÂÂç½®è©Âï¼Âä½ å¯以æ´容æÂÂÃ¥ÂÂå¾ÂåªäºÂè¨Âæ¯æ¯è¦ÂçÂ¥éÂÂçÂÂãÂÂç¾å¨ï¼Âè®Âå½å¼Âä½Âç¨ä¹Âå¾Âï¼ÂæÂÂÃ¥ÂÂå¯以å¨ç¨Âå¼Â碼ä¸ÂçÂÂä»»ä¸Âä½Âç½®ä¾Âå¼å«å®Âï¼Â以顯示é¤é¯è¨Âæ¯ï¼Â
TutTB_Log("The value of the URL variable is: " + URL);
è¨Âå¾Âä¸Âå®Âè¦Âå¨ç¼表你çÂÂå¥Â件åÂÂ移é¤éÂÂÃ¥ÂÂå½å¼ÂãÂÂä¸Âç¶ï¼ÂéÂÂä¸Âåªæ¯éÂÂä½Â主æ§å°ç´ÂéÂÂçÂÂéÂÂ度ï¼ÂéÂÂå¢Âå äºÂ使ç¨è 主æ§å°è¦ÂçªÂçÂÂéÂÂå¿ è¦Âè¨Âæ¯ãÂÂè¦Âæ´é²ä¸ÂæÂ¥å°äºÂ解 JavaScript 主æ§å°ï¼Âå¯以åÂÂè MozillaZine knowledge base article ãÂÂ
æ¨ÂæºÂ主æ§å°ç´Âé (Logging to the Standard Console)
å¦ä¸ÂÃ¥ÂÂç´ÂéÂÂé¤é¯è³Âè¨ÂçÂÂæ¹æ³Âï¼Âå°±æ¯使ç¨æ¨ÂæºÂ主æ§å°çÂÂæÂÂå·§ãÂÂå¨使ç¨éÂÂÃ¥ÂÂæ¹æ³Âä¹ÂÃ¥ÂÂï¼ÂæÂÂä¸ÂäºÂçÂÂ覽å¨çÂÂä¿®æ¹忠é Âè¦Âå Âå®ÂæÂÂãÂÂé¦Âå Âï¼ÂæÂÂÃ¥ÂÂå¿ é Âå 堥æ°çÂÂçÂÂ覽å¨è¨Âå®Âï¼Âå¨網åÂÂÃ¥ÂÂ輸堥 about:config ï¼Â並æÂÂ丠Enter ãÂÂå³éÂ悯ÂæÂÂÃ¥ÂÂ表並é¸æ ãÂÂæ°墠> çÂÂÃ¥ÂÂå¼(Boolean)ãÂÂä¾Â建ç«Âä¸ÂÃ¥ÂÂæ°çÂÂå¸ÂæÂÂå¼è¨Âå®ÂãÂÂå°ÂéÂÂÃ¥ÂÂå¼è¨Âå®Âçº browser.dom.window.dump.enabled ï¼Â並åÂÂç¨å®Â(true)ãÂÂ
ä¸Âä¸ÂæÂ¥ï¼Âæ¯å¨ Firefox æ·å¾Âä¸Âå 堥 -console å½令åÂÂ串ãÂÂ使ç¨éÂÂÃ¥ÂÂÃ¥ÂÂæ¸ï¼ÂæÂÂä½ æ¯Â次å·衠Firefox æÂÂï¼Â顯示æ¨ÂæºÂ輸åº主æ§å°ãÂÂä¸Âä½ÂéÂÂé  å®ÂæÂÂå¾Âï¼ Firefox ä¹ÂéÂÂÃ¥ÂÂäºÂï¼Âä»»ä½ÂèÂÂç± dump() å½å¼Âç¢çÂÂçÂÂ輸åºï¼Âé½æÂÂ顯示å¨主æ§å°è¦ÂçªÂä¸ÂãÂÂdump()å½å¼Â就妠JavaScript æ¨ÂæºÂç alert() å½å¼Âä¸Â樣ï¼ÂèªÂæ³Âä¹Âç¸似ãÂÂ
æÂÂ件ç©件模åÂÂ檢æÂ¥å¨ (The DOM Inspector)
å°Âæ¼è¨Âè¨Â工堷åÂÂæÂÂ大çÂÂ幫å©就æ¯ DOM (Document Object Model) Inspector ï¼ÂéÂÂæ¯ä¸ÂÃ¥ÂÂå¯以è®Â你檢æÂÂ¥ XML æÂÂ件(å å« XUL, HTML)çµÂæ§ÂçÂÂ工堷ãÂÂéÂÂÃ¥ÂÂ工堷跠Firefox å è£Âå¨ä¸Âèµ·ï¼Âä½Âæ¯é Âè¨Âæ¯ä¸Âå®Âè£ÂçÂÂï¼Âä½ å¿ é Â使ç¨é²éÂÂå®Âè£Âä¾Âå®Âè£ÂéÂÂÃ¥ÂÂ工堷ãÂÂä¸Âæ¦å¯以使ç¨æÂÂï¼Âå°±æÂÂæÂÂè±Âå¯ÂçÂÂè³Âè¨Âå¯以ç²å¾Âï¼ÂæÂÂ以你è¦Âå Âå¸æÂÂå¦Âä½Â使ç¨å®ÂãÂÂ
å¨ä¸ÂäºÂ網é Âå¯以æ¾å°éÂÂ樣çÂÂä»Âç´¹ï¼Â
- The DOM Inspector (from Creating Applications with Mozilla)
- DOM Inspector FAQ
éÂÂæ¯幫å©æÂÂÃ¥ÂÂå°Âæ¾ XUL è¨Âè¨ÂÃ¥ÂÂé¡ÂçÂÂæÂÂ好工堷ï¼Âå®Âå¯以è®Â你檢è¦Âå¤Âå XUL å Âç´ çÂÂèªÂæ³ÂãÂÂæÂÂå¼·çÂÂ建è°你åÂȌ¸ç¿Âå¦Âä½Â使ç¨éÂÂÃ¥ÂÂ工堷ï¼ÂéÂÂé»Âç¸ç¶容æÂÂï¼ÂèÂÂä¸Âä½ æÂÂå°Âæ¼å¸æÂÂ使ç¨éÂÂ頠工堷æÂÂå°éÂÂ常å°é«ÂèÂÂãÂÂ