# 自製 Chrome Extensions
## 更換新分頁背景
### 權限
[覆寫新分頁](https://developer.chrome.com/docs/extensions/develop/ui/override-chrome-pages?hl=zh-tw)
關於新分頁，需要在 `menifest.json` 上修改新分頁的開啟 html。

[chrome.storage](https://developer.chrome.com/docs/extensions/reference/api/storage?hl=zh-tw#storage_areas)
關於使用者上傳，需要先給予 storage 的權限。

### 更換圖片
#### 上傳新圖片
在上傳圖片後，需要將檔案儲存至 `chrome.storage`。
但是 `chrome.storage` 無法儲存檔案，故先將其轉換為 Base64 格式。
> [!Note]
> 有試過直接儲存 Blob、檔案等，但在 `chrome.storage` 取出來時都不是預想中的物件，後來使用 Base64 才成功。

#### 套用更新
從 `chrome.storage` 取出剛剛儲存的 Base64 字串，再轉回檔案格式。
使用 Blob 將檔案轉為 Blob 格式，以便於後續建立 ObjectURL。
得到 URL 後，更新 `<video>` 底下的 `<source>`，並重新載入 `<video>`。

[File to Base64](https://stackoverflow.com/questions/36280818/how-to-convert-file-to-base64-in-javascript)
[Base64 to File，使用回答的 `fetch` 方法](https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript)
[ObjectURL 不能吃 File 輸入](https://stackoverflow.com/questions/27120757/failed-to-execute-createobjecturl-on-url)
[重新載入 `<video>` 以適用新的 `src`](https://stackoverflow.com/questions/60723611/how-can-i-make-the-video-reload-after-changing-the-src)

### 後續維護
- 修改上傳檔案類別限制
[blob 格式需要額外操作才能視為 URL](https://blog.csdn.net/sinat_32034679/article/details/120452081)
- 應限制上傳容量