WWWISHLIST是一個Chrome擴展名,能夠從網絡上的任何網站保存願望到Chrome瀏覽器的本地存儲。因此,您的數據完全私密。
該擴展程序目前已發布未列出,一旦我的朋友對其進行了1-2個月的測試,將完全公開。
有關更詳細的說明,請參見Chrome Storepage。
在下面,您會找到有關內部運作的簡要概述,計劃的內容以及您想成為貢獻者,一些文檔和許可證內容。
wwwishlists的心臟是彈出窗口(HTML,控制器和視圖)與刮板一起。
刮板將代碼從打開的彈出窗口返回圖像的地方將代碼注入到網站中。我嘗試抓住價格,但我很快了解到價格通常不只是文本字段(或多個)。圖像略微過濾,以刪除絕對不是產品圖像的圖像。我決定不將其註入頁面上的每個iframe,因為我遇到了Amazon.de網站上的問題。如果您知道為什麼存在這個問題,請讓我的一天告訴我。用戶輸入所有數據並保存後,將所選圖像繪製到帆布縮小為200x200像素並轉換為base64數據,因為Chrome Extension API僅允許一個大JSON文件用於本地存儲。如果此過程陷入CORS問題,則圖像URL將被保險。
我沒有計劃任何重大功能更新。我對任何擴展名無法執行的網站都非常感興趣。接下來我可能會寫的是功能的適當單位測試。我在讓所有工作工作的同時進行了測試,併後悔沒有自動化我在此期間寫的偽測試。我真的很想節省更高的價格/貨幣(現在只是一個字符串),但是要對我想使用它感到滿意,這意味著我可能希望能夠在願望清單上添加所有項目總數最多可達一個(用於項目願望清單)。為此,我需要調用貨幣轉換器API。我想念的另一個大功能是一種簡單的共享方法,不涉及我運行服務器。
如果您想從事新功能,請提出一個GitHub問題,我想與您合作,以最終批准您的拉力請求。如果您只想進行錯誤修復或更新DOCS拖拉請求,則非常歡迎。如果您想從該項目中構建/分叉:整個項目都在GPL 2下發布。我選擇了GNU,以使代碼無吸引力用於商業化,而不限制非商業共享和更改。如果您想提供幫助但不知道什麼,請在“計劃中的內容”中以上。
為了在計算機上設置項目,您需要NPM 10.5或更高版本。一旦您運行代碼
npm install
為了安裝依賴項, bulma和node-sass在package.json中指定。如果您想從SASS更改中生成新的Bulma文件,只需運行
npm css-build
或者,如果您希望這種情況在Sass Run工作時自動發生
npm start
連續構建Bulma。
為了將此Chrome擴展添加到您的Chrome Store中,請單擊右上角的拼圖圖標 - >管理擴展名 - >打開開發人員模式 - >加載打開包裝,然後在您的目錄中選擇全球願望清單文件夾。
因此,您安裝了開發人員版本。
Chrome存儲API是邪惡的,因為它僅允許您存儲到一個大單個.json文件中。該文件可通過開發工具訪問,但更重要的是在Storagetemplate中。您可以看到DB結構。
該存儲只能從模型和數據庫手工訪問。
我目前不相信人們會想做出貢獻,所以現在我不會解釋每個功能,而是更多的結構。如果您真的想這樣做,請告訴我,我很高興解釋您不了解的任何內容(並寫更多詳盡的文檔)。
我主要遵循代碼中的MVC模式。總結每個頁面都有一個控制器和一個視圖,而每個數據點都有一個模型。每個模型都負責屬於它的CRUD(創建讀取更新刪除)操作。每個視圖僅顯示數據或從用戶中檢索數據。每個控制器都在等待用戶操作,並呼籲視圖和模型從事各自的工作。版本控制是根據語義版本2.0.0進行的
目前,程序結構如下:
安裝或更新背景。 mjs調用dbmanager.mjs設置數據庫。除此之外,Background.mjs使上下文菜單條目發生在右鍵單擊的擴展圖標菜單中。
從安裝時從background.mjs調用以設置本地存儲JSON,以便DB工作。如果要更改數據庫結構的功能,則在此處也會發生更新的遷移。
在這裡,數據庫值的所有限制(最小值和最大值)實時。
該擴展名使用UUID V7,這意味著ID以UNIX時間戳開頭,並以隨機數繼續。這對於正確導入數據很重要(IE唯一數據實際上是唯一的)。
您猜到了此文件規則如何導入和導出數據。這就是該擴展名使用下載權限的原因。用戶僅從“設置”頁面訪問該功能。
這些文件是處理願望和願望列表對象的CRUD操作的類。
現在,settingscontroller.mjs現在只能真正用於調用導出導入功能(加上按鈕鏈接)。目前沒有設置,但也許您可以更改它!
用戶通過這兩個文件與myWishList.html進行交互。編輯,刪除,刪除,移動的願望,創建願望清單都在這裡發生。
如果單擊彈出窗口,控制器會調用scraper.mjs,並使用刮板檢索的數據填充視圖,然後填充彈出窗口,以便用戶可以決定要保存哪個圖片以及要添加哪些信息。用戶完成視圖獲取該數據的功能後,將相應圖片轉換為base64,然後回复控制器以保存。
刮板將代碼從打開的彈出窗口返回圖像的地方將代碼注入到網站中。我嘗試抓住價格,但我很快了解到價格通常不只是文本字段(或多個)。圖像略微過濾,以刪除絕對不是產品圖像的圖像。我決定不將其註入頁面上的每個iframe,因為我遇到了Amazon.de網站上的問題。如果您知道為什麼存在這個問題,請讓我的一天告訴我。
感謝Kjeld Schmidt在整個項目中一直是一名不斷的導師和耐心的老師。沒有您的指導,我什至不會開始編碼。
感謝Huddel為我提供了一個很棒的圖像未發現的鱷魚。
感謝我所有其他朋友,家人和互聯網陌生人,以幫助測試。
感謝Jason Thor Hall建立了一個很棒的程序員社區,並允許將其商店用作我的教程屏幕截圖材料。