Firefox custom toolbar button

其實也只是套件應用而已，這邊需要用到的工具是：Custom Buttons
這是一個可以自己建立一個按鈕，按下後執行撰寫的 javascript 語法。


可以應用的地方如：

•  jQuery Injection
• 崩壞的天空之城 AntiFBLike

安裝完成後先在標題列按右鍵選擇新增按鈕：

  接著會跳出新增的視窗：

• 按鈕URL ：其實我不知道這做啥的
• 名稱：按鈕的名稱，滑鼠停在按鈕上要顯示的 popup 文字
• 圖片：要顯示的圖片，有幾個預設的圖案(基本上旁邊的兩個按鈕是裝飾，不用理他)

最主要的就是 Code 的部分了 ，不過目前只研究到第一個 Tab，
不過根據字面上的意義大概可以猜到功能，只是那個 Help 真的猜不出來

這邊以崩壞的天空之城為例子：

原始碼如下：

javascript:eval(unescape('var%20timestamp%20=%20new%20Date().getTime();var%20main%20=%20document.createElement(%22script%22);main.type%20=%20%22text/javascript%22;main.src=%20%22http://antifblike.com/js/key.js?%22+timestamp;main.charset=%20%22utf-8%22;document.body.appendChild(main);void(0);'));

雖然我們知道要把這段 Code 輸入在網址上面送出，可是
在這邊就沒那麼簡單了，因為 plugin 針對的不是目前的 Tab 而是整個
Firefox，如果要針對目前瀏覽的頁面，必須要先取得這個頁面的 document
才可以運作。

Firefox 中要取得目前顯示頁面的 document 的方法是：

var doc = window.content.document;
// 或者
var doc = window.top.getBrowser().contentDocument; 

 (參考 Jax 的工作紀錄 [Firefox 套見開發] )
基本上只要是對 document 操作的部分就取代成
這個 doc 變數就可以了

底下有兩個方法：(寫在 "代碼" 的 Tab 中)

(一)
這段 Code 可以拆解成

var timestamp = new Date().getTime();
var main = document.createElement("script");
main.type = "text/javascript";
main.src= "http://antifblike.com/js/key.js?"+timestamp;main.charset= "utf-8";
document.body.appendChild(main);
void(0);

可以直接把這段貼上，在最前面加上 var doc = window.content.document;
並且把所有 document 取代成 doc 就可以了。




(二)
一樣採用「在網址列輸入的觀念」，使用 document.location.href="javascript:xxxxx";
來執行這段 code。

底下將兩個 Code 完整呈現：

方法一：

var doc = window.content.document;
var timestamp = new Date().getTime();
var main = doc.createElement("script");
main.type = "text/javascript";
main.src= "http://antifblike.com/js/key.js?"+timestamp;main.charset= "utf-8";
doc.body.appendChild(main);
void(0);

方法二：

var doc = window.content.document;
doc.location.href="這邊放崩壞的天空之城寫的 code";

接著，如果要自訂一個好看的圖示，可以先找到喜歡的圖片
並且改成適當大小，因為按鈕的大小是完整的圖片大小，如果圖片太大
按鈕會變得很好笑。

接著使用 Firefox 以開啟檔案的方式這張圖片，並從網址列得到網址：

把網址複製貼到按鈕後面就可以了：

完成後就像這樣：

左邊的是 jQueryInjection，有時候要找某個網頁的元素
用 Firebug 下 document.getElementById  太累了，就利用
注入 Javascript 檔案的方式把 jQuery 加進去頁面中，
讓 Firebug 可以直接使用 jQuery 強大的 selector XD
(其實崩壞的天空之城也是用這種方式)

提供 jQueryInjection  的 Code：

var doc = window.content.document;
var _ccscr=doc.createElement('SCRIPT');
_ccscr.type='text/javascript';
_ccscr.src='http://code.jquery.com/jquery-latest.min.js';
doc.getElementsByTagName('head')[0].appendChild(_ccscr);
alert("jQuery Injection Done.");