ส่วนขยาย Google Chrome ในฝันของฉันไม่มีอยู่ ดังนั้นฉันจึงโค้ดมันกับ Claude อย่างสนุกสนาน

ฉันพิจารณาตัวเองว่าเป็นผู้เชี่ยวชาญด้านการผัดวันประกันพรุ่ง ตลอดหลายปีที่ผ่านมา ฉันได้ลองใช้เครื่องมือและเทคนิคมากมายเพื่อแก้ปัญหานี้ ตั้งแต่ตัวจับเวลาแบบโพโมโดโร่ โปรแกรมบล็อกสิ่งรบกวน ไปจนถึงแอปเขียนแบบเรียบง่าย ส่วนใหญ่ของพวกมันถูกออกแบบมาอย่างดีและทำตามสิ่งที่พวกเขาอ้างว่าทำ พวกมันช่วยให้คุณติดตามเวลาและส่งเสริมการมีสมาธิ สิ่งที่พวกมันไม่สามารถทำได้คือบังคับให้คุณทำ

เกือบทุกเครื่องมือเหล่านี้อาศัยสมมติฐานเดียวกันว่าเมื่อคุณเริ่มจับเวลา คุณจะทำตามต่อไป คุณจะไม่เปิดแท็บใหม่ ตรวจสอบการแจ้งเตือน หรือหลงเข้าไปในกับดัก 'แค่หนึ่งอีกครั้ง' ในทางปฏิบัติ มันยากกว่านั้นมาก เพียงแค่ความสนใจของคุณหลุด เครื่องมือจะไม่มีวิธีตอบสนอง ดังนั้น แทนที่จะวนซ้ำไปกับเครื่องมือเพิ่มประสิทธิภาพที่มีอยู่ ผมจึงตัดสินใจสร้างฟีเจอร์หนึ่งที่ผมรู้สึกว่าขาดหายไป

ตัวจับเวลาปอมอโดโรที่บังคับให้โฟกัส

มันไม่ใช่แค่นาฬิกาจับเวลาอีกต่อไป แต่เป็นผู้ช่วยโฟกัส

แนวคิดนั้นเรียบง่าย: ตัวจับเวลาพอมโอดาโร่ที่ไม่เพียงแค่วัดช่วงเวลาที่มีสมาธิ แต่ยังควบคุมพฤติกรรมของเบราว์เซอร์ในระหว่างช่วงเวลานั้นด้วย

แทนที่จะจัดการทุกเซสชันเหมือนกัน ส่วนขยายนี้ได้แนะนำ "ระดับความมุ่งมั่น" ที่แตกต่างกัน แต่ละระดับสะท้อนถึงความเข้มงวดของเซสชัน และเบราว์เซอร์ตอบสนองตามนั้น ในโหมดที่ผ่อนคลายมากขึ้น การสลับแท็บอาจได้รับอนุญาตโดยไม่มีข้อจำกัด ในโหมดที่เข้มงวดมากขึ้น ส่วนขยายอาจเตือนคุณเมื่อคุณพยายามออกจากแท็บปัจจุบันหรือป้องกันการกระทำดังกล่าวทั้งหมด

ฉันรู้ว่าความตั้งใจของฉันมีความ "ใหญ่" แค่ไหน ดังนั้นแนวคิดสำคัญคือการย้ายภาระของวินัยออกจากช่วงเวลาที่เกิดสิ่งเบี่ยงเบน แทนที่จะพึ่งพาความตั้งใจในระหว่างช่วงเวลา ฉันตัดสินใจก่อนล่วงหน้าเกี่ยวกับความยืดหยุ่นที่ฉันต้องการ และส่วนขยายจะบังคับใช้การตัดสินใจนั้น

กำหนดขอบเขตของโครงการ

การทำแผนที่ความคิดของฟีเจอร์

หนึ่งในความผิดพลาดที่ง่ายที่สุดที่จะเกิดขึ้นกับโครงการแบบนี้คือการทำให้ซับซ้อนเกินไปตั้งแต่เริ่มต้น จะเป็นเรื่องง่ายที่จะเพิ่มคุณสมบัติต่างๆ เช่น การวิเคราะห์การใช้งาน การซิงค์ข้ามอุปกรณ์ หรืออินเทอร์เฟซที่ซับซ้อนมากขึ้น แทนที่จะทำเช่นนั้น ฉันจึงตั้งใจจำกัดขอบเขตให้แคบ

เป้าหมายสำหรับเวอร์ชันแรกคือเพียงแค่การยืนยันไอเดีย นั่นหมายถึงการมุ่งเน้นไปที่ชุดความสามารถหลักเพียงเล็กน้อย: การจับเวลาแบบ Pomodoro ที่ใช้งานได้, วิธีการเลือกระดับสมาธิ, ความสามารถในการตรวจจับการสลับแท็บ, และการบังคับใช้กฎเหล่านั้นในระดับพื้นฐาน หากส่วนเหล่านั้นทำงานร่วมกันได้อย่างน่าเชื่อถือ ส่วนขยายก็จะมีประโยชน์แล้ว สิ่งใดที่เกินกว่านั้นสามารถเพิ่มเข้ามาในภายหลังได้

โค้ดดิ้งแบบไวนซ์กับโคล้ด

เพื่อนโปรแกรมมิ่งที่ฉันไว้วางใจกำลังลงมือทำงาน

แทนที่จะเขียนส่วนขยายทั้งหมดด้วยตนเอง ฉันจึงมองว่านี่เป็นการทดลองในการพัฒนาด้วยความช่วยเหลือของ AI

เวิร์กโฟลว์ถูกออกแบบให้เรียบง่ายโดยตั้งใจ ผมแบ่งโครงการออกเป็นขั้นตอนเล็ก ๆ ที่กำหนดไว้อย่างชัดเจน จากนั้นจึงสั่ง Claude ให้สร้างโค้ดสำหรับแต่ละส่วน หลังจากนั้นผมจะรันโค้ดบนเครื่องเอง ทดสอบการทำงาน และปรับปรุงตามความจำเป็น

เริ่มต้นด้วยพื้นฐาน

ก่อนที่จะเพิ่มตัวจับเวลา หรือกฎโฟกัส ขั้นตอนแรกคือการทำให้ส่วนขยาย Chrome ทำงานได้ ซึ่งหมายถึงการตั้งค่าไฟล์ manifest ที่ถูกต้อง โหลดส่วนขยายในเบราว์เซอร์ และยืนยันว่ามันสามารถแสดงอินเทอร์เฟซพื้นฐานได้ นี่เป็นขั้นตอนเล็กๆ แต่สำคัญ เมื่อรากฐานนี้ถูกวางเรียบร้อยแล้ว เราสามารถเริ่มเพิ่มฟังก์ชันการทำงานจริงได้

เพื่อให้สิ่งต่าง ๆ น่าเชื่อถือ ผมจึงมอบพรอมต์ที่เฉพาะเจาะจงมากให้กับ Claude การสร้างพรอมต์ที่รอบคอบเป็นความรู้สำคัญสำหรับการโค้ดแบบบรรยากาศ

Create a minimal Chrome extension using Manifest V3.

Requirements:
- Include a valid manifest.json file
- Add a simple popup UI (popup.html)
- The popup should display a title: "Pomodoro Tab"
- Include a short placeholder text below the title: "Extension loaded successfully"
- Keep the structure simple and clean
- No external libraries or frameworks
- Use plain HTML, CSS, and JavaScript only
- Organize files clearly (manifest.json, popup.html, optional popup.js)

Make sure the extension can be loaded into Chrome without errors.

Claude ให้ไฟล์ต่างๆ กับฉันสามไฟล์ตามที่คาดไว้ ส่วนที่น่าประหลาดใจที่สุดคือ UI แบบป็อปอัพ แทนที่จะเป็นไฟล์ HTML เปล่า Claude กลับสร้างอินเทอร์เฟซที่มีการจัดสไตล์ครบถ้วน พร้อมด้วยฟอนต์ที่ปรับแต่งเฉพาะ, พาเลตสี, การเคลื่อนไหวแบบละเอียดอ่อน, และเอกลักษณ์ทางภาพขนาดเล็ก (รวมถึงไอคอนมะเขือเทศ)

การเพิ่มตัวจับเวลาปอมอโดโร

เมื่อส่วนขยายถูกโหลดอย่างถูกต้อง ขั้นตอนต่อไปคือการทำให้มันใช้งานได้

ในขั้นตอนนี้ เป้าหมายไม่ใช่การสร้างประสบการณ์เต็มรูปแบบ แต่เพื่อแนะนำกลไกหลัก: ตัวจับเวลาพอมโอดอโรที่ใช้งานได้ ซึ่งหมายถึงการเพิ่มการนับถอยหลัง ควบคุมพื้นฐาน และวิธีสลับระหว่างช่วงทำงานและพัก

เนื่องจากเรามี UI ป๊อบอัปอยู่แล้ว งานตอนนี้คือการขยายมันโดยไม่ทำให้สิ่งที่มีอยู่เสียหาย ครั้งนี้ คำสั่งต้องมีความตั้งใจมากขึ้น แทนที่จะขอให้ Claude “สร้าง” ตัวจับเวลา เรากำลังขอให้มัน:

• ทำงานกับไฟล์ที่มีอยู่
• แก้ไขพวกมันอย่างระมัดระวัง
• เก็บส่วนติดต่อผู้ใช้ปัจจุบันไว้เหมือนเดิม
• ชั้นการทำงานด้านบน

นี่คือข้อความแจ้ง:

You are working on an existing Chrome extension project called "Pomodoro Tab".

The project already includes:
- manifest.json (Manifest V3, correctly configured)
- popup.html (UI already styled and working)
- popup.js (basic script with a small animation)

Your task is to EXTEND the existing codebase by adding a basic Pomodoro timer.

Do NOT rewrite everything from scratch. Modify and build on top of the existing files.

Requirements:

1. Timer functionality:
- Add a countdown timer (default: 25 minutes for work, 5 minutes for break)
- Display the remaining time clearly in the popup (MM:SS format)
- Include a "Start" button and a "Reset" button
- When the timer ends, automatically switch between work and break sessions

2. UI updates:
- Integrate the timer display into the existing popup.html
- Keep the current design and styling intact as much as possible
- Add buttons in a clean and minimal way (no heavy redesign)

3. JavaScript logic:
- Add timer logic inside popup.js (or split into a new file if clearly needed)
- Use setInterval or similar approach for countdown
- Ensure the timer updates the UI in real time
- Handle start, reset, and session switching cleanly

4. Code quality:
- Keep the code simple and readable
- Do not introduce unnecessary complexity
- No external libraries or frameworks

5. Output format:
- Show the FULL updated code for:
  - popup.html
  - popup.js
- Only include manifest.json if changes are required (otherwise leave it unchanged)

The result should be a working Pomodoro timer inside the existing extension popup.

Claude ผลิตผลลัพธ์ที่ดีบางอย่าง ตอนนี้ฉันมีตัวจับเวลาพอมอโดโรที่ใช้งานได้ซึ่งฉันสามารถเริ่มด้วยตัวจับเวลา 25 นาที หยุดชั่วคราว และรีเซ็ตได้ มีปัญหาหนึ่งคือ หลังจากเริ่มตัวจับเวลา หากฉันปิดส่วนขยายหรือสลับแท็บ ตัวจับเวลาจะหยุด และฉันต้องเริ่มใหม่ ฉันอธิบายเรื่องนี้กับ Claude ด้วยคำสั่งติดตามผล และมันก็แก้ไขปัญหาได้

ตรวจจับการสลับแท็บ

เมื่อมีตัวจับเวลาที่เชื่อถือได้ ขั้นตอนต่อไปคือการสังเกตพฤติกรรมของผู้ใช้ โดยเฉพาะ เราจำเป็นต้องรู้ว่าเมื่อใดที่ผู้ใช้สลับแท็บ พฤติกรรมนี้ง่าย:

• เมื่อเวลาเริ่มทำงานและโหมดยากถูกเปิดใช้งาน
• ถ้าฉันพยายามสลับแท็บ
• เบราว์เซอร์บังคับให้ฉันกลับไปที่แท็บเดิมทันที

นี่คือพรอมต์ที่ฉันใช้:

You are working on an existing Chrome extension called "Pomodoro Tab".

Current architecture:
- background.js handles all timer logic and state using chrome.storage and chrome.alarms
- popup.js is a UI layer that communicates with background.js
- Timer persists correctly even when popup is closed

Your task is to EXTEND the project by adding a "Hard Mode" that prevents tab switching during an active session.

Do NOT rewrite existing code. Build on top of it.

Requirements:

1. Hard Mode Toggle (UI):
- Add a checkbox or toggle in popup.html labeled "Hard Mode"
- When enabled, store this setting in chrome.storage
- Default should be OFF

2. Track the active "focus tab":
- When the user starts the timer, store the current active tab ID as the "locked" tab

3. Enforce tab locking:
- In background.js, listen to chrome.tabs.onActivated
- If:
  - timer is running AND
  - hard mode is enabled AND
  - user switches to a different tab
- Then immediately switch them back to the locked tab using chrome.tabs.update

4. Edge cases:
- If the locked tab is closed, disable enforcement gracefully
- Do not crash or spam errors

5. Code structure:
- Keep logic inside background.js
- Keep popup.js focused on UI and messaging
- Use chrome.storage for persistence

6. Permissions:
- Add only necessary permissions (e.g., "tabs")

7. Output:
- Show updated:
  - popup.html
  - popup.js (if changed)
  - background.js
  - manifest.json (if changed)

Goal:
When Hard Mode is enabled and the timer is running, the user should not be able to leave the original tab.

การเปิดใช้งานโหมดยากกลับพบว่ายุ่งยากกว่าที่คาดไว้ ในทางทฤษฎี ความคิดนั้นง่าย: ตรวจจับการสลับแท็บแล้วสลับกลับทันที แต่ในทางปฏิบัติ มีหลายส่วนที่ต้องจัดการ: การจัดการสถานะ บริบทของแท็บ และการจับเวลา ทั้งหมดนั้นต้องสอดคล้องกันอย่างถูกต้อง

เวอร์ชันแรกที่โคล้ดสร้างขึ้นใช้งานไม่ได้เลย เวอร์ชันที่สองใช้งานได้ไม่สม่ำเสมอ มีเพียงหลังจากปรับหลายครั้งเท่านั้นที่มันทำงานได้อย่างเชื่อถือได้

เครื่องมือเพิ่มประสิทธิภาพที่เรียบง่ายแต่ทรงพลัง

เครื่องมือเพิ่มผลผลิตส่วนใหญ่ถูกออกแบบมาเพื่อช่วยให้คุณมีสมาธิ แต่เมื่อฉันโค้ดผลิตภัณฑ์นี้ตามอารมณ์ของฉัน ฉันคาดไว้ว่าจะไม่เป็นเช่นนั้น การใช้ Claude ในการสร้างมันทำงานได้ดีโดยรวม แม้ว่าจะมีอุปสรรคเล็กน้อยตามเส้นทาง คุณสามารถดูโค้ดทั้งหมดได้ที่ GitHub ของฉัน