Author D.A.N_3002 2020-04-27

Hướng Dẫn Viết Chrome Extension Skip Quảng Cáo Youtube

Chắc hẳn khi mọi người nghe nhạc, xem video trên Youtube hay bị quảng cáo làm phiền. Vậy nên mình sẽ hướng dẫn mọi người viết một Chrome Extension để tự động nhấn skip quảng cáo trên Youtube chứ không phải mất công click nữa. Bài viết này giả định bạn đã có kiến thức cơ bản về Javascript.

Trước khi bắt đầu xây dựng extension, chúng ta cần có hiểu biết cơ bản về extension là gì và cách thức Chrome extension hoạt động. Chrome extension đơn là là một web app nhỏ tạo ra từ sự kết hợp giữa HTML, CSS và Javascript, cho phép tương tác với Chrome thông qua một số các Javascript APIs mà Chrome cung cấp.

Để tạo extension thì bạn sẽ cần những công cụ sau:

Text Editor: Để viết code, bạn có thể sử dụng bất kỳ loại nào tùy thích.
Google Chrome: Để có thể chạy được Extension của bạn thì cần một trình duyệt và mình khuyên nên chạy trên Chrome cho ổn định.

Và kiến thức căn bản về Javascript nữa là được.

Chức năng cơ bản của Extension này sẽ là:

Mỗi khi có quảng cáo trên Youtube thì thay vì chúng ta phải chờ 5s rồi nhấn nút skip thì Extension sẽ tự động nhấn nút skip giúp ta.

1. Một số khái niệm cơ bản trong Chrome Extension.

1.1 File manifest.json

Như tên gọi, đây là file chứa các thông tin cơ bản của Extension. Đây là một file mặc định phải có trong project để Chrome có thể biết Extension của bạn là gì và sẽ thực hiện các thao tác nào. Cấu trúc cơ bản của một file manifest.json sẽ như sau:

{
  "name": <Tên của Extension>,
  "manifest_version": <Phiên bản của file manifest, nên để là 2>,
  "version": <Phiên bản hiện tại của Extension>,
  "description": <Mô tả về Extension>
}

Ngoài ra còn rất nhiều thuộc tính khác, bạn có thể xem thêm ở đây.

1.2 Content Script

Đây chính là Script giúp bạn thao tác với trang web hiện tại, nó giống như việc bạn chèn thêm 1 thẻ <script> vào trang web đó. Một điểm đặc biệt nữa là Content Script vẫn sẽ giữ kết nối với Extension chứ không hẳn là 1 Script ngoài, bạn có thể chuyển dữ liệu từ extension xuống dưới content script (Mình sẽ nói rõ hơn phần này ở bài viết tới).

Bạn có thể thêm nhiều Content Script cho nhiều trang web khác nhau, để thêm thì bạn chỉ cần khai báo trong file manifest.json với cấu trúc như sau:

"content_scripts": [
   {
      "matches": [
         <Url của trang web mà bạn muốn chèn Content Script (Regex)>
      ],
      "js": [
         <Đường dẫn đến file Content Script>
      ]
   }
   ...
],

Bạn có thể đọc thêm về Content Script tại đây.

1.3 Một số khái niệm khác.

Hai khái niệm bên trên là cơ bản nhất khi bạn muốn viết một Chrome Extension, ngoài ra còn một số khái niệm nữa như sau:

2. Cài đặt Extension.

Để thêm Local Extension thì bạn cần làm theo hướng dẫn sau:

Vào url: chrome://extensions
Đảm bảo Developer mode checkbox trên góc phải là được tích.
Click Load unpacked extension… để mở file-selection dialog.
Tìm đến thư mục mà bạn đặt code của extension và chọn nó.

Sau đó, mỗi khi bạn code xong thì hãy nhấn nút Reload để nạp lại Extension.

3. Viết Extension:

3.1 Khởi tạo Project mới:

Chúng ta sẽ cần tạo ra 2 file là manifest.json và content.js. Nội dung file manifest.json như sau:

{
   "name": "Youtube Auto Skip Ads",
   "manifest_version": 2,
   "version": "0.0.1",
   "description": "Extension for auto click skip ads on Youtube",
   "content_scripts": [{
      "matches": [
         "https://www.youtube.com/watch*"
      ],
      "js": [
         "content.js"
      ]
   }]
}

Phần Content Script mình đang khai báo là: Extension sẽ cần chèn file content.js vào các trang web với url là: "https://www.youtube.com/watch*".

Để test xem phần Content Script đã đúng chưa thì mình sẽ viết vào file content.js như sau:

alert('Hello from Extension');

Như vậy, sau khi nạp Extension lên Chrome và vào một video youtube bất kỳ, nếu bạn thấy nó alert một hộp thoại trong ảnh tức là bạn đã chèn Content Script thành công :))

3.2 Xử lý phần tự động Click Skip:

Ok, đây là là phần khoai nhất của cả Project :)) Sau khi đi dò source code của Youtube thì mình nhận ra một số điều thú vị sau:

Luôn có 1 <div> với class là "video-ads ytp-ad-module" , đây là <div> dùng để chứa các HTML của quảng cáo. Tức là nếu như div này rỗng thì không có quảng cáo, còn nếu div này có child thì đang có quảng cáo và cần skip. Ta gọi đây là div container.
Khi click vào nút có class là "ytp-ad-skip-button ytp-button" thì sẽ bỏ qua quảng cáo.

Vậy là tìm hiểu xong, chúng ta sẽ cần phải biết được khi nào có quảng cáo, sau đó sẽ tự động click vào button để skip nó đi.

Đến bước này thì mình xin giới thiệu về 1 WebAPI vô cùng hữu dụng là MutationObserver trong Javascript. Đây là một WebAPI được các trình duyệt hiện đại cung cấp để phát hiện các thay đổi trên DOM. Với API này chúng ta có thể listen các node mới được thêm vào hoặc gỡ ra, thuộc tính thay đổi hoặc những thay đổi về nội dung văn bản trong một text node.

==> Chúng ta sẽ dùng API này để quan sát sự thay đổi DOM của div container.

Sửa lại file content.js như sau:

const container = document.getElementsByClassName("video-ads ytp-ad-module")[0];

const observer = new MutationObserver(() => {
   // Lấy element button
   const skipButton = document.getElementsByClassName("ytp-ad-skip-button ytp-button")[0];
   if (skipButton){
      // Nhấn vào button để skip quảng cáo
      skipButton.click();
   }
});

observer.observe(container, {childList: true});

Giải thích một chút, ở đây mình dùng MutationObserver để quan sát sự thay đổi DOM của div container, mỗi khi mà childList thay đổi thì mình sẽ kiểm tra xem có skipButton không. Nếu có tức là đang hiện quảng cáo và sẽ click để bỏ qua quảng cáo :)) Đó, đơn giản vậy thôi :))

4. Kết

Vậy là mình đã hướng dẫn cho các bạn xong, bây giờ mọi người đã có thể xem video Youtube mà không bị quảng cáo làm phiền rồi. Chú ý một chút là đây không phải là hack gì cả, mà chỉ là thay vì click skip bằng tay thì mình dùng máy để click thôi. Toàn bộ code mình đã để ở đây, các bạn có thể vào tham khảo: https://gitlab.com/dan3002/youtube-auto-skip-ads

Cảm ơn mọi người đã đọc hết bài viết, hy vọng mọi người góp ý thêm để bài viết sau tốt hơn. Nếu như có thắc mắc gì thì hãy comment ở dưới nhé, mình sẽ giải đáp :))