Cách viết một extension chrome cơ bản
Trước hết, chúng ta cần biết một extension là gì. Extension chỉ là một ứng dụng bao gồm HTML, CSS và JavaScript, nó cho phép chúng ta thêm một số tính năng vào trình duyệt Chrome thông qua một số API JavaScript và hiển thị trên Chrome . Một extension về cơ bản chỉ là một trang web được lưu trữ ...
Trước hết, chúng ta cần biết một extension là gì. Extension chỉ là một ứng dụng bao gồm HTML, CSS và JavaScript, nó cho phép chúng ta thêm một số tính năng vào trình duyệt Chrome thông qua một số API JavaScript và hiển thị trên Chrome . Một extension về cơ bản chỉ là một trang web được lưu trữ trong Chrome và có thể truy cập một số API được khai báo.
Trong phần này, chúng ta sẽ tìm hiểu về các thanh phần cơ bản trong 1 extension và viết một extension cơ bản à hiển thị popup khi kích vào biểu tượng của extension trên trình duyệt chrome. Để tạo một extension, đầu tiên à chúng ta tạo một thư mục tên extension mà chúng ta muốn viết, trong thư mục đó chúng ta sẽ khai báo các thư mục con để chứa các fie htm, javascript, css. và quan trọng nhất là có fie manifest.json, file sẽ khai báo các thứ sẽ được tải lên extension và các cài đặt cần thiết. cấu trúc thư mục extension mà chúng ta sẽ làm như sau:
demoExtension --htm --css --images ----icon.png // icon sẽ được hiển thị trên trình duyệt --styles ----styles.css --popup.htm //file sẽ được hiển thị khi click chuột vào icon trên trình duyệt --scripts ----popup.js ----main.js --manifest.json
trong file manifest.json, chúng ta sẽ viết như sau:
{
"name": "demoExtension",
"version": "0.0.1",
"manifest_version": 2,
"description": "demoExtension",
"icons": {
"16": "images/icon-16.png",
"128": "images/icon-128.png"
},
"default_locale": "en",
"browser_action": {
"default_icon": {
"19": "images/icon-19.png",
"38": "images/icon-38.png"
},
"background": {
"scripts": [
"scripts/chromereload.js",
"scripts/background.js"
]
},
"options_page": "options.html",
"content_scripts": [
{
"matches": [
"*://gmail.com/*"
],
"js": [
"scripts/script.js"
]
}
],
"css": [
"styles/mystyles.css",
"styles/jquery-ui.css"
],
"permissions": [
"tabs",
"webRequest"
]
}
trong đó:
- name: tên của extension mà chúng ta muốn viết.
- version: phiên bản của extension đang viết.
- default_locale: ngôn ngữ mặc định cho extension
- icons: đường dẫn đến file icon muốn hiển thi lên trên thanh bar trình duyệt.
- background: Quản lý trạng thái của các task.
- content_scripts: dùng để liệt kê các file sẽ được inject vào trình duyệt chrome, khi vào các trang web phù hợp với các địa chỉ được khai báo trong matches, như ở đây là trang gmail.com. Trong đó
- matches: liệt kế các trang mà các file js,css... được inject vào.
- scripts: các file js sẽ được inject vào trang web.
- css: các file css được inject vào trang web.
- run_at: Thời điêm chạy các file js, có thể là document_start hay document_end.
- css: đường dẫn đến các file css.
- permissions: liệt kê các quyền mà extension của chúng muốn sử dụng, khai báo các url, website, API mà chúng ta muốn chạy.
Trong file popup.html, code được viết như sau:
<!doctype html> <html> <head> <title>Demo Extension</title> <script src="scripts/popup.js"></script> </head> <body> <h1>Demo Extension</h1> <button id="displayAlert">Display</button> </body> </html>
và trong file này, chúng ta cũng sẽ tải lên file popup.js dùng để xử lý các hành động trên trang popup. Và trong file popup.js, chúng ta sẽ viết js để hiển thị lên hộp thông báo khi click vào button display trên popup.html
document.addEventListener('DOMContentLoaded', function() { var displayAlerteButton = document.getElementById('displayAlert'); displayAlertButton.addEventListener('click', function() { alert('Welcome'); }, false);
code ở đây, sẽ bắt sự kiện khi chúng ta click vào button có id là displayAlert và sẽ hiển thị lên môt thông báo cho ngưới dùng. Cuối cùng, chúng ta vào màn hình quản lý các extensions của chrome, chọn chế độ Developer mode, rùi chọn 'load unpackage extension', chỉ đến thư mục chứa extension vừa viết và chúng ta có thể thử nghiệm extension vừa mới viết. Để tìm hiểu thêm cấu trúc của extension, chúng ta có thể vào trang extension để tìm hiểu thêm.
