ค้นหาเว็บไซต์

reactjs - วิธีตั้งค่า extension ของ Chrome โดยใช้ React และ TypeScript พร้อมหน้าหลายหน้าและจุดเข้าใช้งานหลายจุด?

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

นี่คือข้อกำหนด:

หลาย "เว็บแอปพลิเคชันหน้าเดียว":

1) popup.html สำหรับหน้าป๊อปอัพของส่วนขยาย

2) options.html สำหรับหน้าตัวเลือก

3) custom.html นี่คือไฟล์ .html แบบกำหนดเองที่ส่วนขยายสามารถอ้างอิงได้แบบ "ภายในเครื่อง"

แต่ละไฟล์เหล่านี้เป็นจุดเริ่มต้นสำหรับ React ในการจัดการ DOM แต่พวกมันทำงานแยกจากกัน

ไฟล์ TypeScript แบบไม่ใช่ React

พวกมันต้องไม่ถูกรวมกับสคริปต์อื่นใด และต้องถูกคอมไพล์เป็นไฟล์ JavaScript ของตัวเอง เช่น background.ts ที่คอมไพล์เป็น background.js (ซึ่งถูกอ้างถึงใน manifest.json)

ฉันสมมติว่านี่สามารถทำได้ด้วย TypeScript, React และ Webpack แต่ฉันไม่แน่ใจว่าจะเริ่มต้นอย่างไร

คำตอบ #1

มีเทมเพลต CRA แบบกำหนดเองที่ตรงกับความต้องการของคุณอย่างแน่นอน: complex-browserext-typescript.

การใช้งาน :

npx create-react-app my-app --template complex-browserext-typescript

โดยค่าเริ่มต้น จะตั้งค่าจุดเข้า 4 จุดที่เกี่ยวข้องกับคอมโพเนนต์ส่วนขยายที่คล้ายกับหน้า:

  • ป๊อปอัพ (src/index.tsx) - หน้าป๊อปอัพของส่วนขยาย แทนที่จุดเริ่มต้น index เริ่มต้น
  • ตัวเลือก (src/options.tsx) - หน้าตัวเลือกของส่วนขยาย
  • พื้นหลัง (src/background.ts) - สคริปต์พื้นหลัง
  • content (src/content.ts) - สคริปต์เนื้อหา

อย่างไรก็ตาม มีตัวเลือกที่จะยกเว้นส่วนประกอบใด ๆ ข้างต้น ยกเว้นป๊อปอัปจากการคอมไพล์ รวมถึงเพิ่มหน้า HTML เพิ่มเติมได้

ดูบทความนี้ด้วยสำหรับตัวอย่างการใช้งาน

คำตอบ #2

ฉันพบวิธีแก้ปัญหาแล้ว แต่ไม่ได้ใช้ create-react-app และ webpack ดูเหมือนว่า parcel จะรองรับหลายจุดเริ่มต้นได้โดยตรงโดยไม่ต้องตั้งค่าอะไร

สมมติโครงสร้างไดเรกทอรีแบบนี้:

├── chrome
│   └── background.ts
├── html
│   ├── custom.html
│   ├── options.html
│   └── popup.html
├── manifest.json
├── package.json
├── react
│   ├── custom.tsx
│   ├── options.tsx
│   └── popup.tsx

ด้วย Parcel.js คุณก็ทำได้ง่ายๆ ดังนี้:

parcel build html/*.html react/*.tsx chrome/*.ts

และมันจะจัดการจุดเข้าหลายจุดได้ ฉันสร้างที่เก็บข้อมูลที่มีเทมเพลตสำหรับแนวทางนั้น ซึ่งมีตัวอย่างที่สามารถรันได้เต็มรูปแบบ

บทความที่เกี่ยวข้อง