f490c63632
Add manifest.json, sidepanel components, and scripts. Include project assets and documentation files. Remove placeholder blank file.
153 lines
7.5 KiB
Markdown
153 lines
7.5 KiB
Markdown
# Auto Cover Generator - Chrome Extension
|
|
|
|
## 🎨 คำอธิบาย
|
|
|
|
Extension สำหรับ Google Chrome ที่ช่วยสร้างหน้าปกข่าว/Youtube แบบอัตโนมัติด้วย Gemini AI โดยไม่ต้องใช้ API Key
|
|
|
|
## ✨ ฟีเจอร์
|
|
|
|
- 📱 **Side Panel** - แสดงผลด้านขวาของหน้า Gemini
|
|
- 🎭 **เลือกสไตล์ปก** - ข่าวด่วน, ข่าวการเมือง, โปสเตอร์ภาพยนต์, ดราม่า, แอคชั่น
|
|
- 📐 **เลือกขนาด** - 1:1, 3:4, 4:3, 2:3, 9:16, 16:9
|
|
- ✍️ **ปรับแต่งตัวหนังสือ** - 3D, ตัวหนา, มีเส้นขอบ
|
|
- 🎨 **กำหนดสี** - สีพื้นหลังข้อความ, สีเส้นขอบ
|
|
- 🖼️ **อัปโหลดรูปภาพ** - Drag & Drop หรือเลือกไฟล์
|
|
- 🤖 **สร้าง Prompt อัตโนมัติ** - ระบบสร้าง prompt ที่เหมาะสมตามการตั้งค่า
|
|
- 💾 **ดาวน์โหลด** - บันทึกรูปที่สร้างเสร็จลง Downloads
|
|
|
|
## 📦 การติดตั้ง
|
|
|
|
### วิธีที่ 1: โหลด Extension แบบ Unpacked (สำหรับพัฒนา/ทดสอบ)
|
|
|
|
1. เปิด Chrome แล้วไปที่ `chrome://extensions/`
|
|
2. เปิด **Developer mode** ที่มุมขวาบน
|
|
3. คลิก **Load unpacked**
|
|
4. เลือกโฟลเดอร์ `auto-cover-extension`
|
|
5. Extension จะถูกติดตั้งและพร้อมใช้งาน
|
|
|
|
### วิธีที่ 2: สร้าง Icons (ถ้าต้องการ)
|
|
|
|
1. เปิดไฟล์ `icons/create-icons.html` ในเบราว์เซอร์
|
|
2. รอให้ไฟล์ icon ดาวน์โหลดอัตโนมัติ (icon16.png, icon48.png, icon128.png)
|
|
3. ย้ายไฟล์ไปไว้ในโฟลเดอร์ `icons/`
|
|
|
|
หรือใช้ไอคอนชั่วคราวที่มีอยู่แล้ว
|
|
|
|
## 🚀 วิธีใช้งาน
|
|
|
|
1. **เปิดหน้า Gemini**
|
|
- ไปที่ https://gemini.google.com
|
|
- Extension จะเปิด Side Panel อัตโนมัติ
|
|
|
|
2. **อัปโหลดรูปภาพ**
|
|
- ลากไฟล์มาวางในพื้นที่อัปโหลด
|
|
- หรือคลิกเพื่อเลือกไฟล์
|
|
|
|
3. **เลือกสไตล์และขนาด**
|
|
- คลิกเลือกสไตล์ที่ต้องการ (ข่าวด่วน, การเมือง, ฯลฯ)
|
|
- เลือกขนาดหน้าปก (16:9, 1:1, ฯลฯ)
|
|
|
|
4. **ปรับแต่งข้อความ** (ถ้าต้องการ)
|
|
- พิมพ์หัวข้อข่าว
|
|
- เลือกสไตล์ตัวหนังสือ (ปกติ, ตัวหนา, 3D, มีเส้นขอบ)
|
|
- กำหนดสีพื้นหลังและสีเส้นขอบ
|
|
- หรือติ๊กเอาออกถ้าไม่ต้องการข้อความ
|
|
|
|
5. **เพิ่ม Prompt เพิ่มเติม** (ถ้ามี)
|
|
- พิมพ์รายละเอียดเพิ่มเติมที่ต้องการ
|
|
|
|
6. **สร้างหน้าปก**
|
|
- คลิกปุ่ม **"สร้างหน้าปก"**
|
|
- ระบบจะส่ง prompt ไปยัง Gemini อัตโนมัติ
|
|
- รอ Gemini สร้างรูปภาพ
|
|
|
|
7. **ดาวน์โหลด**
|
|
- เมื่อรูปสร้างเสร็จ คลิกปุ่ม **"ดาวน์โหลด"**
|
|
- รูปจะถูกบันทึกลงโฟลเดอร์ Downloads
|
|
|
|
## 🎯 ตัวอย่างสไตล์
|
|
|
|
### ข่าวด่วน (Breaking News)
|
|
- ธีมสีแดงเร่งด่วน
|
|
- ตัวหนังสือโดดเด่น
|
|
- บรรยากาศเร้าใจ
|
|
|
|
### ข่าวการเมือง (Political)
|
|
- ธีมสีน้ำเงินเป็นทางการ
|
|
- ดีไซน์มืออาชีพ
|
|
- บรรยากาศจริงจัง
|
|
|
|
### โปสเตอร์ภาพยนต์ (Movie Poster)
|
|
- สไตล์ซีเนมาติก
|
|
- แสงเงาดราม่า
|
|
- ดีไซน์แบบ Hollywood
|
|
|
|
### ดราม่า (Drama)
|
|
- บรรยากาศอารมณ์
|
|
- สีโทนอบอุ่น
|
|
- เน้นตัวละคร
|
|
|
|
### แอคชั่น (Action)
|
|
- องค์ประกอบระเบิด
|
|
- พลังงานสูง
|
|
- สีสันเข้มข้น
|
|
|
|
## 🛠️ โครงสร้างโปรเจค
|
|
|
|
```
|
|
auto-cover-extension/
|
|
├── manifest.json # Extension configuration
|
|
├── icons/ # Extension icons
|
|
│ ├── icon16.png
|
|
│ ├── icon48.png
|
|
│ ├── icon128.png
|
|
│ └── create-icons.html
|
|
├── sidepanel/ # Side panel UI
|
|
│ ├── panel.html
|
|
│ ├── panel.css
|
|
│ └── panel.js
|
|
└── scripts/ # Background & content scripts
|
|
├── background.js
|
|
└── content.js
|
|
```
|
|
|
|
## ⚙️ เทคโนโลยี
|
|
|
|
- **Manifest V3** - Chrome Extension API ล่าสุด
|
|
- **Side Panel API** - แสดงผล UI ด้านข้าง
|
|
- **Content Scripts** - โต้ตอบกับหน้า Gemini
|
|
- **Chrome Storage API** - บันทึกการตั้งค่า
|
|
- **Chrome Downloads API** - ดาวน์โหลดรูปภาพ
|
|
|
|
## 📝 หมายเหตุ
|
|
|
|
- Extension ต้องใช้งานบนหน้า https://gemini.google.com เท่านั้น
|
|
- ต้องเข้าสู่ระบบ Google Account ที่มีสิทธิ์ใช้ Gemini
|
|
- การสร้างรูปภาพขึ้นอยู่กับความสามารถของ Gemini
|
|
- DOM selectors อาจต้องปรับปรุงถ้า Gemini เปลี่ยนโครงสร้างหน้าเว็บ
|
|
|
|
## 🐛 การแก้ไขปัญหา
|
|
|
|
### Extension ไม่แสดง Side Panel
|
|
- ตรวจสอบว่าอยู่ในหน้า gemini.google.com
|
|
- ลองคลิกที่ไอคอน Extension
|
|
- Reload หน้าเว็บ
|
|
|
|
### ไม่สามารถส่ง Prompt ได้
|
|
- ตรวจสอบว่า Gemini โหลดเสร็จแล้ว
|
|
- ลองรีเฟรชหน้าเว็บ
|
|
- เช็ค Console สำหรับ error messages
|
|
|
|
### รูปภาพไม่ถูกดาวน์โหลด
|
|
- ตรวจสอบว่า Gemini สร้างรูปเสร็จแล้ว
|
|
- ตรวจสอบ permissions ของ Chrome
|
|
- ลองคลิกขวาที่รูปแล้ว Save Image As
|
|
|
|
## 📄 License
|
|
|
|
MIT License - ใช้งานได้อย่างอิสระ
|
|
|
|
## 👨💻 ผู้พัฒนา
|
|
|
|
สร้างด้วย ❤️ โดยใช้ Gemini AI
|