HomeLập trìnhJavaScriptCách chèn mã...

Cách chèn mã JavaScript để thao tác trang web một cách tự động


Là nhà phát triển và người dùng internet, chúng ta thường bắt gặp các trang web hiển thị nhiều cửa sổ bật lên, từ yêu cầu đăng ký đến tường phí, quảng cáo đến thông báo, v.v.

Nhiều lần, chúng tôi sử dụng các trang web đó hàng ngày cho mọi thứ và thấy những cửa sổ bật lên đó lặp đi lặp lại đã cũ!

Các nhà phát triển có thể khắc phục những điều này bằng cách đi tới bảng điều khiển và tìm các bộ chọn để thao tác với mô hình đối tượng tài liệu (DOM) của trang web bằng cách thêm hoặc sửa đổi CSS hoặc JavaScript.

Nhưng giờ đây, nhờ có Google Chrome và kho tiện ích mở rộng của nó, bất kỳ ai cũng có thể tự động đưa mã vào bất kỳ trang web nào. Chúng tôi sẽ thực hiện từng bước quy trình trong hướng dẫn nhỏ này.

1. Cài đặt tiện ích mở rộng để tiêm mã

Những điều sau đây chỉ áp dụng nếu bạn sử dụng Google Chrome. Cài đặt JavaScript tùy chỉnh tiện ích mở rộng cho các trang web. Tiện ích mở rộng nhỏ này cho phép bạn tự động chạy JavaScript trên bất kỳ trang web nào và nó lưu mã cho các lần truy cập sau trong trình duyệt web của bạn.

Đọc thêm  Ưu điểm và nhược điểm của JavaScript

Đầu tiên, hãy truy cập trang web có các cửa sổ bật lên khó chịu mà bạn hay sử dụng. Đối với hướng dẫn này, tôi đang sử dụng trang web của The Washington Post:

1_BUguCP1rb7S-lFwVvC_1fg
Ảnh chụp màn hình hiển thị trang web của The Washington Post có bài viết đề cập đến Andrew Yang, cũng là công cụ dành cho nhà phát triển của Chrome.

2. Định vị các phần tử DOM và tạo mã chèn

Mở công cụ dành cho nhà phát triển Chrome của bạn bằng cách nhấn F12, sau đó xác định phần tử bằng cửa sổ bật lên.

Trong ví dụ này, các iframe phần tử có ID wallIframe chứa cửa sổ bật lên với một số nền mờ dần ở phía sau.

Bây giờ, chúng tôi sẽ sử dụng một đoạn mã JavaScript nhỏ để thêm CSS tùy chỉnh và kiểm tra xem chúng tôi có thể ẩn cửa sổ bật lên hay không.

/* DOM Manipulation
* If you want to update / add single style in DOM Element style attribute you can use this function:
* inject javascript after page reloads.
*/

function setCssStyle(el, style, value) {
  var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" +
      style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")),
    idx;
  if (result) {
    idx = result.index + result[0].indexOf(result[1]);
    el.style.cssText = el.style.cssText.substring(0, idx) +
      style + ": " + value + ";" +
      el.style.cssText.substring(idx + result[1].length);
  } else {
    el.style.cssText += " " + style + ": " + value + ";";
  }
}
var element = document.getElementById("wallIframe");
setCssStyle(element, "display","none !important");

Như bạn có thể thấy, trong đoạn mã trên, chúng tôi đang làm nổi bật phần tử wallIframe và ẩn nó bằng cách thêm CSS nội tuyến.

3. Kiểm tra mã tiêm

Kiểm tra mã của bạn trong bảng điều khiển dành cho nhà phát triển Chrome để đảm bảo mã đó hoạt động.

Ảnh chụp màn hình hiển thị trang web của The Washington Post có bài viết đề cập đến Andrew Yang, cũng là công cụ dành cho nhà phát triển của Chrome.
Ảnh chụp màn hình hiển thị trang web của The Washington Post có bài viết đề cập đến Andrew Yang, cũng là công cụ dành cho nhà phát triển của Chrome.

Như bạn có thể thấy ở trên, mã hoạt động.

Đọc thêm  JavaScript 随机数—— 如何在 JS 中生成随机数

Bây giờ là lúc để thêm nó vào tiện ích mở rộng, JavaScript tùy chỉnh cho các trang web và kiểm tra xem mã có hoạt động trong các lần truy cập trong tương lai hay không. Để thêm nó, hãy nhấp chuột trái vào biểu tượng tiện ích mở rộng trên thanh địa chỉ của bạn và thêm đoạn mã tùy chỉnh, sau đó nhấp vào lưu.

Trang sẽ ngay lập tức tải lại để thử và kiểm tra mã đã thêm của bạn.

Ảnh chụp màn hình hiển thị trang web của The Washington Post có bài viết đề cập đến Andrew Yang, cũng là công cụ dành cho nhà phát triển của Chrome.
Ảnh chụp màn hình hiển thị trang web của The Washington Post có bài viết đề cập đến Andrew Yang, cũng là công cụ dành cho nhà phát triển của Chrome.

4. Tiêm mã không hoạt động, làm sao bây giờ?

Sau khi kiểm tra, iframe không biến mất như khi chúng tôi kiểm tra nó trong bảng điều khiển. Một trong những lý do có thể là iframe tải sau X giây tải trang.

Chúng tôi có thể khai thác nhật ký mạng để xem có đúng như vậy không. Nhưng đối với các biện pháp tiết kiệm thời gian, chúng tôi sẽ thử thêm chức năng hết thời gian chờ vào đoạn mã ban đầu của mình để xem điều đó có hữu ích không.

setTimeout(
     function() {
       function setCssStyle(el, style, value) {
         var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" +
             style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")),
           idx;
         if (result) {
           idx = result.index + result[0].indexOf(result[1]);
           el.style.cssText = el.style.cssText.substring(0, idx) +
             style + ": " + value + ";" +
             el.style.cssText.substring(idx + result[1].length);
         } else {
           el.style.cssText += " " + style + ": " + value + ";";
         }
       }
       
       var element = document.getElementById("wallIframe");
       setCssStyle(element, "display", "none !important");
     }, 10000);

Bây giờ mã đợi 10 giây trước khi thực thi và thì đấy nó hoạt động hoàn hảo.

Bạn cũng có thể thêm trình xử lý sự kiện để đợi trang tải hoàn toàn.

Đọc thêm  Ví dụ JSON Stringify – Cách phân tích đối tượng JSON bằng JS

5. Suy nghĩ cuối cùng

Ví dụ:

document.addEventListener("DOMContentLoaded", function() { 
    // Your function goes here
}

Tuy nhiên, nếu chúng ta thêm mã bật lên sau X giây, chức năng trên sẽ không hoạt động, vì vậy tốt hơn hết hãy sử dụng chức năng hết thời gian chờ.

Bạn cũng có thể sử dụng tiện ích mở rộng để thêm nhiều đoạn thú vị khác, chẳng hạn như chặn quảng cáo, chặn cửa sổ bật lên, tăng phông chữ chuẩn của trang web, tăng khả năng phản hồi, cập nhật giao diện của trang web, v.v. Khi các đoạn mã JavaScript được thêm vào, chúng sẽ luôn chạy trong các lần truy cập vào các trang web đó trong tương lai.

Xin gửi lời cảm ơn đặc biệt tới Abbey Rennemeyer từ freeCodeCamp về phản hồi biên tập để chuẩn bị cho bài viết này.

TUYÊN BỐ MIỄN TRỪ TRÁCH NHIỆM: Quan điểm thể hiện trong bài viết này là của (các) tác giả và không đại diện cho quan điểm của Đại học Carnegie Mellon, cũng như các công ty khác (trực tiếp hoặc gián tiếp) có liên quan đến (các) tác giả. Những bài viết này không nhằm mục đích trở thành sản phẩm cuối cùng, mà là sự phản ánh suy nghĩ hiện tại, đồng thời là chất xúc tác để thảo luận và cải thiện.

Bạn có thể tìm thấy tôi trên: Trang web cá nhân của tôi, Phương tiện, Instagram, TwitterFacebook, LinkedIn hoặc thông qua công ty SEO của tôi.





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status