Cách viết một extension chrome cơ bản

Trước hết, ta cần biết một extension là gì. Extension chỉ là một app bao gồm HTML, CSS và JavaScript, nó cấp quyền ta thêm một vài chức năng vào trình duyệt Chrome thông qua một vài API JavaScript và hiển thị trên Chrome . Một extension về cơ bản chỉ là một website được lưu trữ trong Chrome và có thể vào web một vài API được khai báo.

Trong phần này, 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 à ta tạo một thư mục tên extension mà ta muốn viết, trong thư mục đó 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 rất cần.
cấu trúc thư mục extension mà 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, 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à ta muốn viết. version: version 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 website 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 website. css: các file css được inject vào website. 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 dùng, khai báo các url, website, API mà 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, 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, ta sẽ viết js để hiển thị lên hộp thông tin khi click vào button display trên popup.html

document.adlập trình viênentListener('DOMContentLoaded', function() {   var displayAlerteButton = document.getElementById('displayAlert');   displayAlertButton.adlập trình viênentListener('click', function() {     alert('Welcome'); }, false); 

code ở đây, sẽ bắt sự kiện khi ta click vào button có id là displayAlert và sẽ hiển thị lên môt thông tin cho ngưới dùng.
sau cùng, ta vào màn hình quản lý các extensions của chrome, chọn chế độ lập trình viêneloper mode, rùi chọn ‘load unpackage extension’, chỉ đến thư mục chứa extension vừa viết và ta có thể chạy thử extension vừa mới viết.
Để tìm hiểu thêm cấu trúc của extension, ta có thể vào trang extension để tìm hiểu thêm.

Nguồn viblo.asia