---
# System prepended metadata

title: Build & Publish a Custom Google Chrome Extension
tags: [Chrome Extension]

---

# 專案目標與成品行為

* 用純 HTML（HTML）與 CSS（CSS）做一個「快速啟動器」Chrome 擴充功能（Chrome extension）
* 點擊工具列圖示後開啟 Popup（Popup），裡面是一排社群/網站連結
* 點擊連結會在新分頁開啟（target="_blank"）
* 用途偏新手入門：理解專案結構、manifest 設定、如何載入本地擴充功能、如何上架流程概念

# 專案資料夾與圖示資產規劃

* 建立專案資料夾（例如 traversee-launcher）
* 準備工具列用主圖示 icon.png（icon.png），尺寸 19×19
* 準備商店/擴充功能用大圖示 icon_128.png（icon_128.png），尺寸 128×128
* 另建 images（images）資料夾放 Popup 內顯示的 logo 圖（例如 traversee-logo.png），示範尺寸約 150×150
* 主圖示放在根目錄是因為它屬於擴充功能本體資源，Popup 內 logo 則放 images 便於管理

# manifest.json（Manifest V2）重點欄位

* manifest_version（manifest_version）使用 2（Manifest V2），並提醒不同時期可能需要查官方文件版本差異
* name（name）設定擴充功能名稱（例如 Traverse Launcher）
* description（description）設定簡短描述
* version（version）設定版本號（例如 1.0.0）
* icons（icons）指定 128px 圖示路徑（icon_128.png）
* browser_action（browser_action）用來定義工具列行為與 Popup
* browser_action.default_icon（default_icon）指定工具列 19px 圖示（icon.png）
* browser_action.default_popup（default_popup）指定 Popup HTML（popup.html）
* permissions（permissions）宣告權限，示範只用 activeTab（activeTab）

# 檔案建立：popup.html 與 popup.js

* 建立 popup.html（popup.html）作為 Popup 的 UI 入口
* 建立 popup.js（popup.js）作為未來需要互動邏輯時的腳本位置
* 本範例強調不需要 JavaScript（JavaScript），popup.js 先保留不用

# popup.html：外部資源引入

* 使用 Google Fonts（Google Fonts）載入 Open Sans（Open Sans）字體
* 使用 Font Awesome（Font Awesome）CDN 引入圖示字型與圖示 class
* 這些外部資源用 link（link tag）放在 head（head）內

# popup.html：結構區塊與語意

* modal-header（modal-header）區塊放標題與 logo
* logo（logo）標題內含圖片 logo-icon（logo-icon）與文字標題
* version（version）用 span（span）顯示版本字串（例如 1.0.0）
* modal-content（modal-content）放簡短描述文字
* modal-icons（modal-icons）放各平台捷徑圖示

# 連結清單與圖示呈現方式

* 使用 flex-container（flex-container）搭配 Flexbox（Flexbox）來排版
* 每個捷徑是一個 flex（flex）區塊，裡面是 a（anchor）連結
* 每個 a 內用 i（i tag）套 Font Awesome class，例如 fa fa-globe（fa fa-globe）
* 連結都加 target="_blank"（target="_blank"）確保在新分頁開啟
* 示範連結平台包含個人網站、YouTube、Twitter、Facebook、GitHub

# 本地預覽與目前畫面狀態

* 可直接用瀏覽器開啟 popup.html 先看靜態版
* 也可用 VS Code Live Server（Live Server）快速預覽
* 目前只完成 HTML 結構與外部資源引入，尚未加 CSS 樣式，因此畫面「不太好看」是預期狀態

---

# 在 popup.html 內加入 CSS 的方式

* 在 head（head）加入 style（style tag）直接寫內嵌樣式（Inline CSS）
* 這種做法適合小型 Popup，檔案少、好搬移，但專案變大會較難維護

# 全域樣式：html、body

* 設定字體為 Open Sans（Open Sans）與 sans-serif（sans-serif）
* 設定基本字級（font-size）為 14px
* 取消預設外距（margin: 0）與內距（padding: 0）
* 設定最小高度（min-height）180px，固定寬度（width）384px 讓 Popup 尺寸一致

# 標題樣式：h1（Logo 文字）

* 字體改用 Menlo（Menlo）作為標題字體
* 字級（font-size）22px、字重（font-weight）400，並把 margin 設為 0
* 設定品牌色（color）為 #2f5876

# 連結樣式：a:link、a:visited

* 連結顏色統一設為黑色（color: black）
* 移除外框（outline: 0）避免點擊後出現預設 focus 外框
* 移除底線（text-decoration: none）讓圖示連結更乾淨

# Logo 圖片樣式：img

* 設定寬度（width）30px 讓 Popup header 的 logo 不會太大
* 用於控制 header 中 logo-icon（logo-icon）的視覺比例

# Header 區塊：modal-header

* 使用 align-items: center（align-items: center）讓 header 內容垂直置中
* 加底部分隔線（border-bottom）0.5px solid #dadada 做出區塊切分感

# 內容區塊：modal-content

* 設定左右內距（padding）為 0 20px，讓文字不貼邊
* 上下留白較少以維持 Popup 精簡

# 圖示區塊：modal-icons

* 加上部分隔線（border-top）0.5px solid #dadada
* 固定高度（height）50px，寬度（width）100% 撐滿容器

# Logo 排版：logo、logo-icon

* logo（logo）加 padding 16px，讓 header 內部有舒服留白
* logo-icon（logo-icon）使用 vertical-align: text-bottom（vertical-align: text-bottom）讓圖標對齊文字基線
* logo-icon（logo-icon）加 margin-right 12px 讓圖標與標題文字有間距

# 版本字樣：version

* 顏色設為 #444（#444）降低存在感但仍清楚
* 字級（font-size）18px，與標題搭配不會太小

# 圖示列排版：flex-container

* 設定 display: flex（display: flex）使用 Flexbox（Flexbox）布局
* justify-content: space-between（justify-content: space-between）讓圖示平均分散
* padding 設 10px 20px，保留上下與左右的留白

# 單一圖示項目：flex 與 hover 效果

* flex（flex）預設透明度（opacity）1
* 加入 transition（transition）讓透明度變化更平滑：opacity 0.2s ease-in-out
* 設定 width 120px 控制每個圖示區塊寬度
* flex:hover（flex:hover）把 opacity 降到 0.4，達成滑過淡化效果

# Font Awesome 圖示大小與顏色

* 針對 .flex .fa（.flex .fa）設定 font-size 40px 放大圖示
* 圖示顏色（color）設為品牌色 #2f5876，與標題一致

# popup.js 的處理方式

* 雖然本範例不使用 JavaScript（JavaScript），仍在 popup.html 末端引入 popup.js（popup.js）
* 保留未來要加互動邏輯時的擴充空間

# 載入本地擴充功能測試

* 前往 chrome://extensions（chrome://extensions）並開啟開發者模式（Developer mode）
* 使用「Load unpacked」（Load unpacked）選取專案資料夾載入
* 若工具列沒有顯示圖示，可重啟 Chrome 或到拼圖選單固定（Pin）擴充功能
* 點擊工具列圖示會開啟 Popup，點擊任一圖示連結會以新分頁開啟

# 上架 Chrome Web Store 的流程重點

* 將整個專案資料夾壓縮為 zip（zip file）作為上傳檔
* 到 Chrome Web Store 開發者後台（Developer dashboard）選擇新增項目並上傳 zip
* 需要提供 128×128 圖示（128×128 icon）
* 需要提供至少一張截圖（Screenshot），尺寸建議 1280×800 或 640×400
* 送出後審核通過即可在商店搜尋到並安裝（Add to Chrome）


---


# Terminology
* 啟動器擴充套件（Launcher Extension）：以彈窗提供捷徑連結，快速開啟常用網站或工具的擴充型態
* 純前端擴充（HTML/CSS-only Extension）：不依賴 JavaScript 邏輯、以靜態頁面呈現功能的擴充做法
* Manifest v2（MV2, Manifest Version 2）：舊版擴充規格，使用 browser_action 等欄位描述行為
* manifest.json（擴充描述檔）：擴充套件的必要檔案，定義名稱、版本、權限、圖示與彈窗入口
* browser_action（工具列動作）：MV2 的工具列按鈕設定區，指定圖示與預設彈窗
* default_popup（預設彈窗）：指定點擊擴充圖示時顯示的 HTML 檔案
* default_icon（預設圖示）：指定工具列按鈕使用的圖示檔與對應尺寸
* icons 欄位（Icons Manifest Field）：宣告不同尺寸圖示供商店與系統介面使用
* 工具列圖示（Toolbar Icon）：顯示在瀏覽器工具列上的擴充按鈕圖示
* 應用程式圖示（App Icon）：用於商店列表、詳情頁與安裝流程的主要圖示（常見 128×128）
* 圖示尺寸規範（Icon Size Guidelines）：不同展示位置需要不同像素尺寸的圖示配置規則
* 彈窗頁面（Popup Page）：點擊擴充圖示後出現的小型 HTML 視窗，用於快速操作與導覽
* 外部連結（External Links）：在擴充彈窗中指向外部網站的超連結集合
* 新分頁開啟（target="_blank"）：讓連結在新分頁開啟以避免覆蓋目前工作頁面
* 活躍分頁權限（activeTab Permission）：允許擴充在使用者互動後暫時存取目前分頁的權限
* 權限最小化（Principle of Least Privilege）：只申請必要權限以降低風險並提升使用者信任
* 開發者模式（Developer Mode）：啟用後可載入未封裝擴充並查看錯誤與除錯資訊
* 載入未封裝擴充（Load Unpacked Extension）：直接從本機資料夾載入擴充進行測試的方式
* 本機測試（Local Testing）：在未上架前於本機環境反覆載入、驗證與調整的流程
* 資料夾結構（Project Folder Structure）：以根目錄放 manifest 與圖示、子目錄放資源的組織方式
* 靜態資源（Static Assets）：圖示、圖片、字型等不需編譯即可被引用的檔案
* 影像資源目錄（Images Directory）：集中管理彈窗內使用的圖片與品牌素材的資料夾
* 品牌識別（Branding）：透過顏色、字體、Logo 一致化提升辨識度與專業感的設計策略
* Google Fonts（Google 字型服務）：以 CDN 載入網頁字型的服務，常用於提升排版一致性
* Open Sans（Open Sans）：常用的無襯線網頁字體，適合 UI 與資訊呈現
* 字型後備（Font Fallback）：當主要字體不可用時，指定替代字體以確保顯示穩定
* Font Awesome（Font Awesome）：以圖示字型／SVG 提供大量通用圖示的前端資源庫
* CDN（Content Delivery Network）：透過分散節點加速載入第三方資源的網路分發方式
* Link 標籤載入（<link rel="stylesheet">）：在 HTML 中引入外部 CSS 的標準做法
* Emmet（Emmet）：用縮寫快速生成 HTML/CSS 結構的編輯器工具
* Flexbox（CSS Flexible Box Layout）：用於一維佈局的 CSS 模型，適合對齊與分配空間
* Flex 容器（Flex Container）：設定 display:flex 的父元素，控制子元素排列方式
* justify-content（主軸對齊）：控制 Flex 子項在主軸上的對齊與空間分配（如 space-between）
* space-between（兩端對齊分散）：在 Flex 主軸上把剩餘空間平均分配到項目間的值
* 盒模型（Box Model）：CSS 對元素內容、內距、邊框、外距的尺寸計算模型
* 內距（Padding）：元素內容與邊框之間的空間，用於留白與提升可讀性
* 外距（Margin）：元素與元素之間的空間，用於版面間隔與視覺節奏
* 邊框（Border）：元素邊緣線條，可用於分隔區塊與建立層次
* 最小高度（min-height）：限制元素最小高度，確保彈窗不會過小影響閱讀
* 固定寬度（Fixed Width）：用固定像素設定彈窗寬度，避免版面在不同內容下抖動
* 透明度（Opacity）：控制元素不透明度，常用於 hover 視覺回饋
* 過渡效果（CSS Transition）：讓樣式變更以動畫方式平滑呈現的 CSS 機制
* easing（Ease-in-out）：過渡曲線，讓動畫開始與結束更自然、減少突兀感
* hover 狀態（:hover Pseudo-class）：滑鼠懸停時套用的樣式狀態，用於互動提示
* 文字裝飾（text-decoration）：控制連結底線等文字修飾，常用於移除預設下劃線
* 連結狀態（:link/:visited）：控制未點擊與已造訪連結的樣式一致性與可讀性
* Web Store 開發者後台（Chrome Web Store Developer Dashboard）：管理上架、版本、素材與審核流程的控制台
* 打包壓縮（ZIP Packaging）：將擴充檔案壓縮成 ZIP 以便上傳到商店審核
* 商店素材（Store Listing Assets）：上架所需的圖示、截圖、描述與宣傳圖等資產
* 截圖規格（Screenshot Requirements）：商店要求的最小解析度與尺寸比例（如 1280×800 或 640×400）
* 上架審核（Review & Publishing）：提交後由商店流程檢查合規與內容，通過後公開可安裝
* 搜尋可見度（Store Search Visibility）：在商店搜尋結果中的曝光能力，影響自然安裝量