Cách làm bookmarklet

Bookmarklet là gì?

Bookmarklet là 1 đoạn mã Javascript có thể kéo thả vào thanh công cụ hoặc favourite của người dùng mà sau này khi cần thực thi chỉ cần nhấn vào đó. VD cho bookmarklet có khá nhiều, bạn có thể xem qua cách dùng bookmarklet để tải nhạc từ các trang chia sẻ nhạc trực tuyến. Một VD khác cũng khá nổi bật là bookmarklet của WordPress khi bạn soạn bài: phía dưới cùng của trang soan thảo có dòng Bookmark it, hãy kéo thả nó vào favourite; sau này khi bạn đang duyệt web và muốn viết 1 bài có chứa link đến trang web đang duyệt thì chỉ cần click vào favourite đó.

Bookmarklet còn có 1 trang tại http://www.bookmarklets.com/ chuyên dùng để chia sẻ các bookmarklet, bạn nên ghé qua đó xem, có thể có rất nhiều bookmarklet có ích cho bạn.

Cách viết bookmarklet

Như nói ở trên, bookmarklet là 1 đoạn Javascript, do đó những gì bạn cần làm là hãy bắt đầu viết 1 đoạn Javascript để làm hạt nhân cho bookmarklet của mình. Có thể chỉ đơn giản là 1 dòng alert('Hello wolrd!'). Tùy mục đích của mình mà viết đoạn mã Javascript như thế nào. Đây là phần công việc chính mà bookmarklet của bạn sẽ làm.

Sau khi viết xong đoạn hạt nhân của bookmarklet, hãy upload nó lên 1 host và ghi nhớ link đến đoạn mã đó, giả sử là http://host.com/code.js.

Bây giờ vấn đề là làm cho đoạn mã của bạn chạy được mỗi khi click vào biểu tựong của nó trên toolbar hoặc favourite. Để làm điều đó, bạn hãy tạo URL cho bookmarklet của mình, đó chính là URL trong favourite. Nhưng URL sẽ không có dạng giống như 1 trang web thông thường, mà sẽ là như sau:

function loadScript(scriptURL) {
var scriptElem = document.createElement('script');
scriptElem.setAttribute('language', 'JavaScript');
scriptElem.setAttribute('src', scriptURL);
document.body.appendChild(scriptElem);
}

loadScript('http://host.com/code.js');

Nhưng như thế hơi khó nhớ, vì vậy hãy làm 1 link liên kết đến đoạn code trên để người dùng dễ dàng đưa nó vào favourite hơn như sau:

<a href="javascript:function loadScript(scriptURL) { var scriptElem = document.createElement('script'); scriptElem.setAttribute('language', 'JavaScript'); scriptElem.setAttribute('src', scriptURL); document.body.appendChild(scriptElem);} loadScript('http://host.com/code.js');">Bookmarklet</a>

Và hãy nhớ nói với người dùng: Hãy kéo thả link trên vào toolbar hoặc favourite để sử dụng. Như vậy, mỗi khi muốn sử dụng bookmarklet của bạn, họ chỉ cần mở favourite rồi click lên bookmarklet đó thôi, rất tiện lợi.

Chúc các bạn có nhiều bookmarklet hữu ích.