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 11

Day 11 : 載入預設的初始範本 - background.js

昨天我們已經學會如何將範本文字儲存到使用者的帳號中,並且依照使用者編輯下次點擊打開也會是編輯後的結果。一定也不會忘記我們實作的時候,有先把原本想好的範本文字貼到...

2025-09-25 ‧ 由 ouo 分享
DAY 12

Day 12 : 將取得的資訊整理成我們要的通知文字吧!

前幾天我們已經成功取得 Merge Review 的標題、 Reviewer 的名字和範本文字了。今天就來把它們組起來吧! 組合文字的工程,我們就回到 Cont...

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

Day 13 : 做個"按鈕",讓複製文字變得簡單

昨天我們把想要的文字初步組合出來,為了達到能更快速複製文字的目標,今天我們就把按鈕直接加到 Merge Request 頁面中吧! 回憶一下 Content S...

2025-09-27 ‧ 由 ouo 分享
DAY 14

Day 14 : 僅使用 navigator.clipboard 和搭配 new ClipboardItem 的差別

在我們的 Chrome Extension 中,複製 Merge Request 通知文字的寫法是: navigator.clipboard.writeText...

2025-09-28 ‧ 由 ouo 分享
DAY 15

Day 15 : 為通知文字加上連結,成為貼心的同事

昨天我們了解了 navigator.clipboard 和 new ClipboardItem 的差別,今天我們就來幫我的組合的文字加上連結,成為一位貼心的同事...

2025-09-29 ‧ 由 ouo 分享
DAY 16

Day 16:最佳化範本輸入介面

在昨天我們已經完成複製帶連結的通知文字了!但如果要讓其他人使用的話,我們需要讓使用者在 Popup 輸入自訂範本時,能直覺且獨立操作完成 —— 也就是防呆設計。...

2025-09-30 ‧ 由 ouo 分享
DAY 17

Day 17:規劃 ─ 支援多專案 Merge Request 的差異格式

昨天我們調整了使用者面板,讓它對出新使用者友善,今天我們繼續來增加一些小巧思吧! WHY 在不同專案裡面,Merge Request 的通知格式可能會需要不同的...

2025-10-01 ‧ 由 ouo 分享
DAY 18

Day 18:實作 ─ 支援多專案 Merge Request 的差異格式

昨天大致上已經知道要怎麼處理,今天就來逐步調整吧! 實作 改寫 background.js 儲存預設專案管理的格式,將 string 改為 object c...

2025-10-02 ‧ 由 ouo 分享
DAY 19

Day 19:介紹 Message Passing(content ↔ background ↔ popup 溝通)

在昨天的實作中,我們使用到了 chrome.runtime.sendMessage 這個 API今天來介紹一下! 什麼是 Message Passing 在 C...

2025-10-03 ‧ 由 ouo 分享
DAY 20

Day 20:三方溝通範例— content script ⇔ background ⇔ popup

昨天介紹了 extension Message Passing 的方法今天想就 三方溝通範例:content ⇔ background ⇔ popup 詳細說明...

2025-10-04 ‧ 由 ouo 分享