Hướng dẫn how do you inject a script in html? - làm thế nào để bạn đưa một tập lệnh vào html?

Là nhà phát triển và người dùng Internet, chúng tôi thường bắt gặp các trang web hiển thị nhiều cửa sổ bật lên, từ các yêu cầu đăng ký đến các khoản thanh toán, 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 tất cả các loại, và thấy những cửa sổ bật lên đó đã cũ!

Các nhà phát triển có thể hiểu được những điều này bằng cách truy cập bảng điều khiển và tìm các bộ chọn để thao tác 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 bây giờ, nhờ Google Chrome và cửa hàng mở rộng của nó, bất kỳ ai cũng có thể tự động tiêm mã vào bất kỳ trang web nào. Chúng ta sẽ trải qua quá trình từng bước trong hướng dẫn nhỏ này.

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

Đ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 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ượt truy cập trong tương lai trong trình duyệt web của bạn.

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

2. Định vị các yếu tố DOM và tạo mã tiêm

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

Trong ví dụ này, phần tử

<div>one div</div>
<script>alert('some js')</script>

<div>one div</div>
<script>alert('some js')</script>

Bây giờ, chúng tôi sẽ sử dụng một đoạn trích JavaScript nhỏ để thêm CSS tùy chỉnh và kiểm tra xem chúng tôi có thể ẩn bật lên 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 mã trên, chúng tôi đang nêu bật phần tử

<div>one div</div>
<script>alert('some js')</script>

3. Kiểm tra mã tiêm

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

2. Định vị các yếu tố DOM và tạo mã tiêm

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

Trong ví dụ này, phần tử

<div>one div</div>
<script>alert('some js')</script>

<div>one div</div>
<script>alert('some js')</script>

2. Định vị các yếu tố DOM và tạo mã tiêm

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

Trong ví dụ này, phần tử

<div>one div</div>
<script>alert('some js')</script>

<div>one div</div>
<script>alert('some js')</script>

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ã chờ 10 giây trước khi nó thực thi và voilà nó hoạt động hoàn hảo.

Bạn cũng có thể thêm một trình nghe sự kiện để chờ trang hoàn toàn.

5. Suy nghĩ cuối cùng

Ví dụ:

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

Nhưng, nếu chúng ta thêm mã bật lên sau x giây, chức năng trên won won công việc, vì vậy tốt hơn là bám vào chức năng 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 hay 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ữ tiêu chuẩn của trang web, tăng khả năng phản hồi, cập nhật diện mạo của nó, v.v. Khi các đoạn trích JavaScript được thêm vào, chúng sẽ luôn chạy trong các lượt truy cập trong tương lai đến các trang web đó. & nbsp;

Một lời cảm ơn đặc biệt đến Abbey Rennemeyer từ Freecodecamp cho phản hồi biên tập để chuẩn bị bài viết này.

Tuyên bố miễn trừ trách nhiệm: Các quan điểm thể hiện trong bài viết này là những quan điểm 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) liên quan đến (các) tác giả. Những bài viết này không nhằm mục đích là sản phẩm cuối cùng, mà là sự phản ánh của suy nghĩ hiện tại, cùng với việc là chất xúc tác để thảo luận và cải tiến. The views expressed in this article are those of the author(s) and do not represent the views of Carnegie Mellon University, nor other companies (directly or indirectly) associated with the author(s). These writings are not intended to be final products, yet rather a reflection of current thinking, along with being a catalyst for discussion and improvement.

Bạn có thể tìm thấy tôi trên: Trang web cá nhân của tôi, Medium, Instagram, Twitter, Facebook, LinkedIn hoặc thông qua công ty SEO của tôi.