Custom Button 執行網頁 js

如果不知道 Custom Button 是甚麼，先看上一篇  Firefox custom toolbar button


其實當初最想要做的，是建立一個按鈕，並且執行一些自訂的 javascript
其中當然少不了存取 DOM 的動作，所以就想利用強大的 jQuery Selector
來幫忙達成。

可是問題來了， Custom Button 是套件層級的，也就是所撰寫的 javascript
是是針對「Firefox」而不是針對「該頁面」，就算把 jQuery Inject 到頁面中
也還是沒辦法使用 jQuery 語法。

不過這些其實都可以解決，首先來看看遇到的幾個問題：

【無法使用 jQuery】

就如剛剛所述，因為 inject 是針對頁面，所以是無法在瀏覽器層級的
js 中使用，除非自己去開發一個套件，把 jQuery 包進去

所以這邊所要解決的就是：「把要執行的 Code 寫入頁面中」

所以流程是：

頁面中寫入 jQuery → 頁面中插入要執行的 Code → 執行該 Code

第一部分沒有問題，就如前篇所提到。

【在頁面中插入要執行的 Code】

這邊要注意的是，插入的 Code 必須以 function 的形式包起來，這樣在
下一個步驟要執行這個 Code 的時候，只要呼叫就可以了。

方法和注入 jQuery 相同，可以先寫好一份 .js ，用相同的方法建立一個
script 區塊，接著在下一步呼叫它，或者直接撰寫在程式裡面：

var myScript=document.createElement('SCRIPT');
myScript.type='text/javascript';
myScript.text="function test(){alert('test');}";
document.getElementsByTagName('head')[0].appendChild(myScript);

用這種方式可以建立一個 script 區塊，並將
function test()
{
    alert('test');
}

寫入這個 script 區塊，那麼接下來只要呼叫 test(); 就可以執行裡面的 code

【執行自行建立的 function】

這部分是最麻煩的了，先參考原始碼：

我們試著在 Firebug 的 Console 裡面執行 TRYIT();

結果可以正常的呼叫，因為 Console 是針對這個頁面沒有問題。


那麼把 code 寫到 Custom Button 裡面：

儲存後點選卻無法執行，理由就如剛才所說，這邊的 javascript 是針對
Firefox，不是針對頁面。

那既然上一篇提到，可以取得目前頁面，那能否取得目前的 window 呢？
(因為要呼叫撰寫的 function 要使用 window.funcToBeCall())
答案是可以的，將底下的 Code 寫到 Button 裡面再測試：

卻沒有反應，為什麼呢....

我們把這個 win alert 出來看看，結果得到：

可是我們直接在 Firebug Console 下指令得到的應該是

才對啊....




原因是 Firefox 為了安全性議題，把這些物件給包裹起來了
有注意到 XrayWrapper 吧，表示這個 Window Object是被 wrapper
給包起來了

Firefox 提供了不少 safety 方法來存取(如 Sandbox)，不過這邊就不打算
用到這麼麻煩的方式，直接用 unsafety 的來做吧！

要把包裹拆開，方法有兩個：

1.obj.warppedJSObject 這樣就可以取得被包覆的 object
2.XPCNativeWrapper.unwrap(obj) 也可以 unwrap 這個 object

至於要怎麼操作，就看自己喜好了，那麼只要把 code 改好就可以呼叫頁面中的 JS 了：

接著底下這個是將 Google 首頁(not iGoogle)的背景圖砍掉的方法，
當作範例參考看看吧：http://pastie.org/2818339