Tự xây dựng tiện ích mở rộng cho trình duyệt web, Phần 3: Xây dựng tiện ích mở rộng trên Safari

Viết một tiện ích mở rộng cơ bản cho trình duyệt Safari

Mỗi trình duyệt đều có lượng người dùng ủng hộ, bên cạnh đó cũng có những ưu và nhược điểm. Tuy vậy, chúng cũng có một điểm chung là mọi người càng ngày càng dành nhiều thời gian để sử dụng chúng. Loạt bài này hướng dẫn cho bạn cách xây dựng một tiện ích mở rộng cơ bản cho các trình duyệt Chrome, Firefox và Safari. Bạn sẽ biết được cách làm thế nào để mở rộng các trình duyệt, mức độ khó dễ khi thực hiện một số thao tác cơ bản và làm thế nào để phân phối tiện ích mở rộng của bạn. Trong khuôn khổ bài viết này, bạn sẽ được hướng dẫn cách xây dựng tiện ích mở rộng cho trình duyệt Safari.

Duane O'Brien, Phát triển PHP, Java, Freelance

Duane O'Brien là một nhà khoa học máy tính. Ông đã có nhiều bài viết về phát triển ứng dụng web và về các framework PHP khác nhau. Để tìm hiểu thêm về Duane, bạn xem trang blogtwitter của ông.


Cấp độ đóng góp cho developerWorks của
        tác giả

26 09 2013

About this series

Trong loạt bài bốn phần này, bạn sẽ học cách xây dựng một phần mở rộng (extension) Gawkblocker cho ba trình duyệt: Chrome, Firefox, và Safari.

  • Trong Phần 1, bạn đã xây dựng extension cho trình duyệt Chrome khởi đầu cho việc đưa nó lên kho ứng dụng.
  • Trong Phần 2, bạn đã xây dựng một add-on (hay còn gọi là extension) cho Mozilla Firefox.
  • Trong phần này, bạn sẽ xây dựng extension cho trình duyệt Safari.
  • Trong Phần 4, tinh chỉnh mã của bạn để tạo ra extension chạy được trên cả ba trình duyệt.

Bài viết này là phần thứ ba trong loạt bài bốn phần nói về việc xây dựng các tiện ích mở rộng cho trình duyệt, bài này sẽ hướng dẫn bạn cách làm thế nào để xây dựng một tiện ích mở rộng cho Safari. Bạn đã xây dựng phần mở rộng Gawkblocker cho trình duyệt Chrome trong Phần 1 và cho trình duyệt Firefox trong Phần 2. Trong bài viết này, bạn sẽ chuyển phần mở rộng Gawkblocker sang Safari. Hãy xem mục Tải về để lấy về mã nguồn đầy đủ.

Gawkblocker redux

Hãy nhớ lại, Gawkblocker cho phép bạn (và những người dùng khác) khóa những tên miền nào đó mà bạn không muốn truy cập, chẳng hạn như những trang blog làm tốn thời gian. Gawkblocker có một số thành phần:

  • Một cửa sổ pop-up hiển thị cho bạn thấy những gì bạn đang chặn.
  • Một biểu tượng của phần mở rộng trên trình duyệt.
  • Một trang tùy chọn cấu hình các tên miền mà bạn muốn chặn và địa chỉ bạn muốn thay thế

Trong Chrome, phần mở rộng Gawkblocker của bạn sẽ gắn một sự kiện lắng nghe vào mỗi thẻ (tab) hoặc cửa sổ và các URL phù hợp vào một danh sách chặn, chuyển hướng URL bị chặn đến một trang nội bộ. Các add-on của Firefox hoạt động theo nhiều cách giống nhau, và bạn hoàn toàn có thể trông đợi cách hoạt động tương tự trên Safari.

Gawkblocker được đưa vào trình duyệt theo cách cụ thể để làm những việc giống như bạn sẽ làm với tất cả các phần mở rộng mà bạn xây dựng trong loạt bài này. Cũng như những gì bạn đã làm trong các bài về Chrome và Firefox, bạn muốn lời giải đáp cho những câu hỏi dưới đây:

  • Sẽ khó khăn ra sao khi hiển thị phần mở rộng trên giao diện trình duyệt?
  • Tham gia gì vào việc lưu trữ dữ liệu giữa các phiên (session) của trình duyệt?
  • Làm thế nào để các phần mở rộng khác nhau giao tiếp với nhau?
  • Làm thế nào bạn có thể can thiệp sâu vào dữ liệu người dùng?

Bạn có thể trả lời những câu hỏi này sau khi bạn hoàn thành quá trình xây dựng Gawkblocker cho Safari.


Trước khi bắt đầu

Đối với bài viết này, bạn cần một máy Mac chạy phiên bản hiện hành của trình duyệt Safari (tại thời điểm tôi viết bài này thì phiên bản Safari là 6.0). Apple cũng đòi hỏi các nhà phát triển tiện ích mở rộng đăng ký Chương trình phát triển miễn phí của Apple (Apple Developer Program) (xem phần Tài nguyên). Bạn cũng cần có một công cụ chỉnh sửa HTML, CSS và JavaScript. Kinh nghiệm của tôi cho thấy sẽ rất hữu ích khi sử dụng trình duyệt Safari với một số tiện ích mở rộng. Nếu bạn chưa có kinh nghiệm, hãy xem qua kho tiện ích mở rộng của Safari (Safari Extensions Gallery) (xem phần Tài nguyên). Hãy dùng thử một vài tiện mở rộng được đề cập trong bài này.

Bạn sẽ làm hầu hết công việc của mình bằng công cụ Safari Extension Builder, được tích hợp sẵn vào trình duyệt Safari 5.0 trở lên. Với Safari Extension Builder, bạn có thể xây dựng, cài đặt, nạp lại, và gỡ bỏ cài đặt tiện ích mở rộng Safari từ bên trong Safari. Để sử dụng nó, bạn phải tải về và cài đặt Developer Certificate từ Safari Dev Cente (xem phần Tài nguyên) và làm theo hướng dẫn đơn giản.Tài liệu tham khảo của bạn sẽ là Safari Extensions Reference (xem Tài nguyên).

Xem mục Tải về để lấy về mã nguồn.


Phân tích một tiện ích mở rộng cho trình duyệt Safari

Gawkblocker dành cho Safari sẽ có:

  • Một trang mở ra mỗi khi Safari khởi động (được gọi là global page (trang tổng quan) hay global HTML page (trang HTML tổng quan) trong thuật ngữ phát triển Safari)
  • Một tập tin JavaScript chứa một số chức năng cốt lõi (sao chép từ tiện ích mở rộng của Chrome)
  • • Một trang pop-up/tùy chọn kết hợp (chuyển từ tiện ích mở rộng của Firefox) — trong Hình 1 — vì vậy bạn chỉ có một trang để quản lý
    Hình 1. Trang pop-up/tùy chọn
    Hình ảnh trang Pop-up/Tùy chọn của trình mở rộng trên Safari
  • Một biểu tượng trên thanh công cụ sử dụng cho tiện ích mở rộng của bạn
  • Một trang hiển thị khi người dùng nhấp chuột vào biểu tượng trên thanh công cụ (một cửa sổ popover)

Thêm vào JavaScript

Bạn có thể thêm CSS hay JavaScript vào các trang trong Safari cũng giống như trong Chrome và Firefox. Bạn đặt CSS hay JavaScript vào một tập tin bên ngoài và chỉ định trong Extension Builder mà bạn muốn thêm nó. Tuy nhiên, bạn sẽ không thêm nó cho Gawkblocker.

Các trang là HTML, CSS và JavaScript. Kết quả là một thứ gì đó lai giữa tiện ích mở rộng của Chrome và Firefox.

Tiện ích mở rộng định nghĩa chính nó trong một tập tin Info.plist. Bạn sẽ không sửa đổi tập tin này trực tiếp. Safari Extension Builder sẽ tạo ra nó cho bạn. Info.plist chứa các thông tin tương tự như những gì bạn đặt trong tập tin manifest.json của phần mở rộng Chrome, nhưng Info.plist là một tập tin XML.


Sử dụng Safari Extension Builder

Để sử dụng Trình tạo tiện ích mở rộng (Extension Builder), bạn phải kích hoạt thực đơn (menu) Develop trong Safari->Preferences->Advanced bằng cách đánh dấu vào Show Develop menu in menu bar, như trong Hình 2:

hình 2. Kích hoạt menu Develop
Hình ảnh hộp thoại Preferences hiển thị lựa chọn 'Show Develop menu in menu bar'

Giờ hãy khởi động Safari Extension Builder từ thanh menu của Safari. Khi Extension Builder khởi chạy lần đầu, nó trông như một hộp thoại trống lớn. Nhấp vào biểu tượng dấu cộng (+) ở góc dưới bên trái để ra lệnh với nó rằng bạn muốn tạo ra một phần mở rộng. Một hộp thoại xuất hiện hỏi bạn nơi lưu các phần mở rộng, như trong Hình 3:

Hình 3. Tạo một tiện ích mở rộng
Hình ảnh Safari Extension Building hiển thị cách tạo một phần mở rộng mới

Chỉ định một thư mục, và sau đó sao chép vào thư mục đó:

  • Các tập tin background.html và gawkblocker.js từ tiện ích mở rộng của Chrome .
  • Các tập tin popup.html từ add-on Firefox.
  • Thư viện jQuery bạn đang sử dụng (nếu có).
  • Một tập tin icon.png. Biểu tượng của bạn phải là một hình vuông ít nhất là 64 x 64 pixel và rõ ràng, ngoại trừ hình ảnh thực tế mà bạn muốn nó hiển thị. (Để biết chi tiết, hãy tham khảo tiện ích mở rộng cho Safari trong phần Tài nguyên.)

Với những tập tin đã có, bạn đã sẵn sàng để nhập thông tin vào Builder Extension. Hình 4 cho thấy các thiết lập ban đầu của các trường cần hoàn thành.

Hình 4. Cấu hình phần mở rộng, phần 1
Hình ảnh bắt đầu tinh chỉnh Gawkblocker trong công cụ Extension Builder

Trong Hình 4, hoàn thành các trường sau:

  • Display Name: Tên của phần mở rộng mà bạn muốn hiển thị trên danh sách các tiện ích mở rộng.
  • Author: Tên tác giả (tên của bạn).
  • Description: Một đoạn ngắn mô tả về tiện ích mở rộng của bạn.
  • Website: Một đường dẫn URL tới một trang web nơi mà mọi người có thể có được nhiều thông tin ở đó.
  • Bundle Identifier: Một cái gì đó trong định dạngorgtype.yourentity.yourextension (ví dụ, com.dontgothere.gawkblocker).
  • Display Version: Phiên bản hiển thị khi người dùng kiểm tra danh sách tiện ích mở rọng.
  • Bundle Version: Một phiên bản nội bộ chi tiết hơn để hệ điều hành sử dụng để kiểm tra các bản cập nhật.
  • Extension Website Access: Các tùy chọn ở đây là None, Some (and provide a list), hay All. Để lấy một đường dẫn URL mà trình duyệt đang tải, Gawkblocker phải sử dụng mức độ truy cập là All.
  • Global Page File: Trang chạy nền.
  • Database Quota: Giới hạn kích thước lớn nhất cho cơ sở dữ liệu localStorage của tiện ích mở rộng. Trong trường hợp này 1MB là quá đủ.

Thực hiện tới bước này mọi chuyện vẫn còn đơn giản nhưng khi bạn kéo xuống để thêm mục Toolbar và Popovers thì sẽ phức tạp hơn, như trong Hình 5:

Hình 5. Cấu hình tiện ích mở rộng, phần 2
Hình ảnh tiếp tục tinh chỉnh Gawkblocker trong công cụ Extension Builder

Bắt đầu bằng cách xác định popover trong phần Popovers. Phần này xác định cửa sổ mà Safari mở khi người dùng nhấn chuột (click) vào biểu tượng Gawkblocker trên thanh công cụ. Cung cấp cho popover một Identifier (định danh) duy nhất, xác định File (tập tin) để nạp vào trong cửa sổ, và xác định Width (chiều rộng)Height (chiều cao) của cửa sổ.

Bây giờ hãy tới phần Toolbar Items (mục thanh công cụ) để thêm một item mới vào Toolbar. Cung cấp cho nó một Label (nhãn) (nội dung trong tooltip), xác định Image (hình ảnh) sử dụng cho nút, nhập Popover để sử dụng (một trong những cái bạn vừa tạo ra), và cung cấp cho Toolbar Item một Identifier (định danh) duy nhất.

Ở trên cùng của giao diện Extension Builder, giờ đây bạn có thể ra lệnh build (xây dựng) và cài đặt tiện ích mở rộng cục bộ — tuy nhiên nó vẫn chưa làm việc được. Trước tiên bạn cần phải thực hiện một vài thay đổi.


Cập nhật các tập tin Gawkblocker

Chỉ có 3 tập tin hoạt động là: gawkblocker.js, background.html, và popup.html. Tập tin gawkblocker.js là tập tin mà bạn đã sao chép từ tiện ích mở rộng của Chrome có thể sử dụng ngay mà không cần thay đổi. Nhưng 2 trang khác thì cần sự thay đổi.

Tạo trang toàn cục giao tiếp với Safari

Rõ ràng bạn không thể gọichrome.windows (một Chrome API) trong trang background.html, vì vậy bạn phải thay thế các lời gọi API tương ứng trong Safari. Và bạn cũng không thể đưa người dùng tới trang địa phương như bạn đã làm trong Chrome với instead.html. Thay vào đó, bạn sẽ gửi cho chúng video của Madness trên YouTube, như trong Liệt kê 1:

Liệt kê 1. Gửi người dùng đoạn video trên YouTube
...
if (!GB.getWatchThisInstead()) {
    GB.setWatchThisInstead("http://www.youtube.com/watch?v=N-uyWAe0NhQ");
}
...

Các bộ lắng nghe sự kiện của Safari có một chút khác biệt so với Chrome. Trong Safari bạn chỉ định các sự kiện mà bạn đang lắng nghe và xứ lý cho sự kiện này, và Safari duyệt qua các sự kiện này để xử lý. Vì vậy bạn cần một tính năng xử lý sự kiện như Liệt kê 2:

Liệt kê 2. Lắng nghe sự kiện trong Safari
function shouldIBlockThis(event) {
    var site;
    for (site in GB.getBlockedSites()) {
        if (event.url && event.url.match(site)) {
            event.preventDefault();
            event.target.url = GB.getWatchThisInstead();
        }
    }
}

Với chức năng nắm bắt sự kiện được thiết lập, thì ta hoàn toàn có thể lắng nghe được sự kiện. Safari cung cấp cho bạn sự kiệnbeforeNavigate được gióng lên trước khi gọi đến một đường dẫn URL:

safari.application.addEventListener("beforeNavigate", shouldIBlockThis, true);

Nhìn chung, những thay đổi trong trang background.html là tối thiểu. Còn những thay đổi trong popup.html cũng không sâu hơn.

Tạo cửa sổ pop-up giao tiếp với Safari

Trong Firefox, bạn có nhiều thông điệp gửi từ main.js đến cửa sổ pop-up. Trong Safari, bạn có thể gọi đến trang chính, tương tự với Chrome. Bạn có thể get (nhận)set (đặt) giá trị trực tiếp trong đối tượng GB. Vì thế, lấy sự chuyển hướng hiện tại và đặt giá trị vào trường thích hợp:

$("#watchthatinstead").val(
   safari.extension.globalPage.contentWindow.GB.getWatchThisInstead());

Sau khi thay thế tất cả các điểm mà bạn muốn gửi thông điệp đến main.js bằng các lời gọi phù hợp đến trang chính thì bạn không cần phải làm gì thêm nữa. Popover giúp duy trì trạng thái, không giúp như cửa sổ pop-up trong Chrome. Mỗi khi cửa sổ pop-up mở thì trạng thái sẽ được thiết lập lại. Safari cung cấp một sự kiện giúp thực hiện điều này dễ dàng:

safari.application.addEventListener(
   "popover", function() { $("#onestep").show();$("#options").hide();}, true);

Bạn cũng có thể làm sạch các cách bạn cập nhật danh sách chặn, như trong Liệt kê 3:

Liệt kê 3. Làm sạch cách cập nhật danh sách chặn
function showBlockList () {
    var blockList = safari.extension.globalPage.contentWindow.GB.getBlockedSites();
    $("#blockedlist").children().remove();
    $("#blocklist").children().remove();
    var i=1;
    $.each(blockList, function (index, value) {
        $("#blockedlist").append("<div class='siterow' title='"+value+"'><div
 class='sitename'>"+index+"</div><span class='sitedesc'> : "+value+"
 </span></div>");
        $("#blocklist").append("<div id='site-"+i+"'><input type='button' 
 id='unblock-"+i+"' value='OH GO ON THEN' /> " + index + "</div>");
        $("#unblock-"+i).click(function () {
            safari.extension.globalPage.contentWindow.GB.removeBlockedSite(index);
            showBlockList();
        });
        i++;
    });
}

Nhìn chung, không có nhiều thay đổi. Bạn cũng không tốn nhiều công sức mà chỉ cần kế thừa lại các việc đã làm khi xây dụng Gawkblocker trên Chrome và Firefox để xây dựng tiện ích mở rộng này cho Safari.


Tiến hành kiểm thử từ Extension Builder

Khi bạn sử dụng Extension Builder, bạn có những công cụ hỗ trợ việc kiểm thử. Đầu tiên, phía trên bên trái có các nút Install/Uninstall và Reload để cài đặt và thiết lập các thay đổi cho việc kiểm thử dễ dàng. Nhấn vào Inspect Global Page để hiển thị Web Inspector cho phép xem hình nền trang. Hình 6 hiển thị Web Inspector khi hoạt động:

Hình 6. Web Inspector cho trang chính
Hình ảnh Web Inspector cho trang toàn cục

Phân phối tiện ích mở rộng của bạn

Khi đã chắc chắn tiện ích mở rộng của bạn sẵn sàng ra mắt, bạn có nhiều lựa chọn để phân phối nó. Bạn có thể tải về - phân phối một phần mở rộng đã đóng gói hoặc đăng tải phần mở rộng của bạn lên Safari Extensions Gallery.

Phân phối tiện ích mở rộng đã đóng gói

Để phân phối một tiện ích mở rộng đã đóng gói, hãy tải nó về từ Extension Builder. Nhấn vào Build Package để tải về tệp .safariextz có thể được cài đặt bởi bất kỳ ai. Bạn có thể phân phối bằng bất kỳ cách nào mà bạn muốn (bằng email, đăng lên máy chủ, tạo bộ cài đặt, và những cách khác). Nhưng bạn phải quản lý những cập nhật và lưu trữ.

Gửi tiện ích mở rộng lên Safari Extensions Gallery

Bạn có thể gửi tiện ích phần mở rộng để đánh giá và thêm nó vào Extensions Gallery. Hoàn tất các bước theo yêu cầu — những yêu cầu xác thực, đồng ý với các quy định của Apple, và những chi tiết khác được cung cấp. Extensions Gallery là cách tốt nhất để người dùng Safari có thể khám phá tiện ích mở rộng của bạn.


Tìm kiếm câu trả lời

Và bây giờ thì tiện ích mở rộng cho Safari đã hoàn thành, giờ là lúc nhìn lại xem chúng ta đã có được những câu trả lời nào, tương tự những câu trả lời cho Chrome và Firefox:

Sẽ khó khăn ra sao khi hiển thị phần mở rộng trên giao diện trình duyệt?
Thậm chí còn dễ dàng hơn so với Chrome. Extension Builder của Safari thực hiện nhiều phỏng đoán bên ngoài quy trình.
Tham gia gì vào việc lưu trữ dữ liệu giữa các phiên (session) của trình duyệt?
Việc sử dụng localStorage giống với khi bạn sử dụng cho trình duyệt Chrome, điều đó giúp cho việc giữ ổn định dữ liệu giữa các phiên làm việc của trình duyệt trở nên đơn giản.
Làm thế nào để các phần mở rộng khác nhau giao tiếp với nhau?
Bằng việc truy cập trực tiếp vào trang toàn cục, bạn có thể dễ dàng lấy thông tin đến và đi từ các phần khác nhau của trình mở rộng.
Làm thế nào bạn có thể can thiệp sâu vào dữ liệu người dùng?
Safari cung cấp một số độ sâu chi tiết cho phép bạn yêu cầu, tuy nhiên — với khả năng chèn mã kịch bản vào trang của người dùng và truy cập tất cả những trang mà người dùng đã ghé thăm — bạn có thể đi sâu vào dữ liệu. Ngoài ra, đáng lưu ý: Safari không xuất hiện các cảnh báo cho phép dạng pop-up giống như cách mà Chrome đã làm.

Kết luận

Bây giờ bạn đã xây dựng được tiện ích mở rộng Gawkblocker ba lần (cho Chrome, Firefox, và Safari), bạn có thể tìm kiếm một cách để kết hợp hai lõi của tập tin JavaScript vào một tập tin duy nhất cho tất cả ba trình duyệt để sử dụng nó. Trong thực tế, đó là chính xác những gì bạn sẽ làm trong Phần 4. Và, bạn có thể làm nhiều hơn với phần mở rộng của Safari.


Tải về

Mô tảTênKích thước
Gawkblocker source codesafari-sourcecode.zip39KB

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

  • Dùng thử sản phẩm của IBM theo cách phù hợp nhất với bạn: Tải về dùng thử, dùng thử trực tuyến, sử dụng sản phẩm trên môi trường đám mây hay SOA Sandbox để tìm hiểu về Kiến trúc hướng Dịch vụ.

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=946531
ArticleTitle=Tự xây dựng tiện ích mở rộng cho trình duyệt web, Phần 3: Xây dựng tiện ích mở rộng trên Safari
publish-date=09262013