chrome - 說故事給你聽

extension sidebar UI

有開發過 Firefox addon的開發人員應該知道有一種 side bar UI會佔滿瀏覽器的左邊，通常對於一些 debugging tool來說這樣的介面很有幫助，可以一邊看頁面一邊看想要偵錯的資訊。不過這樣的 UI 在 Chrome 是不存在的。 Introduction of chrome extension development from Balduran Chang 最最最最接近的是 devtools panels，不過非程式開發人員一般來說是不會打開 devTools的。這份文件指出了在 2015的時候，chromium project (chrome的開源計畫) 曾有過討論要加入 sidebar UI，但後來被標為 won't fix，也就無望了。如果 Sidebar UI有支援的話，

chrome

PhantomJs and puppeteer

PhantomJs 一度是唯一的 headless browser，意思是他是可以用程式操控的瀏覽器，舉凡定時對網站做screenshot，或是檢查 html裡面某些內容，都可以透過程式操作 PhantomJs做到。在軟體開發的過程中，只要是 html+js+css的專案，需要做 Unit Test的時候，都可以使用這個「看不見」的瀏覽器去執行，讓自動化的流程更順利。不過我最近在寫的程式用到了 ES6 的語法，PhantomJS在讀取這部分程式的時候就噴 error了，正尋找解法的時候，發現 PhantomJs已經停止新功能的開發，主要開發者 Vitaly Slobodin 發了一篇聲明說明，因為 Headless Chrome推出，PhantomJs也算功成身退了。 Headless Chrome a.k.a puppeteer

extension

different way to install chrome extension

安裝 chrome extension 的幾種方法一般的使用者都會是直接連到 Chrome Web Store，搜尋特定 extension 然後安裝。還有其他種方式適用其他情境。 inline JS 可以直接使用 js trigger chrome 安裝 extension，適合用在 promotion page上，user 不用轉換頁面，同時埋入 analytics code可以分析轉換率。 chrome.webstore.install(url, successCallback, failureCallback) 對於 JS developer 應該不陌生，不贅述。 preferences JSON file Mac OS