Show HN: Tôi đã tạo một 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
  • Extension.js là một CLI để build tiện ích mở rộng web cho Chrome, Edge và Firefox; có thể bắt đầu phát triển chỉ với npx extension@latest create my-extension và npm run dev
  • Mục tiêu là giảm bớt tình trạng phân mảnh Manifest V3, khác biệt theo từng trình duyệt, thiếu hot reload cho content script và các pipeline build riêng cho từng mục tiêu bằng luồng phát triển không cần cấu hình
  • Cung cấp Hot Module Replacement cho các script background, content, popup và options; hỗ trợ hạng nhất cho component React, Vue, Svelte, Preact và TypeScript
  • Có thể tạo ZIP production để gửi lên Chrome Web Store, Edge Add-ons và Firefox AMO bằng extension build --zip, đồng thời cũng hỗ trợ build theo từng trình duyệt như --browser=firefox
  • Với các tiện ích mở rộng hiện có, có thể áp dụng bằng cách thêm extension@latest làm development dependency và nối các script build, dev, preview

Vấn đề Extension.js muốn giải quyết

  • Extension.js là công cụ CLI để tạo tiện ích mở rộng cho Chrome, Edge và Firefox
  • Luồng sử dụng cơ bản là tạo dự án mới rồi chạy development server
    • npx extension@latest create my-extension
    • cd my-extension
    • npm run dev
  • Hoạt động cùng npm, pnpm, yarn, bun
  • Tài liệu, template và ví dụ lần lượt được cung cấp tại Documentation, Templates, Examples

Trải nghiệm phát triển và tính năng cốt lõi

  • Tập trung vào việc giảm các vấn đề khi phát triển tiện ích mở rộng trình duyệt như phân mảnh Manifest V3, khác biệt giữa các trình duyệt, thiếu hot reload cho content script và pipeline build theo từng mục tiêu
  • Hot Module Replacement được áp dụng cho các script background, content, popup và options
    • Bao gồm cả component React, Vue, Svelte, Preact
  • Dùng Manifest V3 làm mặc định và cung cấp adapter tự động cho các mục tiêu Chrome, Edge, Firefox
  • Có thể dùng một CLI để chạy nhắm đến Chrome, Edge, Firefox và các binary dựa trên Chromium hoặc Gecko
  • Hướng đến zero config, không cần webpack, rollup hay plugin phải bảo trì
  • Hỗ trợ hạng nhất cho TypeScript, React, Vue, Svelte, Preact
  • Có thể tạo production build phù hợp để gửi lên Chrome Web Store và Firefox Add-ons bằng extension build --zip
  • Cũng có thể thêm vào tiện ích mở rộng hiện có chỉ bằng một devDependency

Khác biệt so với các công cụ phát triển tiện ích mở rộng khác

  • Trình bày khác biệt của Extension.js theo từng tính năng cho người dùng đã thử Plasmo, WXT, CRXJS
  • Có thể chạy trực tiếp sample trên GitHub
  • Cung cấp các binary trình duyệt được quản lý
    • Ví dụ: extension install firefox tải xuống một bản build Firefox biệt lập
  • Tích hợp sẵn HMR đa trình duyệt cho content script, không cần nối thêm plugin riêng
  • Có thể tạo ZIP production để gửi lên store
    • Ví dụ: extension build --zip
  • Không phụ thuộc vào framework
  • Có thể chỉ định binary Chromium và Gecko tùy chỉnh
    • --chromium-binary
    • --gecko-binary

Framework và trình duyệt được hỗ trợ

  • Framework được hỗ trợ và ví dụ chạy được cung cấp dưới dạng template hoặc ví dụ
  • Có thể dùng các flag liên quan đến trình duyệt trong extension dev, extension start, extension preview
    • Chọn trình duyệt bằng --browser <chrome | edge | firefox>
    • Chỉ định binary Chromium tùy chỉnh bằng --chromium-binary <path-to-binary>
    • Chỉ định binary Gecko hoặc Firefox tùy chỉnh bằng --gecko-binary <path-to-binary>
  • Các trình duyệt được hỗ trợ gồm Google Chrome, Microsoft Edge, Mozilla Firefox, nền tảng Chromium và nền tảng Gecko
  • Apple Safari được đánh dấu là Next

Build, đóng gói và trình duyệt được quản lý

  • Production build được chạy bằng npx extension@latest build
  • Gói ZIP để gửi lên store được tạo bằng npx extension@latest build --zip
  • Cũng có thể build theo từng trình duyệt
    • Ví dụ: npx extension@latest build --browser=firefox --zip
  • Cung cấp các flag build hữu ích
    • --zip: đóng gói thành ZIP để upload lên store
    • --zip-source: bao gồm file mã nguồn để store xem xét mã nguồn
    • --zip-filename <name>: kiểm soát tên file đầu ra
    • --polyfill: bật webextension polyfill đa trình duyệt
  • Extension.js có thể tải xuống và quản lý binary trình duyệt biệt lập để có phiên phát triển sạch
    • npx extension@latest install firefox
    • npx extension@latest install --browser=all
    • npx extension@latest install --where

Tiện ích mở rộng hiện có và chạy sample

  • Với tiện ích mở rộng hiện có, cài đặt dưới dạng development dependency
    • npm install extension@latest --save-dev
  • Có thể nối extension build, extension dev, extension preview vào các script trong package.json để sử dụng
    • npm run dev: phát triển
    • npm run build: production build
    • npm run preview: kiểm tra output production
  • Có thể trực tiếp lấy và chạy sample từ Chrome Extension Samples
  • Cộng đồng và ví dụ được cung cấp tại Discord, GitHub issues, examples
  • Giấy phép là MIT

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-05-02
Ý kiến trên Hacker News

  • Dự án rất tuyệt. Tôi đang nghĩ sẽ thử dùng nó cho tiện ích mở rộng của mình (https://github.com/herrherrmann/omnivore-list-popup)
    Từ trước đến nay tôi vẫn tự viết script để xử lý việc build tiện ích hoặc quản lý chế độ phát triển, nhưng cũng đang xem liệu có thể làm việc đó thuận tiện bằng web-ext hay không
    Tuy vậy, trình duyệt chính của tôi là Firefox, mà có vẻ Extension.js vẫn chưa hỗ trợ Firefox hoàn chỉnh

    • Add-on của Mozilla có thể chạy trên Chrome hoặc Edge nếu thêm cờ --polyfill, nhưng hiện tại trên Firefox vẫn phải thêm tiện ích thủ công
      Tôi có kế hoạch bổ sung hỗ trợ Firefox trong thời gian gần, nhưng hiện tại vẫn chưa có launcher cho trình duyệt

  • Đây đúng là công cụ tôi đang cần lúc này. Cảm ơn vì đã làm ra và chia sẻ, mong rằng hỗ trợ Firefox sẽ sớm hoạt động tốt
    Vấn đề hỗ trợ Firefox: https://github.com/cezaraugusto/extension.js/issues/5

    • Sẽ rất hữu ích nếu nó giúp xử lý các yêu cầu xung đột trong manifest.json
      Ví dụ như sự khác biệt giữa event page và background service worker, hoặc các trường hợp quyền hạn mà mỗi trình duyệt yêu cầu hoặc cấm không nhất quán
    • Sẽ tốt nếu bạn ghi thêm chi tiết vào issue hỗ trợ Firefox trên GitHub. Cộng đồng có thể sẽ giúp giải quyết

  • Tôi hơi bối rối. Tôi đã từng viết tiện ích chỉ dành cho Chrome bằng JavaScript, và lúc bắt đầu chỉ cần sao chép vài file từ trang tài liệu tiện ích của Chrome
    Tôi không thiết lập IDE gì riêng, và cũng không rõ cần phải làm gì thêm
    Tôi muốn hiểu công cụ này làm được gì hơn ngoài việc sao chép vài file. Nó là để hỗ trợ đa trình duyệt hay hỗ trợ đa ngôn ngữ?

    • Trong trường hợp đó, Extension.js có thể quản lý các chi tiết cấu hình mà phát triển web thông thường rất dễ bỏ sót
      Sau khi sao chép vài file từ tài liệu tiện ích Chrome, bạn vẫn phải tự bật “developer mode” trong trình duyệt và thêm file vào. Khi thay đổi mã, bạn phải tự làm mới thủ công nhiều ngữ cảnh thực thi khác nhau mà tiện ích dùng tới trong trình duyệt thì mới thấy được thay đổi. Nếu muốn thử trên nhiều trình duyệt, bạn phải lặp lại quy trình này cho từng cái
      Nếu muốn dùng các phụ thuộc gói như TypeScript hay framework JavaScript, bạn phải hoặc dựa vào framework trừu tượng hóa tiện ích sẵn có và học cách làm mới, hoặc tự tạo cấu hình bằng các công cụ như webpack, Parcel, esbuild. Đến mức đó thì việc phát triển tiện ích trình duyệt có thể trở nên phức tạp và gây nản
      Extension.js đơn giản hóa việc này bằng cách tự động hóa quá trình đóng gói và chạy tiện ích trong trình duyệt dành cho phát triển. Nó hỗ trợ tự động làm mới cho mọi ngữ cảnh thực thi, kể cả các phần thuộc phạm vi trình duyệt chứ không chỉ HTML/CSS/JavaScript, và cũng hỗ trợ các phụ thuộc mã như TypeScript và React chỉ bằng cài đặt, không cần phép thuật cấu hình riêng. Nó cũng chạy đồng thời trên nhiều trình duyệt

  • Dự án hay đấy. Tôi đã làm tiện ích Chrome đầu tiên với https://crxjs.dev/vite-plugin/getting-started, nhưng đã phải rất vất vả để làm cho style hoạt động đúng
    Có lẽ cũng vì đó là lần đầu tôi phát triển tiện ích trình duyệt: https://chromewebstore.google.com/detail/bettermenu-for-door...
    Tôi vẫn còn nhiều việc phải làm nên cũng sẽ xem thử dự án này

  • Thực sự rất tuyệt. Ngay cả README cũng được làm đẹp và chỉn chu
    Google Play quá lộn xộn nên tôi đã trì hoãn việc gắn tiện ích vào ứng dụng, nhưng tôi định sẽ thử cái này

  • Hay đấy. Tôi tò mò nó so với framework tương tự là Plasmo như thế nào
    https://www.plasmo.com/

    • Tôi nghĩ khác biệt lớn nhất là Plasmo là một framework. Tức là để tạo tiện ích mới, bạn phải học lớp trừu tượng đó và dựa vào các ví dụ được thiết kế theo nó
      Bạn cũng phải tuân theo các file cấu hình và quy ước cụ thể không nhất thiết liên quan trực tiếp tới bản thân tiện ích trình duyệt
      Ngược lại, Extension.js cho phép bạn tạo tiện ích bằng API tiện ích tiêu chuẩn, và chỉ trừu tượng hóa các file cấu hình. Bạn không cần học cách làm chi tiết riêng của công cụ. Vì vậy nếu ví dụ từ Chrome hoặc MDN hoạt động với file manifest như nguồn chuẩn duy nhất, bạn không cần refactor để dùng với Extension.js, nên sẽ dễ bắt đầu dự án mới và làm prototype hơn
    • Plasmo trông rất hữu ích. Tôi muốn biết liệu bạn đã từng thực sự dùng nó để phát triển tiện ích chưa

  • Tôi đã làm vài tiện ích. Một cái chỉ mang tính đùa vui, để đổi màu trái tim của imgur khi mọi người đều khó chịu vì họ đổi màu nó
    Mỗi lần làm tiện ích Chrome là tôi lại bị hội chứng kẻ mạo danh rất nặng. Không hiểu sao việc tạo một dự án mới lại khó đến vậy, nên có công cụ như thế này thì thật sự rất tốt

    • Tôi hoàn toàn đồng cảm. Có cảm giác như phát triển tiện ích lẽ ra phải vui hơn chứ. Hy vọng Extension.js sẽ giúp ích cho dự án tiếp theo của bạn

  • Tôi thích đấy. Sẽ hay nếu nó cũng thêm chút phép màu cho giao tiếp giữa tiện ích và tab
    Mỗi lần tạo tiện ích, việc đọc DOM hoặc gửi tin nhắn từ tiện ích tới tab đang hoạt động luôn rất đau đầu

    • Plasmo có một thư viện messaging đáng để xem
      https://docs.plasmo.com/framework/messaging
    • Hiện chưa có trong kế hoạch ngay lúc này, nhưng chắc hẳn npm đã có vài thư viện khá ổn cho việc đó
    • Tôi muốn biết thêm điều gì trong quy trình đó khiến bạn thấy đặc biệt khó chịu hoặc khó hiểu

  • Tôi đã thêm một issue. Việc hỗ trợ Safari có vẻ sẽ khá đơn giản nếu dùng công cụ CLI safari-web-extension-converter của Apple

  • Trông ổn đấy. Tôi sẽ thử dùng nó cho tiện ích của mình là Vim for Docs
    Việc chưa hỗ trợ Firefox thì đáng tiếc, nhưng dù sao cũng chẳng phải là đã có công cụ build tiện ích nào hỗ trợ cả Firefox lẫn các trình duyệt dựa trên Chromium

    • Hỗ trợ Firefox sẽ có trong bản cập nhật tiếp theo. Cứ chờ đợi nhé