iT邦幫忙

鐵人檔案

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

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

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

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

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

參賽天數 5 天 | 共 5 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1:從小麻煩開始的 Chrome Extension 開發之旅

前言 在工程師的前半段生涯,我通常是獨立完成專案。由於需求總像隕石般砸來,所以一直沒有太多機會使用 Merge Request 來管理程式碼的變更。 直到加入現...

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

Day 2 : 建立 Vite + Vue + Tailwind 專案環境

在搜尋參考資料的時候找到這到二篇文章: 從頭開始學習開發 Chrome extension (v3 版本) 使用 HTML / CSS / JS 開發 有...

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

Day 3 : 為專案加上說明書 - manifest.json 基本設定

今天我們要把建立好的專案進化成 Chrome 可以辨識的 extension!因此我們就會需要 manifest.json 什麼是 manifest.json...

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

Day 4:建立 Popup 頁面

昨天我們已經建好了基本的架構,接下來我們來做顯示的彈出式畫面吧! Popup 頁面 Popup 頁面也就是當我們點擊工具列上的 Extension 圖示時,會跳...

2025-09-18 ‧ 由 ouo 分享
DAY 5

Day 5:專案進化~ 變成 Chrome Extension 吧!

昨天我們已經完成我們的畫面了,接下來我們就要來將它轉變成在 Chrome 上打開的 Extension 囉~ 安裝 CRXJS Vite Plugin 因為 V...

2025-09-19 ‧ 由 ouo 分享