Hướng dẫn javascript chrome extension

Công việc nào cũng vậy, sau một thời gian chúng ta sẽ tự nhận thấy có những thứ cứ lặp đi lặp lại hàng ngày. Mình cũng vậy, công việc của mình được thực hiện rất nhiều trên Google Chrome và sẽ thật hữu ích nếu như chúng ta có riêng cho một extension để tự động những công việc lặp đi lặp lại nhàm chán ấy, cũng là một cách để tiết kiệm thời gian và hơn thế nữa là nhìn có vẻ chuyên nghiệp hơn rất nhiều. Bạn có thể trèn thêm các chức năng khác cho một trang web mà bạn sử dụng nó thường xuyên, lấy dữ liệu, lưu trữ...và nhiều thứ hay ho khác nữa bạn có thể làm với một extension.

Cấu trúc của một Chrome Extension

Về cơ bản, một Chrome Extension chủ yếu sẽ được viết bằng Javascript và HTML. Bạn có thể tổ chức các thư mục tùy ý sao cho phù hợp và tiện lợi nhất trong quá trình code. Với mình thì sẽ như thế này: ${song.name}`]; $['.wrapper'].append[songHTML]; }] }];

Như vậy, mỗi lần extension được mở ra, chúng ta sẽ thấy danh sách các bài hát mà mình đã lưu được hiển thị ra ở đây. Bạn có thể thêm các tính năng khác nữa như tự động phát các bài hát trong danh sách, hay download tất cả chúng về máy của mình.

Load extension

  • Các bạn vào google chrome, gõ vào địa chỉ chrome://extensions/
  • Click vào nut Load unpacked bên góc trái màn hình
  • Tìm đến folder chứa extension của chúng ta, thế là xong

Tổng kết

Vừa rồi chúng ta đã tìm hiểu về các thành phần của một chrome extension cũng như các chức năng và sự giao tiếp giữa chúng. Hi vọng với những chia sẻ đó, các bạn sẽ phần nào hiểu hơn về cấu trúc của một extension để có thể tự tạo riêng cho mình một extension, phục vụ các nhu cầu của bản thân.

Dưới đây là một extension phục vụ cho công việc của mình. Chức năng của nó là lưu lại dữ liệu của các ticket, tạo template pull request, tạo message gửi cho team trên chatwork... Các bạn có thể tham khảo ở đây nhé //github.com/dongoclam/rg-plugin.

Chủ Đề