Skip to main content

[Tutorial] Javascript Injection nâng cao

Chào các bạn!

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]
* Add-on cần thiết cho quá trình test javascript:
  • 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]


*  Chọn mục tiêu:
  • 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:

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.
* Tạo 1 script mới để thực hiện Inject: 
  • 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.

OK! Mọi thứ đã sẵn sàng. Chúng ta bắt đầu Injection nhé! :)

1. Sử dụng Selector để tìm kiếm phần tử trong một trang web
  • document.getElementById
  • document.getElementsByName
  • document.getElementsByTagName
Các bạn có thể sử dụng 3 hàm trên tùy theo mục tiêu mà các bạn cần tìm (nếu Element đó có thuộc tính id="..." thì sử dụng getElementByID, hoặc muốn tìm theo tên tag thì dùng getElementByTagName,...).

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');
+ Trong đó:
  • 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').
- Ta cũng sử dụng innerHTML để thêm nội dung cho phần tử mới:
  • newElement.innerHTML = 'This is new Element';
- Sau khi đã gán phần tử mới vào 1 biến như trên, ta thêm phần tử vào trang bằng cách sử dụng appendChild:
  • 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 đó.
- Sau khi appendChild, ta được như sau:

4. Thêm CSS cho phần tử
  • element.style.attribute = 'value';
+ Trong đó:
  • attribute: là tên thuộc tính CSS.
  • value: là giá trị của thuộc tính đó.
Ví dụ:

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.
- OK, vậy làm sao để inject thư viện jQuery vào trang web? Hmm, hãy xem lại phần thêm phần tử nhé ;)).


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!

Share this with your friends
Loading...