How to get current tab URL using Manifest v3?

Question

How do I get the URL of the current tab in the background service worker in MV3?

Here's what I have:

let currentURL;

chrome.action.onClicked.addListener(handleBrowserActionClicked);

chrome.commands.onCommand.addListener(function(command) {
  console.log("Command:", command);
  handleBrowserActionClicked();
});

function handleBrowserActionClicked() {
  togglePlugin();
}
function togglePlugin() {
  console.log("toggle plugin");
  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, { greeting: "activateFeedback" });
  });
}

// Fires when the active tab in a window changes.
chrome.tabs.onActivated.addListener(function () {
    console.log("TAB CHANGED")
    //firstTimeRunning = true
    //feedbackActivated = false
    currentURL = getTab()
    .then(console.log("Current URL: " + currentURL))
})

// Fired when a tab is updated.
chrome.tabs.onUpdated.addListener(function () {
    console.log("TAB UPDATED")
    currentURL = getTab() // line 32
    .then(console.log("Current URL: " + currentURL))
})

async function getTab() {
  let queryOptions = { active: true, currentWindow: true };
  let [tab] = await chrome.tabs.query(chrome.tabs[0].url); // line 38
  return tab;
}

Right now the service worker is logging "Current URL: [object Promise]" instead of, for example, "https://www.google.com"

It is also giving an error in the console (see comments above for line numbers)

background.js:38 Uncaught (in promise) TypeError: Cannot read property 'url' of undefined
    at getTab (background.js:38)
    at background.js:32

I think it may be something to do with my limited knowledge of promises!

Please help. Thank you in advance.

Answer 1

You function getTab seems not right, you are currently trying to query on the url. Not on the query options. The following function should work.

async function getTab() {
  let queryOptions = { active: true, currentWindow: true };
  let tabs = await chrome.tabs.query(queryOptions);
  return tabs[0].url;
}

Also make sure you have the tabs permission.

In the listener you also don't use the correct async/promise method two examples using Promise.then and await.

Promise.then:

chrome.tabs.onUpdated.addListener(function () {
    console.log("TAB UPDATED")
    getTab().then(url => {
        console.log(url);
    })
})

await:

chrome.tabs.onUpdated.addListener(async function () {
    console.log("TAB UPDATED")
    let url = await getTab()
    console.log(url)
})

For the "Error: Tabs cannot be queried right now (user may be dragging a tab)." error you can look at this answer, which suggest a small delay before querying the tab url.

Answer 2

const tab = (await chrome.tabs.query({ active: true }))[0]

Answer 3

Simply use "activeTab" permission in manifest.json

Add activeTab in your manifest.json.

"permissions": [
    "activeTab",
],

And In Background.js

chrome.action.onClicked.addListener((tab) => {
 console.log(tab.url);
});

I'm sure It will help you to get the current tab URL. useful links - ActiveTab