Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

See the Notes on Browser Extension Development column for a series of articles

Reference: chrome tabs

Chrome provides apis prefixed with Chrome. tabs, which are page-related methods.

These methods usually return the Tab object, which contains the following common attributes:

  • activeBoolean value for whether the TAB is the currently active TAB in the window in which it is located
  • audibleBoolean (optional), whether the TAB generated a sound in the last few seconds (if a sound is playing, a speaker icon 🔈 is displayed on the right side of the TAB)
  • mutedInfoObject (optional), whether the TAB is muted and mutedreason
  • favIconUrlString (optional), favicon icon URL of the URL displayed on the TAB page. To access this property, you need a configuration listing that appears in the extensionmanifest.jsonThe configuration of the itempermissionsIn a statementtabsPermissions. Value of this property if the TAB page is loading a web pageIt could be an empty string.
  • groupIdValue, the tag group to which the TAB page belongs
  • widthValue (optional), the width of the TAB page, in pixelspx
  • heightValue (optional), the height of the TAB page, in pixelspx
  • idValue (optional), in the browser window, each TAB ID is unique, but there are some cases, such as usingsessions APIWhen querying a label page, the label object does notDon’tAn ID value is assigned
  • incognitoBoolean value, whether the TAB is in stealth mode
  • indexValue, position of TAB page in browser window, index from0start
  • titleString (optional) the title of the page displayed on the TAB page. To access this property, you need a configuration listing that appears in the extensionmanifest.jsonThe configuration of the itempermissionsIn a statementtabsPermissions.
  • urlString (optional) the URL of the page displayed on the TAB page. List of configurations that need to appear in the extensionmanifest.jsonThe configuration of the itempermissionsIn a statementtabsPermissions.

💡 also uses bookmarks’ bookmarks-related apis when developing tabs related extensions

Create a new TAB

Use the method chrome.tabs. Create (createProperties: Object) to create a new label. This is an asynchronous function that immediately returns a Promise and eventually returns the created Tab object, Tab.

This method takes as an input a tag-associated configuration object with the following common properties:

  • activeBoolean (optional) whether the newly created TAB is the current active TAB
  • indexValue (optional), the order of all tabs in the current window, indexed from0start
  • url(Optional) a string that accesses the given URL after creating a new TAB
  • windowIdValue (optional) creates a new TAB in the specified window, which is opened by default in the currently active window
// Encapsulate a method to create a new TAB page using Chrome's API
// It takes an active parameter that controls whether the newly created TAB is the currently active TAB
const createNewTab = async (active = true) = > {const newTab = await chrome.tabs.create({
    active,
  });
  return newTab;
};
Copy the code

Gets the currently active TAB page

Query (queryInfo: object) is an asynchronous function that immediately returns a Promise and finally returns an array of Tab objects that meet the criteria.

// Encapsulates a method to get the currently active TAB page using Chrome's API
const getActiveTab = async() = > {CurrentWindow the active TAB of the currentWindow
  // Since this method returns an array with only one active TAB, we can use deconstruction to get a unique element of the array
  const [tab] = await chrome.tabs.query({
    active: true.currentWindow: true});return tab;
};
Copy the code