Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

Đăng Ký

Bạn phải điền đầy đủ thông tin đăng ký!

  

[Userscript] Giới thiệu User script và cách sử dụng

    Quản trị viên

    baivong

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     21.08.15 13:58 

    Giới thiệu:

    User script được phát triển bởi Jesse Andrewsbạn bè.
    User script chủ yếu sử dụng javascript để viết ứng dụng cho trình duyệt, điểm đặc biệt là nó có thể truy cập vào một số API trình duyệt mà javascript thông thường không được phép.
    User script thường không được phép cài trực tiếp vào trình duyệt, mà phải chạy thông qua một tiện ích quản lý, nếu không trình duyệt sẽ xem nó như một tệp javascript thông thường. (Chrome và Opera cho phép chạy trực tiếp, tuy nhiên hỗ trợ API rất hạn chế và khó chỉnh sửa).
    Tùy nền tảng, và tiện ích hỗ trợ mà User script có đuôi mở rộng khác nhau như .tamper.js, .grease.js, .ieuser.js... tuy nhiên phổ biến nhất vẫn là .user.js, hầu hết các nền tảng đều hỗ trợ đuôi này.
    Tuy rằng không có những hàm API mạnh mẽ như các tiện ích mở rộng, nhưng nó cũng đủ để bạn xây dựng rất nhiều ứng dụng cho nhu cầu của mình. Tính tới thời điểm này thì đã có hơn 100.000 User script được viết và chia sẽ trên trang userscripts.org.
    Nói đơn giản thì User script là một tiện ích trình duyệt, viết bằng javascript. Chính vì thế bạn có thể viết một User script và dùng nó cho Chrome, Firefox, Opera, IE hay Safari, mà không cần lo vấn đề tương thích trình duyệt.
    Ngoài lề chút: Trước đây mình thường dùng tiện ích Youtube Center để tăng tốc xem video, sau đó mình đã khá ngạc nhiên khi biết rằng có thể sử dụng nó bằng User script, và còn rất nhiều tiện ích khác cũng có thể thay thế.


    Cách sử dụng:

    Đầu tiên bạn cần tải một trong các tiện ích quản lý User script cho trình duyệt của mình.
    Chọn 1 trong các liên kết dưới đây, tương ứng với trình duyệt đang sử dụng
    Firefox (hoặc các trình duyệt nền tảng Mozilla): Greasemonkey hoặc Scriptish
    Chrome (hoặc các trình duyệt nền tảng Chromium): Tampermonkey hoặc NinjaKit
    Opera: Violent monkey
    Safari: NinjaKit hoặc GreaseKit
    Internet Explorer: IEPro (Cài và sử dụng khá phiền phức).

    Sau đó, bạn có thể vào trang chia sẽ userscripts.org, để tìm một script phù hợp và nhấn Intall.
    Ví dụ: http://userscripts.org/scripts/show/183615

    Hoặc sử dụng chức năng tạo User script mới, và chép mã được chia sẽ vào sử dụng.
    Ví dụ: https://zzbaivong.forumvi.com/t41-userscript-sua-tien-to-cho-bai-viet


    Hướng dẫn viết User script:

    User script luôn chứa một metadata block, thường được đặt ở phần đầu tệp, đây là những dòng thông tin của User script như tên, phiên bản, giới hạn sử dụng...
    Các metadata cũng hỗ trợ khác nhau tùy tiện ích quản lý, nên mình chỉ giới thiệu một số metadata thường dùng, ít thay đổi.

    Định dạng chuẩn của một metadata block.
    Code:
    // ==UserScript==
    // @key value
    // ==/UserScript==
    Để thêm thông tin, bạn chỉ thêm:
    Code:
    // @key value
    ...vào giữa.

    Sau đây là một số khóa(key) metadata chính

    name
    Tên của User script. Ví dụ:
    Code:
    @name bv_Emo
    namespace
    Đây là tên bổ sung, nó được kết hợp với @name để tạo thành cặp khóa định danh cho User script đó, nếu bạn tạo ra một User script mới mà cặp khóa này trùng nhau, tiện ích quản lý sẽ xem nó như một bản cập nhật và thay thế nó. Vì @namespace không có nghĩa nên tác giả thường dùng để đăng URL website. Ví dụ:
    Code:
    @namespace http://devs.forumvi.com/
    version
    Phiên bản hiện tại. Giá trị này chỉ được sử dụng để hiển thị thông tin cho người dùng. Ví dụ:
    Code:
    @version 1.3
    icon
    URL icon, ảnh đại diện. Ví dụ:
    Code:
    @icon http://eemoticons.net/Upload/Cool%20Face%203/victory.png
    description
    Giới thiệu thông tin sơ lược. Ví dụ:
    Code:
    @description 40 Beautiful Emoticons and Smiley Icon Packs.
    copyright
    Thông tin bản quyền. Ví dụ:
    Code:
    @copyright 2013+, Zzbaivong
    include
    Giới hạn URL sẽ sử dụng, có thể sử dụng biểu thức chính quy (Regular Expressions). Có thể dùng nhiều khóa @include khi cần đặt nhiều thông tin giới hạn. Ví dụ:
    Code:
    @include http://*/chatbox*
    match
    Chức năng tương tự @include nhưng an toàn hơn, nó đặt quy tắc nghiêm ngặt hơn trong cách sử dụng dấu *. Xem chi tiết về Match Patterns. Trong một số trường hợp nó giống với @include. Ví dụ:
    Code:
    @match http://*/chatbox*
    exclude
    Ngược lại với @include, nó loại trừ URL trong giá trị. Cách sử dụng tương tự @include.
    downloadURL
    URL để cập nhật User script, nếu không đặt giá trị cho khóa này, tiện ích quản lý sẽ dùng URL lúc bạn tải về để làm URL cập nhật. Ví dụ:
    Code:
    @downloadURL http://userscripts.org/scripts/source/183615.user.js
    updateURL
    URL để lấy thông tin cập nhật, nếu thông tin #@version trong này mới hơn @version hiện tại, thì tiện ích quản lý sẽ tiến hành cập nhật User script. Ví dụ:
    Code:
    @updateURL http://userscripts.org/scripts/source/183615.meta.js
    require
    URL tập tin javascript cần sử dụng, thường là thư viện javascript hoặc plugin. Ví dụ:
    Code:
    @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
    resource
    Bổ sung thêm tài nguyên để sử dụng. Tài nguyên từ @require và @resource chỉ được tải về một lần vào máy người dùng và sử dụng, đến khi có bản cập nhật thì nó mới tải lại. Với tài nguyên được đặt tên, bạn có thể truy cập thông qua API GM_getResourceTextGM_getResourceURL tương ứng. Ví dụ:
    Code:
    @resource customCSS css/custom.css
    grant
    Đây là một khóa đặc biệt, bắt buộc tác giả sử dụng, khóa này đưa ra thông tin yêu cầu cấp quyền sử dụng API đặc biệt với tiện ích quản lý, nếu không có nó, tiện ích quản lý có thể đưa ra thông tin sai, gây lỗi. Nếu bạn không có yêu cầu quyền API đặc biệt hãy đặt giá trị none. Ví dụ:
    Code:
    @grant none
    run-at
    Thời điểm chạy User script so với trang web. Bao gồm 2 giá trị document-enddocument-start. Ví dụ:
    Code:
    @run-at document-end
    Ví dụ chung, một metadata block:

    Code:
    // ==UserScript==
    // @name         bv_Emo
    // @namespace    http://devs.forumvi.com/
    // @version      1.3
    // @description  40 Beautiful Emoticons and Smiley Icon Packs.
    // @copyright    2013+, Zzbaivong
    // @icon         http://eemoticons.net/Upload/Cool%20Face%203/victory.png
    // @include      http://*/chatbox*
    // @match        http://*/chatbox*
    // @downloadURL  http://userscripts.org/scripts/source/183615.user.js
    // @updateURL    http: http://userscripts.org/scripts/source/183615.meta.js
    // @require      http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
    // @run-at       document-end
    // @grant        none
    // ==/UserScript==
    Sau khi điền đầy đủ thông tin metadata block, bạn đã có thể bắt đầu viết code cho nó bằng javascript, sử dụng thêm API nếu cần thiết. Tuy nhiên, mức độ hỗ trợ API của mỗi nền tảng và mỗi tiện ích quản lý đều có vài điểm khác biệt, trong bài này mình chỉ hướng dẫn cách tạo User script cơ bản với javascript. Nếu bạn muốn viết nâng cao hơn thì nên tìm xem các tài liệu API của tiện ích quản lý mà bạn sử dụng.


    Zzbaivong
    You cannot reply to topics in this forum