「蛇王」個案研究

概要

蛇王是一個實驗性的 Chrome 擴充功能，在一般網頁內加入一條精簡的閱讀列。個人文字、簡短備忘、精選資訊來源和輕量市場動態都可以隨時閱讀，毋須另開閱讀應用程式。

我訂立產品構思，並親自開發整個擴充功能：由權限模型和本機儲存，到注入網頁的閱讀介面、設定頁體驗、自動化測試和發佈準備。

長文章、個人閱讀材料和小提示，通常會與正在使用的網頁互相爭奪注意力。這個實驗想知道：一個窄小而可控的閱讀區域，能否在減少干擾的同時讓這些資訊保持可見。

目前的原型為這類用戶而設：想在另一個瀏覽器頁面繼續工作的同時，閱讀自己的文字、瞄一眼精選資訊，或讓一則簡短提示保持可見。

Chrome 不容許擴充功能在原生書籤列下方加入永久介面，所以蛇王必須在獲准的網頁內顯示。產品亦不使用託管後端，個人內容、偏好設定和憑證都保存在本機瀏覽器設定檔中。

按下工具列按鈕，便會在目前頁面注入一條閱讀列。它支援橫向或直向移動、暫停和速度控制、備忘、匯入文字、閱讀進度、精選新聞來源、用戶自訂的數據來源，以及實驗性的股票報價。

擴充功能採用 Chrome 現行的擴充功能 manifest，配合背景 service worker、隔離的 Shadow DOM 介面和有版本管理的本機儲存。只有在用戶選擇某個來源時才會要求相應的選用權限，而外部內容一律以純文字顯示，不會渲染遠端標記。

蛇王按分頁逐次啟動，而不是在安裝時要求廣泛權限。個人文字保留在本機，來源權限逐一授予，文章擷取亦只限於獲准的公開頁面，不會繞過付費牆，也不會保留全文副本。

Vitest 覆蓋內容和狀態邏輯；Playwright 則把建置好的擴充功能載入 Chromium，測試注入、閱讀控制、本機內容、已儲存進度、頁面導覽，以及不友善的網頁樣式。程式碼檢查、型別檢查和正式建置構成其餘的發佈檢查。

首次使用的流程仍然容易令人誤解，設定頁和網頁內的閱讀列在視覺上尚未像同一個產品，商店頁面亦需要更有力的截圖和說明。閱讀列有時亦會遮住網站本身固定在頂部的標題列。

一個能運作的擴充功能，不等於一個容易理解的產品。下一輪迭代會集中改善新手引導、統一視覺語言、更清晰的商店資料，以及更寬容的閱讀控制，包括在暫停時直接移動文字位置。