山醫命相卜

放假這兩天本想繼續解決工作的問題，無奈目前沒有什麼好想法，只能回過頭再看一次文件及 Testbench！

好久沒買雜書了，最近都在看 Vim，應該要調劑一下身心了，雖然我還是很喜歡 Vim 沒錯XD

順便巡一下 Kobo 網頁，是否又再更改 HTML 結構！

Kobo 網頁又改版了

我想這個標題未來應該會一直出現XD

不得不說，人家讀墨網站就沒有那麼多問題，就你 Kobo 喜歡將 HTML  改來改去，真是腦袋有洞？

罵歸罵，還是要看一下如何修改，雖然我現在已經很少看工作以外的書了？

這次顯示購買記錄一頁有幾個項目的地方又從一行改從跨行了？

幸好，Javascript 的 regex 似乎可以支援跨行，即使我沒有加上 m 選項？

總之，現在可以就好了，我也懶得查了？

畢竟，現在國事如麻，百廢待興呀XD

Kobo Expense 又不能用了

Kobo 網頁的工程師真應該要打屁股，CSS 語法一直換來換去，照道理不應該改 CSS 名字而是直接改實作才合理。

只是多了一個 bold 屬性就導致我的 Chrome Extension 又失效了。

決定以後都用我自己的 local 版就好，這樣修改也比較方便。

心有餘而力不足

趁著洗澡前無聊巡一下田水，兩個開發過的 Chrome Extension 都宣告陣亡，其實應該是 3 個，但我不想面對了XD

Kobo Expense 好一點，程式居然可以提醒網頁改版？我都忘了我怎樣判斷的！

Readmoo Expense 就有點糟糕，不管怎樣都只抓到第 1 頁資料，應該是判斷總頁數的地方需因應 HTML 改版重抓？

網頁爬蟲相關的 code 就是這樣討厭，每次改版都要跟著因應！

先知道這件事就好，放張小老婆的圖好記得回來追蹤XD

有沒有這麼可愛（被老婆毆飛中…）

2023/11/25 更新

星期六還是輕鬆一下好了，花了快 2 個小時改好 regex 並上傳到 Chrome Store 等待審查，我終於又可以知道購書金額了。

Kobo Expense

Readmoo Expense

晚上 8 點半左右就收到審查通過的電子郵件，速度還蠻快的，看起來還不用 5 個小時。

雖然這次更改還算快，那是因為之前 Kobo Expense 上架時正逢 Manifest v3 更動，權限與新 API 呼叫已經跟著修改，故這次只要專注在 regex 本身即可，但難保下次還要很久之後才會再有需求回過頭來修改，到時可能連 Chrome Extension 架構都忘光了？

最近在補交接文件，連自己寫過的文件都忘了有這回事，人的記憶力確實很不可靠，趁此機會將這兩個 Chrome Extension 的架構留下記錄。

js/popup.js 是按下按鈕後會出現的統計報表主體用的 js，裡面也是負責觸發 js/gethtml.js 去詢問網頁的地方，另外，popup.js 裡的 chrome.runtime.onMessage.addListener 負責接收 gethtml.js 傳過來的訊息，gethtml.js 則是透過 chrome.runtime.sendMessage 來傳遞兩種訊息，一個是 action: getSource，另一個則是 action: progress。

getSource：

1. HTML 格式正確，parsing 到需要的資料，回傳的會是一個 array，裡面元素是一個 object，結構模擬 Readmoo 原本 API 的回傳資料結構，故 popup.js 裡面不管是 Readmoo Expense 或是 Kobo Expense 的 code 都長得一樣，因為當初 Kobo Expense 就是拿 Readmoo Expense 來改的，故花費心力很少。

obj = {

        purchase_date: "2018-12-28",

        price: 123

}; 

2. parsing HTML 失敗，回傳的就是錯誤訊息。

progress：

顯示目前處理了幾頁，例如 1 / 3、2 / 3、3 / 3。

另外，Regex 需要考量的無非是一頁有幾個項目，總共有幾頁要拜訪，還有購書日期，購書金額如何透過正規表示法取得，這個只要 review gethtml.js 就可得知，但因為兩家書商網站寫法不同，故只能各自處理。 

Readmoo：

Readmoo 購書金額明細頁面是 API，回傳格式是 JSON，只要結構不變，這裡不用特別管它，我們只要知道總共有幾頁即可。

Kobo：

Kobo 購書金額明細頁面是 HTML，且購書金額跟日期都不是寫在一行，故需要兩個 regex 分別抓取。另外 Kobo 可以決定一頁顯示幾個項目，需要知道這個資訊以及對應這個資訊下共有幾個頁面，故這裡也需要兩個 regex 來處理。最後則是要組成購書金額明細頁面的 URL，這個似乎每次改版變動都很大，直接在第 x 頁的連結上按複製網址來研究即可。

測試一下 Kobo Expense

最近 Chrome Store 似乎又更改政策了，不過似乎跟我的專案沒啥關係？

趁此機會再一次確認 Kobo 網頁是否又亂改版了XD

今年雖然到目前為止的購書金額跟去年差不多，但 7 月的購買金額中，其實有很多本工作相關原文書，故繁體中文書其實並沒有買很多，可見，我真的是被數學搞到人生都走味了？

還好我的 Code 看起來一切正常，這也是寫網頁爬蟲最辛苦的地方，網頁如果改版，就必須要跟著修改，這一點讀墨就做得比較好，購買記錄是以 API 形式回傳，比較不會跟 HTML or CSS 內容有關！

今天是 2023/08/26，我放上 github 的 code 有針對之前改版修改，但我在 Chrome Store 的版本並未更新，反正沒人用我也懶得更新，github 的東西起碼還有五六十顆星星，Chrome Store 的幾個專案明明也有超過 50 個人安裝，但卻連一顆星都沒有，真是沒勁XD

Chrome Extension - Manifest V3

Manifest 是 Chrome Extension 的一個架構檔案，裡面會描述所需要的權限以及 action 等相關。

好像是從去年開始，版本從 v2 升級到 v3，故從 2022/01 開始，無法在 Store 上架 v2 的套件，明年 2023/01 以後，則是不允許執行 v2 的套件。

有些 property 改名字了，有些則是 API 呼叫方式改變，以我的 KoboExpense 來說，大概有一成需要更動，整體來說並沒有到很麻煩。

另外 v3 版本的 API 很多都會回傳 promise，故在非同步的處理上應該會更方便。

2022/04/21 更新

前天上架的 KoboExpense 被退回來了，原因是用到不需要的權限。因為從 v3 開始，呼叫執行 script 的 API 參數有變，需要多傳一個 tab ID，故我以為需要 tabs 的權限，後來仔細再看了一遍文件，發現只有存取 tabs.Tab 裡的一些欄位才需要此權限（url, pendingUrl, title, or favIconUrl）。

可見目前審核是比較嚴格，故上架時還是要多注意是否加了不必要的權限。

2022/04/22 更新

下午收到審核通過的信件，看起來整個流程差不多要兩天，不過還是得看同時要上架的 Extension 有多少而訂。

Kobo Expense

既然現在都在 Kobo 買書居多，是該時候寫個 Kobo Expense Chrome Extension 了，晚上稍微拿 Readmoo Expense 改了一下，看起來只要改 gethtml.js 就好，原本產生報表的 popup.js 只要維持一樣的 object record 回傳回去，完全可以無痛接軌，雖然我當初並未定義 interface，但也可以稍微的從中感受到介面的威力。

簡單分析一下購書狀況，從去年 5 月後跳巢到 Kobo，故每月開始有持續買書，但因為 Kobo 不像讀墨有好用的不定時三本七五折券，故在 Kobo 不太容易一次買大量的書。雖說 Kobo 有 555  點送 111 點的活動，但需要使用者自行拆單，故我不認為有多好用。

這樣也好，越不方便的機制，使用者就越不容易亂花錢，這也算是個意外之喜吧？

2022/05/18 更新

Kobo 網頁居然又改版了，所以我又要更改 parsing regex，看了一下網頁原始碼，原本會換行的資料現在又不換行了？真搞不懂 Kobo 的工程師在幹嗎？不太可能為了這個一直去更新插件，看來只好用 local 版的 Kobo Expense。

工具只是工具，終究還是要回歸人的意志力

一直以為 Readmoo Expense 可以幫助我不要一直買書，後來想想我只是找個名目練習開發 Chrome Extension 吧！每次都是買完書後，才想到要去看看這個月又買了多少錢，買書當下壓根不會想起這件事。

《輕鬆駕馭意志力》書中提到：「所謂意志力，就是善用「我要去做」「我不去做」，以及「我真正想做」這三種力量，來幫助你達成目標（同時不惹上麻煩）。」。

買書對我來說並不是為了快樂，故沒有衝動消費的困擾（第 5 章）。

買書也不是為了犒賞自己最近工作的辛苦，故不是自我放縱（第 4 章）。

雖然我還沒把那本書看完，但看起來我是真的認同「開卷有益」這句話，所以才會一直買書。

現在欠缺的只是努力賺錢和時間管理的技巧吧？

Announcement: COVID-19 impact on CWS review and support

今天收到 CWS 寄來的 email，看來我的 Readmoo Expense 更新應該會拖更久吧？

Dear Developer,

We want to tell you about impending changes to the Chrome Web Store as a result of the COVID-19 situation.

Given adjusted work schedules due to these unprecedented times, there may be some temporary limitations and delays in support in some cases:

• Delay in publishing - New versions submitted to the Store will take longer to be reviewed and published.
• Delay in responses to appeals - If you appeal an item rejection or removal, or appeal an account suspension, expect the response to be delayed. However, we will respond to every appeal request and we will get back to you as soon as we can.
• Delay in developer account transfers - If you are transferring your extension to a different account, expect a significant increase in the time taken to complete the transfer.
• Delay in general support - If you are trying to reach out to our support team for issues related to your account(s) or extension(s), expect a delayed response from our team. We will get back to you as soon as we can.
• Chrome Web Store payments - We are disabling the ability to create new paid items or add payments to existing items. This includes extensions, themes, apps, and in-app purchases.

You can help by making sure that your extensions comply with the Developer program policies before you submit them. Refer to these resources for more information:

• Help center articles
• chromium-extensions Google Group
• StackOverflow
• Chrome support forum

We understand that these changes may cause inconvenience, and we apologize for any interruption of service. Thank you for your support during this challenging time and for your participation in the Chrome extension ecosystem.

- The Google Chrome Web Store team

Chrome Extension 隱私權更新

前一陣子，Chrome Extension 更新了隱私權政策，之後發佈的版本都需要在套件頁面填入相關資訊，其中包括已發佈的套件更新。

我的 Readmoo Expense 為了增加選單功能，在約 2 個星期前發佈了新版本 1.3，但直到現在都還沒有審核通過。

前幾天怕我的另一個套件之後也需要更新，故提前更新了隱私權頁面資訊。

沒想到這次不到 3 天就已經審核通過，差別在這次我是用英文寫。

早知道之前也用英文，真是千金難買早知道呀。

Chrome Extension 訊息傳遞

popup.script 和 content.script 之間可以透過訊息傳遞機制來交換資料。

兩者都可以透過 chrome.runtime.onMessage.addListener 接收訊息，比較特別的是，popup.script 需要透過 chrome.tabs.sendMessage 才能傳遞訊息給 content.script。

另外，popup.script 在傳遞訊息時，content.script  必須已經存在，大部分會有問題都是因為 content.script 是透過 chrome.tabs.executeScript 來執行 content.script，故應該使用以下的方法才能確保先後順序。

chrome.tabs.executeScript(null, {
    file: "js/gethtml.js"
}, function() {
    if (chrome.runtime.lastError) {
        let errorMsg = chrome.runtime.lastError.message;
        showMessage('error : \n' + errorMsg);
    } else {
        chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {    
            chrome.tabs.sendMessage(tabs[0].id, {action: 'getIgnored', ignored: ignored});
        });   
    }
});

不過根據實測似乎會有一些問題，我遇到的問題是我有發送 ajax request，但會收到莫名其妙的 ajax response，待驗證。

2020/03/12 更新

如果只是要簡單的交換資料，其實在 content.script 裡面直接使用 storage API 應該是比較簡單。之前試的時候不成功，但今天卻是正常的。

2020/03/17 更新

改成在 manifest.json 直接加入 content.script，並指定執行時間為 "document_end"，目前測試起來一切正常。

"content_scripts": [
    {
        "matches": ["https://member.readmoo.com/order"],
        "js": ["js/gethtml.js"],
        "run_at": "document_end"
    }
]

Chrome Extension 小技巧

安裝的套件，位在 C:\Users\XXX\AppData\Local\Google\Chrome\User Data\Default\Extensions 路徑下，安裝了幾個套件，裡面就會有幾個資料夾。

在擴充頁面開啟開發者模式，就可以看到 ID，那個 ID 也就是上面路徑裡面的資料夾名稱。

Chrome Extension + Export Excel

之前寫的 The books list 小工具，可以幫忙把網頁上顯示的購買書籍書名 parsing 出來，以方便後續使用，目前支援 Readmoo 舊版書櫃，Kobo 以及 Google Play Books。另外，Google Play Books 的書購買的不夠多，故不確定分頁機制如何，無法處理。

原本是直接將書名顯示在 Web 視窗，但似乎還是有點麻煩，雖然我現在也懶得另外整理清單了，前天趁著測試的空檔，使用 SheetJS 這個純 javascript 套件，便順利的產出了 Excel 2007 格式。

另外，調整格式等功能需要 Pro 版本才行，但一般使用已經夠用。

如果想自己改 Community 版本的話，只要 follow 他的 License，應該也可以自行加上 Style 等功能，這個可以找其他語言的 Open Source 專案，便知道如何比照辦理。

或許也可以使用 Golang 的任一專案，來個 Golang -> WebAssembly -> Javascript 乾坤大挪移也說不定？

讀墨購書金額破萬紀念日

到昨天為止，在讀墨購書金額正式累計破萬，我想這個數字應該會持續增加吧！

一直到 2018 下半年，我才知道有讀墨和樂天可以購買繁體中文書，以前我都只在 Amazon 購買英文技術書並在 Kindle Paperwhite 3上看書。

不得不說有了這些網站後，看電子書真的是更方便了，漸漸的我也比較少看英文的技術書了。

有在看書的人就知道，看書最大的敵人就是時間不夠用，每天下班後看書的時間實在有限，更別提還要撥出時間與家人相處。

讀墨也是讓我開始學習 Chrome Extension 的原因，之前想學一直抽不出空來，為了方便取得購買的書籍清單，也讓我多學會了一樣技能，雖然對工作沒什麼多大幫助就是了。

讀萬卷書，行萬里路，我想能限制我們人類的，大概也只剩時間了吧。

Chrome Extension Development in a Nutshell (中文翻譯版)

偶然看到一篇關於 Chrome Extension 不錯的文章

原文在此

01. Chrome Extension(底下簡稱 CE)在初始化時，會去參考 "manifest.json" 這個檔案，裡面描述了此 CE 的各個特性。

02. CE 包含了 3 個主要部份，"popup"、"background" 和 "content"，CE 中不需要 3 個全部用到。

03. 當使用者按下 CE 圖示時，出來的頁面便是 "popup"。

04. 只有當使用者按下 CE 圖示時，所有在 "popup" 裡的 JavaScript 才會被啟動。

05. "background" 就像是 1 個背景服務，它可以一直處於喚醒狀態，或是去監聽當某些事件發生時的監聽器。

06. 為了減少資源使用，Google 建議把 "background" 當監聽器來使用。

07. "background" 可以監聽很多種類的事件，例如改變瀏覽器目前頁面(tab)、視窗焦點改變、URL 更新、title 更新、還有 "Google storage" 更新等。

08. 使用 "background" 的 1 個例子是去執行更新設定，當下列情況發生時，"background" 便會被呼叫；i. 瀏覽器啟動時、ii. 第一次安裝 CE 時、iii. 更新 CE 時。因此，你可以把版本資訊儲存在 "local storage" 或 "Google storage"，然後在這些時間點與目前本版本資訊比較並做一些適當的處理。

09. "content" 是跑在使用者正在瀏覽頁面上的一份程式碼，你可以把 "content script" 想成是當使用者瀏覽頁面時，會被 CE 注入到該瀏覽頁面。

10. Chrome 處理 "content script" 的方式讓開發者變輕鬆。你可以想像當 "content script" 被注入到使用者瀏覽的頁面時， "content script" 是運行在獨立的環境中。因此，"content script" 不能去存取瀏覽頁面裡 script 的變數和函數等，這意味者我們不需要擔心衝突。舉例來說，我們不用檢查瀏覽頁面是否有載入 "jQuery" 或載入時用的版本，我們想要使用 "jQuery" 就在我們自己的 "content script" 裡去使用它，我們也不需擔心我們宣告的函數或全域變數是否與瀏覽頁面裡的 script 衝突。

11. 這 3 個部份的 code 都是直接跑在他們各自的環境中，因此你不能在 "content script " 中去存取 "background" 的函數及變數。

12. 然後還是有辦法在這 3 個部份間彼此溝通。

13. Chrome 提供了 API 去取得每個 extension 頁面的 "windows" object。使用 "windows" object 便可以存取 "popup" 和 "background" 的變數及函數。

14. Chrome 提供了 API 讓開發者可以在 "content" 和 "popup" 或 "content" 和 "background" 之間透過傳送訊息來溝通。此組 API 可以接受 callback function 在發送完訊息後被呼叫。接收方使用 "event listener" 來監聽訊息，接收方在收到訊息後，做完相關動作後，透過這個 callback function 來告知處理結束。

15. Chrome 注重 Extension 的安全性。

16. 只有當開發者模式使用未包裝的 Extension 時，Chrome 才會忽略安全性。有些因為 "permission" 宣告問題原本不能正常工作的都有可能會工作。

17. 對於包裝過的 Extension，需確保有宣告正確的 "permission"。舉例來說，當你要發送 Ajax 請求去外部 Server 時，你需要在 JSON 檔案宣告外部 Server 的 Domain。所以當你要發佈 Extension 時，請檢查每個 API 需要的權限。

18. Extension 不允許 Inline JavaScript，所有的 JavaScript Code 必須用 include 的方式使用。即使是 "onClick='btnClick()'" 這樣的 HTML屬性都不被允許。

19. 一般來說，當你上手後，開發 Chrome Extension 並不會很困難。

20. 當你開發完 1 個 Chrome Extension，如果你想發佈它，最簡單的方式便是在 Chrome web store。

21. 只要花美金 $5 並在 Chrome web store dashboard 註冊帳號，你便可以發佈自己的 Chrome Extension。

22. 美金 $5 只要支付一次即可。

Chrome Extension - 純前端匯出 excel 功能

由於 Chrome Extension 特性，如果想產生 excel 報表，勢必只能用純前端處理方式。

找了一下，js-xlsx 看起來有符合需求。

https://github.com/SheetJS/js-xlsx

Chrome Extension - 讀墨最近 5 年每月購書金額統計

前一陣子在測試電子書轉檔，在讀墨花了不少錢購買電子書。為了控制一下敗家的衝動，於是寫了這支程式。

https://chrome.google.com/webstore/detail/readmoo-expense/econggpejepfabcmcabbhfapahaeajef

使用方式
1. 訪問讀墨網站->會員中心->購買紀錄。
2. 點下工具圖示。
3. 顯示報表。

注意
此報表是使用現金制，例如購買犢幣或嗜讀 999 時，就視為該月的購書紀錄。

Chrome Extension - 概念篇

使用 Onyx Boox Nova Pro 畫畫

Chrome Extension - The books list

這是我的第一支 Chrome Extension - The books list。

上架時，需繳交一次性註冊費用 US$5，總共可以發佈 20 個項目。

使用方式
只要在購買書籍頁面中按下此插件圖示，程式便會去 parsing 網頁，找出書籍名稱，好方便後續應用。

目前支援網站
Readmoo
Kobo
Google Play 圖書

Chrome Extension - Badge

最近想要開發一個工作上的小程式，於是便想試試 Chrome Extension。

剛好看到文件提到 Badge 相關的 api，Badge 中文意思是徽章，也就是我們常看到圖示旁邊會有一些文字提醒。

只要呼叫 chrome.browserAction.setBadgeText，便可以在 icon 上加上 4 個字元的提示。

另外，Badge 只適用在 browser action，page action 因為不是 for all URL，故不支援 Badgge。