Trong bài viết này, chúng ta sẽ tìm hiểu cách để chặn các tài nguyên cụ thể (yêu cầu HTTP, CSS, video, hình ảnh) khỏi việc tải trong Puppeteer. Puppeteer là một trong những công cụ phổ biến nhất cho việc trích xuất thông tin và tự động hóa trang web. Có một vài cách để chặn tài nguyên trong Puppeteer. Trong bài viết này, chúng ta sẽ đi qua tất cả các phương pháp mà chúng ta có thể sử dụng để chặn/chặn lại các yêu cầu mạng cụ thể trong kịch bản tự động hóa của chúng ta.
Tại sao chặn tài nguyên
Đầu tiên, hãy xem xét tại sao chúng ta muốn chặn một số tài nguyên cụ thể. Khi chúng ta viết các kịch bản tự động hóa bằng Puppeteer, thường trang của chúng ta sẽ tải các tài nguyên không cần thiết cho trường hợp sử dụng của chúng ta.
Ví dụ, hãy nói chúng ta đang viết một công cụ lấy dữ liệu web để duyệt qua một số trang web thương mại điện tử để tìm một sản phẩm cụ thể và giá của nó. Các trang web của các cửa hàng thương mại điện tử sẽ có một số hình ảnh về sản phẩm mà chúng ta không quan tâm. Các trang web cũng có thể có các thư viện javascript bên ngoài để theo dõi hành vi người dùng và thu thập dữ liệu phân tích. Đây là những tài nguyên mà chúng ta không quan tâm nhưng chúng sẽ làm chậm kịch bản của chúng ta. Do đó, chúng ta có thể chặn những tài nguyên này để làm cho kịch bản của chúng ta chạy nhanh hơn.
Chặn tài nguyên với API chặn yêu cầu của Puppeteer
Puppeteer có một phương thức gọi là setRequestInterception để chặn yêu cầu. Đây là cách đơn giản nhất để chặn tài nguyên. Hãy xem xét một ví dụ về điều này.
// index.js
const puppeteer = require('puppeteer');
async function main() {
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
await page.setRequestInterception(true);
page.on('request', (request) => {
// Block All Images
if (request.url().endsWith('.png') || request.url().endsWith('.jpg')) {
request.abort();
} else {
request.continue()
}
});
await page.goto('https://www.scrapingbee.com/');
await page.waitForTimeout(5000); // wait for 5 seconds
await browser.close();
}
main();
Cảm ơn bạn!
Trong ví dụ ở trên, chúng ta đang nhập thư viện Puppeteer và tạo một phiên duyệt mới. Tại dòng 7, chúng ta gọi hàm setRequestInterception và đặt nó thành true. Điều này sẽ cho biết cho Puppeteer biết rằng chúng ta muốn chặn các tài nguyên cụ thể trên trang này. Trong ví dụ này, chúng ta sẽ đi đến trang scrapingbee.com và chặn tất cả hình ảnh trên trang đó.
Puppeteer cung cấp cho chúng ta một hàm lắng nghe request. Đây là một hàm cho phép chúng ta theo dõi các yêu cầu HTTP của trình duyệt. Quan sát khối mã tại các dòng 8 đến 14. Chúng ta đang lắng nghe tất cả các yêu cầu được thực hiện bởi trình duyệt và chặn những yêu cầu chứa phần mở rộng hình ảnh. Bạn có thể thấy rằng hàm request.url() chứa thông tin URL. Chúng ta kiểm tra xem yêu cầu URL có chứa phần mở rộng hình ảnh như png hoặc jpeg hay không. Các yêu cầu chứa phần mở rộng hình ảnh sẽ bị chặn.
Bây giờ, chúng ta có thể chạy mã bằng lệnh node index.js. Chúng ta sẽ thấy kết quả sau đây.
Như bạn có thể thấy, tất cả các tài nguyên hình ảnh đã bị chặn.
Chặn tài nguyên theo loại
Có những lúc chúng ta muốn chặn các tài nguyên cụ thể theo loại. Ví dụ, chúng ta có thể muốn chặn tất cả các tệp phương tiện (ví dụ: mp3, mp4). Các tệp video và âm thanh mất nhiều thời gian để tải và làm chậm kịch bản. Do đó, việc chặn những tài nguyên này khi chúng ta viết một công cụ trích xuất thông tin từ web là một ý tưởng tốt. Dưới đây là một ví dụ về cách chặn tài nguyên theo loại.
const puppeteer = require('puppeteer');
async function main() {
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
await page.setRequestInterception(true);
page.on('request', (request) => {
// Block All Images
if (request.url().endsWith('.png') || request.url().endsWith('.jpg')) {
request.abort();
} else if (request.resourceType() === 'video') {
request.abort();
}
else {
request.continue()
}
});
await page.goto('https://ca.news.yahoo.com/');
await page.waitForTimeout(5000); // wait for 5 seconds
await browser.close();
}
main();
Cảm ơn bạn!
Trong ví dụ ở trên, chúng ta đang gọi hàm resourceType() trong đối tượng request. Hàm này trả về loại tài nguyên của yêu cầu. Chúng ta kiểm tra xem loại tài nguyên của yêu cầu có phải là video hay không. Nếu đó là video thì chúng ta sẽ chặn nó.
Chặn tài nguyên bằng các plugin
Tiếp theo, hãy xem cách chúng ta có thể chặn tài nguyên bằng cách sử dụng các plugin Puppeteer. Nếu bạn không quen thuộc với các plugin Puppeteer, tôi rất khuyến nghị bạn xem dự án Puppeteer-extra. Puppeteer-extra là một lớp bọc cho Puppeteer cho phép bạn sử dụng các plugin và thư viện hữu ích khác nhau với Puppeteer.
Để bắt đầu, chúng ta cần cài đặt Puppeteer-extra. Chúng ta có thể thực hiện điều đó bằng lệnh sau.
npm i puppeteer-extra
Tiếp theo, chúng ta sẽ cài đặt Block Resource Plugin bằng lệnh sau.
npm i puppeteer-extra-plugin-block-resources
Hãy tạo một mã script mới và cài đặt Plugin Chặn Tài Nguyên với Puppeteer.
const puppeteer = require('puppeteer-extra');
const blockResourcesPlugin = require('puppeteer-extra-plugin-block-resources')()
puppeteer.use(blockResourcesPlugin)
async function withPlugIn() {
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
blockResourcesPlugin.blockedTypes.add('media')
blockResourcesPlugin.blockedTypes.add('script')
await page.goto('http://www.youtube.com', {waitUntil: 'domcontentloaded'})
await page.waitForTimeout(5000); // wait for 5 seconds
await browser.close();
}
withPlugIn();
Chú ý trong đoạn mã trên, chúng ta sử dụng hàm use để thêm plugin vào Puppeteer. Plugin Chặn Tài Nguyên làm cho việc chặn tài nguyên trở nên dễ dàng. Chúng ta chỉ cần gọi hàm blockedTypes.add() với tham số thích hợp. Trong ví dụ ở trên, chúng ta đang chặn JavaScript bên ngoài và tài nguyên phương tiện.
Dưới đây là danh sách tất cả các tài nguyên khác nhau mà chúng ta có thể chặn bằng plugin này.
- document,
- stylesheet,
- image,
- media,
- font,
- script,
- texttrack,
- xhr,
- fetch,
- eventsource,
- websocket,
- manifest,
- other
Chúng ta có thể chọn thêm hoặc loại bỏ động các tài nguyên mà chúng ta muốn chặn. Dưới đây là một ví dụ.
...
blockResourcesPlugin.blockedTypes.add('script')
blockResourcesPlugin.blockedTypes.remove('stylesheet')
...
Trong đoạn mã trên, chúng ta đang chặn các tập lệnh trên trang. Sau đó, ở dòng 3 chúng ta chỉ định rằng chúng ta không muốn chặn các bảng điều khiển (CSS).
Tóm tắt
Cảm ơn bạn!
Hy vọng bài viết này đã mang đến cho bạn cái nhìn tổng quan về cách chặn tài nguyên bằng Puppeteer. Nếu bạn muốn tìm hiểu thêm về Puppeteer và các phương pháp tốt nhất cho việc trích xuất thông tin từ trang web, chúng tôi khuyến khích bạn ghé thăm ScrapingBee blog. Đó là tất cả cho hôm nay. Hẹn gặp lại bạn lần sau.
- Bài đăng trên blog này ban đầu được xuất bản tại: https://www.scrapingbee.com/blog/
