# โครงการส่วนขยายเบราว์เซอร์ ตอนที่ 1: ทุกอย่างเกี่ยวกับเบราว์เซอร์
```mermaid
journey
title การพัฒนาส่วนขยายเบราว์เซอร์ของคุณ
section Foundation
Understand browsers: 3: Student
Learn extension types: 4: Student
Setup development: 4: Student
section Development
Build interface: 4: Student
Add functionality: 5: Student
Handle data: 5: Student
section Integration
Test in browser: 5: Student
Debug issues: 4: Student
Polish experience: 5: Student
```
> สเก็ตช์โน้ตโดย [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## แบบทดสอบก่อนบรรยาย
[แบบทดสอบก่อนบรรยาย](https://ff-quizzes.netlify.app/web/quiz/23)
### บทนำ
ส่วนขยายเบราว์เซอร์คือแอปพลิเคชันขนาดเล็กที่ช่วยเสริมประสบการณ์การท่องเว็บของคุณ เช่นเดียวกับวิสัยทัศน์ดั้งเดิมของ Tim Berners-Lee ที่ต้องการเว็บแบบอินเทอร์แอคทีฟ ส่วนขยายช่วยขยายความสามารถของเบราว์เซอร์เกินกว่าการดูเอกสารธรรมดา จากผู้จัดการรหัสผ่านที่ช่วยรักษาความปลอดภัยบัญชีของคุณ ไปจนถึงเครื่องมือเลือกสีที่ช่วยนักออกแบบเลือกเฉดสีที่สมบูรณ์แบบ ส่วนขยายแก้ไขปัญหาการท่องเว็บในชีวิตประจำวัน
ก่อนที่เราจะสร้างส่วนขยายแรกของคุณ มาทำความเข้าใจว่าเบราว์เซอร์ทำงานอย่างไร เช่นเดียวกับที่ Alexander Graham Bell ต้องเข้าใจการส่งผ่านเสียงก่อนคิดค้นโทรศัพท์ การรู้พื้นฐานของเบราว์เซอร์จะช่วยให้คุณสร้างส่วนขยายที่ผสานรวมกับระบบเบราว์เซอร์ที่มีอยู่ได้อย่างลงตัว
สิ้นสุดบทเรียนนี้ คุณจะเข้าใจสถาปัตยกรรมของเบราว์เซอร์และเริ่มต้นสร้างส่วนขยายแรกของคุณได้
```mermaid
mindmap
root((สถาปัตยกรรมเบราว์เซอร์))
Core Components
Rendering Engine
JavaScript Engine
Network Stack
Storage APIs
User Interface
Address Bar
Tab Management
Bookmarks
Extension Icons
Extension System
Manifest Files
Content Scripts
Background Pages
Popup Windows
Security Model
Same-Origin Policy
Permissions API
Content Security
Isolated Worlds
Development Tools
DevTools Integration
Debug Console
Performance Monitor
Extension Inspector
```
## เข้าใจเบราว์เซอร์เว็บ
เบราว์เซอร์เว็บโดยพื้นฐานเป็นตัวแปลเอกสารที่ซับซ้อน เมื่อคุณพิมพ์ "google.com" ในแถบที่อยู่ เบราว์เซอร์จะดำเนินการชุดขั้นตอนที่ซับซ้อน — ขอเนื้อหาจากเซิร์ฟเวอร์ทั่วโลก จากนั้นแยกวิเคราะห์และแสดงผลโค้ดนั้นเป็นหน้าเว็บแบบอินเทอร์แอคทีฟที่คุณเห็น
กระบวนการนี้สะท้อนถึงวิธีที่เบราว์เซอร์เว็บตัวแรก WorldWideWeb ได้รับการออกแบบโดย Tim Berners-Lee ในปี 1990 เพื่อให้เอกสารที่มีการเชื่อมโยงแบบไฮเปอร์ลิงก์เข้าถึงได้สำหรับทุกคน
✅ **ประวัติเล็กน้อย**: เบราว์เซอร์ตัวแรกเรียกว่า 'WorldWideWeb' และถูกสร้างโดย Sir Timothy Berners-Lee ในปี 1990
> เบราว์เซอร์ยุคแรกบางส่วน โดย [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### เบราว์เซอร์ประมวลผลเนื้อหาเว็บอย่างไร
กระบวนการระหว่างการป้อน URL จนเห็นหน้าเว็บประกอบด้วยขั้นตอนที่ประสานงานกันหลายอย่างซึ่งเกิดขึ้นภายในไม่กี่วินาที:
```mermaid
sequenceDiagram
participant User
participant Browser
participant Extension
participant DNS
participant Server
User->>Browser: พิมพ์ URL และกด Enter
Browser->>Extension: เรียกเหตุการณ์ beforeRequest
Extension->>Extension: ตรวจสอบว่าต้องแก้ไข URL หรือไม่
Browser->>DNS: ค้นหา IP ของเซิร์ฟเวอร์
DNS->>Browser: ส่งคืนที่อยู่ IP
Browser->>Server: ขอเนื้อหาเว็บเพจ
Server->>Browser: ส่ง HTML, CSS, และ JavaScript
Browser->>Extension: เรียกเหตุการณ์ beforeResponse
Extension->>Extension: แก้ไขเนื้อหาหากจำเป็น
Browser->>User: แสดงหน้าเว็บเพจสมบูรณ์
Extension->>User: แสดงการอัปเดต UI ของส่วนขยาย
```
**นี่คือสิ่งที่กระบวนการนี้ทำได้:**
- **แปลง** URL ที่อ่านได้สำหรับมนุษย์เป็นที่อยู่ IP ของเซิร์ฟเวอร์ผ่านการค้นหา DNS
- **สร้าง** การเชื่อมต่อที่ปลอดภัยกับเว็บเซิร์ฟเวอร์โดยใช้โปรโตคอล HTTP หรือ HTTPS
- **ร้องขอ** เนื้อหาหน้าเว็บเฉพาะจากเซิร์ฟเวอร์
- **รับ** โค้ด HTML, การจัดรูปแบบ CSS และโค้ด JavaScript จากเซิร์ฟเวอร์
- **แสดงผล** เนื้อหาทั้งหมดเป็นหน้าเว็บแบบอินเทอร์แอคทีฟที่คุณเห็น
### คุณสมบัติเบื้องต้นของเบราว์เซอร์
เบราว์เซอร์สมัยใหม่มีคุณสมบัติมากมายที่นักพัฒนาส่วนขยายสามารถใช้ประโยชน์ได้:
| ฟีเจอร์ | วัตถุประสงค์ | โอกาสสำหรับส่วนขยาย |
|---------|--------------|----------------------|
| **เอนจินการแสดงผล** | แสดงผล HTML, CSS และ JavaScript | การแก้ไขเนื้อหา, การแทรกสไตล์ |
| **เอนจิน JavaScript** | รันโค้ด JavaScript | สคริปต์ที่กำหนดเอง, การโต้ตอบกับ API |
| **ที่เก็บข้อมูลภายในเครื่อง** | บันทึกข้อมูลภายในเครื่อง | การตั้งค่าผู้ใช้, ข้อมูลแคช |
| **โครงสร้างเครือข่าย** | จัดการคำร้องขอเว็บ | การติดตามคำร้องขอ, วิเคราะห์ข้อมูล |
| **โมเดลความปลอดภัย** | ปกป้องผู้ใช้จากเนื้อหาที่เป็นอันตราย | การกรองเนื้อหา, การเสริมความปลอดภัย |
**การเข้าใจฟีเจอร์เหล่านี้ช่วยให้คุณ:**
- **ระบุ** จุดที่ส่วนขยายของคุณสามารถเพิ่มคุณค่าได้มากที่สุด
- **เลือก** API ของเบราว์เซอร์ที่เหมาะสมสำหรับฟังก์ชันของส่วนขยาย
- **ออกแบบ** ส่วนขยายที่ทำงานได้อย่างมีประสิทธิภาพกับระบบของเบราว์เซอร์
- **มั่นใจ** ว่าส่วนขยายของคุณสอดคล้องกับแนวปฏิบัติด้านความปลอดภัยของเบราว์เซอร์
### ข้อควรพิจารณาในการพัฒนาข้ามเบราว์เซอร์
เบราว์เซอร์ที่แตกต่างกันจะใช้มาตรฐานด้วยการเปลี่ยนแปลงเล็กน้อย เช่นเดียวกับว่าภาษาโปรแกรมต่าง ๆ อาจจัดการอัลกอริทึมเดียวกันต่างกัน Chrome, Firefox และ Safari ต่างก็มีลักษณะเฉพาะตัวที่นักพัฒนาต้องคำนึงถึงในระหว่างการพัฒนาส่วนขยาย
> 💡 **เคล็ดลับมือโปร**: ใช้ [caniuse.com](https://www.caniuse.com) เพื่อตรวจสอบว่าเทคโนโลยีเว็บใดรองรับบนเบราว์เซอร์ต่าง ๆ นี่คือข้อมูลล้ำค่าขณะวางแผนฟีเจอร์ของส่วนขยาย!
**ข้อควรพิจารณาสำหรับการพัฒนาส่วนขยาย:**
- **ทดสอบ** ส่วนขยายของคุณบนเบราว์เซอร์ Chrome, Firefox และ Edge
- **ปรับ** ให้เข้ากับ API ส่วนขยายและรูปแบบ manifiest ของแต่ละเบราว์เซอร์
- **จัดการ** กับลักษณะการทำงานและข้อจำกัดที่แตกต่างกัน
- **เตรียม** กรณี fallback สำหรับฟีเจอร์เฉพาะของเบราว์เซอร์ที่อาจไม่มีอยู่
✅ **ข้อมูลเชิงวิเคราะห์**: คุณสามารถตรวจสอบว่าเบราว์เซอร์ใดที่ผู้ใช้ของคุณนิยมโดยการติดตั้งแพ็คเกจวิเคราะห์ในโปรเจกต์พัฒนาเว็บ ข้อมูลนี้ช่วยให้คุณกำหนดลำดับความสำคัญในการสนับสนุนเบราว์เซอร์ได้อย่างเหมาะสม
## เข้าใจส่วนขยายเบราว์เซอร์
ส่วนขยายเบราว์เซอร์แก้ไขปัญหาการท่องเว็บโดยการเพิ่มฟังก์ชันโดยตรงในอินเทอร์เฟซเบราว์เซอร์ แทนที่จะต้องใช้แอปแยกหรือกระบวนการที่ซับซ้อน ส่วนขยายให้การเข้าถึงเครื่องมือและฟีเจอร์ทันที
แนวคิดนี้สะท้อนถึงวิธีที่นักบุกเบิกคอมพิวเตอร์ยุคแรกอย่าง Douglas Engelbart มองเห็นการเสริมศักยภาพมนุษย์ด้วยเทคโนโลยี — ส่วนขยายช่วยเสริมฟังก์ชันพื้นฐานของเบราว์เซอร์ของคุณ
```mermaid
quadrantChart
title หมวดหมู่ส่วนขยายเบราว์เซอร์
x-axis ง่าย --> ซับซ้อน
y-axis การใช้งานส่วนตัว --> เครื่องมือสำหรับมืออาชีพ
quadrant-1 เครื่องมือสำหรับนักพัฒนา
quadrant-2 โซลูชันองค์กร
quadrant-3 เครื่องมือส่วนบุคคล
quadrant-4 แอปพลิเคชันเพิ่มประสิทธิภาพ
Ad Blockers: [0.3, 0.2]
Password Managers: [0.7, 0.3]
Color Pickers: [0.4, 0.8]
Code Formatters: [0.8, 0.9]
Note Taking: [0.6, 0.5]
Video Downloaders: [0.5, 0.2]
Time Trackers: [0.7, 0.6]
Screenshot Tools: [0.4, 0.4]
```
**หมวดหมู่ส่วนขยายยอดนิยมและประโยชน์ของมัน:**
- **เครื่องมือเพิ่มประสิทธิภาพ**: ตัวจัดการงาน แอปจดบันทึก และตัวติดตามเวลาช่วยให้คุณจัดระเบียบได้ดี
- **การเสริมความปลอดภัย**: ตัวจัดการรหัสผ่าน ตัวบล็อกโฆษณา และเครื่องมือความเป็นส่วนตัวช่วยปกป้องข้อมูลของคุณ
- **เครื่องมือสำหรับนักพัฒนา**: ตัวจัดรูปแบบโค้ด เครื่องมือเลือกสี และเครื่องมือดีบักที่ช่วยเร่งการพัฒนา
- **การปรับปรุงเนื้อหา**: โหมดอ่าน โปรแกรมดาวน์โหลดวิดีโอ และเครื่องมือถ่ายภาพหน้าจอที่ช่วยให้ประสบการณ์เว็บดีขึ้น
✅ **คำถามสะท้อนความคิด**: ส่วนขยายเบราว์เซอร์ที่คุณชื่นชอบคืออะไร? พวกมันช่วยทำงานอะไรเฉพาะทาง และพวกมันช่วยปรับปรุงประสบการณ์การท่องเว็บของคุณอย่างไร?
### 🔄 **ตรวจสอบความเข้าใจเชิงการเรียนการสอน**
**ความเข้าใจสถาปัตยกรรมเบราว์เซอร์**: ก่อนย้ายไปพัฒนาส่วนขยาย ตรวจสอบว่าคุณสามารถ:
- ✅ อธิบายว่าเบราว์เซอร์ประมวลผลคำร้องขอเว็บและแสดงผลเนื้อหาอย่างไร
- ✅ ระบุส่วนประกอบหลักของสถาปัตยกรรมเบราว์เซอร์
- ✅ เข้าใจวิธีการที่ส่วนขยายรวมกับฟังก์ชันของเบราว์เซอร์
- ✅ รู้จักโมเดลความปลอดภัยที่ปกป้องผู้ใช้
**แบบทดสอบตนเองรวดเร็ว**: คุณสามารถตรวจสอบเส้นทางจากการพิมพ์ URL จนเห็นหน้าเว็บได้หรือไม่?
1. **ค้นหา DNS** แปลง URL เป็นที่อยู่ IP
2. **ร้องขอ HTTP** ดึงเนื้อหาจากเซิร์ฟเวอร์
3. **การวิเคราะห์** ประมวลผล HTML, CSS และ JavaScript
4. **การแสดงผล** แสดงหน้าเว็บสุดท้าย
5. **ส่วนขยาย** สามารถแก้ไขเนื้อหาได้ในหลายขั้นตอน
## การติดตั้งและจัดการส่วนขยาย
ความเข้าใจขั้นตอนการติดตั้งส่วนขยายช่วยให้คาดการณ์ประสบการณ์ผู้ใช้เมื่อผู้คนติดตั้งส่วนขยายของคุณได้ กระบวนการติดตั้งถูกมาตรฐานแล้วในเบราว์เซอร์สมัยใหม่ โดยมีการปรับเปลี่ยนเล็กน้อยในรูปแบบอินเทอร์เฟซ
> **สำคัญ**: อย่าลืมเปิดโหมดนักพัฒนาและอนุญาตส่วนขยายจากแหล่งอื่นเมื่อทดสอบส่วนขยายของคุณเอง
### ขั้นตอนการติดตั้งส่วนขยายระหว่างพัฒนา
เมื่อคุณพัฒนาและทดสอบส่วนขยายของตัวเอง ให้ทำตามขั้นตอนนี้:
```mermaid
flowchart TD
A[เขียนโค้ด] --> B[สร้างส่วนขยาย]
B --> C{ติดตั้งครั้งแรกไหม?}
C -->|ใช่| D[โหลดแบบไม่บรรจุ]
C -->|ไม่ใช่| E[รีโหลดส่วนขยาย]
D --> F[ทดสอบฟังก์ชัน]
E --> F
F --> G{ทำงานถูกต้องไหม?}
G -->|ไม่| H[ดีบักปัญหา]
G -->|ใช่| I[พร้อมสำหรับผู้ใช้]
H --> A
I --> J[เผยแพร่ในร้านค้า]
style A fill:#e1f5fe
style F fill:#e8f5e8
style I fill:#f3e5f5
style J fill:#fff3e0
```
```bash
# ขั้นตอนที่ 1: สร้างส่วนขยายของคุณ
npm run build
```
**คำสั่งนี้ทำอะไร:**
- **คอมไพล์** โค้ดต้นทางของคุณให้เป็นไฟล์ที่พร้อมใช้งานบนเบราว์เซอร์
- **รวมแพ็คเกจ** โมดูล JavaScript ให้เป็นชุดที่เหมาะสม
- **สร้าง** ไฟล์ส่วนขยายสุดท้ายในโฟลเดอร์ `/dist`
- **เตรียม** ส่วนขยายของคุณสำหรับการติดตั้งและทดสอบ
**ขั้นตอนที่ 2: ไปยังส่วนขยายของเบราว์เซอร์**
1. **เปิด** หน้าจอจัดการส่วนขยายของเบราว์เซอร์
2. **คลิก** ปุ่ม "การตั้งค่าและอื่น ๆ" (ไอคอน `...`) ที่มุมขวาบน
3. **เลือก** "ส่วนขยาย" จากเมนูเลื่อนลง
**ขั้นตอนที่ 3: โหลดส่วนขยายของคุณ**
- **สำหรับการติดตั้งใหม่**: เลือก `load unpacked` และเลือกโฟลเดอร์ `/dist` ของคุณ
- **สำหรับการอัปเดต**: คลิก `reload` ข้างส่วนขยายที่ติดตั้งอยู่แล้ว
- **สำหรับการทดสอบ**: เปิดใช้งาน "โหมดนักพัฒนา" เพื่อเข้าถึงฟีเจอร์ดีบักเพิ่มเติม
### การติดตั้งส่วนขยายในสภาพแวดล้อมการผลิต
> ✅ **หมายเหตุ**: คำแนะนำการพัฒนาเหล่านี้ใช้เฉพาะกับส่วนขยายที่คุณสร้างเอง หากต้องการติดตั้งส่วนขยายที่เผยแพร่แล้ว ให้ไปที่ร้านค้าอย่างเป็นทางการของเบราว์เซอร์ เช่น [Microsoft Edge Add-ons store](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home)
**ทำความเข้าใจความแตกต่าง:**
- **การติดตั้งระหว่างพัฒนา** ช่วยให้ทดสอบส่วนขยายที่ยังไม่เผยแพร่ระหว่างพัฒนา
- **การติดตั้งจากร้านค้า** ให้ส่วนขยายที่ได้รับการตรวจสอบและอัปเดตอัตโนมัติ
- **การติดตั้งแบบ sideloading** อนุญาตติดตั้งส่วนขยายจากภายนอกร้านค้าอย่างเป็นทางการ (ต้องเปิดโหมดนักพัฒนา)
## สร้างส่วนขยายรอยเท้าคาร์บอนของคุณ
เราจะสร้างส่วนขยายเบราว์เซอร์ที่แสดงรอยเท้าคาร์บอนของการใช้พลังงานในพื้นที่ของคุณ โครงการนี้แสดงแนวคิดการพัฒนาส่วนขยายที่สำคัญพร้อมสร้างเครื่องมือที่ใช้งานได้จริงเพื่อความตระหนักด้านสิ่งแวดล้อม
วิธีนี้สอดคล้องกับหลักการ "เรียนรู้ด้วยการลงมือทำ" ที่ได้รับการพิสูจน์แล้วว่ามีประสิทธิภาพตั้งแต่ทฤษฎีการศึกษาโดย John Dewey — ผสมผสานทักษะทางเทคนิคกับการประยุกต์ใช้จริงที่มีความหมาย
### ข้อกำหนดของโครงการ
ก่อนเริ่มพัฒนา ให้รวบรวมทรัพยากรและ dependencies ที่จำเป็น:
**การเข้าถึง API ที่ต้องการ:**
- **[กุญแจ API ของ CO2 Signal](https://www.co2signal.com/)**: ป้อนที่อยู่อีเมลของคุณเพื่อรับกุญแจ API ฟรี
- **[รหัสภูมิภาค](http://api.electricitymap.org/v3/zones)**: ค้นหารหัสภูมิภาคของคุณโดยใช้ [Electricity Map](https://www.electricitymap.org/map) (เช่น Boston ใช้รหัส 'US-NEISO')
**เครื่องมือพัฒนา:**
- **[Node.js และ NPM](https://www.npmjs.com)**: เครื่องมือจัดการแพ็คเกจสำหรับติดตั้ง dependencies ของโปรเจกต์
- **[โค้ดเริ่มต้น](../../../../5-browser-extension/start)**: ดาวน์โหลดโฟลเดอร์ `start` เพื่อเริ่มพัฒนา
✅ **เรียนรู้เพิ่มเติม**: พัฒนาทักษะการจัดการแพ็คเกจของคุณด้วย [โมดูล Learn ที่ครอบคลุมนี้](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
### เข้าใจโครงสร้างโปรเจกต์
การเข้าใจโครงสร้างโปรเจกต์ช่วยจัดระเบียบงานพัฒนาอย่างมีประสิทธิภาพ เช่นเดียวกับที่หอสมุดอเล็กซานเดรียถูกจัดระเบียบเพื่อการเข้าถึงความรู้ได้ง่าย ฐานโค้ดที่มีโครงสร้างดีช่วยให้การพัฒนามีประสิทธิภาพมากขึ้น:
```
project-root/
├── dist/ # Built extension files
│ ├── manifest.json # Extension configuration
│ ├── index.html # User interface markup
│ ├── background.js # Background script functionality
│ └── main.js # Compiled JavaScript bundle
├── src/ # Source development files
│ └── index.js # Your main JavaScript code
├── package.json # Project dependencies and scripts
└── webpack.config.js # Build configuration
```
**อธิบายว่าแต่ละไฟล์ทำอะไร:**
- **`manifest.json`**: **กำหนด** เมตาดาต้าส่วนขยาย, สิทธิ์ และจุดเริ่มต้น
- **`index.html`**: **สร้าง** อินเทอร์เฟซผู้ใช้ที่ปรากฏเมื่อผู้ใช้คลิกส่วนขยายของคุณ
- **`background.js`**: **จัดการ** งานเบื้องหลังและตัวฟังเหตุการณ์ของเบราว์เซอร์
- **`main.js`**: **เก็บ** โค้ด JavaScript ที่ถูกบันเดิลหลังขั้นตอน build
- **`src/index.js`**: **เป็นที่เก็บ** โค้ดหลักที่คุณพัฒนาและถูกคอมไพล์เข้าสู่ `main.js`
> 💡 **เคล็ดลับการจัดองค์กร**: เก็บกุญแจ API และรหัสภูมิภาคในโน้ตที่ปลอดภัยเพื่อใช้อ้างอิงง่ายในระหว่างพัฒนา คุณจะต้องใช้ค่านี้เพื่อตรวจสอบฟังก์ชันส่วนขยายของคุณ
✅ **หมายเหตุความปลอดภัย**: อย่าคอมมิตกุญแจ API หรือข้อมูลลับเข้าในที่เก็บโค้ด เราจะแสดงวิธีจัดการข้อมูลนี้อย่างปลอดภัยในขั้นตอนถัดไป
## สร้างอินเทอร์เฟซส่วนขยาย
ตอนนี้เราจะสร้างส่วนประกอบอินเตอร์เฟซผู้ใช้ ส่วนขยายใช้วิธีสองหน้าจอ: หน้าจอการตั้งค่าสำหรับการตั้งค่าเริ่มต้น และหน้าจอผลลัพธ์สำหรับแสดงข้อมูล
นี้สอดคล้องกับหลักการเปิดเผยข้อมูลแบบก้าวหน้าที่ใช้ในการออกแบบอินเทอร์เฟซตั้งแต่ยุคแรกของการคอมพิวเตอร์ — แสดงข้อมูลและตัวเลือกตามลำดับเหตุผลเพื่อลดความสับสนให้กับผู้ใช้
### ภาพรวมมุมมองส่วนขยาย
**มุมมองการตั้งค่า** - การตั้งค่าสำหรับผู้ใช้ครั้งแรก:
**มุมมองผลลัพธ์** - แสดงข้อมูลรอยเท้าคาร์บอน:
### สร้างฟอร์มการตั้งค่า
ฟอร์มการตั้งค่ารวบรวมข้อมูลการตั้งค่าของผู้ใช้ในครั้งแรก เมื่อตั้งค่าแล้ว ข้อมูลนี้จะถูกเก็บไว้ในที่เก็บข้อมูลเบราว์เซอร์สำหรับการใช้งานครั้งถัดไป
ในไฟล์ `/dist/index.html` ให้เพิ่มโครงสร้างฟอร์มนี้:
```html
```
**นี่คือสิ่งที่ฟอร์มนี้ทำได้:**
- **สร้าง** โครงสร้างฟอร์มที่มีความหมายพร้อมป้ายกำกับและความสัมพันธ์กับอินพุตอย่างเหมาะสม
- **เปิดใช้งาน** ฟีเจอร์ autocomplete ของเบราว์เซอร์เพื่อประสบการณ์ผู้ใช้ที่ดีขึ้น
- **กำหนดให้** ทั้งสองช่องต้องกรอกก่อนส่งฟอร์มด้วยแอตทริบิวต์ `required`
- **จัดระเบียบ** อินพุตด้วยชื่อคลาสที่สื่อความหมายเพื่อสะดวกในการจัดสไตล์และเขียน JavaScript
- **ให้คำแนะนำ** ชัดเจนสำหรับผู้ใช้ที่กำลังตั้งค่าส่วนขยายเป็นครั้งแรก
### สร้างส่วนแสดงผลลัพธ์
ถัดไป สร้างพื้นที่แสดงผลลัพธ์ ที่จะแสดงข้อมูลรอยเท้าคาร์บอน เพิ่ม HTML นี้ใต้ฟอร์ม:
```html
loading...
Region:
Carbon Usage:
Fossil Fuel Percentage:
```
**รายละเอียดว่าโครงสร้างนี้ให้สิ่งใด:**
- **`loading`**: **แสดง** ข้อความกำลังโหลดระหว่างรอข้อมูลจาก API
- **`errors`**: **แสดง** ข้อความผิดพลาดหากเรียก API ล้มเหลวหรือข้อมูลไม่ถูกต้อง
- **`data`**: **เก็บ** ข้อมูลดิบเพื่อช่วยในการดีบักในระหว่างพัฒนา
- **`result-container`**: **แสดง** ข้อมูลรอยเท้าคาร์บอนที่จัดรูปแบบแล้วให้ผู้ใช้ดู
- **`clear-btn`**: **อนุญาต** ให้ผู้ใช้เปลี่ยนภูมิภาคและตั้งค่าส่วนขยายใหม่ได้
### ตั้งค่ากระบวนการ Build
ตอนนี้มาติดตั้ง dependencies ของโปรเจกต์และทดสอบกระบวนการ build:
```bash
npm install
```
**กระบวนการติดตั้งนี้ทำอะไรได้:**
- **ดาวน์โหลด** Webpack และ dependencies อื่น ๆ ที่ระบุใน `package.json`
- **ตั้งค่า** เครื่องมือ build สำหรับคอมไพล์ JavaScript สมัยใหม่
- **เตรียม** สภาพแวดล้อมการพัฒนาสำหรับการสร้างและทดสอบส่วนขยาย
- **เปิดใช้งาน** ฟีเจอร์รวมโค้ด, ปรับแต่ง และรองรับการทำงานข้ามเบราว์เซอร์
> 💡 **ข้อมูลเชิงลึกกระบวนการ Build**: Webpack รวมโค้ดของคุณจาก `/src/index.js` ไปยัง `/dist/main.js` กระบวนการนี้เพิ่มประสิทธิภาพโค้ดของคุณสำหรับการผลิตและรับประกันความเข้ากันได้กับเบราว์เซอร์
### ทดสอบความคืบหน้าของคุณ
ณ จุดนี้คุณสามารถทดสอบส่วนขยายของคุณได้:
1. **รัน** คำสั่ง build เพื่อคอมไพล์โค้ดของคุณ
2. **โหลด** ส่วนขยายลงในเบราว์เซอร์ของคุณโดยใช้โหมดนักพัฒนา
3. **ตรวจสอบ** แบบฟอร์มว่าปรากฏอย่างถูกต้องและดูเป็นมืออาชีพ
4. **ตรวจเช็ก** ว่าส่วนประกอบของแบบฟอร์มทั้งหมดจัดวางอย่างถูกต้องและทำงานได้ดี
**สิ่งที่คุณทำสำเร็จ:**
- **สร้าง** โครงสร้าง HTML พื้นฐานสำหรับส่วนขยายของคุณ
- **สร้าง** อินเทอร์เฟซทั้งส่วนการตั้งค่าและผลลัพธ์ด้วยมาร์กอัปเชิงความหมายที่เหมาะสม
- **ตั้งค่า** กระบวนการพัฒนาที่ทันสมัยโดยใช้เครื่องมือมาตรฐานในอุตสาหกรรม
- **เตรียม** รากฐานสำหรับการเพิ่มฟังก์ชันการทำงาน JavaScript ที่ตอบสนองได้
### 🔄 **ตรวจสอบความเข้าใจเชิงการสอน**
**ความคืบหน้าการพัฒนาส่วนขยาย:** ตรวจสอบความเข้าใจก่อนดำเนินการต่อ:
- ✅ คุณอธิบายจุดประสงค์ของแต่ละไฟล์ในโครงสร้างโปรเจกต์ได้หรือไม่?
- ✅ คุณเข้าใจกระบวนการ build ว่าแปลงโค้ดยังไงหรือไม่?
- ✅ ทำไมเราถึงแยกส่วนตั้งค่าและผลลัพธ์เป็นส่วนติดต่อผู้ใช้แยกกัน?
- ✅ โครงสร้างแบบฟอร์มสนับสนุนทั้งการใช้งานและการเข้าถึงได้อย่างไร?
**ความเข้าใจกระบวนการพัฒนา:** ตอนนี้คุณควรจะสามารถ:
1. **แก้ไข** HTML และ CSS สำหรับอินเทอร์เฟซส่วนขยายของคุณ
2. **รัน** คำสั่ง build เพื่อคอมไพล์การเปลี่ยนแปลง
3. **รีโหลด** ส่วนขยายในเบราว์เซอร์ของคุณเพื่อลองทดสอบการอัปเดต
4. **ดีบัก** ปัญหาโดยใช้เครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์
คุณได้ทำขั้นตอนแรกของการพัฒนาส่วนขยายเบราว์เซอร์เสร็จสมบูรณ์แล้ว เช่นเดียวกับที่พี่น้องไรท์ต้องเข้าใจเรื่องพลศาสตร์การบินก่อนจะประสบความสำเร็จในการบิน ความเข้าใจพื้นฐานเหล่านี้จะเตรียมคุณสำหรับการสร้างฟีเจอร์โต้ตอบที่ซับซ้อนยิ่งขึ้นในบทเรียนต่อไป
## ความท้าทาย GitHub Copilot Agent 🚀
ใช้โหมด Agent เพื่อทำความท้าทายดังต่อไปนี้:
**คำอธิบาย:** ปรับปรุงส่วนขยายเบราว์เซอร์โดยเพิ่มฟังก์ชันการตรวจสอบฟอร์มและฟีดแบคผู้ใช้ เพื่อปรับปรุงประสบการณ์ผู้ใช้เมื่อกรอกคีย์ API และรหัสภูมิภาค
**คำสั่ง:** สร้างฟังก์ชันตรวจสอบใน JavaScript ที่ตรวจว่าฟิลด์คีย์ API มีอย่างน้อย 20 ตัวอักษรหรือไม่ และรหัสภูมิภาคเป็นรูปแบบที่ถูกต้อง (เช่น 'US-NEISO') เพิ่มฟีดแบคทางสายตาโดยเปลี่ยนสีขอบช่องป้อนข้อมูลเป็นสีเขียวสำหรับข้อมูลที่ถูกต้อง และสีแดงสำหรับข้อมูลที่ไม่ถูกต้อง พร้อมทั้งเพิ่มฟังก์ชันสลับการแสดง/ซ่อนคีย์ API เพื่อความปลอดภัย
เรียนรู้เพิ่มเติมเกี่ยวกับ [โหมด agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ได้ที่นี่
## 🚀 ความท้าทาย
ดูที่ร้านส่วนขยายเบราว์เซอร์ และติดตั้งส่วนขยายหนึ่งในเบราว์เซอร์ของคุณ คุณสามารถตรวจสอบไฟล์ของมันในหลายวิธีที่น่าสนใจ คุณค้นพบอะไรบ้าง?
## แบบทดสอบหลังเรียน
[แบบทดสอบหลังเรียน](https://ff-quizzes.netlify.app/web/quiz/24)
## ทบทวน & ศึกษาด้วยตนเอง
ในบทเรียนนี้คุณได้เรียนรู้เล็กน้อยเกี่ยวกับประวัติของเว็บเบราว์เซอร์ ใช้โอกาสนี้เรียนรู้เกี่ยวกับวิธีที่ผู้ประดิษฐ์ World Wide Web มองเห็นการใช้งานโดยอ่านเพิ่มเติมเกี่ยวกับประวัติของมัน เว็บไซต์ที่มีประโยชน์ได้แก่:
[ประวัติของเว็บเบราว์เซอร์](https://www.mozilla.org/firefox/browsers/browser-history/)
[ประวัติของเว็บ](https://webfoundation.org/about/vision/history-of-the-web/)
[บทสัมภาษณ์กับ Tim Berners-Lee](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
### ⚡ **สิ่งที่คุณทำได้ใน 5 นาทีข้างหน้า**
- [ ] เปิดหน้าส่วนขยาย Chrome/Edge (chrome://extensions) และสำรวจส่วนขยายที่ติดตั้งอยู่
- [ ] ดูแท็บ Network ใน DevTools ของเบราว์เซอร์ขณะโหลดหน้าเว็บ
- [ ] ลองดูซอร์สโค้ดหน้า (Ctrl+U) เพื่อดูโครงสร้าง HTML
- [ ] ตรวจสอบองค์ประกอบหน้าเว็บใด ๆ และแก้ไข CSS ใน DevTools
### 🎯 **สิ่งที่คุณทำได้ในชั่วโมงนี้**
- [ ] ทำแบบทดสอบหลังบทเรียนให้เสร็จและเข้าใจพื้นฐานเบราว์เซอร์
- [ ] สร้างไฟล์ manifest.json พื้นฐานสำหรับส่วนขยายเบราว์เซอร์
- [ ] สร้างส่วนขยาย "Hello World" ง่าย ๆ ที่แสดงป็อปอัป
- [ ] ทดสอบการโหลดส่วนขยายของคุณในโหมดนักพัฒนา
- [ ] สำรวจเอกสารส่วนขยายเบราว์เซอร์สำหรับเบราว์เซอร์เป้าหมายของคุณ
### 📅 **เส้นทางการพัฒนาส่วนขยายของคุณตลอดสัปดาห์**
- [ ] พัฒนาส่วนขยายเบราว์เซอร์ที่ใช้งานได้จริง
- [ ] เรียนรู้เกี่ยวกับสคริปต์เนื้อหา สคริปต์แบ็คกราวด์ และการโต้ตอบป็อปอัป
- [ ] เชี่ยวชาญ API ของเบราว์เซอร์ เช่น การจัดเก็บ เว็บแท็บ และการส่งข้อความ
- [ ] ออกแบบอินเทอร์เฟซที่ใช้งานง่ายสำหรับส่วนขยายของคุณ
- [ ] ทดสอบส่วนขยายของคุณบนเว็บไซต์และสถานการณ์ต่าง ๆ
- [ ] เผยแพร่ส่วนขยายของคุณไปยังร้านค้าส่วนขยายของเบราว์เซอร์
### 🌟 **เส้นเวลาการพัฒนาเบราว์เซอร์ของคุณในเดือนหนึ่ง**
- [ ] สร้างส่วนขยายหลายตัวเพื่อแก้ปัญหาผู้ใช้ที่แตกต่างกัน
- [ ] เรียนรู้ API เบราว์เซอร์ขั้นสูงและแนวทางปฏิบัติด้านความปลอดภัยที่ดีที่สุด
- [ ] มีส่วนร่วมในโปรเจกต์ส่วนขยายเบราว์เซอร์โอเพนซอร์ส
- [ ] เชี่ยวชาญความเข้ากันได้ข้ามเบราว์เซอร์และการปรับปรุงแบบก้าวหน้า
- [ ] สร้างเครื่องมือและเทมเพลตสำหรับการพัฒนาส่วนขยายสำหรับผู้อื่น
- [ ] เป็นผู้เชี่ยวชาญด้านส่วนขยายเบราว์เซอร์ที่ช่วยเหลือนักพัฒนารายอื่น
## 🎯 เส้นเวลาการเชี่ยวชาญส่วนขยายเบราว์เซอร์ของคุณ
```mermaid
timeline
title ความก้าวหน้าการพัฒนาเบราว์เซอร์ส่วนขยาย
section พื้นฐาน (15 นาที)
Browser Understanding: สถาปัตยกรรมหลัก
: กระบวนการเรนเดอร์
: จุดเชื่อมต่อส่วนขยาย
section การตั้งค่า (20 นาที)
Development Environment: โครงสร้างโครงการ
: การตั้งค่าเครื่องมือสร้าง
: โหมดนักพัฒนาเบราว์เซอร์
: กระบวนการโหลดส่วนขยาย
section การออกแบบอินเทอร์เฟซ (25 นาที)
User Experience: โครงสร้าง HTML
: การจัดรูปแบบ CSS
: การตรวจสอบฟอร์ม
: การออกแบบตอบสนอง
section ฟังก์ชันหลัก (35 นาที)
JavaScript Integration: การจัดการเหตุการณ์
: การโต้ตอบ API
: การจัดเก็บข้อมูล
: การจัดการข้อผิดพลาด
section API เบราว์เซอร์ (45 นาที)
Platform Integration: ระบบสิทธิ์
: API การจัดเก็บ
: การจัดการแท็บ
: เมนูบริบท
section ฟีเจอร์ขั้นสูง (1 สัปดาห์)
Professional Extensions: สคริปต์เบื้องหลัง
: สคริปต์เนื้อหา
: ความเข้ากันได้ข้ามเบราว์เซอร์
: การปรับประสิทธิภาพ
section การเผยแพร่ (2 สัปดาห์)
Distribution: การส่งเข้าร้านค้า
: กระบวนการตรวจสอบ
: ข้อมูลย้อนกลับจากผู้ใช้
: การจัดการการอัปเดต
section ระดับผู้เชี่ยวชาญ (1 เดือน)
Extension Ecosystem: API ขั้นสูง
: แนวปฏิบัติที่ดีที่สุดด้านความปลอดภัย
: ฟีเจอร์องค์กร
: การรวมเฟรมเวิร์ก
```
### 🛠️ สรุปชุดเครื่องมือพัฒนาส่วนขยายของคุณ
หลังจากเรียนบทนี้เสร็จ คุณจะมี:
- **ความรู้โครงสร้างเบราว์เซอร์**: เข้าใจเอนจินเรนเดอร์ รูปแบบความปลอดภัย และการรวมส่วนขยาย
- **สภาพแวดล้อมการพัฒนา**: ชุดเครื่องมือสมัยใหม่พร้อม Webpack, NPM และความสามารถในการดีบัก
- **พื้นฐาน UI/UX**: โครงสร้าง HTML เชิงความหมายพร้อมรูปแบบการเปิดเผยข้อมูลแบบก้าวหน้า
- **ความตระหนักด้านความปลอดภัย**: เข้าใจสิทธิ์การเข้าถึงเบราว์เซอร์และแนวทางการพัฒนาที่ปลอดภัย
- **แนวคิดข้ามเบราว์เซอร์**: ความรู้เกี่ยวกับความเข้ากันได้และวิธีการทดสอบ
- **การผสานรวม API**: พื้นฐานการทำงานกับแหล่งข้อมูลภายนอก
- **กระบวนการทำงานระดับมืออาชีพ**: ขั้นตอนการพัฒนาและการทดสอบตามมาตรฐานอุตสาหกรรม
**การใช้งานจริง:** ทักษะเหล่านี้ใช้ได้กับ:
- **การพัฒนาเว็บ**: แอปหน้าเดียวและเว็บแอปแบบก้าวหน้า
- **แอปเดสก์ท็อป**: Electron และซอฟต์แวร์เดสก์ท็อปที่ใช้เว็บ
- **การพัฒนาบนอุปกรณ์เคลื่อนที่**: แอปไฮบริดและโซลูชันเว็บบนมือถือ
- **เครื่องมือองค์กร**: แอปผลิตภาพภายในและระบบอัตโนมัติของเวิร์กโฟลว์
- **โอเพนซอร์ส**: มีส่วนร่วมในโปรเจกต์ส่วนขยายเบราว์เซอร์และมาตรฐานเว็บ
**ระดับถัดไป:** คุณพร้อมที่จะเพิ่มฟังก์ชันการโต้ตอบ ทำงานกับ API ของเบราว์เซอร์ และสร้างส่วนขยายที่แก้ปัญหาจริงของผู้ใช้!
## การบ้าน
[เปลี่ยนสไตล์ส่วนขยายของคุณ](assignment.md)
---
**ข้อจำกัดความรับผิดชอบ**:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาอัตโนมัติ [Co-op Translator](https://github.com/Azure/co-op-translator) ถึงแม้เราจะพยายามให้มีความถูกต้อง โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นฉบับถือเป็นแหล่งข้อมูลที่เชื่อถือได้ หากเป็นข้อมูลที่สำคัญ ควรใช้การแปลโดยนักแปลมืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดที่เกิดจากการใช้การแปลนี้