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

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
alt text
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
alt text

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

noname

5 bài viết.
65 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
25 6
(Link) mình đã giới thiệu qua cái cấu trúc của 1 extension(viết tắt Ext) cho chrome như thế nào rồi. Hôm nay mình giải thích và làm từng bước, làm ...
noname viết 3 năm trước
25 6
White
21 6
Ở các bài trước mình đã giới thiệu cách viết 1 extension cho chrome như thế nào rồi, và cũng đã hướng dẫn làm extension phân trang cho Kipalog rồi....
noname viết hơn 2 năm trước
21 6
White
19 1
Dạo này đang ngồi nghịch thằng Angular2, thấy có khá nhiều cái hay, 1 trong số đó là có thể dùng Typescripts để code thay cho js, mặc dù khì chạy t...
noname viết hơn 2 năm trước
19 1
Bài viết liên quan
White
25 6
(Link) mình đã giới thiệu qua cái cấu trúc của 1 extension(viết tắt Ext) cho chrome như thế nào rồi. Hôm nay mình giải thích và làm từng bước, làm ...
noname viết 3 năm trước
25 6
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
5 bài viết.
65 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!