gistfile1.txt

# Firefox OS Add-on in Ten Minutes

I: 先自介一下吧不然沒有人認識你

說得也是

大家好我是柏強
我在網路上的 ID 是 BobChao
B 大寫 C 大寫中間沒有空格
我在 MozTW 裡面做志工做蠻久了
中間有一陣子跳去 Mozilla 裡面做了一下下受薪有拿錢的員工
然後又跳出來
「我又跳進去啦 我又跳出來啦 打我啊笨蛋」
但就算離開 Mozilla 繼續做志工
還是蠻有在關心的
今天就來介紹 Firefox OS 的 Add-on
但很遺憾今天不會有 Live coding.
因為十分鐘而已萬一 Live Coding 又出什麼錯就很糟糕
所以我只會大概介紹這是怎樣的東西
大概可以怎麼寫
在此之前先問一下
在座的各位會寫 JavaScript 的請舉手？會一點點就好
幾乎絕大部分都會！
基本上你已經會寫基本的 Firefox OS Add-on 了
非常非常簡單
因為他就是 full of javascript
我大概介紹一下它到底是怎麼來的
Add-on 在 Browser 的世界裡面已經是為人所知的東西
所有的瀏覽器 -- 所有喔 -- 現在都有類似 Add-on 的東西可以用
就是附加元件或稱為擴充套件
你可能會拿來擋廣告
就像現在 iOS9 出來之後大家搶著去裝擋廣告
你也有可能會拿來抓不被允許抓的 YouTube 影片
也有可能拿來為了讓工作快速一點
所以做些雜七雜八的東西
這是 Add-on
像我自己就裝了一大堆 Add-on
下面還有很長的  List 
大家可以看到我旁邊捲軸只有這麼一點
但大都是 disable 掉了啦，因為是拿來測試的
現在我們把這個東西拉到 Firefox OS
那在 OS 上 到底一個 Add-on 可以拿來幹麻？
或者有什麼好處？
因為說實在 OS 既然是 OS，他就可以裝 App 嘛
那我要 Add-on 到底要幹麻？
那實際上，不知道各位有沒有遇過
我有很多小 feature，是我很需要，但別人不見得需要的
所以一般的公司可能不見得會出（那個軟體）
或者也沒有什麼程式設計師... 大概他們也懶得鳥你
自己會覺得說：其實我會一點點（程式）
那好像可以自幹？多的話我也做不到啦，但一點點好像可以。
以前在網頁的時代，會想說 ok 我就寫 user script，可以放進網頁裡面，就做到一些事情
那現在可以更全面了，可以一路到 App 裡面去   hijeck 人家的 App
當然這邊可能有安全性問題啦，這邊還有要顧的東西
你也可以 hijeck 進去 OS 裡面
所以在一個以 Web 技術作的 OS 裡面來寫 JavaScript
它的好處就是：

第一，真的在寫 JavaScript
Just like web
不需要去多背一些雜七雜八的東西，因為他就是 Web 沒有什麼兩樣
我寫 just like web，後來覺得其實應該把它刪掉
因為... 沒差啊，就是 Web，我根本不必再強調
Firefox OS 就是一個完完全全用 Web 技術做的作業系統
他連 unlock screen、下拉選單也都是 Web，你本來就可以用 Web 上一樣的 DOM 等東西來操作，沒什麼兩樣
我們可以有什麼想像呢？
例如可以來改一些在手機上顯示非常之爛的網頁
像這個，沒有改之前是這樣
改了以後是這樣
或者說你可以在 App 裡加裝一些本來沒有提供，或者本來不想在這時提供、但你想硬拉出來的功能。
像 這是 Firefox OS 上面的 Browser
他本來（工具列）這邊，在你一開始打開 Firefox OS 裡的 Firefox 時
會出現一個分頁鈕
實際上你按住 Home 鈕他也會跳出讓你可以選擇各分頁的（畫面）啦
不過有時候沒有顯示在上面就有點麻煩
那偏偏，如果是在別的地方按 Link，開出來的網頁上面是沒有這個分頁鈕的。
你就得自己按住 Home 鈕
然後去一個個關分頁
這樣有點麻煩
所以就有人想說那我乾脆就寫個 Add-on
直接讓每個分頁通通都會出現這個分頁鈕 這樣比較方便
剛剛有講到按住 Home 鈕，就會出現這樣的程式選擇畫面
讓你可以一個個選擇
那作為測試的人常會遇到一個問題是，開了非常多頁
要全部關掉時又得一個個打叉，這樣很麻煩
所以就有一個台灣... 我猜是 Mozilla Taiwan 的程式設計師
就寫了這個「空」
望文生義 就是空
按一下就把所有的分頁全部砍掉
這些就是 Add-on
這樣你就可以想像 Add-on 在 System-wide 裡，又通通都是 JavaScript ，到底可以幹麻
我大概歸納一下會有哪些點子
像可以拿來 hack webpage，例如剛剛說有的網頁寫很爛，在手機上 run  起來很差，那就把它弄好
因為你知道可能只要加一兩行，改一下 style 就好
或者你可以讓工作流程快一點
或者可以加強 build-in Apps
那我們就來實際看一下要怎麼寫
首先你會需要安裝一些東西
這投影片會釋出 但我還是大概講一下
如果你手上有 Firefox OS Device --
我猜在這邊... 連五個都沒有，舉手一下好不好？
五個都沒有吧我想？
1.. 2.. 超過了！大驚！
（刷機算嗎？）
刷機算啊
你有 Firefox OS run 在上面的 device 就算
那這樣你需要去載最新的 nightly
其實大概是二十幾天前的最新啦
但反正還不是 released 的 feature 就裝一下最新的
你也會需要 Firefox Nightly，因為 WebIDE 有改
你需要用 Firefox 裡面的 WebIDE 會比較好開發
他有改一個連結的方式，所以兩邊都要用 Nightly
接著要裝 Lightsaber... 就是光劍... 的一個特殊的 build
你可以上網搜尋 Firefox OS lightsaber bobchao
就可以看到我寫的中文的東西
照著裝就可以 超方便的
另外還有一個 simple add-on，是一個範例的 Add-on
我今天也會拿它來當範例
在你裝了 lightsaber 後， Firefox OS 會多這四個 App
我們主要用的是 Hackspace
首先 Firefox OS 的 Add-on 他是用跟 Chrome 一樣的結構 
因為現在，各位可能已經有耳聞
我們要追隨微軟的腳步，去跟 Chrome 當好朋友
所以我們也要可以採用 Chrome 的 Add-on
所以 Firefox OS 上的 Add-on 也一樣用 Chrome 的架構來寫
大概的結構是這樣子
最重要的重點大概是這兩個，我也只講這兩個
首先是描述檔 你要先描述程式到底要拿來幹嘛用
以及使用者裝了 萬一出了問題要找誰
以及裡面的結構到底是怎麼樣
那他大概長得像這樣
其中真正的重點... 有很多東西你光用看的就看得懂
比如說像 name
一個 add-on 的 name，應該不用解釋了對不對？
一個 add-on 的 description，應該不用解釋了對不對？
真正重要大概只有這一段
content_scripts 的部分
他簡單講就是在說：如果我開啟的網頁符合某個 pattern 的話，就把 javascript 跟 css 放進去
所以以這個 case 來講
他是說，如果我開 Gaia -- 也就是 Firefox OS 的前端 -- 裡面的某一頁的話，就把這兩個檔案放進去
他可以放好幾組
所以你可以針對不同情況來放不同檔
裡面接著另一個很重要的東西就是 content script
他有幾個問題要處理
在要介紹這兩個問題之前，我們先說明
content script ，就是 script，其實就是一段會在你指定的 App 或者網頁裡跑的 script，寫法跟一般 javascript 一樣
只是它是「放」進去的，所以有一個問題是到底什麼時候要放進去
因為... 嗯？啊我不小心把順序弄錯了。
這個故事告訴我們千萬不要在上台前五分鐘才做簡報
哈哈
那這第一個... 啊又放錯了

由於放進 Add-on 的時候，可能網頁早就已經打開，然後你才開啟 Add-on。所以如果你本來想要做「網頁 onload 讀取完畢以後就幹麻幹麻」，結果發現由於我是在網頁已經讀完以後才放進這個 script，所以那個 onload 就沒有用了
所以說這時我們通常都會這麼做：

如果假設已經有 documentElement
我就跑
或者如果還沒有 documentElement，那我就等到網頁讀完以後再跑
你可以用這種方式來寫
第二個 issue 是，由於目前結構我覺得設計得不是很好，所以目前會有一個重複植入的問題
我可能一下關掉、一下又打開這個 add-on
重複開開關關十次，網頁就會被插入十次你所寫的 script，彼此之間可能會有什麼衝突
所以解法就是
你在寫 script 的時候一定會做些什麼事嘛
比如說以這個 case 來講，他就是要插入一個叫 fxosBanner 的東西
所以前面就先檢查：如果假設網頁上已經有了個叫做fxosBanner 的東西，我就不跑；如果沒有的話我就跑。
簡單講就是這樣。
我自己有寫了兩個 add-on，一個是 fix55688，另一個是我們公司外出單要填寫覺得很麻煩，所以我就做了個自動填，只要一打開就自動幫我填完，然後按下確認就好。
這些東西可以在  Hackspace裡找到，就是裝完 lightsaber 後會有的 hackspace
我大概就講這樣 
如果等一下有什麼問題，歡迎各位跟我交流一下