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

Viết một phần mở rộng cơ bản cho trình duyệt Chrome

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 điều tiế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 các 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 Chrome.

Trước khi bắt đầu

Về loạt bài này

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 này, bạn sẽ 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 sẽ xây dựng add-on (hay còn gọi là extension) cho Mozilla Firefox.
  • Trong Phần 3, xây dựng phiên bản extension này cho Safari browser.
  • 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.

Để thực hiện các hướng dẫn trong bài này, bạn cần tải về và cài đặt Google Chrome phiên bản 19 hoặc mới hơn (Các ví dụ ở đây được thực hiện dựa trên phiên bản 19). Ngoài ra, bạn sẽ cần tới một số công cụ mà bạn có thể dùng để sửa đổi HTML, CSS và JavaScript. Sẽ tốt hơn nữa nếu bạn đã có một vài kinh nghiệm trong việc sử dụng Chrome và các tiện ích mở rộng của trình duyệt này trước đó. Và, hãy dành chút thời gian xem qua Chrome Web Store (xem phần Tài nguyên). Quan sát xem hiện ở đó đang có những tiện ích nào, lấy về vài thứ để tham khảo. Những thứ đó sẽ cung cấp một số bối cảnh cho bài này.

Tại sao cần phải xây dựng tiện ích mở rộng cho trình duyệt?

Có rất nhiều lý do khiến bạn muốn xây dựng một tiện ích mở rộng. Một trong những công dụng thường thấy của chúng là tạo ra sự tương tác giữa trình duyệt và các ứng dụng, dịch vụ khác. Evernote, 1Password, Adobe Shadow và rất nhiều tiện ích mở rộng khác đang làm điều đó. Hoặc cũng có thể là bạn muốn thêm vào trình duyệt một chức năng hữu ích nào đó mà nó còn thiếu, ví dụ như thêm vào một số công cụ dành cho nhà phát triển, hoặc đơn giản là tiện ích chụp ảnh màn hình. Một vài nhà phát triển viết ra các tiện ích mở rộng cho những mục đích rất cụ thể — Theo dõi tỉ số các trận đấu thể thao, tối ưu hóa cho một số trang web cụ thể, dự báo thời tiết và nhiều hơn thế nữa. Tất cả mọi người đều đang làm được rất nhiều thứ khác nhau với các tiện ích mở rộng. Còn bạn, bạn dự định sẽ làm gì?


Bạn đang xây dựng phần mở rộng nào?

Để minh họa quá trình xây dựng một tiện ích mở rộng trên Chrome, bài này sẽ hướng dẫn bạn viết một tiện ích có tên là  Gawkblocker. Gawkblocker giúp bạn chặn các tên miền mà vì một số lý do nào đó, bạn không muốn truy cập vào. Gawkblocker bao gồm một số thành phần sau:

  • Một cửa sổ pop-up cho bạn thấy các trang mà bạn đang chặn
  • Một biểu tượng trên trình duyệt (Điểm bắt đầu của tiện ích mở rộng)
  • Một trang tùy chọn (Nơi giúp bạn định cấu hình các trang mà bạn muốn chặn và nơi bạn muốn tới thay cho trang đó).

Nói chung, Gawblocker sẽ gắn một phần theo dõi vào mỗi tab hoặc cửa sổ trình duyệt, khi URL của tab hoặc cửa sổ đó thay đổi, nó sẽ tiến hành so sánh URL đó với danh sách các tên miền bị chặn. Nếu URL được kiểm tra khớp với một trong số các tên miền ở danh sách trên, yêu cầu truy cập sẽ được chuyển hướng tới một trang thay thế (xem Hình 1).

Hình 1. Tiện ích mở rộng Gawkblocker
Ảnh chụp màn hình hiển thị các trang web bị chặn bởi Gawkblocker

Gawkblocker tác động tới trình duyệt theo những cách cụ thể nhằm thực hiện một số việc cụ thể, giống như bạn sẽ làm với các tiện ích mở rộng khác. Có thể bạn sẽ muốn tìm kiếm câu trả lời cho những điều sau:

  • Để người dùng nhận ra sự có mặt của tiện ích mở rộng trong giao diện trình duyệt liệu có khó không?
  • Điều gì tham gia vào việc ổn định dữ liệu trong các phiên làm việc khác nhau của trình duyệt?
  • Làm thế nào mà các phần khác nhau của tiện ích mở rộng có thể liên lạc được với nhau?
  • Bạn có thể đi sâu vào dữ liệu của người dùng tới mức nào?

Quá trình xây dựng Gawblocker sẽ giúp chúng ta trả lời được những câu hỏi này.


Bạn cần có những tài liệu tham khảo nào?

Tài liệu tham khảo của bạn là các tài liệu về xây dựng tiện ích mở rộng trên Chrome (xem phần Tài nguyên). Phần lớn các tài liệu về chủ đề này đều được viết rất chi tiết. Một bài hướng dẫn đơn giản trong 1 trang, hướng dẫn cách xây dựng một tiện ích mở rộng kiểu “Hello World” sẽ giúp cho bạn có một cái nhìn tổng quan cực kì đơn giản về cái cách mà các tiện ích đó làm việc với nhau, nhưng nó sẽ chẳng có mấy tác dụng khi bạn đi sâu hơn vào chủ đề này.


Cấu trúc một tiện ích mở rộng trong Chrome

Một tiện ích mở rộng điển hình trong Chrome bao gồm một file khai báo và một vài sự phối hợp giữa một trang nền, các trang giao diện người dùng và các đoạn mã nội dung.

Mọi thứ bắt đầu với một file khai báo có tên manifest.json. Bên trong file này chứa các thông tin mà Chrome cần biết về cách tải các thứ bên trong tiện ích mở rộng của bạn — như tiêu đề, mô tả, các quyền hạn cần thiết và các tham chiếu biểu tượng.

Trang nền là một trang đơn lẻ được tải và chạy trong khuôn khổ riêng của nó dù cho có bao nhiêu tab hoặc cửa sổ trình duyệt đang được mở chăng nữa. Một tiện ích mở rộng chỉ được phép chứa một trang nền duy nhất và trang này sẽ trở nên hữu dụng khi bạn muốn tạo ra một tiến trình chạy ổn định xuyên suốt tất cả các trang bên trong Chrome.

Các trang giao diện là tất cả các trang mà tiện ích mở rộng hiển thị cho người dùng. Một trang giao diện người dùng có thể là một cửa sổ pop-up, một trang tùy chọn, một trang thành phần nào đó của tiện ích, cũng có thể là một trang ghi đè lên trang mặc định của Chrome (như trang hiển thị khi chọn new tab).

Các mã nội dung là các file JavaScript mà bạn đưa vào bên trong các trang web để tương tác với chúng. Các mã này được thực thi trong bối cảnh cô lập của riêng chúng, nhưng chúng có khả năng truy cập phần DOM của trang. Các mã nội dung cũng có thể thực hiện việc liên lạc với các trang khác bên trong tiện ích mở rộng nhờ một API truyền tin đặc biệt.

Với Gawblocker, những thứ bạn cần dùng là 1 file khai báo, 1 file JavaScript chứa một vài chức năng chính (một vài thứ bạn sẽ làm dưới dạng portable), một trang nền, một trang tùy chọn, một cửa sổ pop-up, một trang chuyển hướng đích và một vài biểu tượng. Bạn có thể tải về một tiện ích mở rộng Gawblocker hiện có sẵn từ Chrome nếu như bạn muốn quan sát tiện ích mở rộng này cũng như các thành phần khác được miêu tả trên đây hoạt động trong thực tế.


Tập tin khai báo của Gawkblocker

Liệt kê 1 hiển thị nội dung file manifest.json cho Gawkblocker.

Liệt kê 1. Nôi dung file manifest.json cho Gawkblocker.
{
  "name": "GawkBlocker",
  "version": "1.7",
  "description": "Tired of taking the Nerd Bait? Use GawkBlocker!",
  "background_page" : "background.html",
  "options_page": "options.html",
  "icons": {
    "16" : "images/GB-19.png",
    "48" : "images/GB-48.png",
    "128" : "images/GB-128.png"
  },
  "browser_action": {
    "default_icon": "images/GB-19.png",
    "default_title": "GawkBlocker",
    "default_popup": "popup.html"
  },
  "permissions": ["tabs"]
}

Giờ chúng ta sẽ phân tích chi tiết hơn một số mục ở phía trên kia.

version
Mỗi khi bạn đưa một phiên bản mới của tiện ích mở rộng lên Chrome Web Store, bạn cần phải tăng số phiên bản đó lên, nếu không việc tải lên sẽ thất bại.
icons
Thuộc tính biểu tượng có chứa một danh sách các biểu tượng có sẵn theo từng kích cỡ. Chrome sẽ tìm kiếm các kích cỡ biểu tượng cụ thể và sử dụng chúng trong các trường hợp khác nhau. Đoạn mã trong Liệt kê 1 xác định đường dẫn cụ thể đến các file biểu tượng có liên quan tới tiện ích mở rộng.
browser_action
Khi bạn chỉ định một browser_action, nghĩa là bạn đã chỉ cho Chrome rằng bạn muốn đặt một biểu tượng ở phía góc phải của thanh địa chỉ (mà Chrome gọi đó là Omnibar), và khi người dùng bấm vào biểu tượng đó, nó sẽ thực hiện một vài việc, trong trường hợp này là làm bật lên một cửa sổ pop-up.
Chỉ nên thiết lập một browser_action khi mà tiện ích mở rộng của bạn được áp dụng cho tất cả các trang web. Nếu bạn chỉ áp dụng nó trên một số trang hoặc một số loại trang cụ thể và muốn tìm kiếm một biện pháp thay thế tương tự, bạn hãy chỉ định một page_action. Bạn không thể sử dụng cả browser_action hoặc page_action cùng lúc — chỉ phép chọn một mà thôi.
permissions
Trong trường hợp này, quyền hạn duy nhất mà bạn cần yêu cầu là 'tabs' — quyền này sẽ cho bạn một số thông tin về từng thẻ riêng biệt trong trình duyệt (mà tất cả những gì bạn thực sự cần là địa chỉ URL). Có rất nhiều quyền hạn có sẵn cho bạn lựa chọn, nhưng bạn chỉ cần yêu cầu những quyền hạn mà bạn cần. Chrome và Android xử lý quyền hạn theo những cách rất giống nhau — khi người dùng cài đặt tiện ích mở rộng của bạn, Chrome sẽ cho bạn thấy tất cả các quyền hạn mà tiện ích đó yêu cầu, khá giống với cách mà bạn được thông báo bằng một danh sách các quyền hạn được yêu cầu cấp khi bạn cài một ứng dụng trên Android.

Giờ thì bạn đã hiểu rõ về phần khai báo, và tiếp theo, hãy đi sâu vào bên trong các file tạo nên chức năng cho Gawblocker.


Các lớp nhân của Gawblocker

Phần lớn những việc Gawblocker thực hiện sẽ được điều khiển bởi một file JavaScript đơn lẻ. Trong file này, bạn sẽ định nghĩa một đối tượng có tên là Storage Manager (SM) để xử lý sự ổn định dữ liệu giữa các phiên làm việc (ngay lúc này thì đó chỉ là một vỏ bọc cho localStorage), và một đối tượng tên là Gawblocker để điều khiển một vài chức năng thông thường (quản lý danh sách các trang đã chặn và tùy chọn). Xem Liệt kê 2.

Liệt kê 2. Định nghĩa đối tượng Storage Manager và đối tượng Gawkblocker
var SM = (function () {

    var my = {};

    my.get = function (key) {
        return localStorage.getItem(key);
    }

    ...

    return my;

}());

var GB = (function (SM) {
    var my = {};

    my.blockTheseSites = {
        "gawker.com"        : "Gawker Media",
        "io9.com"           : "SciFi Blog",
        "gizmodo.com"       : "Gadget Blog",
        ...
    }

    if (!SM.get("blocklist")) {
        SM.put("blocklist", JSON.stringify(my.blockTheseSites));
    }

    my.getBlockedSites = function () {
        return JSON.parse(SM.get("blocklist"));
    }

    my.setWatchThisInstead = function (value) {
        ...
    }

    my.getWatchThisInstead = function () {
        return SM.get("instead");        
    }

    my.addBlockedSite = function (site) {
        my.blockedSites = JSON.parse(SM.get("blocklist"));
        my.blockedSites[site] = "Custom Add";
        SM.put("blocklist", JSON.stringify(my.blockedSites));
    }

    my.removeBlockedSite = function (site) {
        my.blockedSites = JSON.parse(SM.get("blocklist"));
        delete my.blockedSites[site];
        SM.put("blocklist", JSON.stringify(my.blockedSites));
    }

    return my;
}(SM));

Ở đây tôi đã sử dụng Module Patten để tạo ra một vài đối tượng cần được cơ động hóa một cách phù hợp. Giờ thì hãy xem chúng được sử dụng như thế nào trong trang nền.


Trang nền

Gawblocker sẽ sử dụng một trang nền để theo dõi các địa chỉ URL và so sánh chúng với danh sách các trang đã chặn. Hãy nhớ rằng, bạn chỉ được phép sử dụng duy nhất một trang nền, và nó sẽ được chia sẻ xuyên suốt tất cả các thẻ và cửa sổ đang mở (ngoại trừ trong các cửa sổ duyệt web ẩn danh, trừ khi bạn có yêu cầu quyền hạn này hoặc tự tay người sử dụng cho phép nó thực hiện điều này). Bởi vì bản thân trang nền không chứa bất kì thành phần khả kiến nào, nên bên trong nó cũng không chứa bất cứ đoạn HTML nào liên quan tới việc hiển thị.

Liệt kê 3 là đoạn mã được dùng để theo dõi các thẻ nhằm cập nhật địa chỉ web.

Liệt kê 3. Theo dõi các thẻ để cập nhật
chrome.tabs.onUpdated.addListener(function(tabId, changedInfo, tab) {
    for (site in GB.getBlockedSites()) {
        if (tab.url.match(site)) {
            chrome.tabs.update(tabId, {"url" : GB.getWatchThisInstead()}, 
function () {});
        }
    }
});

Có nhiều cách hiệu quả hơn để duyệt qua danh sách các trang đã chặn, nhưng đó không phải là thứ bạn cần quan tâm. Thay vào đó, hãy xem cách bạn đã gắn phần theo dõi vào Chrome bằng cách sử dụng chrome.tabs.onUpdated.addListener và truyền thông tin qua một lệnh phản hồi như thế nào.

Mỗi chrome.*API sở hữu rất nhiều cách gọi khác nhau, nhưng tổng quát thì chúng đều có chung một mô hình là gọi ra một phương thức và thực hiện trong một lệnh phản hồi. Phần lớn các lệnh gọi API là không đồng bộ, điều này có thể gây ra các vấn đề về thời gian nếu bạn không ngờ tới hành vi này, vì vậy hãy đọc kĩ những gì mà các tài liệu tham khảo nói về chủ đề này.


Cửa sổ pop-up

Gawkblocker không thật sự cần đến một cửa sổ pop-up, nhưng việc có thêm nó sẽ cho người dùng thêm một nơi để họ có thể truy xuất và theo dõi các trang nào đang bị chặn một cách dễ dàng. Liệt kê 4 sẽ cho chúng ta cái nhìn về phần thú vị nhất trong trang này.

Liệt kê 4. Cửa sổ Pop-up
$(document).ready(function(){
    $.each(chrome.extension.getBackgroundPage().GB.getBlockedSites(), 
function (index, value) {
        $("#blockedlist").append("<div class='siterow' title='"+value+"'>
<div class='sitename'>"+index+"</div><span class='sitedesc'> : 
"+value+"</span></div>");
    });
});

Việc gọi chrome.extension.getBackgroundPage().GB.getBlockedSites() chính là cách mà bạn dùng để lấy thông tin từ trang nền và đưa vào cửa sổ pop-up. Đây là một trong những cách để điều khiển liên lạc giữa các trang bên trong một tiện ích mở rộng, mặc dù cũng không cần thiết phải làm vậy với cửa sổ pop-up của chúng ta. Bạn có thể thêm vào file gawkblocker.js và gọi trực tiếp đối tượng GB. Nhưng nếu bạn có nhiều hành động không đồng bộ khác nhau, thì việc để các thành phần khác nhau đặt các câu hỏi khác nhau cho cùng một điểm sẽ trở nên hiệu quả.

Cửa sổ pop-up hỏi trang nền về danh sách các trang bị chặn, sau đó nó sẽ lặp đi lặp lại xuyên suốt danh sách đó và ghi thông tin chi tiết của các trang bị chặn lên một phần hiển thị trong cửa sổ (xem Hình 2).

Hình 2. Cửa sổ Pop-up
Ảnh chụp màn hình các trang web có quảng cáo bị chặn bởi Gawkblocker

Trang tùy chọn

Bạn sẽ cần phải tạo ra một nơi có nhiệm vụ điều khiển các hành vi của tiện ích mở rộng. Nếu bạn có chỉ định một trang tùy chọn từ trong file khai báo (như bạn đã làm), người dùng có thể dễ dàng truy cập vào trang này thông qua trang quản lý các tiện ích mở rộng, hoặc bấm chuột phải vào nút bấm trên thanh địa chỉ của trình duyệt. Các thiết lập trong trang tùy chọn này hoàn toàn do người dùng tùy chỉnh (xem Hình 3).

Hình 3. Trang tùy chọn
Ảnh chụp màn hình hiển thị các tùy chỉnh cho Gawkblocker

Gawblocker sử dụng trang tùy chọn để cho phép người dùng chỉ định các hành vi khi truy cập vào một trang bị chặn, thêm một trang mới vào danh sách chặn, hoặc loại bỏ hoàn toàn các trang đã chặn ra khỏi danh sách (xem Liệt kê 5).

Liệt kê 5. Trang tùy chọn
$("#blockthistoo").click(function () {
    GB.addBlockedSite($("#dontgothere").val());
    ...
});

Giờ bạn có thể xem qua trang nền, đơn giản là nó giống như những gì bạn đã làm với cửa sổ pop-up (Xem Liệt kê 6).

Liệt kê 6. Trang nền
$("#blockthistoo").click(function () {
    chrome.extension.getBackgroundPage().GB.addBlockedSite($("#dontgothere").val());
    ...
});

Bạn cũng có thể chọn bất cứ phương pháp triển khai nào mà bạn thích, tùy theo tiện ích mở rộng mà bạn đang viết.


Trang chuyển hướng đích

Cuối cùng, khi một yêu cầu được chuyển hướng, nó cần phải đi tới. Trang này là thứ đơn giản nhất trong tất cả các phần của Gawblocker. Nó chỉ là một trang đơn giản có nhúng một đoạn video từ Youtube (Nội dung có thể là "Này bạn! Đừng xem thứ đó! Hãy xem cái này này!"). Và hoàn toàn không có bất cứ sự tương tác nào với các thành phần còn lại của tiện ích mở rộng. Nó chỉ đơn thuần là điểm kết thúc của toàn bộ tiến trình (xem Hình 4).

Hình 4. Trang chuyển hướng đích
Ảnh chụp màn hình trang web với tiêu đề 'Bạn có thấy sự điên rồ này??' với đoạn video đang chạy

Kết hợp tất cả lại với nhau

Tới lúc này thì bạn đã có một tiện ích mở rộng tuyệt vời, nhưng bạn băn khoăn không biết phải thử nghiệm nó thế nào đây? Để bắt đầu, hãy nạp các file của tiện ích mở rộng mà không đóng gói chúng. Việc này gọi là nạp một iện ích mở rộng chưa đóng gói và điều khiển nó từ trang quản lý tiện ích mở rộng (xem phần Tài nguyên) (bạn cũng có thể truy cập trang này bằng cách bấm chuột phải vào bất kì tiện ích nào đã được cài đặt trước đó và chọn Manage Extensions).

Để nạp các tiện ích mở rộng chưa đóng gói, hãy chọn ô Developer Mode để kích hoạt nút Load unpacked extension. Bấm vào nút đó và chỉ tới thư mục có chứa tiện ích mở rộng để nạp nó. Nếu file khai báo của bạn có lỗi, tiện ích của bạn sẽ bị vô hiệu hóa, hoặc đơn giản là không thể nạp được. Chrome sẽ báo cho bạn biết nếu tình huống này xảy ra.

Một khi bạn đã chắc chắn rằng tiện ích mở rộng của bạn đã sẵn sàng ra mắt, bạn sẽ có một vài lựa chọn khác nhau cho việc phân phối sản phẩm của mình. Bạn có thể đưa ra toàn bộ các file gốc mà bạn đã làm phía trên kia, và người dùng sẽ không thể cài được tiện ích mở rộng của bạn trừ khi họ cũng mở trang quản lý tiện ích và bật chế độ dành cho nhà phát triển (Developer Mode) lên. Tuy nhiên, bạn cũng có những lựa chọn khác, đó là phân phối một bản đã được đóng gói của tiện ích mở rộng, hoặc đưa nó lên Chrome Web Store..


Phân phối một bản đã được đóng gói của tiện ích

Ở trong trang quản lý tiện ích mở rộng, ngay bên cạnh nút Load unpacked extension button là nút Pack extension (xem Hình 5). Hãy bấm vào đó để bắt đầu quá trình đóng gói tiện ích của bạn nhằm phục vụ cho việc phân phối nó. Chrome sẽ hỏi bạn về thư mục chứa phần tiện ích chưa được đóng gói và cho bạn một tùy chọn về file khóa riêng tư. Tôi sẽ đề cập tới file khóa đó sau một lát nữa.

Hình 5. Trang quản lý tiện ích mở rộng
Ảnh chụp trang quản lý các thành phần mở rộng của Chromes

Trong lần đầu tiên bạn thực hiện đóng gói tiện ích mở rộng, Chrome sẽ tạo ra 2 file: Một file .crx và một file .pem. File .pem chính là file khóa riêng mới được đề cập ở trên. Chrome sẽ nhắc nhở bạn giữ file này cho an toàn, có nghĩa là — nếu bạn muốn đóng gói một bản cập nhật cho tiện ích mở rộng của mình, bạn sẽ cần file khóa riêng tư đó. Nếu không, Chrome sẽ coi bản cập nhật đó là một tiện ích hoàn toàn mới.

Một khi tiện ích mở rộng của bạn đã được đóng gói xong, bạn có thể phân phối nó theo bất cứ cách nào mà bạn thích — cho nó vào email, đưa lên website của bạn, gói nó vào trong trình cài đặt của riêng bạn, đưa vào trong các thiết bị lưu trữ di động, bất cứ cách nào mà bạn cảm thấy phù hợp với kế hoạch của bạn. Nhược điểm chính của cách phân phối này đó là bạn sẽ phải kiêm luôn việc điều khiển quá trình cập nhật.

Để giúp cho tiện ích mở rộng của bạn có thể kiểm tra cập nhật, hãy thêm vào file khai báo một dòng chỉ cho nó nơi có thể tìm kiếm các bản cập nhật (xem Hình 7).

Liệt kê 7. Kiểm tra bản cập nhật
{
  "name": "GawkBlocker",
  "version": "1.7",
  "update_url": "http://yourawesomedomain.com/ext/updates.xml",
  ...
}

Sau đó bạn sẽ cần phải lưu trữ một file XML tuân theo định dạng được quy định trước trong phần Autoupdating của tài liệu tham khảo. Việc này không quá phức tạp nhưng nó sẽ giúp ích cho bạn trong phần cuối của công việc. Chọn phân phối theo cách này cũng đồng nghĩa với việc tiện ích của bạn sẽ không có mặt trên Chrome Web Store.


Đưa tiện ích mở rộng của bạn vào Chrome Web Store

Quá trình đưa một tiện ích mở rộng lên Chrome Web Store đòi hỏi ít thao tác kĩ thuật hơn so với khi bạn phân phối nó một cách thủ công, nhưng thay vào đó bạn cần phải làm thêm một số việc.

Đầu tiên, hãy chuẩn bị một tài khoản nhà phát triển trên Web Store. Bạn cần có một tài khoản Google cho bước này. Sau khi đăng nhập, hãy tìm tới Developer Dashboard và đăng kí là một nhà phát triển ứng dụng. Bạn sẽ tốn 5.00$ cho việc đăng kí và phải trả số tiền này thông qua Google Wallet. Nếu tài khoản Google của bạn được sử dụng tốt, bạn có thể sẽ được chuyển tới Developer Dashboard ngay lập tức. Nếu tài khoản của bạn mới được tạo, hoặc bạn không sử dụng nó thường xuyên, bạn sẽ phải chờ trong khi nó được kiểm tra.

Sau khi đã đăng kí xong, hãy quay lại thư mục chứa tiện ích chưa được đóng gói của bạn và nén tất cả các file trong đó lại — toàn bộ các file HTML, CSS, JavaScript cũng như các file hình ảnh. Đừng cho file .crx hoặc .pem vào đó. Chrome Web Store sẽ tạo ra file .crx từ file nén của bạn và đăng kí nó với một file .pem.

Một khi tài khoản của bạn đã sẵn sàng và bạn đã chuẩn bị xong file nén, hãy bấm vào nút Add new item trong Developer Dashboard để tải tiện ích mở rộng của bạn lên (xem Hình 6).

Hình 6. Chrome Web store
Ảnh chụp trang phát triển bên trong cửa hàng web của Chrome

Nếu có bất cứ trục trặc gì với file nén của bạn, Developer Dashboard sẽ nhả nó ra kèm theo một vào thông báo lỗi. Còn nếu nó hoàn toàn ổn và file khai báo của bạn được định dạng đúng cách, sẽ xuất hiện một trang yêu cầu bạn cho biết một số thông tin về tiện ích mở rộng (các ảnh chụp màn hình, quốc gia, miêu tả sơ lược và vài thứ khác nữa. Hãy nhập những thông tin phù hợp và bạn có thể đưa tiện ích của mình lên Web Store một cách dễ dàng.


Tìm hiểu xem phương thức cập nhật hoạt động như thế nào

Khi tiện ích của bạn đã nằm trong cửa hàng, hãy tạo ra một vài thay đổi nhỏ và đưa những cập nhật này lên xem quá trình ấy hoạt động như thế nào. Lỗi hay xảy ra nhất đó là quên cập nhật số phiên bản trong file khai báo. Mỗi khi bạn muốn tải lên một bản cập nhật, hãy bấm vào nút Update extensions now ở trong trang Extensions Management. Các tiện ích mở rộng của Chrome thực hiện tìm kiếm cập nhật vài tiếng một lần, vì vậy sẽ không mất nhiều thời gian để bản cập nhật của bạn tới được với người dùng.


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

Hẳn bạn còn nhớ là cuối phần "Bạn đang xây dựng phần mở rộng nào?" chúng ta có đặt ra một số câu hỏi, và giờ là lúc nhìn lại xem chúng ta đã có được những câu trả lời nào:

Đầu tiên, để người dùng nhận ra sự có mặt của tiện ích mở rộng trong giao diện trình duyệt có khó không? Và chúng ta đã thấy là nó khá dễ dàng. Chỉ cần chỉ định một mục browser_action trong file khai báo và cung cấp cho nó một biểu tượng.

Tiếp theo, điều gì tham gia vào việc ổn định dữ liệu trong các phiên làm việc khác nhau của trình duyệt? Trong Chrome, bạn có quyền truy cập tới localStorage một cách ổn định xuyên suốt các mỗi lần mở ứng dụng này và đ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 mà các phần khác nhau của tiện ích mở rộng có thể liên lạc được với nhau? Tất cả các trang tạo nên tiện ích của chúng ta có thể liên lạc với trang nền thông qua chrome.extension.getBackgroundPage(), và một API truyền tin cho phép các tiện ích mở rộng liên lạc với nhau khi cần thiết.

Cuối cùng, bạn có thể đi sâu vào dữ liệu của người dùng tới mức nào? Câu trả lời là, tới bất cứ mức nào mà bạn muốn, miễn là được sự cho phép của người dùng. Mỗi quyền hạn đều được cảnh báo tới người dùng theo những cách riêng, dù cho có thể nó không cung cấp cho họ thông tin thực sự rõ ràng về những gì mà quyền hạn đó bao hàm.


Kết luận

Sau khi đã học được cách xây dựng một tiện ích mở rộng cơ bản cho Chrome, bạn sẽ không mất nhiều thời gian trước khi có thể đi sâu hơn. Bạn có thể truy cập rất nhiều vào Chrome.* APIs và những gì bạn vừa mới làm trên đây mới chỉ chạm vào bề mặt của nó. Giờ bạn đã học được những điều cơ bản, hãy xem lại từ đầu và xem bạn đã đi xa tới mức nào trong quá trình mở rộng tầm ảnh hưởng của bạn tới với Chrome.


Tải về

Mô tảTênKích thước
Article source codeGawkBlocker.zip60KB

Tài nguyên

Học tập

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

  • Dùng Google Chrome tải từ Kênh dành riêng cho nhà phát triển để lấy về bản mới nhất của Developer Tools.
  • Thử dùng các sản phẩm của IBM theo cách mà bạn cảm thấy phù hợp nhất. Tải về một sản phẩm dùng thử, dùng sản phẩm trực tuyến hoặc sản phẩm trong môi trường đám mây hoặc dành một vài giờ trong SOA Sandbox để học cách thực hiện hiệu quả Service Oriented Architecture Discuss.

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=936022
ArticleTitle=Tự xây dựng tiện ích mở rộng cho trình duyệt web, Phần 1: Xây dựng tiện ích mở rộng trên Chrome
publish-date=06302013