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

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ó.

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.

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 > div là selector 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ả.

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.