[Hack Time] Cuối tuần thử viết cái Chrome Extension

Câu chuyện

Câu chuyện là cuối tuần vừa rồi trong lúc đang rảnh rảnh ngồi suy nghĩ, mình thấy là một lập trình viên thì không nên ngừng trau dồi kiến thức và làm mới bản thân bằng cách Hack một cái gì đó. Và rồi mình tự đặt ra cho bản thân 1 khoảng thời gian vào cuối tuần, gọi là Hack Time.

Hack time

Mình đã tự đặt ra định nghĩa và nguyên tắc cho Hack time như sau:

  • Là khoảng thời gian để tạo ra 1 sản phẩm mới hoàn chỉnh và có thể chạy được ở môi trường production
  • Thời gian hoàn thành sản phẩm phải ngắn, tối đa là 48 tiếng, tối thiểu là 2 tiếng
  • Bế quan tỏa cảng trong thời gian này, tập trung hết khả năng của bản thân
  • Sản phẩm làm ra nên có tính thực tiễn cao, không giúp ích được cho người khác thì ít nhất cũng phải giúp ích cho bản thân
  • Khuyến khích học một ngôn ngữ/quy trình gì mới.

Nghĩ ý tưởng

Thế giờ đến ý tưởng thì sao? Dạo gần đây mình canh cách cái gì? Hay là mình có thể làm gì để nâng cao hiệu suất làm việc?

A đúng rồi, dạo gần đây trên lớp học, các thầy cô giáo suốt ngày post tài liệu vào group lớp làm mình phải lên Facebook để kiểm tra bài tập, deadline... Và kết quả cứ sau mỗi lần vào thì chưa kịp gõ tên Group lên thanh search thì đã gặp phải mấy cái hình, với clip hấp dẫn ở News Feed Facebook, vậy xong...thế là lại scroll vô hạn :)))

Ok vậy là viết 1 cái gì đó để chặn cái news feed này lại. Chỉ cần nó ko cho mình nhìn thấy thôi thì mình sẽ nhớ ra mình phải làm gì, và tất nhiên nó vẫn phải cho mình xem lúc mình muốn :D

Và cuối cùng mình đã quyết định chọn viết thử 1 cái extension cho Chrome để làm điều này, đơn giản vì mình nghĩ nó sẽ là dễ làm nhất vì toàn là xử lý javascript trên DOM, hơn nữa Chrome Extension mình lại chưa làm bao giờ. Vậy thì thử thôi.

Stop Scrolling Facebook

Mô tả

Là một extension cho chrome có tác dụng:

  • Chặn News Feed để người dùng khỏi bị phân tâm khi vào Facebook (đặc biệt với những người hay vào Facebook chỉ để làm việc như mình)
  • Người dùng được phép xin thêm 1 khoảng thoài gian để xem News Feed (15s, 1 phút, 5 phút)

Sản phẩm

  • Các bạn có thể cài vào Chrome TẠI ĐÂY
  • Hình ảnh DEMO Stop Scrolling Facebook screenshot

Source code

Các bạn có thể tham khảo toàn bộ source code tại đây
https://github.com/tobernguyen/stop-scrolling-facebook

Quá trình làm

Ok vậy là Stop Scrolling Facebook ra đời. Mình mất khoảng tổng cộng 6 tiếng để thực hiện và đưa lên Chrome Web Store:

  • Học cách viết 1 extension cho Chrome (~30 phút)
  • Thiết lập môi trường (~30 phút)
  • Tất nhiên là code code code (~ 3 giờ)
  • Nghiên cứu cách publish lên Chrome Web Store (~5 phút)
  • Làm các ấn phẩm cho sản phẩm (icon, screenshots, promotional title image, description) (mất hơn 1 giờ)

Các thứ thu được

Mình học được kiến thức mới cũng nhiều mà quan trọng là cũng vững tay nghề về Javascript hơn, trước đây mới chỉ amatour nhưng sau khi làm extension này thì cũng đã cứng lên chút ít vì vừa làm phải vừa search và đọc khá nhiều.

  • ES6 Javascript
  • Setup môi trường dev + production với npmwebpack
  • Một chút về Photoshop để làm icon và screenshot cho app
  • Vui, mình dùng được mà bạn bè mình cũng dùng được ;)
  • Là tiền đề để tiếp tục Hack time vào các tuần tới.

Các bạn nếu tải về dùng thử mà thấy có ích thì Review cho mình 5 sao nhé, còn nếu có gì chưa hay thì hãy comment và góp ý nha :D

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Long Nguyen

4 bài viết.
112 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
58 31
Mở đầu Tsu.co là gì? Gần đây mình mới biết đến 1 mạng xã hội mới có tên là Tsu.co nhờ thông qua mấy bài báo trên mạng về việc "Facebook đã ra tay ...
Long Nguyen viết hơn 2 năm trước
58 31
White
18 2
Từ hồi bước vào thế giới của Rails là gần như mình không thể dùng Windows cho việc develop Rails app được nữa. Nhưng mình bước vào thế giới của Mac...
Long Nguyen viết gần 3 năm trước
18 2
White
10 2
Tại sao phải setup như vậy? Mục đích: để tận dụng tối đa server, như mình thì là để đỡ tốn tiền :)) Mình chỉ định thuê 1 cái VPS, nhưng vừa muốn nó...
Long Nguyen viết 3 năm trước
10 2
Bài viết liên quan
White
9 1
Userscript là gì? Userscript (hoặc User script) là các script dùng trong trình duyệt, hướng tới việc đọc thông tin của trang web hoặc thay đổi chú...
Zzbaivong viết 2 năm trước
9 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
4 bài viết.
112 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!