Chào mọi người. Hôm nay mình xin chia sẻ 1 vài thứ về trình tiện ích của trình duyệt, đối với chrome thì gọi là extension, còn đối với firefox thì được gọi là addons, với IE thì gọi là plugin. Khi trình được sinh ra thì bên cạnh đó nó cũng tạo các trình mở rộng cho các developer phát triển các tiện ích đi kèm cùng trình duyệt. Nhằm giúp cho việc sử dụng trình duyệt được tốt hơn, thuận tiện cho người sử dụng. Như chúng ta có thể biết đến những extension kinh điển của browser như trình chặn quảng cáo của Adblock Plus, trình fakeIP của Hotspot,...

Với mỗi browser thì có cấu trúc tạo tiện ích mở rộng khác nhau.Theo kinh nghiệm của mình đã từng làm việc nhiều với các trình tiện ích thì tạo 1 tiện ích trên chrome là dễ dàng nhất. Nên sau đây mình xin chia sẻ 1 tí để tạo 1 extension đơn giản cho chrome. Các bạn có thể xem cấu trúc file sau:

Trong đó file manifest sẽ chưa các thông tin về extension, cũng như các permission mà extension có thể truy cập, log script khi chạy, cũng như popup action icon trên browser.

{
  "manifest_version": 2,
  "author": "Huy Vo Minh",
  "name": "Example Extension",
  "description": "...",
  "version": "1.0",

  "icons": {
    "48": "icon.png"
  },

  "permissions": [
    "tabs", "<all_urls>"
  ],

  "content_scripts": [
    {
      "matches": ["https://www.youtube.com/*"],
      "include_globs": [
        ],
      "js": [
        "lib/jquery-2.1.1.min.js",
        "main.js"
      ]
    }
  ],

  "browser_action": {
      "default_popup":"popup.html"
  },

  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

File popup.html và popup.js thực chất thì như 1 page hiển thị khi popup thôi.

File main.js ở đây được mình include vào 1 page, chẳng hạn google.com, nghĩa là khi bạn mở 1 tab và gõ google.com trên trình duyệt thì main.js sẽ được include vào thực hiện cùng với js của google.com. Trong khái niệm extension nó chính là content-script.

File background.js thì được thực hiện các tác vụ đặc thù của extension, 1 phần nó còn là các function trung gian để trao đổi dữ liệu giữa main.js và popup.

Kết quả:

Như vậy ở trên mình đã giới thiệu cách tạo 1 extension đơn giản trên chrome. Với những yêu cầu phức tạp hơn thì yêu cầu bạn phải tìm hiểu nghiên cứu thêm. Trong giới hạn 1 bài giới thiệu về technical thì mình không thể trình bày hết được. Nếu có bất cứ thắc mắc hay muốn nghiên cứu thêm các bạn có thể liên hệ với mình, mình có thể support phát triển các tiện ích trên các browser phổ biến hiện nay(Chrome, Firefox, IE, Edge, Opera). Mình có những bộ source, extension do mình phát triển, có thể share để cùng tìm hiểu thêm. Cảm ơn các bạn đã theo dõi bài viết. Good luck for you!