javascript

firefox add-on

add-on是用來開發firefox的附加元件，其中開發方式有兩種，一種是採用browser線上開發，另一種則是在本機端開發，利用command line去對執行。在開發之前，需要先下載add-on sdk。(1.0版本只能運行在firefox4以上)

sdk下載完後執行：

source bin/activate (linux環境，若是window直接執行activate即可，接著就可以執行cfx。)

接著建立一個目錄，到目錄底下執行：

cfx init   (將會建立及配置基本的目錄檔案)

如果要執行可以使用：

cfx run

匯出檔案：

cfx xpi

以下是一個簡單範例：

main.js

const widgets = require("widget");
const pageMod = require('page-mod');
const data = require('self').data;
const tabs = require("tabs");
var workers = [];
var selector = pageMod.PageMod({
  include: ['*'],
  contentScriptWhen: 'ready',
  contentScriptFile: [data.url('page.js')],
  onAttach: function(worker) {
    worker.on("message",function(data){
        console.log(data);
    }); 
    workers.push(worker);
  }   
});   

var widget = widgets.Widget({
  id: "mozilla-link",
  label: "Mozilla website",
  contentURL: "http://www.mozilla.org/favicon.ico",
  onClick: function() {
    for(var i in workers){
        workers[i].postMessage("test");
    }   
  } 
}); 

console.log("The add-on is running."); 

data目錄的page.js

self.on("message",function(data){

    console.log(data);
    self.postMessage(document.title);
}); 

附加元件，會被顯示在browser的右下角，點選後即可觸發click事件，在終端機上即可看到console.log。

add-on api

javascript

chrome extension

chrome extension是chrome的擴充元件，只需要有配置manifest.json，搭配一個background_page或popup，就可以完成一個簡單的擴充元件。

以下是一個與頁面溝通example：

manifest.json的配置：

{
  "name": "test",
  "version": "1.0",
  "background_page": "background.html",
  "permissions": [
    "tabs", "http://*/*"
  ]
}
其中background_page是主要運行在extension的程式，permissions則是可以使用的權限。
[manifest的參數配置](http://code.google.com/chrome/extensions/contextMenus.html)
 
**background.html：** 
<html>
<head>
<script>

  function click() {

    chrome.tabs.executeScript(null,{file:"page.js"});
  }
  //監聽page request的event
  chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
   console.log(arguments);
  });
   //配置icon
  chrome.browserAction.setIcon({path:"icon" + current + ".png"});
  chrome.browserAction.onClicked.addListener(click);
</script>
</head>
</html>

page.js：

    chrome.extension.sendRequest({page:document.title});

接著只要將此目錄載入到擴充元件，即可使用。(擴充元件console.log，要在點選擴充元件裡"檢查運作中的檢視"的頁面，才看的到喔~!)

chrome api 和配置

example

javascript

讀取file的內容(FileReader)

讀取file的內容，可以使用FileReader，這功能是html5才加入的，依照不同瀏覽器，支援file相關物件的method，實作完整度不同。

example：
<script type="text/javascript">
  function load() {
    var finput = document.getElementById("file");
    //取得file
    var f = finput.files[0];

    if( f ){
      var r = new FileReader();
      //讀取完畢執行function
      r.onload = function(e) { console.log(e.target.result); };
        //使用utf8邊碼讀取
        //r.readAsText(f);
        //用base64格式讀取
        //r.readAsDataURL(f);
        //使用二進位方式讀取file
        r.readAsBinaryString(f);

       }
    }
</script>

<input type="file" id="file" />
<a href="#" onclick="load()">Load</a>

FileReader還有一些event可以使用，例如onloadstart、onprogress、onerror….等，可以用來監聽讀取的進度，另外使用drop、dragover也可以利用div，製作一個框框，搭配FileReader，讓使用者方便拖拉檔案，直接載入檔案內容。

如果要支援IE8、IE9可直接使用現成的flash FileReader。

w3c的定義格式