Xây dựng ứng dụng Chrome Extension

Mục lục

Mục lục
Giới thiệu
Tâm sự cùng AI
Cách hoạt động
Giao tiếp gữa các thành phần
Publish một extension lên chrome store
Kết luận

Giới thiệu

Xin chào tất cả các bạn. Chắc hẳn các bạn không còn xa lạ gì với trình duyệt web Chrome nữa. Một điều mình rất thích chrome là hỗ trợ rất nhiều extension (Tiện ích mở rộng) như Google translate, Docs, Sheet, AdBlock, … .Các tiện ích này rất hữu ích cho chúng ta đúng? Nhưng bạn có biết cách để tạo ra extension như thế nào? Trong bài viết này mình sẽ hướng dẫn các bạn làm một extension đơn giản và tương tác giữa extension với website.

Tâm sự cùng AI

Người dùng bình thường: hello world chrome extension

Claude-3-Sonnet: Để tạo một tiện ích mở rộng (extension) “Hello World” cho trình duyệt Chrome, bạn cần thực hiện các bước sau:

Tạo thư mục cho tiện ích mở rộng, ví dụ “hello_world_extension”. Trong thư mục đó, tạo một tệp tin manifest.json để mô tả tiện ích mở rộng. Nội dung tệp tin có thể là:

{
  "manifest_version": 2,
  "name": "Hello World",
  "version": "1.0",
  "description": "Tiện ích mở rộng Hello World đơn giản",
  "browser_action": {
    "default_popup": "popup.html"
  }
}

Tạo một tệp tin popup.html với nội dung sau:

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello World!</h1>
    <script src="popup.js"></script>
  </body>
</html>

Tạo một tệp tin popup.js với nội dung:

alert('Hello World!');

Mở trình duyệt Chrome và truy cập vào chrome://extensions/. Bật “Chế độ dành cho nhà phát triển” ở góc trên bên phải. Nhấn vào “Tải tiện ích mở rộng chưa đóng gói” và chọn thư mục “hello_world_extension”. Tiện ích mở rộng “Hello World” đã được cài đặt. Khi bạn nhấn vào biểu tượng tiện ích, cửa sổ bật lên sẽ hiển thị “Hello World!”.

Đây chỉ là một ví dụ đơn giản. Bạn có thể mở rộng tiện ích bằng cách thêm nhiều tính năng khác nhau vào tệp tin popup.js và popup.html.

Cách hoạt động

Đầu tiên nãy nói về các khái niệm và mô hình hoạt động của chrome extension nhé.

Extension

Về cơ bản, một Chrome Extension chủ yếu sẽ được viết bằng Javascript và HTML. Bạn có thể tổ chức các thư mục tùy ý sao cho phù hợp và tiện lợi nhất trong quá trình code.

Cấu trúc của một extension, Chức năng của các thành phần

Manifest file

manifest.json là 1 file rất quan trọng nó dùng để khai báo các quyền mà extension cần ví dụ như tabs, storage, … Khai báo các đường dẫn đến resource (icons, script, UI,…) của extenions.

{
  "name": "demo-extension",
  "description": "A chrome extension",
  "version": "1.0.0",
  "manifest_version": 2,
  "permissions": [ "tabs", "https://www.yoursite.com/*"],
  "icons": { "16": "icons/icon_16.png", "48": "icons/icon_48.png", "128": "icons/icon_128.png" },
  "browser_action": { "default_title": "your title", "default_popup": "popup.html" },
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [{
    "matches": ["https://www.yoursite.com/*"],
    "js": ["content.js"]
  }],
  "options_ui": { "page": "options.html", "chrome_style": true },
  "externally_connectable": {
    "matches": ["https://www.yoursite.com/*"]
  }
}

Đối với người mới chỉ cần quan tâm đến các thuộc tính quan trọng sau:

name: Là thuộc tính xác định tên extension của bạn
version: Phiên bản hiện tại, Chrome sẽ dựa vào đây để xác định xem extension của bạn có bản cập nhật mới hay không
manifest_version: Xác định phiên bản của chính file manifest.json
description: Miêu tả chi tiết hơn về extension
icons: Icon của extension sẽ được hiển thị trên store. Trong trường hợp này, mình để chúng trong thư mục images
browser_action:
- default_icon: Icon sẽ được sử dụng để hiển thị trên trình duyệt
- default_title: Title sẽ được hiển thị khi hover chuột vào icon của extension
- default_popup: Đây là file HTML sẽ được hiển thị khi bạn mở extension ra. Chúng ta sẽ nói rõ hơn về file này trong phần sau
background: Dẫn đến background script. Còn background script mình sẽ nói rõ hơn ở phần dưới
- page: Đây sẽ là trang chạy ngầm bên dưới và thường sẽ chỉ chứa một script tag để đưa file javascript vào
- persistent: Là flag có giá trị là true hoặc false. Xác định trang background sẽ được chạy như thế nào
content_scripts: Phần này dùng để inject các script, style vào page được khai báo.
- matches: Xác định các trang web mà bạn muốn thêm các nội dung của mình vào
- js: Là danh sách các file javascript sẽ được inject vào các trang web đã được khai báo bên trên
- css: Tương tự như thuộc tính js nhưng là danh sách các file css
- run_at: Thời điểm inject các file content bên trên vào trang web
permissions: Khai báo các quyền hạn truy cập cho extension

Bạn có thể xem chi tiết phần config file manifest.json ở đây

Content script

Đây là các thành phần được inject vào các trang web mà bạn khai báo ở thuộc tính matches trong file manifest.json. Các thành phần này được chạy cùng môi trường với trang web hiện tại nên bạn có thể sử dụng javascript, css để thao tác lên các thành phần DOM. Nhờ đó bạn có thể thay đổi giao diện trang, thêm các button, thêm các chức năng khác mà bạn muốn.

Đây là trang sẽ chạy và hiển thị khi bạn mở extension của mình lên. Cấu trúc của nó cũng tương tự như những trang HTML khác. Trong trường hợp của mình thì đó trang popup.html. Trang này được chạy ở một môi trường khác so với các content script. Có thể hiểu nôm na là chúng được chạy ở một cửa sổ trình duyệt khác so với cửa sổ trình duyệt hiện tại.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./styles/lib/bootstrap.min.css">
        <link rel="stylesheet" href="./styles/page.css">
        <title>My Extension</title>
    </head>
    <body>
        <div class="wrapper">
            <h1>This is popup page</h1>
        </div>
        <script src="./scripts/lib/bootstrap.min.js"></script>
        <script type="module" src="./scripts/popup.js"></script>
    </body>
</html>

Bạn sẽ tạo giao diện chính cho extension của mình tại đây. Trang sẽ được load lại mỗi khi extension được mở. Bạn có thể sử dụng localStorage để lưu trữ dữ liệu giống như một database.

Background page

Cũng giống như trang popup.html, trang background.html cũng sẽ chạy cùng một môi trường. Tuy nhiên nó không có giao diện mà đơn thuần chỉ chứa một script tag với mục đích đưa vào đó file background.js.

<html>
    <body>
        <script type="module" src="./scripts/background.js"></script>
    </body>
</html>

Mặc định trang này sẽ được tự động sinh ra và tự động inject file background.js, nhưng trong trường hợp bạn muốn custom nó thì đây sẽ là nơi để bạn thực hiện điều đó

File background.js được sử dụng với mục đích tương tự như một server, nó lắng nghe các sự kiện được gọi từ trang popup hay trang content. Xử lý, lưu trữ dữ liệu cũng như là trả về data trong response.

Options

Đây thường là phần dùng để hiển thị các setting cho extentions đó. Chẳng hạn setting chọn ngôn ngữ, thông báo, … Phần này có thể có hoặc không tùy vào mục đích của bạn.

Extension

Giao tiếp gữa các thành phần

Vừa rồi chúng ta đã phần nào hiểu được chức năng của các thành phần trong một extension. Như chúng ta đã biết, file content.js được chạy cùng với trang web hiện tại mà nó được inject vào. Trong khi đó, popup.js và background.js được chạy ở cùng một môi trường và chúng tách biệt hoàn toàn so với của sổ hiện tại mà trình duyệt đang hiển thị. Vì thế, để có sự kết nối giữa các file script ở các môi trường khác nhau, Chrome sử dụng các message để thể hiện sự giao tiếp đó.

Chúng ta sẽ cùng nhau làm môt ví dụ để hiểu hơn vấn đề này nhé. Extension của chúng ta sẽ có chức năng là lưu lại các bài hát mà mình thích trên https://www.nhaccuatui.com/ để hàng ngày có thể nghe lại chúng mà không phải mất công tìm kiếm. Tất nhiên là thực tế thì trang nhạc nào cũng có chức năng tạo playlist rồi. Nào hãy cùng bắt đầu thôi.

Publish một extension lên chrome store

Chuẩn bị: 1 tài khoản gmail, 5$ để mua tài khoản develop, 1 extension đã dc zip( chú ý ko được mã hóa code và minimize code không sẽ ko vượt qua dc tester của goole)

Thực hiện: Vào trang dashboard của extension: https://chrome.google.com/webstore/developer/dashboard?authuser=1. Sau đó add new item.

Phần upload ta upload file zip lên
Phần detail : bạn điền description cho extension của bạn
Phần screenshots: bạn có thể chụp ảnh hướng dẫn, video youtube và add vào đây. Sau khi lên google store nó sẽ hiện ra những ảnh or video đó
Phần icon bạn upload icon 128x128.
Phần category bạn chọn một loại category cho extension của mình ví dụ: Func, Social & Communication… Phần Visibility options bạn chọn private or pubic extension của bạn. Khi 1 extension được publish sẽ phải qua tester của google review. Bạn để public thì mọi người mới có thể cài thấy và cài extension

Kết luận

Để tạo môt extension và publish lên rất là đơn giản nhưng để làm được một extension hữu ích cho người sử dụng thì còn cần rất nhiều kiến thức mà trong thời gian cho phép mình chưa thể tìm hiểu hết được. Hy vọng trong các bài report tháng tới sẽ nghiên cứu và viết được mốt số extension hay ho (yaoming)