Browser Extensions Development (Chrome & Edge) · Aula

Gerenciamento e Controle de Abas

Crie, atualize, feche e consulte abas do navegador de forma programática, possibilitando recursos avançados de gerenciamento de abas.

Aula 1 de 411 etapas

Gerenciamento e Controle de Abas é uma aula grátis de Browser Extensions Development (Chrome & Edge) no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Browser Extensions Development (Chrome & Edge), e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Browser Extensions Development (Chrome & Edge) inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Introduction to Tab Management

Browser extensions can do more than just change web pages. They can also manage the browser itself!

This lesson explores how to programmatically control browser tabs. You'll learn to create, query, update, and close tabs using the Chrome Extensions API.

The chrome.tabs API

The core of tab management is the chrome.tabs API. It provides methods to interact with all open tabs in the browser, or even specific ones.

To use most of its functions, your extension needs the "tabs" permission declared in its manifest.json file.

Querying Tabs: Finding Active

You can find specific tabs based on various criteria. Let's start by finding the currently active tab in the current window.

The query() method returns an array of Tab objects that match your criteria.

// This code runs in your background script
// Requires "tabs" permission in manifest.json

chrome.tabs.query(
  { active: true, currentWindow: true },
  function(tabs) {
    if (tabs.length > 0) {
      console.log("Active tab ID: " + tabs[0].id);
      console.log("Active tab URL: " + tabs[0].url);
    }
  }
);

Querying Tabs: By URL

Want to find all tabs open to a specific website? The query() method supports powerful filtering using URL patterns.

You can use wildcards (*) to match parts of a URL, making it very flexible.

// This code runs in your background script
// Requires "tabs" permission in manifest.json

chrome.tabs.query(
  { url: "*://developer.chrome.com/*" },
  function(tabs) {
    if (tabs.length > 0) {
      console.log("Found " + tabs.length + " Chrome Dev tabs:");
      tabs.forEach(tab => console.log("ID: " + tab.id + ", Title: " + tab.title));
    } else {
      console.log("No Chrome Dev tabs found.");
    }
  }
);

Creating New Tabs

Opening a new tab is straightforward with chrome.tabs.create(). You can specify the URL, whether it should be active, and its position.

This method is great for opening links in a new tab based on extension logic.

// This code runs in your background script
// Requires "tabs" permission in manifest.json

chrome.tabs.create(
  { url: "https://www.coddykit.com", active: true, index: 0 },
  function(newTab) {
    console.log("New tab created with ID: " + newTab.id);
    console.log("URL: " + newTab.url);
  }
);

Updating Existing Tabs

You can change an existing tab's properties, like its URL or its active state, using chrome.tabs.update().

You'll need the tabId of the tab you wish to update. This is useful for navigating a tab to a new page.

// This code runs in your background script
// Requires "tabs" permission in manifest.json

// First, find an active tab to update
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
  if (tabs.length > 0) {
    const tabIdToUpdate = tabs[0].id;
    console.log("Updating tab ID: " + tabIdToUpdate);
    chrome.tabs.update(
      tabIdToUpdate,
      { url: "https://www.wikipedia.org", highlighted: true },
      function(updatedTab) {
        console.log("Tab updated to: " + updatedTab.url);
      }
    );
  } else {
    console.log("No active tab to update.");
  }
});

Closing Tabs Programmatically

To close one or more tabs, use the chrome.tabs.remove() method. It accepts a single tabId or an array of tabIds.

Be careful with this method, as closing tabs can interrupt a user's workflow!

// This code runs in your background script
// Requires "tabs" permission in manifest.json

// Example: Close the currently active tab (use with caution!)
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
  if (tabs.length > 0) {
    const tabIdToClose = tabs[0].id;
    console.log("Attempting to close tab ID: " + tabIdToClose);
    chrome.tabs.remove(tabIdToClose, function() {
      if (chrome.runtime.lastError) {
        console.error("Error closing tab: " + chrome.runtime.lastError.message);
      } else {
        console.log("Tab ID " + tabIdToClose + " closed.");
      }
    });
  } else {
    console.log("No active tab to close.");
  }
});

Getting Tab Details

When you create or update a tab, the callback function receives a Tab object. This object contains useful properties like id, url, title, and more.

Always check this object for the most up-to-date information about the tab.

// This code runs in your background script
// Requires "tabs" permission in manifest.json

chrome.tabs.create(
  { url: "https://example.com" },
  function(newTab) {
    console.log("New tab created.");
    console.log("Tab ID: " + newTab.id);
    console.log("Tab Title: " + newTab.title);
    console.log("Tab URL: " + newTab.url);
    // You can now use newTab.id for further operations
  }
);

Permissions for Tab Control

Remember, to use most chrome.tabs API functions, your manifest.json needs the "tabs" permission.

For operations like reading the URL of any tab, you'll also need the "<all_urls>" host permission or specific host permissions.

"tabs": Required for basic tab operations.
"<all_urls>": Required for querying URLs of tabs you didn't create or don't have host permission for.

Tab Management Challenge

Which of the following chrome.tabs API methods is primarily used to change the URL of an existing browser tab?

Responda na aula interativa

Recap: Mastered Tabs!

Great job! You've learned how to programmatically manage browser tabs using the chrome.tabs API.

We covered how to query tabs based on various criteria.
You learned to create new tabs with specific URLs.
You can now update existing tabs to change their properties.
And finally, you know how to close tabs programmatically.

These skills are essential for building powerful browser extension automation features!

Grátis para começar

Aprenda JavaScript com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 12
Aulas: 48

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Gerenciamento e Controle de Abas” é grátis?

Sim — o texto completo de “Gerenciamento e Controle de Abas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Browser Extensions Development (Chrome & Edge), atualize para CoddyKit PRO. O curso de Browser Extensions Development (Chrome & Edge) inclui 4 aulas no total.

O que vou aprender em “Gerenciamento e Controle de Abas”?

Crie, atualize, feche e consulte abas do navegador de forma programática, possibilitando recursos avançados de gerenciamento de abas. Você pratica Browser Extensions Development (Chrome & Edge) com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Browser Extensions Development (Chrome & Edge)?

Nenhuma experiência prévia é necessária. Browser Extensions Development (Chrome & Edge) no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Gerenciamento e Controle de Abas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Browser Extensions Development (Chrome & Edge)?

Sim. Cada aula de Browser Extensions Development (Chrome & Edge) inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Browser Extensions Development (Chrome & Edge)