Chrome extension for download video on Facebook

27 tháng Chạp năm 2017, nhằm ngày 12 tháng 2 năm 2018

Khi cái Tết đã gần kề nhưng trong lòng quá nhiều tâm tư dồn nén không ai để giải bày tâm sự. Kiếm một người để trò chuyện thì đơn giản, có được người lắng nghe thật sự, đó mới là cái khó nhất.

Thời điểm viết những dòng này, nhìn lại mình chẳng có gì…

Nhắc lại câu chuyện cũ

Blog tiếng Việt: https://minhthuongeh.wordpress.com/2018/01/13/web-tai-video-tu-facebook-cua-toi-phat-trien/

Medium tiếng Anh: https://medium.com/@votinhthuong/download-video-from-facebook-7c710ac1fecb

Từ những trao đổi nhỏ…

Shiori_kubo.jpg
しおりちゃん <3

Sau khi công cụ tải video trên Facebook được phát triển thành công, host lên online cho mọi người sử dụng ở địa chỉ:

https://thuongvt.herokuapp.com/

Thật tâm tôi cũng không buồn quan tâm tới stats, để xem liệu có bao nhiêu người dùng tới. Ngày trước mới viết blog tôi mê nhất là ngồi F5 trình duyệt để cập nhật stats lượt views và tương tác. Nhưng số trời đã định, khi bạn chỉ mới là hạt cát trong cả một sa mạc mênh mông, làm sao người ta có thể biết bạn là ai. Cộng thêm tôi chẳng buồn quan tâm tới chiêu trò SEO này nọ, bên lèo tèo vài người liếc mắt một cái chiếu lệ rồi đi tiếp. Nhân giang vốn dĩ nằm nghiêng, có mấy ai nhận ra mà bước chậm lại giữa thế gian vội vã.

Đời người có bảy nỗi khổ: sinh, lão, bệnh, tử, cầu mà không được, yêu mà biệt ly, hận mà sống cùng. Bảy nỗi khổ này, đời người khó thoát.

Đức Phật dạy con người nên sớm giác ngộ là vì vậy.

Không phải ai cũng đủ khả năng ngồi thiền dưới gốc bồ đề mà Giác Ngộ được như Thái tử Tất Đạt Đa. Nếu không, chúng sinh đã chẳng lầm than.

Lạc đề nữa rồi !!!!

Sau khi vận hành được vài tuần, tôi đoán là chắc cũng có vài người lẻ tẻ thử dùng tới, hoặc chí ít là truy cập thử. Còn lại thì khả năng là không màng, nhắm mắt bịt tai và tâm không động tới. Hoặc cũng có khả năng là sợ tôi chèn mã độc trong đó. Buồn cười… Tôi mà làm được như vậy chắc tôi đã chẳng phải đi phụ kéo cáp, bấm đầu dây mạng đỏ tay, đi học việc làm sai vặt công trình thi công rồi.

Lại lạc tiếp… Chắc do nghe nhạc của Tùng nhiều quá. Tùng hơn tôi có vài tuổi mà đạt được biết bao thứ người ta cả đời kiếm mãi không ra.

Trong số vài người bạn ít ỏi cũng có một người dùng thử. Và cho cái nhận xét chẳng biết nên vui hay nên buồn. Dịch vụ thì ok, nhưng truy cập lúc đầu chậm ghê quá. Cái này tôi bó tay. Đặc trưng là bên Heroku tôi dùng, để tiết kiệm băng thông gì gì đó, nó hay cho downtime app khi không dùng thường. Dẫn tới tình trạng, lúc truy cập cũng là đưa request yêu cầu mở thì nó mới open lên. Chắc vì vậy mà lâu. Tốn cũng tầm 30s là cùng. Nhưng tôi thừa biết, với các chị nữ, chờ 30s là một cực hình với họ. Bất kể chuyện gì đụng tới vi tính mà bắt họ chờ, trời đất chứng giám, cả một vùng trời tiêu cực đổ lên đầu đứa đứng kế bên help-desk là bạn!

Nhưng chắc chắn, trong chuyện ấy mà nhanh quá, thì kiểu gì hạnh phúc nhỏ bé đơn sơ mà bạn phải đợi mãi tới lúc đủ 18 tuổi mới đạt được ấy, sớm muộn cũng đổ vỡ. Chuyện ấy… Không đùa được.

============================================================================

Character X: Gruhhahahahaha…. 

The girl: ちょっと待って!ちょっと。。。やめろ!!!やめろ。。。ああああ。。。

============================================================================

Nội dung nhạy cảm nên để tiếng Nhật và cencored phần tiếp theo… Muốn theo dõi tiếp diễn biến ??? (không hiểu tiếng Nhật thì coi tiếp làm quái gì hahahaha….)

Uhm… Quay lại chủ đề. Bạn kia sau khi dùng phiên bản web thì thấy chờ load lâu và bất tiện quá. Vì mỗi lần muốn tải phải mở thêm tab trình duyệt, ngốn RAM quá. Làm dạng extension đi, thấy tiện hơn đó? Trước khi bạn này than phiền thì cũng đã diệt được 1 cái lỗi ngớ ngẩn trên tool này rồi. Lập trình thiếu trường hợp!

Có những người cả đời luôn tìm thấy ở bạn lỗi và lỗi. 

Cũng may là code của chính tôi vọc phá ra nên mở ra sửa lại cũng không đuối lắm. Gặp trường hợp như làm bài tập nhóm chẳng hạn, một khi văng ra lỗi kiểu NullReferenceExeption là kiểu gì cũng chỉ có tắt máy, dẹp :”) Đứa nào gây ra lỗi này thì fix đi, mệt rồi.

Sau khi cân nhắc qua đề nghị về ý tưởng đó, tôi cũng suy nghĩ lung lắm. Thật ra câu vừa rồi là nói xạo thôi. =)))))))) Lúc nghe bạn ấy đề nghị, tôi đang bận xem Gintama movie 2017 =)))) Lúc đó tôi chỉ ừ ừ cho có lệ rồi tắt Facebook để xem phim tiếp.

Khi bạn bị nỗi buồn nhấn chìm trong tuyệt vọng, thì xem phim hài cũng là một cách tự an ủi và vực dậy bản thân hiệu quả.

Dĩ nhiên qua sáng hôm sau, tôi bắt đầu nghiên cứu thử cái ý tưởng extension đó. Thú thật, sau khi đi chợ một vòng qua khắp các gian hàng của Chrome Store, tôi chẳng muốn làm tiếp nữa. Cũng hơn 5, 6 kết quả trả về. Người ta đã làm trước mình rồi, đi invent lại một cái đã làm rồi để mà chi.

Nhưng thời điểm đó… đang rảnh! Đang chán đời. Kiếm cái gì đó làm cũng vui.

Một điểm mấu chốt nhất, đó là dùng web tool tôi viết thì không thể tải video trong các private hay closed group được. Nhưng nếu dùng extension, thì khả năng thành công là 200% chắc chắn.

Cũng phải nói sớm trước ngay từ đầu, để quán triệt tư tưởng: từ lúc bắt đầu ý định viết trở về trước, kiến thức về JavaScript của tôi chỉ là con số 0 to tướng. Tất cả những gì tôi biết làm với language này chỉ là alert(“hihi”); thôi, còn đào sâu hơn nữa thì thôi, vứt xẻng ngậm điếu thuốc đi về cho khỏe =)))))

…đến quá trình hiện thực điều không tưởng

Trước khi phân tích (nói đúng là lải nhải) về quá trình làm ra thành phẩm này, cũng cần nói thêm về Chrome extension. Muốn hiểu rõ để định nghĩa thì có thể tham khảo tại đây:

https://developer.chrome.com/extensions

Và cũng như bao nhiêu người khác, tôi cũng vọc trong mớ document này trước tiên để tìm tutorial mẫu.

https://developer.chrome.com/extensions/getstarted

Và không ngoài dự tính, không hề đụng chạm gì tới PHP cả ;____; Chỉ có ba anh em HTML, CSS và Javascript thôi. Bộ ba tôi ghét nhất. Nhưng đã làm thì ráng làm cho tới, đừng làm nửa vời. Sau này mắc công sửa, mệt.

Trọn một ngày đầu tiên, tôi chỉ làm mỗi việc là đọc document của Google, tải sample về và vọc trong đó. Tìm hiểu cấu trúc, cách tổ chức, cách chạy,… đại loại vậy. Phần lớn thời gian còn lại là xem Gintama và thư giãn ngủ trưa.

Ngày kế tiếp, tôi dành trọn thời gian để search. Nếu là chuyện linh tinh thì search Google hiệu quả nhất, nhưng bây giờ đã khoanh vùng được trọng tâm cần tới rồi, thì vào thẳng cái trang cần tìm cho nhanh: Stackoverflow. Cũng nhờ dịp này mà tôi bay thêm một cái account trên đó nữa rồi. Nguyên nhân là hỏi nhiều quá, vượt mức số câu hỏi cho một tài khoản newbie. Nhưng chả sao! Ngày nào Google còn cho tạo email miễn phí thì ngày đó bạn vẫn còn làm ăn được.

Search trên Stackoverflow là cả một cực hình còn hơn search Google. Thế gian này bạn đừng mở miệng ra là nói “chỉ có Việt Nam kì cục vậy”, “chỉ có dân mình mới vậy”, “người Việt bla bla bla…”. Mà ở đâu cũng vậy thôi. Đọc comment trên đó là biết liền! Má… nhắc lại vẫn còn bực… Người ta hỏi, không giúp thì thôi, ngậm cái mỏ mà về *beep* mẹ mày đi, cà sốc cà tác vào nói như hay lắm: “is this your homework? 🙂 “. Câu hỏi của mày là đủ gây chuyện rồi, nhưng chính cái icon 🙂 chó *beep* con *beep* mẹ mày mới khiến người ta muốn quánh cho bầm mặt mày đi.

Nhưng bình tĩnh lại mà nói, cũng có rất nhiều người nhiệt tình thật sự. Tôi quên xóa bớt mấy cái biến nhảm nhí không xài để rối mắt mà họ vẫn đọc và góp ý cho đúng hướng. Mà đây cũng là lần đầu tiên kể từ khi biết đến và la liếm thảo mai trên Stackoverflow, mình đưa câu hỏi và comment qua lại hơn 20 thoại, sau đó… tự mình trả lời.

500.jpeg

Suốt ngày thứ hai của hành trình, tôi search đâu khoảng hơn 50 results, è cổ ra ngồi đọc. Cái nào viết không hiểu thì Google Dịch, không thì lướt phớt phớt rồi bỏ qua. Trong số đó, có hai cái kết quả khả quan nhất.

Cái thứ nhất: https://stackoverflow.com/questions/43511001/chrome-extension-get-source-code-of-active-tab

Đi kèm với nó: https://www.youtube.com/watch?v=vaXIknYrt4Y

Khi đào ra được hai cái này, tôi mừng hết lớn. Chỉ cần vượt qua ải này là 80 kiếp nạn còn lại rất nhẹ nhàng.

Nhưng đời không dễ dàng vậy. Nếu dễ vậy tôi đã chẳng mất 6 ngày mới làm ra. Chẳng hiểu sao với tất cả các trang test thử, cái nào nó cũng trả về source code kiểu View page source mình hay làm thành công, chỉ riêng với Facebook là “ngươi nghe cho rõ đây! Đời này kiếp này ta nguyện quyên sinh chứ nhất quyết, không để đôi tay dơ bẩn của ngươi đụng tới được tấm thân ngọc ngà này“. Nói đoạn, nàng rút trên mái tóc dày đen tuyền ấy cây trâm cài bằng vàng và không do dự, tự kết liễu mình và thốt ra lời sau cuối:

…has been blocked from loading by Cross-Origin Resource Sharing Policy: No Access-Control-Allow-Origin’ header is present on the requested resource….

Nói tới đây thì nàng buông tay, để mặc chàng trai chưa kịp tỏ lòng ngồi ôm nàng khóc như điên như dại, trời đổ cơn mưa như khóc cho một mối tình đẹp mà dang dở…

23755380_1793082950985144_1949177210062319425_n.jpg

Phương án đầu thất bại.

Nhưng trong số cả chục cái còn lại, may mắn và mỏi mệt thay, cũng có một cái thành công! Bởi thế mới cảm thấy nể anh em nhà Wright.

Phương án thành công: https://stackoverflow.com/questions/11684454/getting-the-source-html-of-the-current-page-from-chrome-extension

Nói thật là tôi tới bây giờ cũng chẳng hiểu tác giả của cách này… tiêm chích gì vào trong code của web để mà get được cái source code :v :v :v

Big question!

Như đã nói thì kiến thức về Javascript của tôi như hạt gạo trong lu vậy. Mênh mông là thế mà chỉ biết có mỗi 1 hạt.

Có những lúc muốn bỏ cuộc

Từ cách tìm được trên Stackoverflow, tôi bắt đầu ngồi định hình lại những bước mình cần làm. Điều dở nhất tới bây giờ vẫn không tập thành thói quen được, đó là vẽ ra cái kế hoạch ngay từ đầu. Chỉ với một ý tưởng, sau đó là những phác họa nhạt nhòa và không hình dạng trong đầu, tôi cứ thế cắm cúi vào search và làm. Lỗi thì search rồi sửa.

Không có cái lỗi nào bạn mắc phải mà nhân loại chưa từng gặp phải. Nếu thế đã chẳng có Google và các trang hỏi đáp.

Ý tưởng về một cái extension tải video trên Facebook của tôi cũng không khác mấy với lần làm trên nền website rồi host trên Heroku. Có khác chăng là về mặt ngôn ngữ.

Đầu tiên, tôi cần xem trong source code của trang Facebook thử, có chứa liên kết video hay không. Nếu có, thì dùng thủ thật mà cắt cái link đó đem ra trữ trong một biến cụ thể.

Cuối cùng, chỉ đơn giản một thao tác cuối, bỏ vào href của tag anchor trong HTML kèm thuộc tính download và show cho người dùng tải về thôi.

Nói thì rất dễ, làm mới thấy con đường không có trơn tru láng mượt như vậy.

Sau khi đã view được source code, công đoạn tiếp theo là ngồi mở code của tác giả gốc và đọc. Tôi không phủ nhận phần này tôi có vay mượn của tác giả trên Stackoverflow. Dù sao nó cũng là môt mắc xích trong cả sợi dây mà tôi đang cố bện nên. Và không ngoài dự đoán, tôi lọ mọ mất nửa ngày hơn vẫn không hiểu hết vài dòng code ngắn ngủi đấy =))))

Javascript tôi từng được học, nhưng chỉ là vài tuần với vài kiến thức nhỏ mà hầu hết là tự học. Nhưng rồi vì không có dịp xài đến mà nó hao mòn dần.

Mãi hàng tiếng đồng hồ sau tôi mới tìm ra được cái biến chính xác chứa source code của trang hiện tại. Nhưng biến đó đem dùng tiếp vào ý tưởng của tôi, lại phát sinh lỗi đủ thứ.

Phải ngồi chế biến lại. Đó là lúc tôi code xong hết cả phần sau của quá trình rồi, nhưng đứng ngay tại nút thắt chính giữa này. Không gỡ được nó, mãi mãi cọng dây sẽ không thẳng mà có một nút tròn xấu xí ở giữa.

Lúc này đã tốn tới 4 ngày, nản kinh dị nản. Lại thêm nhiều chuyện ngoài ý muốn trong cuộc sống, thật sự chỉ muốn dẹp hết cho rồi. Những lời mời mọc đi chơi không đúng lúc, hối thúc, thật sự khiến tôi muốn điên lên.

Những đêm dài chỉ một mình

Ngày thứ 5 trong hành trình, tôi chẳng ngó ngàng tới nó nữa. Thiếu bước nữa thôi là tôi delete hết sạch tất cả công sức rồi. Tôi vùi đầu vào xem tiếp Gintama. Xem liên tục mặc kệ mọi thứ.

Có những người thật sự gây ra những nỗi buồn không hề bé trong lòng bạn. Đặc biệt khi bạn đã bắt đầu mở lòng và tin tưởng vào mối quan hệ đó. Tôi vẫn còn nhớ như in, hệt như mới hôm qua thôi. Một người bạn cũ lâu ngày không gặp đột nhiên tìm ra Facebook của tôi và đưa request kết bạn. Tôi ghét thị phi, tôi cũng ghét stalker, càng ghét những người đã đi rồi lại quay trở lại bất ngờ. Toàn điềm chẳng lành.

Cũng được vài bữa thì đúng như rằng bạn ấy biến mất. Thì ra là nghỉ Tết nên xa bạn gái, sẵn nhớ tới tôi mà máy tính bị hư nên tìm Facebook để kết bạn hỏi thăm tư vấn máy móc. Đó là Tết 2017. Thật sự, cảm thấy thất vọng và xúc phạm sâu sắc.

Bạn để ý đi, có những người quanh năm im im, đột ngột kiếm bạn, toàn chuyện chẳng lành. Sao lúc bình thường chẳng nói chuyện hỏi han xã giao, đột ngột lại làm vậy.

Cũng có những người, tưởng là bạn, nhưng rồi hết giai đoạn khó khăn, kiếm gặp khó vô cùng. Người đến có mục đích, hoàn thành mục đích rồi người quẩy nón phất áo ra đi.

Người ra đi đầu không ngoảnh lại

Bên sân thềm nắng lá rơi đầy…

Cũng có những người mình tin là bạn thân, đến khi có chuyện buồn báo tin cũng chỉ “Uh” một tiếng. Lúc bạn tâm sự mình im lặng ngồi nghe, đến khi mình có chuyện muốn nói thì bảo mình ‘nóng tính, hung dữ’ 🙂 🙂 🙂 🙂

Thở dài mà đẩy sạch được phiền muộn thì chắc người mình lâng lâng nhẹ nhõm rồi.

Thế thái nhân tình…. Lòng người nông sâu…

“Kỳ thực trên mặt đất vốn làm gì có đường…”

Sau một ngày bỏ bê, tối ngày thứ 5 tôi cũng lọ mọ mở ra đọc lại. Cũng hơi oải vì bế tắc quá. Nhưng sau khi phát hiện mình đi lầm đường, tự dưng mọi thứ sáng tỏ ra thấy rõ. Trong các file gốc, tôi xử lý khâu còn lại ở nhầm file! hahahahahaha….

25498514_362184290912007_5503391012070972611_n
Vẫn hy vọng gặp lại. Mặc dù chẳng biết nói gì nếu thật sự gặp lại mặt đối mặt…

Khi con tim đã dẫn đường đúng lối

Tới lúc này thì chuyện đã tường minh. Không còn gì nhọc nhằn nữa. Chỉ việc đẩy phần code xử lý get link qua đúng file popup.js nữa là xong. Và quả như mong đợi, mọi thứ thuận buồm xuôi gió hẳn ra.

Có thể lấy được source code, có thể search trong source code để lấy link. Quan trọng là xử lý trọn vẹn vụ xử lý link.

Như đã nói trước đây, phiên bản web đang chạy trên Heroku từng lập trình thiếu một case. Lúc tôi test, tôi toàn sử dụng một video duy nhất, mà trùng hợp là video này có chất lượng HD. Tôi quên mất cũng có những video chỉ reach tới SD là hết cỡ rồi. Thành ra, khi bỏ liên kết video SD vào, nhấn GET VIDEO mỏi mòn cũng không thấy nó trả về kết quả gì.

Những ái ân mặn nồng sau cuối

Tới giai đoạn này, chỉ còn việc đẩy cái liên kết vào được bên trong href của anchor tag trong HTML nữa là xong.

Chính thao tác này mất trọn thêm một ngày thứ 6 của hành trình. Mãi tới đêm khuya đó, sau khi nốc cạn vài lon bia Tiger thì đầu óc mới tỉnh táo ra. Cũng chính lúc này tôi mới biết debug bằng Chrome là như thế nào. Suốt cả hành trình toàn ngồi suy luận và dùng if()… else để alert() ra mà đoán kết quả. Chính sự ngu muội đó khiến lao đao mấy ngày như vậy =)))) Phải như xài debug ngay từ đầu thì tốt rồi.

Về chuyện bỏ link vào href bằng cách dùng Javascript, tôi tham khảo tầm 12 cách. Cách nào cũng chạy ngon lành khi bỏ vào folder của project để dành test code. Nhưng đến khi ráp vào chung cái project đang làm thì nó trơ trơ ra và luôn trả về null. Bực bội không cách nào tả hết !

Nhưng tới đâu tầm – nếu nhớ không lầm thì khoảng 23h20 tối – tự dưng nhìn ra được chỗ lỗi. Một cái lỗi ngớ ngẩn vô cùng nên dù kiểu gì nó cũng không bỏ liên kết vào trong href attribute được.

Tới đây coi như mọi thứ đã xong xuôi. Công việc cuối cùng thực sự chỉ còn là trét lớp son đỏ má hồng, kẻ lại chân mày, chỉnh lại mái tóc cánh én rồi chờ giờ tốt mà ra mắt hai họ sau đó về nhà chồng. Áo dài đỏ, cái mấn đội đầu cũng đỏ, sao chỉ có nước mắt em là hai hàng lệ trong suốt?

Ngày tưởng rằng niềm vui đã đến

Không phũ nhận là có những bài hát chỉ cần nghe, tự dưng đầu óc được giải tỏa và cũng giúp giải quyết được vướng mắc.

Lúc này chỉ còn thêm hiệu ứng CSS vào cho đẹp mắt cái giao diện là xong. Nếu không rành về nó, có thể lên W3School để mượn đồ rồi chỉnh lại theo ý muốn cũng được. Tôi đặc biệt thích cái editor online của nó, rất dễ xài.

advertise

Đặc biệt, khi rê chuột vào 2 cái nút, còn có hiệu ứng animation dễ thương. Thay vì chỉ hai cái nút thôi, tôi quyết định bắt luôn cái tiêu đề của video để dễ phân biệt cho người dùng.

Và sau tất cả, nén lại thành file zip và đưa lên chợ cho mọi người tải về thôi.

Câu chuyện cũng chỉ mới bắt đầu

Nếu bước này mà thành công, thì không phải mãi tới bây giờ tôi mới bắt tay vào viết bài giới thiệu này =))) Để upload extension lên Chrome Store, bạn phải trả chi phí là $5, thanh toán qua Paypal. Và dĩ nhiên, $5 chẳng là nhiều nhặn quá mức để chi trả, nhưng vấn đề là thẻ Paypal. Tôi không có thẻ Paypal 🙂 🙂 🙂 Càng không ai điên tới mức lại đi trả tiền giúp mình vụ này, bất chấp sau này tôi chắc chắn sẽ trả tiền lại cho họ 🙂 🙂 🙂

Sau khi suy nghĩ không biết làm sao, tôi quyết định cho nó thành dạng .crx và quăng lên Github của tôi. Ai muốn dùng thì tải về dùng. Không quảng cáo, không malware, không spyware, không miner cryptocurrency, nói chung là chỉ thuần 1 chức năng như tên gọi.

https://github.com/votinhthuong/chrome_extension_download_videos_facebook

Lưu ý lớn: Import vào Chrome là sẽ bị chặn, rồi thông báo kiểu “em chưa chứng thực được nó trên store anh ei, nên không dám đảm bảo. Thôi em block cho rồi”.

Nên cách sử dụng là dùng Cốc Cốc – trình duyệt based on Chrome của Việt Nam. Chắc chưa update hay sao nên vẫn approve file .crx bình thường.

Để thêm vào trình duyệt, gõ vào chrome://extensions rồi Enter. Sau đó kéo thả cái file .crx vào là xong.

VÕ TÌNH THƯƠNG

votinhthuong9@gmail.com

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s