Chrome Extension - Snippet mở trang cảm ơn, changelog

Mẹo nhỏ trong lập trình Chrome Extension

Trước đây tớ hay dùng localStorage để tạo flag đánh dấu khi nào người dùng vừa mới cài đặt extension của mình. Và sau này khi ngó qua mã nguồn của mấy extension phổ biến cũng thấy họ làm cách tương tự. Cụ thể thì như này:

// background.js
(function($) {
  if ($.getItem('installed') === null) {
    $.setItem('installed', true);

    chrome.tabs.create({
      url: 'http://example.com/thank-you.html'
    });
  }
})(localStorage);

Cách làm này tất nhiên là có thể dùng được, không sao cả. Tuy nhiên nó không chuyên nghiệp, vì:

1. Bạn phải tạo ra một dữ liệu tạm thông qua localStorage.
2. Bạn không thể biết được người dùng vừa cài đặt hay chỉ vừa cập nhật phiên bản mới.

Sau này khi lần mò trong Document của Google thì tớ biết được một cách hay hơn, xin chia sẻ lại với các bạn:

// background.js
chrome.runtime.onInstalled.addListener(details => {
  switch (details.reason) {
    case 'install':
      chrome.tabs.create({url: 'http://example.com/thank-you.html'});
      break;

    case 'update':
      chrome.tabs.create({url: 'http://example.com/changelog.html'});
      break;
  }
});

Ưu điểm của cách này:

1. Là API chính thức của Chrome.
2. Không cần tạo dữ liệu tạm để làm flag.
3. Có thể biết người dùng vừa cài đặt hay cập nhật phiên bản mới. Từ đó chúng ta có thể mở trang cảm ơn, Donate, CTA (kêu gọi người dùng đánh giá extension trên Store chẳng hạn) hoặc cho người dùng biết các thay đổi trong phiên bản mới (changelog).

Hi vọng bài viết này sẽ giúp ích được các bạn trong việc tạo ra một Chrome Extension chuyên nghiệp!