Phần mở rộng bao gồm các thành phần khác nhau nhưng gắn kết với nhau. Các thành phần có thể bao gồm tập lệnh nền, tập lệnh nội dung, trang tuỳ chọn, các thành phần trên giao diện người dùng và nhiều tệp logic. Các thành phần mở rộng được tạo bằng các công nghệ phát triển web: HTML, CSS và JavaScript. Các thành phần của tiện ích sẽ phụ thuộc vào chức năng của tiện ích và có thể không yêu cầu mọi tuỳ chọn.
Hướng dẫn này sẽ tạo một tiện ích cho phép người dùng thay đổi màu nền của bất kỳ trang nào trên developer.chrome.com. Tiện ích này sẽ sử dụng nhiều thành phần cốt lõi để minh hoạ mối quan hệ giữa các trang.
Để bắt đầu, hãy tạo một thư mục mới để lưu các tệp của tiện ích.
Bạn có thể tìm thấy tiện ích đã hoàn chỉnh tại đây.
Tạo tệp kê khai
Tiện ích bắt đầu bằng tệp kê khai. Tạo một tệp có tên là manifest.json và chứa mã sau.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2
}
Bạn có thể thêm thư mục chứa tệp kê khai dưới dạng tiện ích trong chế độ nhà phát triển ở trạng thái hiện tại.
- Mở trang Quản lý tiện ích bằng cách chuyển đến
chrome://extensions.- Bạn cũng có thể mở trang Quản lý tiện ích bằng cách nhấp vào trình đơn Chrome, di chuột qua phần Công cụ khác rồi chọn Tiện ích.
- Bật Chế độ nhà phát triển bằng cách nhấp vào nút bật/tắt bên cạnh Chế độ nhà phát triển.
- Nhấp vào nút TẢI KHÔNG ĐƯỢC BỎ QUA và chọn thư mục tiện ích.
Tôi ơi! Đã cài đặt thành công tiện ích. Do không có biểu tượng nào trong tệp kê khai nên một biểu tượng thanh công cụ chung sẽ được tạo cho tiện ích.
Thêm hướng dẫn
Mặc dù tiện ích đã được cài đặt nhưng không có hướng dẫn. Ra mắt tập lệnh nền bằng cách tạo một tệp có tiêu đề background.js rồi đặt tệp đó bên trong thư mục tiện ích.
Tập lệnh nền và nhiều thành phần quan trọng khác phải được đăng ký trong tệp kê khai. Việc đăng ký tập lệnh nền trong tệp kê khai sẽ cho tiện ích biết tệp nào cần tham chiếu và tệp đó nên hoạt động như thế nào.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
Tiện ích này hiện đã biết rằng nó bao gồm một tập lệnh nền không ổn định và sẽ quét tệp đã đăng ký để tìm các sự kiện quan trọng mà nó cần theo dõi.
Tiện ích này sẽ cần thông tin từ một biến cố định ngay sau khi biến được cài đặt. Bắt đầu bằng cách thêm một sự kiện nghe cho runtime.onInstalled trong tập lệnh nền. Bên trong trình nghe onInstalled, tiện ích sẽ đặt một giá trị bằng API storage. Điều này sẽ cho phép nhiều thành phần tiện ích truy cập và cập nhật giá trị đó.
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log("The color is green.");
});
});
Hầu hết các API, bao gồm cả API storage, đều phải được đăng ký trong trường "permissions" ở
tệp kê khai để tiện ích có thể sử dụng các API đó.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
Di chuyển trở lại trang quản lý tiện ích rồi nhấp vào đường liên kết Tải lại. Một trường mới, Kiểm tra chế độ xem, sẽ xuất hiện với đường liên kết màu xanh dương, trang nền.
Nhấp vào liên kết để xem nhật ký bảng điều khiển của tập lệnh nền, "The color is green."
Giới thiệu giao diện người dùng
Tiện ích có thể có nhiều dạng giao diện người dùng nhưng tiện ích này sẽ sử dụng cửa sổ bật lên.
Tạo và thêm tệp có tiêu đề popup.html vào thư mục. Tiện ích này sử dụng một nút để thay đổi màu nền.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
}
</style>
</head>
<body>
<button id="changeColor"></button>
</body>
</html>
Giống như tập lệnh nền, tệp này cần được chỉ định làm cửa sổ bật lên trong tệp kê khai trong page_action.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
Cách chỉ định các biểu tượng trên thanh công cụ cũng có trong page_action, ở trường default_icons.
Tải thư mục hình ảnh xuống tại đây, giải nén rồi đặt thư mục đó vào thư mục của tiện ích. Cập nhật
tệp kê khai để tiện ích biết cách sử dụng hình ảnh.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"manifest_version": 2
}
Tiện ích cũng hiển thị hình ảnh trên trang quản lý tiện ích, cảnh báo về quyền và biểu tượng trang web. Những hình ảnh này được chỉ định trong tệp kê khai trong icons.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
Nếu được tải lại ở giai đoạn này, tiện ích sẽ bao gồm một biểu tượng thang màu xám. Tuy nhiên, tiện ích sẽ không chứa bất kỳ điểm khác biệt nào về chức năng. Vì page_action được khai báo trong tệp kê khai nên tiện ích có thể thông báo cho trình duyệt thời điểm người dùng có thể tương tác với popup.html.
Thêm các quy tắc đã khai báo vào tập lệnh nền bằng API declarativeContent trong sự kiện của trình nghe runtime.onInstalled.
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
Tiện ích này sẽ cần có quyền truy cập vào API declarativeContent trong tệp kê khai.
{
"name": "Getting Started Example",
...
"permissions": ["declarativeContent", "storage"],
...
}
Giờ đây, trình duyệt sẽ hiển thị biểu tượng hành động trên trang đủ màu trong thanh công cụ của trình duyệt khi người dùng chuyển đến
một URL có chứa "developer.chrome.com". Khi biểu tượng có đủ màu, người dùng có thể nhấp vào biểu tượng đó để xem cửa sổ bật lên.html.
Bước cuối cùng cho giao diện người dùng bật lên là thêm màu vào nút. Tạo và thêm một tệp có tên là popup.js với mã sau vào thư mục tiện ích.
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
Mã này lấy nút từ popup.html và yêu cầu giá trị màu từ bộ nhớ. Sau đó, công cụ này sẽ áp dụng màu nền của nút. Thêm một thẻ tập lệnh vào popup.js trong popup.html.
<!DOCTYPE html>
<html>
...
<body>
<button id="changeColor"></button>
<script src="popup.js"></script>
</body>
</html>
Tải lại tiện ích để xem nút màu xanh lục.
Logic lớp
Tiện ích hiện đã biết cửa sổ bật lên sẽ hiển thị cho người dùng trên developer.chrome.com và hiển thị một nút có màu, nhưng cần logic để tương tác thêm của người dùng. Cập nhật popup.js để đưa vào mã sau.
let changeColor = document.getElementById('changeColor');
...
changeColor.onclick = function(element) {
let color = element.target.value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.body.style.backgroundColor = "' + color + '";'});
});
};
Mã cập nhật sẽ thêm một sự kiện onclick vào nút này, sự kiện này sẽ kích hoạt tập lệnh nội dung được chèn theo phương thức lập trình. Thao tác này sẽ chuyển màu nền của trang giống màu của nút. Việc sử dụng tính năng chèn có lập trình cho phép tập lệnh nội dung do người dùng gọi, thay vì tự động chèn mã không mong muốn vào trang web.
Tệp kê khai sẽ cần quyền activeTab để cho phép tiện ích truy cập tạm thời vào API tabs. Thao tác này cho phép tiện ích gọi tabs.executeScript.
{
"name": "Getting Started Example",
...
"permissions": ["activeTab", "declarativeContent", "storage"],
...
}
Tiện ích này hiện đã hoạt động với đầy đủ chức năng! Tải lại tiện ích, làm mới trang này, mở cửa sổ bật lên và nhấp vào nút để chuyển sang màu xanh lục! Tuy nhiên, một số người dùng có thể muốn đổi nền sang một màu khác.
Cung cấp cho người dùng các lựa chọn
Tiện ích này hiện chỉ cho phép người dùng chuyển nền sang màu xanh lục. Việc bao gồm trang tuỳ chọn giúp người dùng có nhiều quyền kiểm soát hơn đối với chức năng của tiện ích, nhờ đó tuỳ chỉnh thêm trải nghiệm duyệt web.
Hãy bắt đầu bằng cách tạo một tệp trong thư mục có tên options.html và thêm đoạn mã sau.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
}
</style>
</head>
<body>
<div id="buttonDiv">
</div>
<div>
<p>Choose a different background color!</p>
</div>
</body>
<script src="options.js"></script>
</html>
Sau đó, đăng ký trang tuỳ chọn trong tệp kê khai
{
"name": "Getting Started Example",
...
"options_page": "options.html",
...
"manifest_version": 2
}
Tải lại tiện ích rồi nhấp vào CHI TIẾT.
Di chuyển xuống trang chi tiết rồi chọn Tuỳ chọn tiện ích để xem trang tuỳ chọn, mặc dù trang hiện để trống.
Bước cuối cùng là thêm logic tuỳ chọn. Tạo một tệp có tên là options.js trong thư mục tiện ích bằng mã sau.
let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
function constructOptions(kButtonColors) {
for (let item of kButtonColors) {
let button = document.createElement('button');
button.style.backgroundColor = item;
button.addEventListener('click', function() {
chrome.storage.sync.set({color: item}, function() {
console.log('color is ' + item);
})
});
page.appendChild(button);
}
}
constructOptions(kButtonColors);
Bốn tuỳ chọn màu được cung cấp và sau đó được tạo dưới dạng các nút trên trang tuỳ chọn với trình nghe sự kiện nhấp. Khi người dùng nhấp vào một nút, nút này sẽ cập nhật giá trị màu trong bộ nhớ chung của tiện ích. Vì tất cả các tệp của tiện ích lấy thông tin màu từ bộ nhớ chung, nên không cần cập nhật giá trị nào khác.
Thực hiện bước tiếp theo
Xin chúc mừng! Thư mục này hiện chứa một tiện ích của Chrome có đầy đủ chức năng, mặc dù đơn giản.
Tiếp theo là gì?
- Phần Tổng quan về Tiện ích của Chrome sao lưu một chút và điền nhiều thông tin chi tiết về cấu trúc Tiện ích nói chung cũng như một số khái niệm cụ thể mà nhà phát triển cần làm quen.
- Tìm hiểu về các tuỳ chọn có sẵn để gỡ lỗi Tiện ích trong hướng dẫn gỡ lỗi.
- Tiện ích của Chrome có quyền truy cập vào các API mạnh mẽ ở trên và ngoài những API có sẵn trên web mở. chrome.* Tài liệu về API sẽ hướng dẫn từng bước về API.
- Hướng dẫn dành cho nhà phát triển có hàng chục đường liên kết bổ sung đến các tài liệu liên quan đến cách tạo tiện ích nâng cao.