2011年9月17日 星期六

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.");


沒有留言:

張貼留言