Mình là Juno_okyo, tiếp theo Tutorial về Javascript Injection cơ bản tại đây. Hôm nay mình sẽ viết tiếp Tutorial Javascript Injection nâng cao nhé ;).
* Chuẩn bị:
- Trình duyệt: Mozilla Firefox [Download]
- Firebug: Dùng để tìm Element khi thực hiện Inject [Install]
- Greasemonkey: Cho phép ta thực thi Javascript trên 1 trang web bất kì mà không cần click như khi sử dụng bookmark [Install]
- JSView: Dùng để kiểm tra những tệp tin Javascript nào đã được nạp vào trang, ngoài ra nó còn cho phép kiểm tra cả CSS [Install]
- Trong Tutorial này mình sẽ thực hiện demo trên Localhost nhé. Các bạn có thể chọn 1 trang các bạn thích để làm :D.
* Cấu hình Greasemonkey:
Mặc định thì Greasemonkey sẽ dùng Scratchpad - 1 công cụ editor của Firefox để chỉnh sửa các đoạn Javascript. Nhưng bạn hoàn toàn có thể chọn Editor mà bạn thích, mình thì dùng Notepad++. Cách cấu hình Editor cho Greasemonkey như hình sau:
* Tạo 1 script mới để thực hiện Inject:Các bạn nhấn vào mũi tên cạnh biểu tượng của Greasemonkey => Chọn Greasemonkey Options => Nhấn tiếp vào Browse for Editor Program => Tìm đến Editor mà bạn thích => OK. Sau đó mỗi khi edit Javascript thì Greasemonkey sẽ tự mở bằng Edit mà bạn đã cấu hình.
- Bạn cần mở tab là website các bạn muốn Inject => Nhấn vào mũi tên cạnh biểu tượng Greamonkey => Chọn New User Script => Editor sẽ mở 1 tệp script mới.
1. Sử dụng Selector để tìm kiếm phần tử trong một trang web
- document.getElementById
- document.getElementsByName
- document.getElementsByTagName
2. Thay đổi phần tử
- Sau khi tìm được mục tiêu, bạn có thể sử dụng innerHTML để thay đổi mã nguồn của phần tử. Trước khi Injection:
- Sau khi Injection bằng innerHTML:
3. Thêm phần tử vào trang web
- Đầu tiên ta cần tạo 1 phần tử mới:- var newElement = document.createElement('p');
- newElement: là một biến mới.
- document.createElement: hàm này sẽ tạo 1 phần tử mới.
- p: là tên tag mà bạn cần thêm, nó là tham số của hàm createElement. Ví dụ bạn muốn thêm 1 div mới thì thay thành
document.createElement('div').
- newElement.innerHTML = 'This is new Element';
- select.appendChild(newElement); // newElement là tên biến được gán phần tử. Select là mục tiêu ta tìm trước đó.
4. Thêm CSS cho phần tử
- element.style.attribute = 'value';
- attribute: là tên thuộc tính CSS.
- value: là giá trị của thuộc tính đó.
5. Sử dụng jQuery để Inject
- Đây là kinh nghiệm của mình, khi sử dụng kĩ năng Javascript Injection mình luôn thêm jQuery vào trang để inject dễ dàng hơn:
- Thứ nhất, Selector của jQuery giúp bạn dễ dàng di chuyển và lựa chọn phần tử bạn cần.
- Dễ dàng chèn phần tử ở nhiều vị trí hơn (trước, sau, và chèn ra ngoài phần tử) thay vì sử dụng appendChild ở Javascript thuần.
- Sử dụng được các hiệu ứng tuyệt vời của jQuery để làm cho trang web bị inject trở nên... đẹp mắt hơn :P (các hiệu ứng fadeIn, fadeOut, Slide, Show, Hide,...).
- Sử dụng Ajax dễ dàng với thư viện ajax của jQuery trong trường hợp bạn muốn Inject 1 widget có sử dụng ajax để nạp dữ liệu vào trang web.
var newscript = document.createElement('script');
newscript.type = 'text/javascript';
newscript.src = 'http://code.jquery.com/jquery-2.0.3.min.js';
document.body.appendChild(newscript);
- Sử dụng add-on JSView đã chuẩn bị ở đầu để kiểm tra xem jQuery đã inject thành công chưa nhé :)
OK, tạm thời đến đây nhé! Mình sẽ còn viết tiếp Tutorial về chủ đề này trong các bài viết sau, chờ đón nhé :D
Tutorial được đăng tại Juno_okyo's Blog.
Cảm ơn bạn đã theo dõi!