Lưu ý: Trình chạy dịch vụ và các trang tiện ích có thể sử dụng Tabs API, nhưng tập lệnh nội dung thì không.
Mô tả
API Thẻ không chỉ cung cấp các tính năng để thao tác và quản lý thẻ mà còn có thể phát hiện ngôn ngữ của thẻ, chụp ảnh chụp màn hình và giao tiếp với các tập lệnh nội dung của thẻ.
Quyền
Hầu hết các tính năng đều không yêu cầu quyền sử dụng. Ví dụ: tạo một thẻ mới, tải lại một thẻ, chuyển đến một URL khác, v.v.
Có 3 quyền mà nhà phát triển cần lưu ý khi làm việc với Tabs API.
Quyền “thẻ”
Quyền này không cấp quyền truy cập vào không gian tên chrome.tabs. Thay vào đó, nó cấp cho một tiện ích khả năng gọi tabs.query() đối với 4 thuộc tính nhạy cảm trên các thực thể tabs.Tab: url, pendingUrl, title và favIconUrl.
{ “name”: “My extension”, … “permissions”: [ “tabs” ], … } Quyền từ phía máy chủ
Quyền từ phía máy chủ cho phép một tiện ích đọc và truy vấn 4 thuộc tính nhạy cảm tabs.Tab của một thẻ khớp. Chúng cũng có thể tương tác trực tiếp với các thẻ khớp bằng cách sử dụng các phương thức như tabs.captureVisibleTab(), scripting.executeScript(), scripting.insertCSS() và scripting.removeCSS().
{ “name”: “My extension”, … “host_permissions”: [ “http://*/*”, “https://*/*” ], … } Quyền “activeTab”
activeTab cấp cho tiện ích quyền tạm thời của máy chủ lưu trữ cho thẻ hiện tại để phản hồi lệnh gọi của người dùng. Không giống như quyền của máy chủ lưu trữ, activeTab không kích hoạt bất kỳ cảnh báo nào.
{ “name”: “My extension”, … “permissions”: [ “activeTab” ], … }
Trường hợp sử dụng
Các phần sau đây minh hoạ một số trường hợp sử dụng phổ biến.
Mở trang tiện ích trong một thẻ mới
Một mẫu phổ biến cho các tiện ích là mở một trang giới thiệu trong thẻ mới khi tiện ích được cài đặt. Ví dụ sau đây cho thấy cách thực hiện việc này.
background.js:
chrome.runtime.onInstalled.addListener(({reason}) => { if (reason === ‘install’) { chrome.tabs.create({ url: “onboarding.html” }); } }); Lưu ý: Ví dụ này không yêu cầu bất kỳ quyền nào.
Lấy thẻ hiện tại
Ví dụ này minh hoạ cách trình chạy dịch vụ của tiện ích có thể truy xuất thẻ đang hoạt động từ cửa sổ hiện đang được lấy tiêu điểm (hoặc cửa sổ được lấy tiêu điểm gần đây nhất, nếu không có cửa sổ Chrome nào được lấy tiêu điểm). Bạn thường có thể coi đây là thẻ hiện tại của người dùng.
async function getCurrentTab() { let queryOptions = { active: true, lastFocusedWindow: true }; // `tab` will either be a `tabs.Tab` instance or `undefined`. let = await chrome.tabs.query(queryOptions); return tab; } function getCurrentTab(callback) { let queryOptions = { active: true, lastFocusedWindow: true }; chrome.tabs.query(queryOptions, () => { if (chrome.runtime.lastError) console.error(chrome.runtime.lastError); // `tab` will either be a `tabs.Tab` instance or `undefined`. callback(tab); }); }
Tắt tiếng thẻ được chỉ định
Ví dụ này cho thấy cách một tiện ích có thể bật/tắt trạng thái tắt tiếng cho một thẻ nhất định.
async function toggleMuteState(tabId) { const tab = await chrome.tabs.get(tabId); const muted = !tab.mutedInfo.muted; await chrome.tabs.update(tabId, {muted}); console.log(`Tab ${tab.id} is ${muted ? “muted” : “unmuted”}`); } function toggleMuteState(tabId) { chrome.tabs.get(tabId, async (tab) => { let muted = !tab.mutedInfo.muted; await chrome.tabs.update(tabId, { muted }); console.log(`Tab ${tab.id} is ${ muted ? “muted” : “unmuted” }`); }); }
Di chuyển thẻ hiện tại đến vị trí đầu tiên khi nhấp vào
Ví dụ này cho thấy cách di chuyển một thẻ trong khi thao tác kéo có thể đang diễn ra hoặc không. Mặc dù ví dụ này sử dụng chrome.tabs.move, nhưng bạn có thể sử dụng cùng một mẫu chờ cho các lệnh gọi khác sửa đổi các thẻ trong khi thao tác kéo đang diễn ra.
chrome.tabs.onActivated.addListener(moveToFirstPosition); async function moveToFirstPosition(activeInfo) { try { await chrome.tabs.move(activeInfo.tabId, {index: 0}); console.log(“Success.”); } catch (error) { if (error == “Error: Tabs cannot be edited right now (user may be dragging a tab).”) { setTimeout(() => moveToFirstPosition(activeInfo), 50); } else { console.error(error); } } } Lưu ý quan trọng: Sử dụng catch(error) trong Promise là một cách để đảm bảo rằng lỗi nếu không sẽ điền vào `chrome.runtime.lastError` không được kiểm tra. chrome.tabs.onActivated.addListener(moveToFirstPositionMV2); function moveToFirstPositionMV2(activeInfo) { chrome.tabs.move(activeInfo.tabId, { index: 0 }, () => { if (chrome.runtime.lastError) { const error = chrome.runtime.lastError; if (error == “Error: Tabs cannot be edited right now (user may be dragging a tab).”) { setTimeout(() => moveToFirstPositionMV2(activeInfo), 50); } else { console.error(error); } } else { console.log(“Success.”); } }); }
Truyền thông báo đến tập lệnh nội dung của thẻ đã chọn
Ví dụ này minh hoạ cách trình chạy dịch vụ của tiện ích có thể giao tiếp với các tập lệnh nội dung trong các thẻ trình duyệt cụ thể bằng cách sử dụng tabs.sendMessage().
function sendMessageToActiveTab(message) { const = await chrome.tabs.query({ active: true, lastFocusedWindow: true }); const response = await chrome.tabs.sendMessage(tab.id, message); // TODO: Do something with the response. }
Ví dụ về tiện ích
Để xem thêm các bản minh hoạ về tiện ích API Tabs, hãy khám phá bất kỳ tiện ích nào sau đây:
- Manifest V2 – Tiện ích API Tabs.
- Manifest V3 – Trình quản lý thẻ.