2017年1月2日

Firefox 使用 Adblock Plus 時記憶體更省了

譯註:本文原文發表於 2015 年七月。2015 年 9 月發佈的 Firefox 41 已針對此問題進行更新,縮減了 Adblock 等類似情境下的記憶體用量,本文為問題與解決過程的概述,於 2016 年 5 月完成翻譯。

去(2014)年,我寫了一篇文章,討論 ABP 對 Firefox 的記憶體使用情況的影響,以下是該篇文章的重點。

第一點, 只要啟用 ABP,就會持續佔用大約 60~70 MiB 的資源。[…] 這看起來大概是因為有額外的 JavaScript 記憶體用量,也有部分原因歸咎於額外記憶體用於版面配置。

第二點,每一個 iframe 都會占用約 4 MiB 的資源。這是因為 ABP 會把一個龐大的樣式置入每一個 iframe 中。許多網頁上都會有多個 iframe,因此被占用的記憶體也會快速的增加。 舉例來說,如果我開啟了 TechCrunch,然後捲到每一篇文章中的社群網站按紐 […],在沒有開啟 ABP 的情況下,Firefox 使用了大約 194 MiB 記憶體,開啟了 ABP 後,占用的量變為 417 MiB,先前的兩倍以上。

還有一個更極端的案例是 這個網頁,它包含超過 400 個 iframes。在沒有 ABP 的情況下,Firefox 會使用大約 370 MiB 的資源,開啟了 ABP 後,占用的量就上升到了 1,960 MiB。(譯註:原始連結已消失,[1] [2] 是近似的重製頁面)

(其實這一段敘述不太精確;實際上的資源使用量是以「文件」(Document)數計算,包含了分頁中的最上層文件和 iframe 裡的文件。)

上個禮拜,Mozilla 的開發人員 Cameron McCormack 完成了一些補丁(Patch)修正  bug 77999,這個 bug 已經存在超過 14 年。這個補丁讓 CSS 的關聯資料能被共享(具體來說,這些補丁增加了一個資料結構來共享「使用者代理樣式表」的結果)就此完全解決了第二個問題,兩個問題之中比較重要的部分。

舉例來說,在上面提到的「極端例子」(概稱 Vim Color Scheme Test)裡,每個文件的記憶體用量都減少了 3.62 MiB。該網頁中有 429 個文件,總共減少了大約 1,500 MiB,讓該網頁的記憶體使用量下降到 450 MiB 左右,和沒有開啟 ABP 時相比已經沒有差那麼多了。(這些數據都是在 64 位元的架構下進行測試的。)

我也在多個網站上測試,並且確認當啟用 ABP 時,每個文件均能節省約 3.6 MiB 的記憶體。 不同網頁上的文件數目相差甚大,因此實際效果取決於頁面狀態(我想再針對 TechCrunch 做測試,但是它的首頁已經整個換新了,且不再觸發這麼大量的記憶體。)舉例來說,我在其中一個測試時分別打開了 紐約時報CNNBBC 的首頁和其中的四篇文章,總共有 15 個分頁。在包含了 Cameron 補丁的 Firefox 上啟用 ABP 時,可以少用約 90 MiB 的記憶體,減少了 10%以上。

就算沒有使用 ABP,這個補丁仍然有其他好處。比如說,在 Vim Color Scheme Test 裡,每個文件的實體記憶體用量都下降約 0.09 MiB,總共減少了 40 MiB 左右。

如果您想要自行測試的使用量的變化,您會需要 Nightly 版本的 Firefox 和 ABP 的開發中版本(因為最近出現了一個和 JavaScript 分析有關的錯誤,造成舊的 ABP 無法在 Nightly 上運作)。 在 Firefox 的 about:memory 頁面中,您可以發現「style-sets」的大小變小了。您也會在「layout/rule-processor-cache」下方看到一個新項目,這是新的共享資料的量測數據,它通常只有幾 MiB 而已。

這項改進已經準備放進 Firefox 41 ,並預定於 2015 年 9 月 22 日發佈。而其他釋出頻道的使用者,Firefox 41 Beta 預定將在 8 月 11 日釋出,而 Firefox 41 開發者版本則會於一、兩天內發佈。

原文 / Firefox 41 will use less memory when running AdBlock Plus | Nicholas Nethercote 作者 / Nicholas Nethercote

φ 蒼天炎劍 翻譯 - Kevin-WY、Irvin 編輯

2016年12月15日

使用 Firefox,分享更容易了!

在網路上找到某些東西後,想立即分享嗎?Firefox 的分享功能,可讓您在瀏覽器中直接分享頁面,而不必離開您訪問的網站。相當方便!

打開我們的社交服務頁面,點擊「立刻啟用」連接至 Facebook、Twitter、Yahoo! Mail、Tumblr、LinkedIn 等您偏好的網站。當您下次找到值得分享的東西時,只要點擊分享圖示(紙飛機),就能立刻送出。

> 立即設定輕鬆分享

原文 / Sharing made easy with Firefox | The Den
授權 / 創用 CC: BY-SA 3.0 或其後版本

φ iris 翻譯 - Kevin-WY 編輯

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 編輯