Tương tác với trang web bằng Console của trình duyệt qua một ví dụ đơn giản

Tương tác với trang web bằng Console của trình duyệt qua một ví dụ đơn giản

Tin ngắn hàng ngày dành cho bạn
  • Từ lâu rồi suy nghĩ làm thế nào để tăng sự hiện diện thương hiệu, cũng như người dùng cho blog. Nghĩ đi nghĩ lại thì chỉ có cách chia sẻ lên mạng xã hội hoặc trông chờ họ tìm kiếm, cho đến khi...

    In cái áo này được cái tắc đường khỏi phải lăn tăn, càng đông càng vui vì hàng trăm con mắt nhìn thấy cơ mà 🤓

    (Có tác dụng thật nha 🤭)

    » Xem thêm
  • Một vòng của sự phát triển nhiều dự án khá là thú vị. Tóm tắt lại trong 3 bước: Thấy một cái gì đó phức tạp -> Làm cho nó đơn giản đi -> Thêm thắt tính năng cho đến khi nó phức tạp... -> Quay trở lại vòng lặp mới.

    Tại sao lại như vậy? Để mình lấy 2 ví dụ cho các bạn thấy.

    Markdown ra đời với mục tiêu tạo ra một định dạng văn bản thô "dễ viết, dễ đọc, dễ dàng chuyển thành một dạng gì đó như HTML". Vì thời đó chẳng ai đủ kiên nhẫn mà vừa ngồi viết vừa thêm định dạng cho văn bản hiển thị ở trên web như thế nào. Ấy vậy mà giờ đây người ta đang "nhồi nhét" hoặc tạo ra các biến thể dựa trên markdown để bổ sung thêm nhiều định dạng mới đến mức... chẳng nhớ nổi hết cú pháp.

    React cũng là một ví dụ. Từ thời PHP, việc khát khao tạo ra một cái gì đó tách biệt hẳn giao diện người dùng và phần xử lý logic chính của ứng dụng thành 2 phần riêng biệt cho dễ đọc, dễ viết. Kết quả là các thư viện UI/UX phát triển rất mạnh mẽ, mang lại khả năng tương tác với người dùng rất tốt, còn phần logic ứng dụng thì nằm ở một máy chủ riêng biệt. Bộ đôi Front-end, Back-end cũng từ đấy mà thịnh hành, không thể thiếu anh bồi bàn REST API. Ấy vậy mà giờ đây React trông cũng không khác biệt gì so với PHP là mấy, kéo theo là cả Vue, Svelte... lại cùng quy tất cả về một mối.

    Cơ mà không phải vòng lặp là xấu, ngược lại vòng lặp này mang tính tiến hoá nhiều hơn là "cải lùi". Nhiều khi lại tạo ra được cái hay hơi cái cũ thế là người ta lại dựa trên cái hay đó để tiếp tục lặp. Nói cách khác là chắc lọc tinh hoa từng tí một tí một á 😁

    » Xem thêm
  • Song song với các dự án chính thức thì thi thoảng mình vẫn thấy các dự án "bên lề" nhằm tối ưu hoặc cải tiến ngôn ngữ theo khía cạnh nào đó. Ví dụ nature-lang/nature là một dự án hướng tới cải tiến Go, mang lại một số thay đổi nhằm giúp cho việc sử dụng Go trở nên thân thiện hơn.

    Nhìn lại mới thấy hao hao JavaScript 😆

    » Xem thêm

Vấn đề

Có thể bạn đã biết, trước đây khi chưa có React, Vue... thì jQuery đã làm bá chủ một thời gian dài trên nền tảng web. Hầu như trang nào cũng phải dùng jQuery vì đó là thư viện có nhiều hàm tương tác với DOM rất mạnh mẽ. Rất nhiều thư viện được xây dựng dựa trên jQuery, thậm chí yêu cầu jQuery trước khi sử dụng. Nhưng vì quá nặng và cồng kềnh, kèm theo cả việc lạm dụng jQuery quá mức mà nó càng ngày càng bị ghét bỏ. Cộng với sự ra đời của nhiều công cụ xây dựng web hiện đại mà giờ đây nó đã bên "bờ vực của cái chết".

Khi truy cập vào một trang web, mỗi hành động của bạn như di chuột, bấm, gõ phím... thể hiện cho việc tương tác với DOM. DOM có thể hiểu đơn giản là các thành phần HTML hiển thị trên trang web. Ngoài ra, còn một vài thứ nữa có thể tương tác với DOM như là JavaScript. Tức là có thể sử dụng JavaScript để tạo ra tương tác với DOM thay cho người dùng. Từ đó chúng ta có thể tự động hóa một chuỗi các hành động mà không cần sự tương tác của con người nữa.

Hầu hết trình duyệt hiện đại đều cung cấp tính năng gọi là Console cho viết mã JavaScript ngay trang web đang truy cập. Đó cũng là nội dung của bài viết của ngày hôm nay, tôi sẽ lấy một ví dụ cụ thể về cách sử dụng JavaScript để thực hiện một hành động trên trang web. Hy vọng qua bài viết này bạn đọc có thể tạo ra nhiều tính ứng dụng hơn trong thực tế và áp dụng trong công việc hàng ngày.

DOM và JavaScript

Document Object Model (DOM) là một giao diện lập trình cho các trang web. Nó đại diện cho trang web để các chương trình có thể thay đổi cấu trúc, kiểu và nội dung tài liệu. DOM đại diện cho trang web (document) dưới dạng các nút và đối tượng. Qua đó, làm cho một số ngôn ngữ lập trình có thể tương tác với trang.

JavaScript có thể tương tác với DOM. Hình dung DOM như một Web API mà trình duyệt cung cấp cho JavaScript toàn quyền truy cập và chỉnh sửa. Hầu như trải nghiệm tuyệt vời trên web ngày nay đều có sự góp mặt của JavaScript. Nhiều Framework, Library ra đời dựa trên JavaScript đề cao khả năng tương tác với DOM, mang đến sự tiện lợi và thân thiện cho lập trình viên.

Trình duyệt cho phép chúng ta chạy mã JavaScript trực tiếp trên trang web thông qua Dev Tools. Ví dụ trong Chrome, sau khi bật Dev Tools và vào cửa sổ Console, có thể viết mã JavaScript vào đây và chạy nó.

Console của trình duyệt

Lợi dụng điều này mà trước đây nhiều kẻ tấn công mạng cố gắng lừa người dùng dán một đoạn mã vào Dev Tools nhằm ăn cắp dữ liệu người dùng. Đối với một người dùng thông thường không thể hiểu hết sự nguy hiểm của việc thực thi mã JavaScript ngay tại chính trang web đang sử dụng. Nhưng trong bài viết này, tôi không đi sâu vào chủ đề đó, mà mục đích là giúp cho các bạn hình dung được cách sử dụng JavaScript để tương tác với DOM.

Lý thuyết thì hơi suông, hãy lấy một ví dụ cụ thể là "Thả phản ứng liên tục vào tin nhắn trên web Telegram" để làm ví dụ .

Thả phản ứng liên tục vào tin nhắn trên web Telegram

Ngoài ứng dụng đa nền tảng, Telegram còn cho phép truy cập qua trang web. Một điều mà tôi thấy thích thú là tính năng thả phản ứng cho tin nhắn bằng các biểu tượng thể hiện cảm xúc. Thích vì nhiều khi mình không cần phải trả lời mà chỉ cần thả một biểu tượng, hoặc đôi khi thả để cho người gửi biết là mình đã đọc tin nhắn của họ, cảm xúc sau khi đọc được tin nhắn đó là như thế nào.

Tôi có thói quen rất hay thả phản ứng vào tin nhắn. Một phần vì muốn cho họ biết là mình đã đọc, một phần là do "nghịch ngợm". Telegram của tôi có một nhóm bạn chuyên nói chuyện trên trời dưới đất, và để cho bớt nhàm chán thì trong một lần rảnh rỗi tôi đã viết một đoạn mã cho nó tự thả phản ứng vào mỗi tin nhắn mà cả bọn gửi đến.

Để viết được mã, trước tiên chúng ta cần bỏ ra một ít thời gian nghiên cứu cách hoạt động của tính năng thả phản ứng.

Đầu tiên, mỗi khi di chuột vào khung thời gian thì các biểu tượng hiện ra, bấm vào biểu tượng nào đó thì là thả phản ứng thành công. Các tin nhắn khác cũng tương tự. Để ý là DOM chứa thành phần biểu tượng vẫn luôn có ở đó, chỉ dùng css để ẩn nó đi, chúng chỉ hiện lên khi di chuột vào.

Cách thả phản ứng hoạt động

Vậy ý tưởng là viết một đoạn mã lấy tất cả phần DOM chứa tin nhắn, lặp qua từng cái, bấm vào biểu tượng là thả phản ứng thành công.

Đầu tiên là hàm lấy tất cả tin nhắn:

const getListMessage = () => {
  return (
    document.querySelectorAll(
      "div.message-content-wrapper.can-select-text > div"
    ) || []
  );
};

div.message-content-wrapper.can-select-text > divselector của mỗi tin nhắn.

Hàm kiểm tra tin nhắn đã được thả phản ứng chưa bằng cách kiểm tra xem có element .Reactions chưa.

const checkReactMessage = (elm) => {
  if (elm) {
    return !!elm.querySelector(".Reactions");
  }
  return false;
};

Hàm thả phản ứng tin nhắn bằng cách click:

const react = (elm) => {
  if (elm) {
    elm.click();
  }
};

Một hàm xử lý chính:

const main = () => {
  const listMessage = getListMessage();
  listMessage.forEach((elm) => {
    if (!checkReactMessage(elm)) {
      react(elm.querySelector('div.quick-reaction'));
    }
  });
};

Cuối cùng gọi hàm main và xem kết quả. Nếu muốn nó tiếp tục thả phản ứng vào những tin nhắn mới sau đó thì thêm hàm setInterval để lặp lại hành động theo chu kỳ.

setInterval(main, 3000);

Kết quả.

Kết quả

Tổng kết

DOM là một giao diện lập trình cho các tài liệu web. JavaScript có thể tương tác với DOM một cách dễ dàng. Đặc biệt, việc có thể chạy JavaScript trực tiếp từ Console trong trình duyệt giúp bạn thoải mái tạo ra các hành động thay mặt người dùng một cách tự động hóa. Bài viết trên đây là một ví dụ cụ thể về việc JavaScript có thể thả phản ứng liên tục vào tin nhắn trên web Telegram. Ngoài ra bạn đọc có thể làm điều tương tự trên các trang web khác mà bạn muốn. Nếu có ý tưởng nào mới, hãy để lại bình luận cho tôi và mọi người cùng biết nhé. Xin cảm ơn.

Cao cấp
Hello

Tôi & khao khát "chơi chữ"

Bạn đã thử viết? Và rồi thất bại hoặc chưa ưng ý? Tại 2coffee.dev chúng tôi đã có quãng thời gian chật vật với công việc viết. Đừng nản chí, vì giờ đây chúng tôi đã có cách giúp bạn. Hãy bấm vào để trở thành hội viên ngay!

Bạn đã thử viết? Và rồi thất bại hoặc chưa ưng ý? Tại 2coffee.dev chúng tôi đã có quãng thời gian chật vật với công việc viết. Đừng nản chí, vì giờ đây chúng tôi đã có cách giúp bạn. Hãy bấm vào để trở thành hội viên ngay!

Xem tất cả

Đăng ký nhận thông báo bài viết mới

hoặc
* Bản tin tổng hợp được gửi mỗi 1-2 tuần, huỷ bất cứ lúc nào.

Bình luận (1)

Nội dung bình luận...
Avatar
Anh Đức Trừ1 năm trước

bài viết của mình về Google Chrome Developer Tools bạn đọc thử nhé. https://www.blogchemgio.com/2022/06/google-chrome-developer-tools.html

Trả lời
Avatar
Xuân Hoài Tống1 năm trước

Cảm ơn bạn, một bài viết khá chi tiết về developer tools 😄