chrome.tabs

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 "tabs"

Quyền này không cho phép 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 truy cập vào 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ở trang giới thiệu trong một 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ấ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 [tab] = await chrome.tabs.query(queryOptions);
    return tab;
  }

  function getCurrentTab(callback) {
    let queryOptions = { active: true, lastFocusedWindow: true };
    chrome.tabs.query(queryOptions, ([tab]) => {
      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);
      }
    }
  }

  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 [tab] = 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: