iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
佛心分享-SideProject30

從零開始改善工作之 Chrome Extension: MR 通知文字小工具 系列

工作要發 MR 通知同事時,我常常因為貼到錯誤的連結,或是想訊息內容要寫什麼而困擾不已。這些小小的問題雖然不起眼,卻讓工作節奏大打折扣。

為了解決這個痛點,我決定開發一個 Chrome Extension,讓我能在 Merge Request 頁面自動產生通知範本文字,並一鍵複製到剪貼簿,提升發 MR 文字的準確度,也加快速度。

這個系列將記錄我從零開始研究與開發的過程:
‧從 Chrome Extension 架構 入門
‧學習 content script 與 clipboard API
‧實作 MR 通知文字產生與複製功能

參賽天數 27 天 | 共 27 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day 21:模組化訊息管理:訊息路由 utility ─ messageHandler.js

昨天的延伸設計有提到可以建立一個 訊息路由器 (message router),集中管理不同 action。這個做法有點類似前端框架中 store 的感覺,以下...

2025-10-05 ‧ 由 ouo 分享
DAY 22

Day 22:介紹 Tabs API(控制瀏覽器分頁)

我們在 Day 19 的時候有提到透過 chrome.tabs.sendMessage API來傳送資料今天我們來詳細 Tabs API 介紹吧! 在多分頁情境...

2025-10-06 ‧ 由 ouo 分享
DAY 23

Day 23:提升 UX — 加上 Toast 訊息回饋

在之前我們改善了 popup 頁面 UIUX 體驗,但通知只用 alert 視窗提醒,醜醜的今天就來讓通知的樣式更好看吧! 為了不干擾使用者體驗,我們選擇用 T...

2025-10-07 ‧ 由 ouo 分享
DAY 24

Day 24:延伸應用 — 自動幫 MR 標題加 prefix

WHY 在多專案環境中,我們常會: 忘記在 MR 標題中加上專案代碼或類別。 不同團隊使用不同格式(如 [FE] 修正登入頁錯誤、[API] 更新後端參數)。...

2025-10-08 ‧ 由 ouo 分享
DAY 25

Day 25:延伸應用 — 自動檢查 MR 描述格式

WHY 在多人協作的專案中,MR 描述通常需要包含特定內容,包括但不限於: 變更內容 原因說明 測試步驟 風險評估... 但有時在開發完成筋疲力盡後就會忘記...

2025-10-09 ‧ 由 ouo 分享
DAY 26

Day 26:延伸應用 — 結合 Shortcut(快捷鍵)

有時候當我們雙手放在鍵盤上就想要完成所有 MR 發文的話,這時候就會需要各種好用的快捷鍵!例如: 一鍵複製 MR 模板 一鍵產生通知內容 一鍵打開特定設定頁面...

2025-10-10 ‧ 由 ouo 分享
DAY 27

Day 27:效能思考 — Content Script 何時注入最好?

為什麼要在意注入時機? Content Script 是在使用者造訪符合條件的頁面時注入的 JavaScript 腳本。若設定不當,可能造成: 頁面載入變慢(...

2025-10-11 ‧ 由 ouo 分享