Hướng dẫn viết Chrome Extension tự động duyệt bài viết khi scroll

Mấy nay lướt lướt Facebook thấy nhiều bài viết đang chờ được duyệt trong nhóm quá. Là một người Mod quản lý nhóm cũng như duyệt các bài viết đúng nội quy là có các #hashtag hợp lệ. Vào cứ lướt lướt scroll rồi kiểm tra bài viết có hashtag chưa thì bấm nút Approve, thấy lười lười nên suy nghĩ có cách nào khi scroll mà thấy bài viết đó có hashtag hợp lệ thì tự động nhấn duyệt luôn không ta ? Thế là mình nghĩ ngay đến Chrome Extension.

Chắc trên mạng có nhiều rồi cơ mà mình chỉ dùng đơn giản và chỉ dùng cho bản thân mình mà thôi cho nên lên mạng tìm tòi mày mò cách viết Chrome Extension ra sao và ngồi mày mò viết ra được một extension đơn giản để tự động duyệt các bài viết hợp lệ cho các thành viên một cách nhanh gọn lẹ. Nên hôm nay vui vui chia sẻ cho các bạn biết cách tạo ra một extension như cái của mình như thế nào luôn nhé. Bắt đầu thôi nào.

# Thiết lập

Các bạn mở phần mềm VScode hoặc phần mềm soạn thảo code nào mà các bạn đang dùng. Sau đó các bạn tạo một thư mục tên gì cũng được, ở đây mình đặt là approve, sau đó mình tạo một file có tên là manifest.json, đây là file bắt buộc dùng khi viết Chrome Extension nhé.

{
  "manifest_version": 2,
  "name": "Scroll Approve Post",
  "description": "This extension description",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "js": ["content.js"]
    }
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab"]
}

Ở đây các bạn chú ý ở các mục như content_scripts chỗ matches nghĩa là nếu đường dẫn có dạng https://*/* thì extension chúng ta mới chạy được, * có thể là tên trang web, đường dẫn…, file content.js là code chúng ta sẽ làm sau, default_icon là ảnh cho extension kích thước 19×19, default_popup là khi các bạn muốn nhấn vào extension thì nó ra cái khung, chỗ này để các bạn có thể làm thêm UI hiển thị thêm chức năng. Cuối cùng là perrmissions: [“activeTab”] là quyền truy cập vào tab mà các bạn đang mở ấy.

Tiếp đến là các bạn tạo các file lần lượt là popup.html nội dung để trống cũng được do trong extension này chưa cần dùng tới, và file content.js để xử lý khi scroll ở trang duyệt bài của Admin. Cấu trúc thư mục lúc này gồm có các files như icon.png, popup.html, manifest.json và content.js.

# Sự kiện scroll

Khi scroll thì chúng ta sẽ dùng sự kiện scroll cho window như sau

window.addEventListener("scroll", function(){// handle approve post here});

Tuy nhiên có một vấn đề là khi các bạn sử dụng sự kiện scroll và mỗi khi các bạn scroll thì hàm sẽ chạy liên tục mỗi mili giây như vậy không tốt chút nào, mình muốn khi scroll thì sau khoảng 0,25s mới thực hiện hàm đó.

Để giải quyết vấn đề này thì mình có đọc trên mạng cách xử lý đó chính là sử dụng debounce. Hiểu nôm nà là nó sẽ không cho phép một hàm được gọi nhiều hơn một lần trong một khoảng thời gian nhất định. Điều này đặc biệt quan trọng khi chúng ta muốn gán xử lý cho một sự kiện mà sự kiến ấy xảy ra liên tục rất nhiều lần trong một khoảng thời gian ngắn trong trường hợp này là scroll.

Chúng ta có code debounceFn như sau:

function debounceFn(func, wait, immediate) {
  let timeout;
  return function() {
    let context = this,
      args = arguments;
    let later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    let callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

Đồng thời mình viết riêng một hàm có tên là handleApprove, để khi scroll sẽ gọi hàm này. Lúc này ta có code như sau:

window.addEventListener("scroll", debounceFn(handleApprove, 250));

Mình dùng cái debounceFn bọc cái hàm handleApprove lại và mỗi lần scroll sau 0,25s thì mình mới gọi hàm handleApprove

# Kiểm tra nội dung hợp lệ

Khi mình vào trang quản lý các bài viết đang được chờ duyệt, mình F12 lên và kiểm tra code của Facebook thì mình thấy rằng các bài viết là thẻ div có attribute role là article, và đều nằm trong một thẻ div cha có id là pending_queue. Lúc này mình viết đoạn code để lấy toàn bộ các bài viết đó như sau

const postList = [
    ...document.querySelectorAll(`#pending_queue > div > div[role="article"]`)
  ];

Và mình code tiếp thế này

if (postList.length > 0) {
    let content = "";
    for (let j = 0; j < postList.length; j++) {
      content = postList[j].querySelector(`div[data-testid="post_message"]`)
        .textContent;
      if (isValidContent(content)) {
        postList[j].querySelector(`a[ajaxify*="approve"]`) &&
          postList[j].querySelector(`a[ajaxify*="approve"]`).click();
      }
    }
  }

Mình sẽ kiểm tra xem biến postList có phần tử nào không, nếu có ít nhất một phần tử tức là .length > 0 thì mình sẽ xử lý tiếp. Mình tạo một biến content = "" để khởi tạo nội dung. Sau đó mình dùng vòng lặp for duyệt qua danh sách các bài viết ở postList, và mình kiểm tra tiếp trong HTML của facebook có thẻ div với data-testid="post_messsage" là nội dung mà các thành viên soạn thảo khi đăng bài. Ví dụ

#fe_question Xin chào các anh chị, cho em hỏi là….

Thì mình dựa vào các phần tử trong postList ở đây là postList[j] và chọn tới thẻ div với data-testid="post_message" và lấy nội dung chữ bên trong với phương thức textContent. Tiếp đến mình viết thêm một hàm có tên là isValidContent với tham số truyền vào là biến content để kiểm tra nội dung hợp lệ hay không thì mới duyệt. Hàm này có nội dung như sau

function isValidContent(content) {
  const validHashtags = [
    "#fe_question",
    "#fe_tutorial",
    "#fe_programming",
    "#fe_relax",
    "#fe_tips",
    "#fe_tricks",
    "#fe_course",
    "#fe_discussion"
  ];

  for (let i = 0; i < validHashtags.length; i++) {
    if (content.toLowerCase().includes(validHashtags[i])) {
      return true;
    }
  }
  return false;
}

Trong hàm này mình khai báo một biến là validHashtags là mảng chứa danh sách các hashtags hợp lệ của nhóm, sau đó mình dùng vòng lặp để chạy qua mảng hashtags này và kiểm tra nếu nội dung truyền vào tức là biến content sau khi chuyển sang in thường bằng phương thức toLowerCase() và kiểm tra nếu nó chứa một trong các từ khoá đó bằng phương thức includes, thì trả về true. Không thì hàm này sẽ trả về false.

Quay lại đoạn code trên mình đã nói tới khúc này. Nếu isValidContent trả về đúng thì sẽ chạy đoạn code bên trong. Thì mình lại mò tiếp HTML của Facebook xem cấu trúc chỗ nút Approve là gì thì thấy nó là thẻ a và có attribute là ajaxify có chứa từ approve.

if (isValidContent(content)) {
  postList[j].querySelector(`a[ajaxify*="approve"]`) && postList[j].querySelector(`a[ajaxify*="approve"]`).click();
}

Lúc này từ phần tử mình đang xét tới, mình truy vấn tới thẻ a đó bằng cấu trúc là a[ajaxify*="approve"] *= nghĩa là có chứa từ approve, và cho chắc cú thì mình kiểm tra là nếu có nó thì nó sẽ trigger sự kiện click(). Như vậy là xong. Toàn bộ code trong file content.js lúc này sẽ như sau.

// debounce
function debounceFn(func, wait, immediate) {
  let timeout;
  return function() {
    let context = this,
      args = arguments;
    let later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    let callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}
function isValidContent(content) {
  const validHashtags = [
    "#fe_question",
    "#fe_tutorial",
    "#fe_programming",
    "#fe_relax",
    "#fe_tips",
    "#fe_tricks",
    "#fe_course",
    "#fe_discussion"
  ];

  for (let i = 0; i < validHashtags.length; i++) {
    if (content.toLowerCase().includes(validHashtags[i])) {
      return true;
    }
  }
  return false;
}
function handleApprove() {
  const postList = [
    ...document.querySelectorAll(`#pending_queue > div > div[role="article"]`)
  ];
  if (postList.length > 0) {
    let content = "";
    for (let j = 0; j < postList.length; j++) {
      content = postList[j].querySelector(`div[data-testid="post_message"]`)
        .textContent;
      if (isValidContent(content)) {
        postList[j].querySelector(`a[ajaxify*="approve"]`) &&
          postList[j].querySelector(`a[ajaxify*="approve"]`).click();
      }
    }
  }
}
// Auto approve when scroll
window.addEventListener("scroll", debounceFn(handleApprove, 250));

# Sử dụng

Ở đây mình chỉ sử dụng ở máy mình, không có đăng lên cho ai sử dụng cả cho nên mình sẽ chỉ cho các bạn cách dùng dưới máy tính các bạn hoặc các bạn có thể chia sẻ thư mục cho bạn bè bạn để sử dụng cũng được như sau.

Các bạn nhấn vào chỗ 3 chấm dọc của Chrome trên cùng bên phải, dropdown xổ ra chọn more tools sau đó chọn mục Extensions. Tiếp đến các bạn chọn mục Development mode bên góc bên phải, lúc này thanh Development mode hiện xuống bên trái, các bạn chọn load unpacked và chọn folder mà các bạn đã tạo hồi nãy, ở đây mình đặt là approve.

Bây giờ mỗi lần mình vào trang quản lý bài viết chờ duyệt và scroll xuống là sẽ tự động duyệt bài viết, đơn giản và cũng tuyệt vời chứ nhỉ.

Như vậy là xong, các bạn có thể dùng extension được rồi, nếu các bạn là admin hay mod gì đó có thể test thử nhé. Nếu có lỗi gì hay hỏi thêm về kiến thức Extension hay bài viết mình có sai sót gì mong được các bạn góp ý. Chúc các bạn một ngày tốt lành

Lưu ý mỗi nhóm sẽ có một rule khác nhau và hashtag khác nhau, bài của mình chỉ áp dụng vào group mình đang quản lý, có thể group các bạn khác, các bạn có thể thay hoặc thêm chỗ validHashtags sao cho phù hợp nhé. Nếu các bạn muốn tự làm extension đa dạng, mạnh mẽ hơn nữa thì có thể lên Youtube tìm kiếm từ khoá Chrome Extenstion Tutorial nhé.

.