TabHide 之後的分頁群組插件調查

Firefox 59.0a1 之後新增了大家等待已久的 TabHide 功能,所以我就來重新調查一次有什麼插件是符合我需求的了。我的希望是儘量能夠逼近 Quicksaver 原版 Tab Groups 的功能。

Conex

Conex 好像是 addons.mozilla.org 上面蠻熱門的類 Tab groups 插件,但我實測之後發現:

  1. 他的每一個分頁群組會存在一個 contextualIdentities 容器 (container) 裡面,這不合我的用途,因為
    1. 我已經把我的不同用途的 cookie store 放到不同的 Firefox 的 profile 裡面了,我希望我的所有分頁群組共用一個 cookie store。
    2. 這行為和本來 Quicksaver 的版本不一樣。
    3. 而且 contextualIdentities 我之前檢閱完之後就覺得是個設計、模組化不良的 API
  2. 似乎是因為用了 containers 的關係,建立新容器、改名容器需要到 Firefox 的設定頁面裡面手動改。

Simple Tab Groups

  1. 切換不同群組的時候,不在顯示中的群組裡面的分頁會被卸載

後來我研究了一下,發現這個插件切換分頁群組的功能完全是使用 tabs.remove() 來達成的,也就是切換的時候會把分頁關掉,換回來的時候再打開。目前他們有個 issue 是要實作切換群組的時候分頁不會被卸載

Panorama View

這個插件目前最接近我的需求,不同分頁群組使用同一個 cookie store 和 Quicksaver 的版本相比,缺少幾個功能:

  1. 清單(專屬的清單頁面或是 context menu )顯示分頁群組和群組中的分頁:正在開發中
  2. 在不同群組之間顯示一樣的釘選分頁:有 PR

另外幾個是我覺得可以加的功能,我有空研究的話可以加加看:

  1. 指定不同分頁群組的顏色,這樣會達到類似 containers 的顯示效果,但是仍然共用 cookie store 。可能可以重複利用 VivaldiFox 這個插件的程式碼來作出不同顏色。

其他

另外,閒逛的時候還發現了幾個有趣的插件:

  • Social Fixer: 各種 Facebook 延伸功能,可以過濾貼文、標示貼文為已讀、移除特定區塊等等。但可惜不是開源的。
  • Auto Tab Discard : 簡單的定時 unload 分頁套件,我在 57 前就有用其他類似的插件。

更新 2/10

我發現 Simple Tab Groups 雖然缺少最重要的功能,但是程式庫、國際化和 UI 比 Panorama View 完整。

 

Firefox extension 偵測新 URL 的載入

我想要寫出能夠偵測新頁面載入,並依 URL 附加特定 content script 的功能,目前試過用 page-modtabs 實做。

這是 page-mod
var data = require("self").data;
var pageMod = require("page-mod");
pageMod.PageMod({
include: /https?:\/\/www\.example\.com\/.+\/?$/,
contentScriptFile: [data.url("jquery-1.8.3.min.js"), data.url("read_aha.js")],
onAttach: function (worker) {
worker.port.on("testing", function (m) {
console.log(m);
});
}
});

這是 tabs
var data = require("self").data;
var tabs = require("tabs");
var { MatchPattern } = require("match-pattern");
var home_pattern = new MatchPattern(/https?:\/\/www\.example\.com\/?$/);
tabs.on('ready', function(tab) {
if ( home_pattern.test(tab.url) ) {
console.log('home_pattern matches!');
var worker = tab.attach({
contentScriptFile: [data.url("jquery-1.8.3.min.js"), data.url("read_aha.js")],
onMessage: function(msg) {
console.log(msg);
}
});
worker.port.on("testing", function(msg) {
console.log(msg);
});
}
});

兩個實做的功能相近,但是卻有不同的彈性與問題。

page-mod 的話,每一次 Firefox 送出新的 HTTP Request 就會進行比對,要是目標與 include 指定的 pattern 相符,就會觸發,載入 content script 。page-mod 麻煩的點在於,有時候請求的 URL 會包含一長串的 HTTP GET 參數,導致要設計 regular expression 的時候增加了很多複雜度。相對的,有一些網站頁面載入之後會自動移除那些 GET 參數,若是只需要偵測網址列 URL 的改變,那就簡單多了。

tabs 的話,則是偵測每一個分頁的網址列 URL 是否符合 pattern ,若符合才載入 content script 。但是我遇到很麻煩的問題是,對於使用者在網址列按 Enter 或重新整理的情況下,會觸發 pattern 檢查,但是若是使用者在頁面當中點了超連結,進入一個新的頁面,縱使網址列的 URL 已經改變,依然不會觸發檢查,因此 content script 永遠不可能被啓動。看起來用 tabs 的另一個好處是,相較於 page-modtabs 在檢查 pattern 時,可以引入其他的檢查條件,就在 if ( home_pattern.test(tab.url) ) 加上其他條件即可,我覺得未來我蠻有可能會用到其他檢查條件。

Stack Overflow 上面有人提到這個問題,乍看之下好像是無解,但是後來我查到用更低階的 XPCOM API 應該是可以做出這個功能,但是我還沒試。

Firefox Add-on SDK content script include

做個小筆記。

像是這樣:

pageMod.PageMod({
include: /https?:\/\/www\.example\.com\/.+\/?$/,
contentScriptFile: [data.url("jquery-1.8.3.min.js"), data.url("read_aha.js")],
onAttach: function (worker) {
worker.port.on("testing", function (m) {
console.log(m);
});
}
});

什麼時候會 include 這個 content script 呢?實驗發現

  • 當分頁 URL 符合這個 regex 的時候
  • 以下這些不會:
    • <link href="xxx.css">
    • XMLHttpRequest
  • 但是 <iframe> 會!