Viết extension cho Chrome(Phần 1)

Chrome Extension

10

AngularJS

24

jQuery

13

noname viết ngày 07/10/2015

Có khi nào bạn muốn thay đổi 1 phần giao diện của website nào đó chưa ?
Ví dụ bây giờ ko thích click vào "Xem tiếp" của Kipalog nữa. Mà thay vào đó mình phân trang theo ý mình

nếu ai cũng muốn làm thế này thì bảo admin của Kipalog thay là được nhỉ :D
Nhưng chỉ có một vài người thích thì làm thế nào ?
Câu trả lời là inject js,html,css vào trang kipalog thôi.
Vậy làm thế nào để inject được code vào?
Đó là viết 1 extension cho chrome. Dùng extension này, nó có thể inject file bạn muốn vào trang web nào đó.
Vậy làm thế nào để viết được 1 extension cho chrome.
Để viết được cái này bạn cần có 1 chút kiến thức về js,css,html.

Đầu tiên bạn tạo 1 project ví dụ Kipalog-Ext

trong này quan trọng nhất cái file manifest.json: là file config cho extension của bạn.
Dưới đây là một ví dụ:

{
  "name": "__MSG_appName__",
  "version": "0.0.2",
  "manifest_version": 2,
  "description": "__MSG_appDescription__",
  "icons": {
    "16": "images/icon-16.png",
    "128": "images/icon-128.png"
  },
  "default_locale": "en",
  "background": {
    "scripts": [
      "scripts/chromereload.js",
      "scripts/background.js"
    ]
  },
  "browser_action": {
    "default_icon": {
      "19": "images/icon-19.png",
      "38": "images/icon-38.png"
    },
    "default_title": "Kipalog Ext",
    "default_popup": "popup.html"
  },
 "page_action": {...} ,
  "options_page": "options.html",
  "omnibox": {
    "keyword": "Kipalog Ext"
  },
  "content_scripts": [
    {
      "matches": [
        "*://kipalog.com/*"
      ],
      "js": [
        "scripts/contentscript.js"
      ],
      "run_at": "document_idle",
      "all_frames": false
    }
  ],
  "web_accessible_resources": [
    "scripts/pagination.js",
    "styles/kipalog.css",
    "pagination.html"
  ],
  "permissions": [
    "cookies",
    "*://kipalog.com/*"
  ]
}

trên đây là một ví dụ về config cho extension Kipalog. mình sẽ giải thích qua các trường :

• name: tên của extension, __MSG_appName__ giá trị này được định nghĩa trong folder _locales(folder chứa các file languages để đổi ứng đa ngôn ngữ)
• version: version extension của bạn
• manifest_version: là cái version chrome extension bạn sử dụng(hiện nay là version 2, version ko support nữa)
• description: mô tả extension,__MSG_appDescription__ tương tự __MSG_appName__
• default_locale: default languages cho extension
• background: dùng để quản lý task hoặc state. Cái này chưa có thời gian để dùng nên chưa biết mục đích thật sự như thế nào + scripts: các file script để quản lý các task,state + page: file hmtl để hiển thị
  

• content_scripts: dùng để inject file js,css.. vào các trang web vào bằng chrome
  + matches: file js,css... được inject vào trang nào mà khớp với cái này. ở ví dụ trên thì nó sẽ chỉ được inject vào trang kipalog
  + scripts: các file js ở đây sẽ được inject vào
  + css: các file css ở đây sẽ được inject vào
  + all_frames : default là false, sẽ chạy hết toàn bộ hay chỉ chạy ở trang đâu tiên bạn vào
  + run_at : file js sẽ được inject vào lúc nào("document_start", "document_end", "document_idle")
  + và các trường khác nữa ....

• web_accessible_resources: danh sách các file bạn muốn inject trực tiếp vào trang web đó. Chú ý : khi inject file vào web nào đó dùng Chrome extension, thì các file js sẽ được chạy ở một môi trường riêng so vs các file js đã có sẵn trong website đó. Nếu muốn inject trực tiếp vào chạy cùng môi trường với các file của website đó,hoặc muốn website đó dùng các file ảnh,css trong extension này,thì bạn liệt kê vào trường này.

• permissions: liệt kê các quyền mà extension của bạn muốn sử dụng, khai báo các url website mà muốn nó chạy và các quyền, ví dụ muốn quyền cookie của kipalog chẳng hạn..

• options_page: trang thiết lập các tuỳ chọn cho extension, ví dụ trang options của AdBlock

• browser_action: cái này sau khi add extension vào chrome thì nó sẽ được hiển thị ở góc trên bên phải của chrome, dùng để hiển thị những cái như tooltip,bagde,popup ...

• page_action: hiển thị trên thanh address bar

Ngoài ra còn nhiều trường nữa, và để viết được 1 extension thì chỉ cần những cái này là đủ rồi.
Phần 2 mình sẽ hướng dẫn làm thế nào để phân trang cho Kipalog theo ý mình và publish nó lên chrome store cho mọi người dùng :D