為什麼 API 權限全開，還是會封鎖連線？ 開發前後端分離架構，或是串接不同環境 API 時，常發生一種情況：後端已設定 Access-Control-Allow-Origin: * （允許所有網域存取），且 Postman 測試正常，但從瀏覽器環境透過 JavaScript 發送請求給內網或私有環境的 API 伺服器時，Chrome 卻強制阻擋連線。 這是 Chrome 實施「 區域網路存取權 」（Local Network Access, LNA）規範所致，目的是為了保護使用者免於跨網站要求偽造 (CSRF) 攻擊。 使用者在初次進入網站時，可能會看到這2種提示訊息視窗（也可能不會看到就自動封鎖）： 這會帶來什麼影響？ 這項安全機制會導致即使後端 API 權限全開，瀏覽器仍攔截請求。具體的錯誤訊息如下： Access to fetch at 'https://api.example.com/apiName' from origin 'https://www.example.com' has been blocked by CORS policy: Permission was denied for this request to access the `unknown` address space. net::ERR_FAILED 看到 Permission was denied for this request to access the ... address space 關鍵字，即代表觸發區域網路存取限制。瀏覽器判定來源（如 www.example.com ）位於公網，而目標解析後位於私有網路或無法判定的位址空間，直接封鎖。 技術債的償還：API 呼叫的正規做法 遇到此問題時，有些網站管理者會教使用者如何解除封鎖，並叫他們點擊「允許」： 點擊網址左邊的icon。 開啟存取權。 重新整理頁面。 跳出提示視窗時點擊允許。 使用者手動解除封鎖的方法 但從架構安全的角度來看， 前端直接呼叫私有 API 或第三方服務，本質上就是一種「技術債」 ，就算寫在 .env 裡面有心人也有辦法翻出來。API 呼叫的最佳實踐本來就該是 S...

在Chromium的環境中，可以直接寫JavaScript導入生成摘要的AI（Gemini Nano）： Summarizer API 。 這個 API 可以幫助生成文章或對話的重點或摘要、前導訊息、生成標題……等用途。 官方明確提出會在 Chrome 138 的版本導入此 API，但其實在很早之前就鼓勵開發者試著用Gemini Nano開發擴充功能。 在開始使用之前，可以順便閱讀 The People + AI Guidebook 與 Ameba 平台實際運用的情境 。 開始使用 查看是否支援 Summarizer API： if ('Summarizer' in self) { // The Summarizer API is supported. } Summarizer.availability() 可以判斷模型是否已準備好：它會回傳 "unavailable"（不支援）、"downloadable"（尚未下載）、"downloading"（下載中）、"available"（支援且可執行）。 而如果是 downloadable 或 downloading，可以在 Summarizer.create() 中使用 downloadprogress 查看下載進度： const summarizer = await Summarizer.create({ monitor(m) { m.addEventListener('downloadprogress', (e) => { console.log(`Downloaded ${e.loaded * 100}%`); }); } }); 呼叫 function 一般摘要： const theArticle = document.querySelector('#article').innerHTML; const summary = await summarizer.summarize(theArticle, { context: 'This article is about vtuber of ho...

準備好你的擴充功能檔案。 註冊開發人員帳戶。 上傳擴充功能檔案。 填寫相關資訊。 提交審核。 前陣子 manifest_version 從 2 強制升級成 3，我認為是一個很好的入坑時機點，直接學新的版本就好了，所以試著上傳小工具給官方，也當作一次學習。 1. 準備好程式碼與各項設定 chrome 擴充功能的設定都會寫在 manifest.json 裡面，包含擴充功能的名稱、簡單描述、各種檔案的路徑。 { "manifest_version": 3, "name": "__MSG_extensionName__", "version": "1.0.0", "description": "__MSG_extensionDescription__", "default_locale": "en", "permissions": [ "storage", "activeTab", "tabs" ], "host_permissions": [ "<all_urls>" ], "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html", "default_icon": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon12...

什麼是 favicon？ favicon 是 favorites icon 的縮寫，中文通常稱為頁面圖示（page icon）或網站圖標（website icon）；簡單一點來說，就是瀏覽器最上面各分頁會出現的圖案。 像我這個網站的favicon 是位可愛的吸血鬼 除此之外，favicon 也會出現在搜尋結果之中，也能為網站帶來好印象。 favicon 在搜尋結果中的樣子 favicon 除了可以用傳統的 ico 檔，也可以用 png 檔，甚至可以用 SVG 檔。 為何要特地用 SVG 檔？ 用一般圖檔就好了，何必要再創作一個 SVG 檔呢？因為 瀏覽器有 dark mode 的存在 ，這個模式可能會讓網頁的 favicon 看不清楚，這就是我推薦使用 SVG 檔的原因，因為我們可以很輕易地在 SVG 檔中塞 CSS 語法進去調色，別的檔案格式沒有這種能力。 看到一看就知道沒去背的白底 icon 會讓我很焦慮， 以下為簡單的例子： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"> <style> path{fill:#2858aa;} @media (prefers-color-scheme: dark) {path{fill: #23A6DE;}} </style> <path d="example"/> </svg> 「 prefers-color-scheme : dark」就是在 dark mode 下呈現的樣貌，寫法跟 media query 一樣。我們可以在括號範圍內設定一個比較亮的顏色（fill: #2...