Advertisement
  1. Code
  2. Tools & Tips
Code

Phát triển Extension cho Google Chrome

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Không có gì lạ khi trình duyệt yêu thích của tôi là Google Chrome. Tôi thích nó bởi vì nó nhanh, đáng tin cậy, ít bị lỗi (rất hiếm), và nó có giao diện đẹp. Còn có thứ khác mà tôi thấy thậm chí còn có giá trị hơn. Rõ ràng là bạn có thể xây dựng một extension (hay là phần mở rộng) cho nó chỉ bằng HTML, CSS và JavaScript. Tôi luôn ủng hộ các sản phẩm, những sản phẩm mở cho cộng đồng và Chrome là một trong những sản phẩm này. Nếu bạn cần một cái gì đó và nó chưa được làm ra, thì bạn có thể tự mình phát triển nó.

Vì vậy, khi kết thúc bài này, bạn sẽ thấy extension cho Chrome này hoạt động sử dụng hầu hết các kỹ thuật được trình bày ở bên dưới. Bạn có thể tải về ví dụ hoàn chỉnh bằng cách sử dụng nút Download ở phía trên trang này.


Tại sao bạn nên viết extension của riêng bạn

Tôi luôn khuyến khích mọi người sử dụng các công cụ tốt hơn để tăng tốc tiến trình công việc của họ. Phần mềm mà chúng ta sử dụng nên giúp ích cho chúng ta, chúng ta không nên mất công với nó. Việc phát triển extension/plugin cho trình biên tập hoặc trình duyệt yêu thích của bạn không chỉ giúp bạn mà còn cho cả những lập trình viên khác, những người mà không sớm thì muộn sẽ gặp tình huống tương tự. Nếu còn thiếu thứ gì đó, bạn có thể tự xây dựng nó và với Chrome điều này thật sự dễ dàng. Mô hình hóa môi trường xoay quanh nhu cầu của bạn là chìa khoá để đạt được hiệu quả cao.


Phát triển & Kiểm thử Extension của bạn

Rất may là có một cách để kiểm tra extension của bạn mà không phải tải nó lên cửa hàng của Chrome. Trong thanh địa chỉ của trình duyệt, chỉ cần nhập vào:

Hãy đảm bảo rằng bạn đã tích vào Developer mode và nhấp vào nút Load unpacked extension.... Sau đó, chỉ cần chọn thư mục từ ổ cứng chứa các tập tin của extension.

extensionspanel

Kiến trúc

Dưới đây là sơ đồ kiến ​​trúc cho một extension của Chrome:

architecture

Và bây giờ hãy xem kỹ hơn về mỗi thành phần bên trong kiến ​​trúc.

Manifest

Khởi điểm của extension là tập tin manifest.json. Nó phải chứa một đối tượng JSON hợp lệ. Ví dụ:

Các thuộc tính cần thiết là name, versionmanifest_version. version có thể là bất cứ số nào từ một đến bốn, số nguyên phân cách nhau bởi dấu chấm. Đó là thứ được sử dụng bởi hệ thống tự động cập nhật của Google. Đó là cách để nó biết khi nào cập nhật extension của bạn. Giá trị của manifest_version phải là số nguyên 2.

Manifest có thể chứa các thuộc tính khác tùy thuộc vào loại extension mà bạn cần, nhưng tôi sẽ chỉ mô tả những cái mà tôi thấy thú vị.

Trang Nền

Mỗi extension có một trang nền (background page) không nhìn thấy được chạy bởi trình duyệt. Có hai loại - trang nền cố định và trang sự kiện. Cái đầu tiên hoạt động, mọi lúc. Cái thứ hai chỉ hoạt động khi cần. Google khuyến khích các nhà phát triển sử dụng các trang sự kiện, vì cái này giúp tiết kiệm bộ nhớ và cải thiện hiệu suất tổng thể của trình duyệt. Tuy nhiên, cũng cần phải biết rằng đây cũng là nơi bạn nên đặt logic chính và những khởi tạo của bạn. Thông thường, trang nền/script đóng vai trò là cầu nối giữa các phần khác nhau của extension.

Đây là cách bạn nên mô tả nó trong tập tin manifest:

Như bạn có thể đoán được, nếu thuộc tính persistentfalse thì bạn đang sử dụng các trang sự kiện. Nếu không, bạn đang làm việc với một trang nền cố định.

Script Nội dung

Nếu bạn cần truy cập vào DOM của trang hiện tại, thì bạn cần phải sử dụng một script nội dung (content script). Code được chạy bên trong ngữ cảnh của trang web hiện tại, có nghĩa là nó sẽ được thực thi với mỗi lần làm mới. Để thêm một script như vậy, hãy sử dụng cú pháp sau đây.

Hãy nhớ rằng giá trị của matches xác định những trang mà script của bạn sẽ được sử dụng. Đọc thêm về các mẫu matches ở đây.

Giao diện Người dùng

Có một số cách để xây dựng UI (giao diện người dùng) cho extension của bạn. Dưới đây là bốn cách phổ biến nhất.

Browser Action

Hầu hết các nhà phát triển sử dụng thuộc tính browser_action để xây dựng các plugin của họ. Một khi bạn đã thiết lập nó, một biểu tượng đại diện cho extension của bạn sẽ được đặt ở bên phải của thanh địa chỉ. Sau đó người dùng có thể nhấp vào biểu tượng và mở một cửa sổ mà chính là nội dung HTML do bạn kiểm soát.

browseraction

Các tập tin manifest nên chứa các dữ liệu sau đây:

default_title là một tool tip nhỏ được hiển thị khi người sử dụng rê chuột lên trên biểu tượng của bạn. default_popup là tập tin HTML thật sự được nạp bên trong cửa sổ pop-up. Ngoài ra còn có một biểu trưng mà bạn có thể đặt lên trên biểu tượng của bạn. Bạn có thể làm điều đó bên trong script nền của bạn. Ví dụ:

Đây là code mà tôi sử dụng để tạo ra hình ảnh ở trên.

Page Action

Thuộc tính page_action tương tự như Browser Action, nhưng biểu tượng được hiển thị bên trong thanh địa chỉ:

pageaction

Điều thú vị ở đây là biểu tượng của bạn ban đầu bị ẩn, vì vậy bạn có thể quyết định khi nào hiển thị nó. Ví dụ, trong hình trên, biểu tượng RSS sẽ chỉ được hiển thị khi trang hiện tại chứa liên kết đến một RSS feed. Nếu bạn cần lúc nào cũng hiển thị biểu tượng của bạn, thì tốt nhất là sử dụng trực tiếp browser_action.

Để thêm Page Action, gõ code sau bên trong tập tin manifest của bạn:

Không giống như biểu tượng của Browser Action, biểu tượng Page Action không có biểu trưng.

DeveloperTools

Tôi sử dụng DeveloperTools rất nhiều và thật tuyệt khi Chrome cung cấp một cách để thêm các tab mới vào công cụ này. Điều đầu tiên bạn cần làm là thêm một trang HTML sẽ được nạp khi bảng điều khiển được mở ra:

Không cần đặt bất kỳ HTML nào bên trong trang, ngoại trừ liên kết đến một tập tin JavaScript, cái mà sẽ tạo ra tab:

Và sau đó bao gồm code sau đây bên trong tập tin devtools.js:

Bây giờ code trên sẽ thêm một tab mới với tên là TheNameOfYourExtension và một khi bạn nhấp vào nó thì trình duyệt sẽ nạp index.html bên trong DeveloperTools.

Omnibox

omnibox là từ khoá được hiển thị bên trong thanh địa chỉ của Chrome. Ví dụ, nếu bạn thêm thuộc tính sau vào tập tin manifest của bạn:

Và sau đó thêm code dưới đây, vào bên trong script nền của bạn:

Bạn sẽ có thể gõ yeah bên trong thanh địa chỉ. Sau đó bạn sẽ thấy một cái gì đó đại loại như sau:

omnibox

Nhấn vào tab sẽ cho ra màn hình sau:

omnibox2

Tất nhiên việc sử dụng chrome.omnibox API, bạn có thể lấy đầu vào của người dùng và tương tác với đầu vào đó.

API

Có rất nhiều thứ khác nhau để bạn có thể thực hiện trong extension của bạn. Ví dụ, bạn có thể truy cập vào bookmark hoặc lịch sử của người dùng. Bạn có thể di chuyển, tạo các tab hoặc thậm chí thay đổi kích thước cửa sổ chính. Tôi khuyên bạn nên tham khảo tài liệu hướng dẫn để có được một ý tưởng tốt hơn về cách để thực hiện các công việc này.

Những gì bạn cần biết là không phải tất cả các API đều có sẵn trong mọi phần của extension của bạn. Ví dụ, script nội dung của bạn không thể truy cập vào chrome.devtools.panels hoặc script bên trong tab DeveloperTools của bạn không thể đọc DOM của trang web. Vì vậy, nếu bạn đang thắc mắc tại sao điều gì đó không hoạt động, thì đây có thể là lý do.

Thông điệp

Như tôi đã đề cập ở trên, bạn không phải lúc nào cũng có thể truy cập vào API mà bạn muốn sử dụng. Nếu như vậy, thì bạn nên sử dụng việc truyền thông điệp. Có hai loại thông điệp - các yêu cầu một lần và kết nối lâu dài.

Yêu cầu Một lần

Kiểu giao tiếp này chỉ xảy ra một lần. Ví dụ, bạn gửi một tin nhắn và chờ một câu trả lời. Ví dụ, bạn có thể đặt code sau đây bên trong script nền của bạn:

Sau đó sử dụng code từ bên dưới trong script nội dung của bạn:

Và đây là cách bạn có thể lấy thông tin về DOM của trang hiện tại và sử dụng nó bên trong script nền của bạn, cái mà thông thường không có quyền truy cập vào dữ liệu này.

Kết nối Lâu dài

Sử dụng kiểu thông điệp này nếu bạn cần một kênh giao tiếp cố định. Bên trong script nội dung của bạn, hãy đặt code sau đây:

Và sau đó bên trong script nền, sử dụng code này:

Thay thế Trang

Thay thế trang là một cách hay để tùy biến trình duyệt của bạn. Bạn cũng có thể thay thế một số trang mặc định trong Chrome. Ví dụ bạn có thể tạo trang lịch sử của riêng mình. Để làm điều đó, hãy thêm đoạn code sau đây:

Các giá trị có thể có của <page to override>  là bookmarks, historynewtab. Thật tuyệt khi có một trang new tab mới tinh.


Một Extension Mẫu

Để tổng hợp bài này, tôi đã quyết định bao gồm một ví dụ đơn giản, để bạn có thể hiểu rõ hơn về bức tranh tổng thể. Extension ví dụ này sử dụng hầu hết những gì mà tôi đã mô tả ở trên để thiết lập một màu nền #F00 cho tất cả các div ở trong trang hiện tại. Bạn có thể tải về mã nguồn bằng cách sử dụng nút Download ở đầu bài viết này.

Tập tin Manifest

Tất nhiên tôi bắt đầu với tập tin manifest:

Lưu ý rằng, bạn có thể sắp xếp các tập tin của bạn thành các thư mục. Ngoài ra, hãy chú ý đến thuộc tính version. Bạn nên cập nhật thuộc tính này mỗi khi bạn muốn tải extension của bạn lên cửa hàng.

Script Nền

Một số dòng đầu tiên lấy hành động của người dùng từ omnibox. Sau đó, tôi thiết lập một listener cho yêu cầu một lần, sẽ chấp nhận thông điệp từ biểu tượng hành động của trình duyệt.

Đoạn code tiếp theo là một kết nối lâu dài với tab devtools (hoàn toàn không cần thiết phải sử dụng một kết nối lâu dài cho việc này, tôi thực hiện nó chỉ cho mục đích nghiên cứu). Sử dụng các listener này, tôi có thể lấy được đầu vào từ người dùng và gửi nó đến script nội dung, cái mà có quyền truy cập vào các phần tử DOM. Điểm mấu chốt ở đây là trước tiên chọn tab mà tôi muốn thao tác và sau đó gửi một thông điệp đến nó. Sau cùng, tôi đặt một biểu trưng vào biểu tượng tiện của extension.

Browser Action

Chúng ta bắt đầu bằng tập tin popup.html:

Sau đó chúng ta tạo tập tin popup.js:

Cửa sổ pop-up có chứa một nút đơn và một khi người dùng nhấp chuột vào nó, nó sẽ gửi một thông điệp đến script nền.

DeveloperTools

Đối với DeveloperTools, chúng ta thực hiện hoàn toàn tương tự như chúng ta đã làm trong pop-up, sự khác biệt duy nhất là tôi đã sử dụng một kết nối lâu dài.

Script Nội dung

Script nội dung lắng nghe một thông điệp, chọn tất cả các thẻ div trên trang hiện tại, và thay đổi màu nền của chúng. Hãy chú ý đến đối tượng mà tôi đã gắn vào listener. Trong script nội dung đó là chrome.extension.onMessage.

Tùy biến trang New Tab

Điều cuối cùng mà extension này làm là tùy biến trang New Tab. Chúng ta có thể dễ dàng làm điều đó chỉ bằng cách trỏ thuộc tính newtab đến tập tin newtab/newtab.html:

Xin hãy lưu ý rằng bạn không thể tạo một bản sao của trang New Tab. Ý tưởng về tính năng này là để thêm vào một chức năng hoàn toàn khác. Dưới đây là những gì Google nói:

Đừng cố gắng bắt chước trang New Tab mặc định. Các API cần tạo một phiên bản hơi khác so với trang New Tab mặc định - với các trang trên cùng, các trang đã đóng gần đây, mẹo, hình nền cho theme, và vân vân - chưa tồn tại. Cho đến khi họ làm xong, bạn tốt hơn nên cố gắng làm một cái gì đó hoàn toàn khác.


Gỡ lỗi

Viết một extension cho Google Chrome không phải lúc nào cũng là một công việc dễ dàng và bạn có khả năng sẽ gặp phải một số vấn đề. Điều tyệt vời là bạn vẫn có thể sử dụng console để xuất ra các biến của bạn để giúp gỡ lỗi. Bạn có thể thêm console.log vào script nền hoặc script nội dung của bạn. Tuy nhiên, việc này sẽ không hoạt động trong các script chạy trong ngữ cảnh của developer tools, trong trường hợp đó bạn có thể cân nhắc sử dụng phương thức alert vì nó hoạt động ở mọi nơi.


Tóm tắt

Theo tôi, Chrome là một trong những trình duyệt tốt nhất hiện nay. Các nhà phát triển tại Google giúp cho việc tạo ra các extension tương đối dễ dàng bằng cách cung cấp cho chúng ta sức mạnh để tạo ra chúng bằng HTML, CSS và JavaScript.

Vâng, có một số phần khó, nhưng nhìn chung chúng ta có thể tạo ra các plugin có giá trị. Lưu ý rằng, bài viết này không khái quát hết mọi thứ liên quan đến việc phát triển các extension cho Chrome. Có một số thứ hữu ích khác như menu ngữ cảnh, trang tùy chọn và thông báo. Đối với những chủ đề mà tôi chưa khái quát, hãy tham khảo tài liệu hướng dẫn để biết thêm thông tin.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.