Tạo ứng dụng Chrome Apps
Một app trong Chrome khá giống với 1 extension, sử dụng HTML5, CSS và JavaScript để tạo nên nó. Nhưng với các ứng dụng dành cho Google Chrome, bạn có thể thực hiện các công việc như tạo văn bản, chỉnh sửa ảnh và nghe nhạc, hoặc nhiều công việc khác nữa. Những ứng dụng này giống như những chương ...
Một app trong Chrome khá giống với 1 extension, sử dụng HTML5, CSS và JavaScript để tạo nên nó. Nhưng với các ứng dụng dành cho Google Chrome, bạn có thể thực hiện các công việc như tạo văn bản, chỉnh sửa ảnh và nghe nhạc, hoặc nhiều công việc khác nữa. Những ứng dụng này giống như những chương trình phần mềm máy tính khác mà bạn cài đặt trên máy tính của mình. Sự khác biệt chính là bạn sử dụng ứng dụng trực tiếp trong trình duyệt. Một app có thể đơn giản là 1 đường dẫn URL tới 1 trang web hoặc phức tạp hơn như 1 trò chơi, 1 trình soạn thảo,... Một app đơn giản nhất là shortcut tới 1 trang web (có thể làm để thấy việc này cool hơn rất nhiều so với ấn nút Bookmark). Để làm việc này ta chỉ cần có 1 file icon và 1 file manifest.json.
manifest.json
{ "manifest_version": 2, "name": "Viblo", "description": "Wonderful website", "version": "2.0", "icons": { "128": "128.png" }, "app": { "urls": [ "https://viblo.asia/" ], "launch": { "web_url": "https://viblo.asia/" } }, "permissions": [ "unlimitedStorage", "notifications" ] }
Nhìn qua là ta biết ngay được rằng app này có icon là 1 file tên là 128.png và có kích thước 128x128, và đường dẫn sẽ tới https://viblo.asia/ và ứng dụng này sẽ yêu cầu 2 quyền là unlimitedStorage và notifications (tuy nhiên app này thì không cần sử dụng đến 2 permission này).
unlimitedStorage: Cung cấp một hạn ngạch không giới hạn để lưu trữ dữ liệu HTML5, chẳng hạn như cơ sở dữ liệu và các tập tin lưu trữ cục bộ. Nếu không có sự cho phép này, các phần mở rộng hoặc ứng dụng chỉ được giới hạn đến 5 MB lưu trữ cục bộ.
notifications: cho phép các app hoặc các extension sử dụng các API thông báo HTML5 mà không cần gọi các phương thức permission (ví dụ như checkPermission()). Chi tiết các permission có tại đây.
Cài đặt
Sau khi có file và icon, ta để chung 1 thư mục rồi đặt ở chỗ dễ tìm. Như thế này:
Sau đó bạn hãy mở trình duyệt Google Chrome lên và truy cập vào đường dẫn chrome://extensions/ (hoặc ấn vào menu Hamburger, chọn More tools, chọn Extensions) và đánh dấu vào tùy chọn Developer mode. Kế đến bạn hãy nhấn vào nút lệnh Load unpacked extension.
Và tìm đến thư mục chứa tập tin manifest.json lúc nãy để cài đặt. Và đây là kết quả:
Về cơ bản là như vậy, bây giờ là trên cơ bản 1 chút, ta sửa file manifest.json để có được 1 app cũng cơ bản (phổ biến sau app Hello world)
manifest.json
{ "name": "To Do List", "version": "1.0", "manifest_version": 2, "description": "Đơn giản chỉ là liệt kê các việc cần làm mà bạn có thể quên", "app" : { "launch" : { "local_path" : "index.html" } }, "icons" : {"128" : "todo-icon.png"}, "permissions": [ "storage" ] }
Ta thấy vẫn có icon có kích thước là 128 px. Tiếp đến là có "local_path" : "index.html". Điều này có nghĩa là khi ấn vào icon của app thì nó sẽ dẫn đến trang index.html thay vì là đường dẫn URL như ta đã làm ở trên. Ta thêm file index.html vào thư mục cài đặt mà như phía trên ta đã nói.
<!DOCTYPE html> <html lang="en"> <head> <title>To-do List </title> </head> <body> <div class="container"> <center><h1>Hi, hehe!</h1><center> </div> </body> </html>
Và chạy thử xem ta có cái gì đây?
Từ đây ta có thể dùng css và js để viết tiếp ứng dụng giống như viết 1 ứng dụng web theo ý muốn của mình.
Sử dụng Bootstrap và Jquery ta được giao diện và chức năng của app như thế này.
Quan trọng nhất trong việc xây dựng app này là lưu và đồng bộ dữ liệu của người dùng với Google server. Để lưu lại dữ liệu trên server ta sử dụng chrome.storage API
chrome.storage.sync.set({ "lists": localStorage.lists, "labels": localStorage.labels, "settings": localStorage.settings }, function() { return alert("Đã lưu trên server."); });
Để lấy dữ liệu từ server ta cũng sử dụng chrome.storage API
chrome.storage.sync.get(["lists", "labels", "settings"], function(res) { localStorage.lists = res.lists; localStorage.labels = res.labels; localStorage.settings = res.settings; });
Chi tiết về API này có thể tham khảo tại đây.
Ta có thể sử dụng notifications permission để có thêm chức năng thông báo trên desktop. Chi tiết thì các bạn có thể đọc tại đây.
Đóng gói ứng dụng
Các bạn quay lại trang cài đặt như đã nói ở trên (gõ chrome://extensions và enter
