2016年9月16日

摩茲動手做(五)自己的瀏覽器自己改─使用新版 Firefox Addon SDK 開發簡單的附加元件

本文原文出自《小克'S 部落格》,作者小克更新謀智台客〈自己的瀏覽器自己改 (Part I) -利用Firefox Addon SDK開發簡單的附加元件〉一文,以新的 jpm 工具相關資訊,取代原文中使用的舊版 cfx 工具而成。

也歡迎參閱由 WM 撰寫的〈摩茲動手做(二)用 Add-on SDK 寫簡單的 Firefox 套件〉 一文。如果有開發相關疑問,歡迎加入 MozTW dev/add-on 開發 Telegram 聊天頻道,一起討論套件開發的心得與問題。

前言

Firefox 最受歡迎的特色之一,就是量多而且質精的附加元件 (Add-on)。在 Firefox 附加元件網站中,您可以找到各式各樣的附加元件,滿足您上網的各種需求。在這篇文章中,我們將會介紹如何利用 Firefox Add-on SDK 撰寫簡單的附加元件,改變網頁的外觀與行為。

即使不是自己架設的網站,我們也能隨心所欲的改善它們的使用經驗!

準備工作

為了減輕開發者的負擔,Mozilla 推出 Add-on SDK,取代原來基於 XUL 技術的附加元件框架。相較於傳統的 XUL,Add-on SDK 提供更多簡單易用的 API,簡化開發流程,另外也提供了許多新的使用者介面元素,來配合新版的 Firefox 介面。

為了能夠使用最新的 API,建議您先更新 Firefox 到最新版

您還需要安裝最新版的 Add-on SDK,以下將以 Linux 平台作為教學範例 ( OS X 也適用 ),若是使用 Windows 請參考 Install the Add-on SDK

首先下載最新版的 Add-on SDK,您需要先安裝 npm (包含在 Node.js 中)。可以使用以下指令確認是否安裝過:

/usr/bin/env node -v

若顯示錯誤訊息如 /usr/bin/env: node: No such file or directory,則透過指令安裝:

Ubuntu

sudo apt-get install nodejs-legacy

OS X(請先安裝 Homebrew 套件管理工具

brew install node

接者透過 npm 安裝 jpm

npm install jpm --global

安裝後測試看看是否成功:

jpm

若安裝成功您應該會看到 jpm 的可用指令統整畫面。

特別的是,只要安裝 jpm 時有使用 --global flag,就不用像舊式的 cfx 工具,需要使用指令啟用 Add-on SDK 環境。

初始化一個新的專案

Web 工程師都知道要學習 HTML、JavaScrprt、CSS 最好的資源就是 Mozilla Developer Network。我們就試著用 Firefox Add-on 來把 MDN 調教改造成我們想要的樣子。

我們會先示範如何插入 JavaScript 來改變 MDN 的背景顏色,接著我們再示範如何在 MDN 的首頁上插入自己的按鈕,並且可以讓按鈕執行我們自己定義的 JavaScript。

套用 Add-on 之前的 MDN 網站

假設我們把這個新的專案叫作 mdn-mod ,第一步我們先讓 Add-on SDK 幫我們生成必要的檔案與目錄結構:

mkdir mdn-mod
cd mdn-mod
jpm init

當執行完 jpm init 之後,jpm 會詢問我們關於此附加元件的一些資訊,例如程式名稱、版本號、作者、授權條款等等,這些資訊會被用來建立 package.json 檔。現在我們只要連按 Enter 使用預設值。

完成後,我們的 mdn-mod 資料夾就會出現以下的檔案:

.
├── index.js     // Add-on 主要的 JavaScript 程式碼,程式的進入點
├── README.md    // 說明文件
├── package.json // 定義這個 Add-on 的 metadata
└── test         // 測試檔案,之後再介紹
    └── test-main.js

用 page-mod 插入 JavaScript 到指定網站

Add-on SDK 提供的一個實用 API 叫作 page-mod,其用途是當 Firefox 開啟指定的網站時,就插入一段自己的 JavaScript 到頁面上,因此可以改變特定網站的行為。

首先我們打開 index.js,加入以下幾行程式碼:

var pageMod = require("sdk/page-mod");
var data = require("sdk/self").data;

pageMod.PageMod({
    include: "*.mozilla.org",
    contentScriptFile: data.url("my-script.js")
});

第五行的 include: “*.mozilla.org” 就是我們希望套用的網址(* 代表萬用字元)。只要 Firefox 開啟的網址是以 mozilla.org 結尾,就會插入 contentScriptFile 指定的 JavaScript 檔案。在這裡我們使用了 data.url(“my-script.js”),意思是放在 data/ 資料夾下的 my-script.js 檔案。

改變 MDN 背景顏色

目前為止我們還沒定義 Content Script 要執行什麼。現在馬上新增一個檔案 data/my-script.js,插入以下一行簡單的程式碼:

document.body.style.background="red";

這行代碼會把 <body> 的背景設成紅色,等同於以下這段 CSS 的效果:

body {
    background-color: red;
}

使用乾淨的瀏覽器進行測試

完成上述步驟以後,我們的 Add-on 已經可以準備測試了。但是我們日常使用的 Firefox 可能有很多個人設定,或是安裝了很多其他 Add-on,會干擾我們的測試。此時我們只要執行

jpm run

Add-on SDK 就會幫我們開啟一個完全乾淨的 Firefox 使用者設定檔(Profile),讓我們可以在近乎出廠設定的 Firefox 底下測試我們的 Add-on。


乾淨的 Firefox Profile

當我們在新開的 Firefox 裡面開啟 http://developer.mozilla.org/,毫不意外的 MDN 的背景就變成紅色了!


MDN 的背景已經被改成紅色

添加新按鈕

除了改變現有的頁面以外,我們也可以自由的插入任何自己想要的元件。讓我們再次打開 data/my-script.js,加入以下程式碼:

var button = "<button onClick='alert(\"Hi!\")'>CLICK ME</button>";
document.body.innerHTML = button + document.body.innerHTML;

再這段程式碼裡面,我們定義了一個 html5 的按鈕,並且讓它被按下 (觸發 onClick 事件) 時,跳出一個訊息框說「Hi!」 (alert('Hi!')),緊接著就把這個按鈕插入到 body tag 的最前面。

當我們再次執行 cfx run 來瀏覽 MDN 時,就會看到畫面最上方出現了一個按鈕。

出現了 CLICK ME 按鈕

按下按鈕馬上跳出寫著「Hi!」的訊息框。

跳出了寫著「Hi!」的訊息框

打包出貨

如此一來我們的 Add-on 就大功告成了!如果要把這個 Add-on 包裝成可以分享的 xpi 格式,只要執行 jpm xpi 即可。

Add-on SDK 會生成一個副檔名為 .xpi 的安裝檔。不論是要直接傳給親朋好友,或是拿去 Firefox 附加元件網站上架都可以!

以上就是一個簡單的 Add-on 教學。

參考資訊

  1. Firefox 附加元件網站 https://add-ons.mozilla.org
  2. Firefox Add-on SDK (MDN) https://developer.mozilla.org/en-US/Add-ons/SDK
  3. Overlay Extension using XUL https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions
  4. Install the Add-on SDK https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/jpm#Installation
  5. package.json 格式說明 https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json
  6. page-mod https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-mod
  7. Packaging the add-on https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/GettingStarted(jpm)#Packagingtheadd-on

授權

本篇原始著作衍生自〈謀智台客〉自己的瀏覽器自己改 (Part I) -利用Firefox Addon SDK開發簡單的附加元件一文,作者為 Lyu Shing,以創用 CC 姓名標示—相同方式分享條款 3.0 或更新版本授權釋出。

原文 / 自己的瀏覽器自己改 (Part 2) -利用新的 jpm Firefox Addon SDK 開發簡單的附加元件 - 小克’s 部落格
授權 / 創用CC 姓名標示-相同方式分享 4.0 國際版
作者 / 小克

φ 小克 撰寫 - Toppy、Irvin 編輯

2016年5月27日

我的開源故事:Tanay Pant

一段 Mozilla 旅程:從貢獻者至 Firefox 校園大使執行委員會

我的開放原始碼旅程,起始自於大學一年級時,加入 Mozilla Firefox Sudent Abassadors 計畫。

我是在 Mozilla 的 #webmaker IRC 頻道潛水時遇見 Laura Hilliger 的。當時我們討論了我參與中的獨立出版資訊安全和黑客雜誌 CodeZer0,她鼓勵我為 Webmaker 的 #TeachTheWeb 活動設計一份網路安全教材。在此之後,我們合作設計了多份提倡網頁素養的教材,獲得很多很棒的回饋。

因為對 Webmaker 及 FSA 的貢獻,我受邀參加印度 Bangalore 舉辦的 MozCamp Beta 活動,遇到許多啟發激勵我撰寫程式、貢獻開源碼計畫的人。在此我學到現代網路技術,例如 Node.jsAngularJS,並且開始貢獻程式碼到 Webmaker 專案。


MozCamp Beta, Bangalore

同時,FSA 社群經理邀請我擔任地區大使,幫助帶領、指導社群裡的校園大使們。幫助新志願者,讓我燃起對社群經營的興趣,希望能以領導者的身分,擔起更大的責任。我因此加入 Mozilla Reps 計畫,開始指導來自世界各地的成員。這是一群為了維護網路開放而一起努力的人,能夠成為他們的一份子是很棒的經驗。

2015 年時,我申請加入 FSA 執行委員會。這群摩茲人是校園大使計畫的領導者,負責制定目標、架構及規劃活動,而我主掌溝通一職。

因為對 Mozilla 程式庫的貢獻經歷,我學到許多技術知識,進而撰寫 Learning Firefox OS application development 一書。當來自世界各地的開發者與我聯繫,告知我這本書非常棒、他們十分喜愛、並且從中學到了什麼時,是一種很美妙的感覺。我也被列入 Firefox 的貢獻者名單頁面中。

今年,我受邀請參加在新加坡舉辦的 Mozillia Ladershp Summit。這是很棒的學習機會,讓我能見到那些曾在 IRC 上聊過的良師益友們。

近期,我正在 FSA 執行委員會中,協助強化專案的基礎架構,並規劃這個計畫的未來藍圖。同時我也正在製作 Linux 系統上的虛擬助理「Melissa」,幫助那些正在學習 Python 的人,在 Raspberry Pi 或其它嵌入式裝置上製作可規模化的虛擬助理,讓物聯網 (IoT) 更具互動性、更聰明。我也正在撰寫另一本關於這個主題的書,應該很快就會完成了。

開源碼社群的工作讓我學到一件事:在尋求幫助時,您絲毫不需猶豫。人們都十分友善,而且找到對的導師,對於你的人生會有很大助益。貢獻開放原始碼計畫,對你來說只會有好處,所以不要再浪費時間考慮了。放手一博,投入你喜愛的開源專案社群吧。如果你對於學新技術特別有興趣,沒什麼比得過一天一 commit 的了,同時還能增加你的數位資歷呢!

開源碼社群非常友善,我也十分感激它幫助我獲得領導能力及技術知識。

我的開放源碼故事

我的開源碼故事系列,特別介紹來自各領域的人如何開始接觸開源碼,及他們的常用工具。如果你想分享你的故事,請聯絡:open@opensource.com

原文 / My Open Source Story: Tanay Pant | Opensource.com
作者 / Tanay Pant
授權 / 創用 CC 姓名標示-相同方式分享 4.0 國際

φ Iris 翻譯 - Kevin-WY、Irvin、toppy368 編輯

2016年5月1日

連小編都驚呆了!不死的 Thunderbird 用量持續成長中

在此我們很高興的向大家報告:Thunderbird 的使用量正在持續成長中!

Mozilla 使用 Active Daily Installations (ADI) ──伺服器每日接受到的附加元件黑名單更新需求數──來計算程式的使用率。這個數字不完全相等於活躍使用者數,因為不是每個使用者都會每天打開程式,有一些用戶則被防火牆阻擋住了。因而我們使用 ADI 乘以 3 來估計每個月的活躍使用者數量。

為了畫出 Thunderbird 用量的變化趨勢圖,我挑出了幾年來每個月 ADI 的峰值,結果像這樣:

德國已經占據我們第一名用量的國家很久了;在 2014 年的第四季,日本則超越美國成為第二名。這裡是用量排名前十名的國家(2015 年 2 月 24 日當日統計):

2015 年 2 月 24 日 Thunderbird 使用量的國家排名
排名 國家 ADI 2015-02-24
1. 德國 1,711,834
2. 日本 1,002,877
3. 美國 927,477
4. 法國 777,478
5. 義大利 514,771
6. 俄羅斯聯邦 494,645
7. 波蘭 480,496
8. 西班牙 282,008
9. 巴西 265,820
10. 英國 254,381
其他地區總和 2,543,493
共計 9,255,280

Thunderbird 團隊正在努力準備下一次的重大更新,也就是 Thunderbird 47,釋出時間訂於今(2016)年六月。接下來我們也會持續在 Thunderbird 部落格上發表更多相關資訊。

原文 / Thunderbird Usage Continues to Grow | The Mozilla Thunderbird Blog
作者 / Kent James
授權 / 創用 CC 姓名標示-相同方式分享-3.0

φ 十六 翻譯 - Kevin-WY、Irvin、toppy368 編輯

2016年4月29日

Firefox 版本釋出時程更新

四年前開始,Mozilla 將新版本的推出時間改為固定週期模式,也就是所謂的「Train Model」。我們每六週釋出一次新版 Firefox,讓使用者可以更快速的取得新功能以及更新,跟上快速變化的網路世界。我們仔細的研究這個更新時程,並從經驗中學習,發現許多可以改善的空間。現在是再度演進的時候了。

我們已將釋出新版本 Firefox 的時程,改為彈性的六至八週週期。在新週期下,每年的發佈次數與以往相同,但相較於固定的六個月更新週期,還多了一些額外的好處。

舉例來說,我們將能回應新興使用者和市場的需求,調整釋出日期,並確保每一個版本都會至少有六個星期工作時間。藉由彈性的調整週期,我們也能讓大家能好好享受假期,以增進全球 Mozilla 社群的聯繫和福祉。

下方列出 2016 年 Firefox 發佈版本的時程表,您也可以到 Wiki 中查看。

2016 Firefox 更新釋出時程表
2016-01-26 – Firefox 44
2016-03-08 – Firefox 45, ESR 45 (間隔六週)
2016-04-19 – Firefox 46 (間隔六週)
2016-06-07 – Firefox 47 (間隔七週)
2016-08-02 – Firefox 48 (間隔八週)
2016-09-13 – Firefox 49 (間隔六週)
2016-11-08 – Firefox 50 (間隔八週)
2016-12-13 – Firefox 50.0.1 (間隔五週,如需緊急修正時釋出)
2017-01-24 – Firefox 51 (在前次發佈的六週後)

註:Firefox ESR 的新版本將會繼續和 Firefox 在同日釋出。

原文 / Update on 2016 Firefox Release Schedule | Future Releases
授權 / 創用 CC: BY-SA 3.0

φ cysun 翻譯 - Kevin-WY、Irvin 編輯

2016年3月14日

AMO 審核社群的黃金十二年

Firefox,這個可自訂體驗的網路瀏覽器,問世於將近 12 年前。自其時始,你就可以使用附加元件-從外觀按鈕、分頁操作、到內容過濾-來完全個人化瀏覽體驗。任何具有程式能力的人,都可以製作 Firefox 附加元件,再發佈到 AMO 讓其他使用者使用。這種「用自己的方式瀏覽網路」的概念亟具影響力。時至今日,附加元件已被下載超過四十億次。

在 AMO 中提供的附加元件,上架前都需經過人工審核程序,確保其安全性以及隱私,而志工支撐了大部分審核工作。為了能夠完善地進行審查,審核員需要深入程式碼,這可是非常耗費心力的工作。附加元件正常運作時無人會關心,可是一旦發現安全問題時,大家的反應就完全不同了。因此福氣啦,這些審核員可謂真正的無名英雄!

我們的志工們從一開始就意識到附加元件審查的重要性,並建立 wiki 頁面組織相關工作。隨著附加元件開始流行,審核數量日益增加,因而還必須聘請數位全職人員,以維持審查順利。截至十多年後的今天,志工仍然需負擔近一半(每週約 150 件)的審查工作。我們排名第一的審查員,已經檢視將近九千個附加元件了!

身為與志工合作的社群經理,我常被問到,到底有什麼秘密,能長久維持這個亟具彈性的社群?真要說起來,根本沒有所謂的單一秘訣。如果你只想要以「酒肉關係」來維持社群,很快就會體會到報酬遞減定律的效用了。

我能從中獲得什麼?

想知道為什麼人們願意加入並持續幫忙審查工作,你需要了解人性。其實無私只是其中一部分原因。大部分人聽到時都很驚訝,很多加入審查的人都有同一個自私的理由:他們本身就是套件開發者,希望自己的元件可以更快通過審查。

有些開發者製作的附加元件有上千萬人使用,甚至達到上百萬呢。對他們來說,快速發佈更新是非常重要的事。審查員不能審查自己的附加元件,因此唯一能加速的方法,就是幫忙消化隊列(但審查員能申請急件審查)。在審查過程中,他們也可以觀摩其他開發者的設計,從中改善自己的附加元件。

內在動機

附加元件開發者都寫程式,程式碼本身就能引起他們的興趣,成為他們參與審查的內在動機。在《動機,單純的力量》(Drive: The Surprising Truth About What Motivates Us)一書中,Daniel Pink 提到,能自我驅動的工作一向具備創意(ceative)、挑戰性(challenging)、非例行公事(non-routine)等屬性,附加元件審查剛好一次到位:每一段程式碼都不一樣(創意)、安全性漏洞不好找(挑戰)、志願者能以自己的步調貢獻(不流於公事)。

不只只是蘿蔔與大棒

幾年前,我們為審查元件設立了計分板,讓參加者們能夠彼此競爭進度。也可以將得分於獎勵計劃中兌換獎品。

雖然這乍看只是建立條件引誘,將紅蘿蔔掛到驢子面前,但其實別有用意。當我們花費時間與資源,寄送手寫的信函與紀念品時,我們也讓審查者感受到他們的重要及我們的誠摯感謝。如果你在回家時收到 Fedex 包裹,發現裡面放了一件尺寸剛好的特別版 T 恤,你一定會了解有人注意到你的努力。

社群與責任

AMO 審查員們都了解,他們在維持 Firefox 彈性上扮演重要角色,直接影響附加元件使用者的體驗。Firefox 的上億使用者中,將近一半有使用附加元件,因而這可是件不小的壯舉!我常聽到審核者提及,他們會在這裡一直努力,是因為他們喜歡與其他很棒的人,一同負責維持 Firefox 的附加元件安全性。

神奇公式

線上社群相當複雜,由參與者的內在及外在、自私或利他的各種動機組織而成。一個健康、長遠的社群源自於這些因素不同比例的組合,某些來自於社群的自我驅動,其餘則需有心的社群經營者澆灌。在此沒有萬靈丹,你得找出自己的魔幻公式。要知道,那些最神秘的處方,往往與構成我們人性的成分相同。

生日快樂啦,各位 AMO 審核員們!

原文 / The AMO Reviewer Community Turns 10
作者 / Amy Tsay
授權 / 創用 CC 姓名標示-相同方式分享-3.0

φ Roger 翻譯 - 極地狐、Irvin 編輯