web extension starter

Web-Extension-Starter

การเริ่มต้นเว็บเพื่อสร้าง "เขียนเมื่อทำงานบนเบราว์เซอร์ใด ๆ " ส่วนขยาย

‍♂ ทำโดย @Abhijithvijayan

บริจาค: Paypal , Patreon

---

❤มัน? ️มันบน GitHub หรือทวีตเกี่ยวกับเรื่องนี้

? ‍♂ react + typescript = สาขานี้

- React + JavaScript = Checkout React-JavaScript Branch

- html + javascript = checkout master branch

คุณสมบัติ

• การสนับสนุน Cross Browser (Web-extensions API)
• เบราว์เซอร์
• การเปลี่ยนแปลงการสร้างรหัสอัตโนมัติบนรหัส
• แพ็คอัตโนมัติเบราว์เซอร์ไฟล์บิลด์เฉพาะ
• สไตล์เขี้ยว
• typescript โดยค่าเริ่มต้น
• สนับสนุนโมดูล ES6
• ตอบโต้ไลบรารี UI โดยค่าเริ่มต้น
• โหลดอย่างชาญฉลาด

การสนับสนุนเบราว์เซอร์

49 และใหม่กว่า✔	52 & ใหม่กว่า✔	36 และใหม่กว่า✔	79 และใหม่กว่า✔	ล่าสุด✔	ล่าสุด✔	ล่าสุด✔

ใช้โดยส่วนขยายในการผลิตที่มีผู้ใช้มากกว่า 100,000 คน

• Daily.dev ใน Daily.dev Extension
• Jiffy Reader ใน ansh/jiffyreader.com
• kutt-extension ใน Abhijithvijayan/kutt-extension
• doubanimdb ใน lisongx/doubanimdb
• ผู้ช่วย MOOC ใน UNBYTE/MOOC-Assistant
• artipub ใน crawlab-team/artipub

และอีกมากมาย ...

ใช้เทมเพลตนี้

สร้างไดเรกทอรีใหม่และเรียกใช้

 curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/react-typescript.tar.gz | tar -xz --strip-components=1

เริ่มต้นอย่างรวดเร็ว

ตรวจสอบให้แน่ใจว่าคุณมี

• ติดตั้ง node.js 10 หรือใหม่กว่า

จากนั้นเรียกใช้สิ่งต่อไปนี้:

• npm install เพื่อติดตั้งการพึ่งพา
• npm run dev:chrome เพื่อเริ่มการพัฒนาเซิร์ฟเวอร์สำหรับส่วนขยาย Chrome
• npm run dev:firefox เพื่อเริ่มเซิร์ฟเวอร์การพัฒนาสำหรับ firefox addon
• npm run dev:opera เพื่อเริ่มการพัฒนาเซิร์ฟเวอร์สำหรับส่วนขยายโอเปร่า
• npm run build:chrome เพื่อสร้างส่วนขยายโครเมี่ยม
• npm run build:firefox เพื่อสร้าง Addon Firefox
• npm run build:opera to Build Opera Extension
• npm run build Builds และ Packs Extensions ทั้งหมดในครั้งเดียวเพื่อขยาย/ ไดเรกทอรี

การพัฒนา

• npm install เพื่อติดตั้งการพึ่งพา

• เพื่อดูการเปลี่ยนแปลงไฟล์ในการพัฒนา

  • โครเมี่ยม
    • npm run dev:chrome
  • Firefox
    • npm run dev:firefox
  • โอเปร่า
    • npm run dev:opera

• โหลดส่วนขยายในเบราว์เซอร์

• โครเมี่ยม

  • ไปที่แถบที่อยู่เบราว์เซอร์และพิมพ์ chrome://extensions
  • ตรวจสอบปุ่ม Developer Mode เพื่อเปิดใช้งาน
  • คลิกที่ปุ่ม Load Unpacked Extension…
  • เลือกโฟลเดอร์เบราว์เซอร์ของคุณใน extension/

• Firefox

  • โหลด Add-on Via about:debugging เป็น Add-on ชั่วคราว
  • เลือกไฟล์ manifest.json ในไดเรกทอรีที่แยกออกมา

• โอเปร่า

  • โหลดส่วนขยายผ่าน opera:extensions
  • ตรวจสอบ Developer Mode และโหลดตามไดเรกทอรีสกัดของ Extension

การผลิต

• npm run build สร้างส่วนขยายสำหรับเบราว์เซอร์ทั้งหมดไปยังไดเรกทอรี extension/BROWSER ตามลำดับ

หมายเหตุ: โดยค่าเริ่มต้น manifest.json ถูกตั้งค่าด้วยเวอร์ชัน 0.0.0 WebPack Loader จะอัปเดตเวอร์ชันในบิลด์ด้วยรุ่น package.json ในการเปิดตัวเวอร์ชันใหม่ให้อัปเดตเวอร์ชันใน package.json และเรียกใช้สคริปต์

หากคุณไม่ต้องการใช้ package.json เวอร์ชันคุณสามารถปิดการใช้งานตัวเลือกได้ที่นี่

สร้างเบราว์เซอร์เฉพาะ manifest.json

อัปเดต source/manifest.json File ด้วยคำนำหน้าของผู้ขายเบราว์เซอร์

 {
  "__chrome__name" : "SuperChrome" ,
  "__firefox__name" : "SuperFox" ,
  "__edge__name" : "SuperEdge" ,
  "__opera__name" : "SuperOpera"
}

หากผู้ขายเป็น chrome นี้จะรวบรวมถึง:

 {
  "name" : "SuperChrome" ,
}

---

เพิ่มคีย์ให้กับผู้ขายหลายรายโดยแยกออกเป็น | ในคำนำหน้า

 {
  __chrome|opera__name: "SuperBlink"
}

หากผู้ขายเป็น chrome หรือ opera ให้คอมไพล์นี้เป็น:

 {
  "name": "SuperBlink"
}

ดูแพ็คเกจ readme ดั้งเดิมของ wext-manifest-loader สำหรับรายละเอียดเพิ่มเติม

ข้อบกพร่อง

โปรดยื่นปัญหาที่นี่สำหรับข้อบกพร่องเอกสารที่ขาดหายไปหรือพฤติกรรมที่ไม่คาดคิด

การกำหนดค่าผ้าสำลี & typeScript

• การกำหนดค่า ESLINT & PRETTIER ที่ใช้ร่วมกัน - @abhijithvijayan/eslint-config
• การกำหนดค่า TypeScript ที่ใช้ร่วมกัน - @abhijithvijayan/tsconfig

ใบอนุญาต

MIT © Abhijith Vijayan