Show HN: Tạo công cụ CLI tạo tiện ích mở rộng web mà không cần cấu hình build

(github.com/cezaraugusto)

4 điểm bởi GN⁺ 2024-05-02 | 1 bình luận | Chia sẻ qua WhatsApp

Giới thiệu Extension.js

Extension.js là công cụ phát triển tiện ích mở rộng đa trình duyệt theo kiểu plug-and-play, không cần cấu hình
Hỗ trợ TypeScript, WebAssembly, React và JavaScript hiện đại để có thể tạo extension đa trình duyệt

Tạo extension mới

Có thể tạo extension mới dễ dàng bằng các lệnh dưới đây
```
npx extension create my-extension
cd my-extension
npm run dev
```
Sau khi chạy lệnh, chỉ cần một phiên trình duyệt mới mở ra là bạn có thể bắt đầu phát triển ngay

Sử dụng Chrome Extension Samples

Có thể bắt đầu nhanh chóng bằng cách sử dụng các mẫu từ kho Chrome Extension Samples
1. Mở terminal
2. Di chuyển đến thư mục để tạo dự án
3. Chạy lệnh dưới đây
```
npx extension dev <sample-name>
```
- Thay thế <sample-name> bằng tên mẫu sẽ dùng từ Chrome Extension Samples

Ví dụ: yêu cầu mẫu page-redder

npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge

Sử dụng Chrome Extension Samples trên Microsoft Edge

Extension.js hỗ trợ nhiều trình duyệt, bao gồm Microsoft Edge
Cách bắt đầu extension tương thích Edge:
1. Mở terminal
2. Di chuyển đến thư mục dự án mong muốn
3. Chạy lệnh dưới đây
```
npx extension dev <sample-name> --browser=edge
```
- Thay thế <sample-name> bằng tên mẫu sẽ dùng

Ví dụ: chạy mẫu magic8ball trên Edge

npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge

Chạy tiện ích Mozilla trên Edge

Để giảm độ chênh lệch giữa Firefox và Edge, có thể chạy tiện ích Mozilla trên Edge
1. Di chuyển đến thư mục dự án
2. Sử dụng lệnh dưới đây
```
npx extension dev <addon-name> --browser=edge --polyfill=true
```
- Lấy tiện ích Mozilla để chỉnh sửa cho Edge

Ví dụ: chạy mẫu Apply CSS từ MDN WebExtensions Examples trên Edge

npx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true

Sử dụng Extension.js cho extension hiện có

Nếu extension hiện tại đã dùng trình quản lý gói, bạn có thể cài gói Extension.js và tạo script để chạy
1. Cài đặt extension với tư cách devDependency
```
npm install extension --save-dev
```
2. Liên kết script npm với lệnh Extension.js
```
{
  "scripts": {
    "build": "extension build", 
    "dev": "extension dev",
    "start": "extension start"  
  },
  "devDependencies": {
    "extension": "latest"
  }
}
```
Khi phát triển dùng npm run dev, cho chế độ production dùng npm run start, còn build production dùng npm run build

Sử dụng trình duyệt cụ thể khi phát triển

Trạng thái hỗ trợ trình duyệt trên máy tính để bàn

Brave	Chrome	Edge	Firefox	Opera	Safari	Vivaldi
☑️	✅	✅	⛔️	☑️	⛔️	☑️

☑️ = Khả năng hoạt động cao nhưng trình chạy trình duyệt chưa được hỗ trợ
Trạng thái hỗ trợ trình duyệt di động

Firefox Android	iOS Safari
⛔️	⛔️

Để target một trình duyệt cụ thể, truyền cờ --browser cho lệnh dev/start
- Ví dụ: npx extension dev path/to/extension --browser=edge
Mẹo: truyền --browser="all" để tải tất cả trình duyệt có thể dùng cùng lúc

Ý kiến GN⁺

Extension.js dường như là một công cụ mạnh để phát triển extension đa trình duyệt. Đặc biệt, nó có thể dùng ngay mà không cần cấu hình và dễ dàng hỗ trợ nhiều trình duyệt, có thể rút ngắn đáng kể thời gian phát triển.
Việc có thể tận dụng các mẫu có sẵn từ Chrome Extension Samples hoặc MDN WebExtensions Examples cũng là lợi thế lớn. Ngay cả lập trình viên mới cũng có thể bắt đầu dễ dàng.
Tuy vậy, một số trình duyệt như Firefox hay Safari có vẻ vẫn chưa được hỗ trợ hoàn toàn, nên cần lưu ý. Nếu chỉ nhắm tới một trình duyệt cụ thể, nên cân nhắc dùng công cụ phát triển riêng của trình duyệt đó.
Cũng tò mò muốn biết điểm mạnh, điểm yếu khi so sánh với các công cụ tương tự như Plasmo, WebExtensions API. Đặc biệt, cần kiểm tra khả năng hỗ trợ các đặc điểm mới nhất như Manifest V3.

1 bình luận

GN⁺ 2024-05-02

Bình luận Hacker News

Extension.js được giới thiệu như một framework hữu ích để phát triển extension Chrome
- Hiện tại việc hỗ trợ Firefox chưa hoàn thiện
Nhiều nhà phát triển khác cũng chia sẻ đã từng gặp khó khăn khi làm extension Chrome
- Đặc biệt, việc áp dụng CSS gặp nhiều trở ngại
- Mọi người kỳ vọng Extension.js sẽ giúp giải quyết các khó khăn này
README của Extension.js cũng nhận được lời khen vì tài liệu rõ ràng
Một lập trình viên từng chần chừ khi thêm extension vào ứng dụng vì độ phức tạp của Google Play cũng đang cân nhắc dùng Extension.js
Có ý kiến cho rằng Extension.js nên tích hợp luôn tính năng giao tiếp giữa extension và tab
- Trước đó việc đọc từ DOM hoặc gửi tin nhắn từ extension tới tab đang active rất bất tiện
Có câu hỏi về so sánh với các framework tương tự như Plasmo
Có nhắc tới hiện tượng "imposter syndrome" khi phát triển extension Chrome
- Tạo dự án mới gặp khó khăn
- Mọi người kỳ vọng Extension.js sẽ giúp xoá gọn được điều này
Ý kiến cho rằng phần hỗ trợ Safari sẽ khá dễ dàng nếu dùng CLI safari-web-extension-converter
Dựa trên kinh nghiệm từng phát triển extension Chrome, có người bày tỏ tò mò về lợi thế của Extension.js
- Nó có gì hơn việc chỉ sao chép file?
- Hỗ trợ đa trình duyệt không? Hỗ trợ đa ngôn ngữ không?
Nhà phát triển đã bày tỏ kỳ vọng vào Extension.js vì đã thấy thiếu hụt công cụ khi phát triển extension Chrome