Current URL of Current Tab

271 views
Skip to first unread message

Sami Bagh

unread,
Dec 19, 2022, 2:30:58 PM12/19/22
to Chromium Extensions
Hello,

I have 2 pieces of code to get the current url of the current tab.

1) 
chrome.tabs.query({ active: true, lastFocusedWindow: true }, (tabs) => {
let url = tabs[0].url;
console.log(url);
});

2) 
async function getCurrentLink() {
let queryOptions = { active: true, lastFocusedWindow: true };
let [tab] = await chrome.tabs.query(queryOptions);
let url = tab[0].url;

console.log(url);
}

The first code works while the second does not. But I heard that i should be using async calls for current tab url, but cant get it to work in link 2.

Any ideas?

hrg...@gmail.com

unread,
Dec 19, 2022, 3:33:18 PM12/19/22
to Chromium Extensions, SB
In the second code, change this line:
let url = tab[0].url; 
to this:
let url = tab.url; 

SB

unread,
Dec 19, 2022, 3:48:36 PM12/19/22
to Chromium Extensions, hrg...@gmail.com, SB
doesnt work,
not getting the console log

hrg...@gmail.com

unread,
Dec 19, 2022, 4:06:54 PM12/19/22
to Chromium Extensions, SB, hrg...@gmail.com
Do you not see any errors in the console?

SB

unread,
Dec 19, 2022, 4:09:03 PM12/19/22
to Chromium Extensions, hrg...@gmail.com, SB
nope, nothing on console, it is empty

SB

unread,
Dec 19, 2022, 4:13:40 PM12/19/22
to Chromium Extensions, SB, hrg...@gmail.com
I do get this error when updating on the developer mode on chrome extensions:

but this error also shows up when I use that first code without async and it works (it console logs the url)
Screen Shot 2022-12-19 at 4.11.06 PM.png

SB

unread,
Dec 19, 2022, 4:29:34 PM12/19/22
to Chromium Extensions, SB, hrg...@gmail.com
also how the heck do I get the hostname from the url, assuming using first code snipet as its the one working.

I tried this:
chrome.tabs.query({ active: true, lastFocusedWindow: true }, (tabs) => {
let url = tabs[0].url;
console.log(url.hostname);
});

but it returns undefined

hrg...@gmail.com

unread,
Dec 19, 2022, 5:41:33 PM12/19/22
to Chromium Extensions, SB, hrg...@gmail.com
The Tab's "url" property requires the "tabs" permission in your manifest.

SB

unread,
Dec 19, 2022, 5:45:21 PM12/19/22
to Chromium Extensions, hrg...@gmail.com, SB
i have it of course,

like i mentioned code 1 snippet works and it console logs the url.
But i was trying to use code 2 snippet instead, because it uses async/await which is what i read was better (not sure why)
However something is wrong in the way I am writing code 2 because it is not working

hrg...@gmail.com

unread,
Dec 19, 2022, 6:03:04 PM12/19/22
to Chromium Extensions, SB, hrg...@gmail.com
This code works perfectly fine on my machine (Chrome 104):

async function getCurrentLink() {
    let queryOptions = { active: true, lastFocusedWindow: true };
    let [tab] = await chrome.tabs.query(queryOptions);
    let url = tab.url;
    console.log(url);
}

Make sure you are using Manifest V3 (MV2's API doesn't support promises).
Message has been deleted

SB

unread,
Dec 19, 2022, 6:44:00 PM12/19/22
to Chromium Extensions, hrg...@gmail.com, SB
that is very weird, the code you does not print anything on console (nothing, not even undefined).
Here are my 3 files:

1) manifest.json
{
"manifest_version": 3,
"name": "DistractionCombater",
"version": "1.0",
"description": "Will inform you if you are endlessley scrolling on youtube, fb, reddit.etc.",
"permissions": ["tabs"],
"action": {
"default_popup": "index.html"
}
}

2) index.html

<html>
<body>
<h1>Hello Extensions</h1>
<script src="getCurrentLink.js"></script>
</body>
</html>


3) getCurrentLink.js

async function getCurrentLink() {
let queryOptions = { active: true, lastFocusedWindow: true };
let [tab] = await chrome.tabs.query(queryOptions);
let url = tab.url;
console.log(url);
}

very weird it works for you, nothing for me.

hrg...@gmail.com

unread,
Dec 19, 2022, 7:02:52 PM12/19/22
to Chromium Extensions, SB, hrg...@gmail.com
I assume you are calling the "getCurrentLink()" function manually in DevTools, right?

SB

unread,
Dec 19, 2022, 7:10:23 PM12/19/22
to Chromium Extensions, hrg...@gmail.com, SB
oh shame on me, didnt know I had to call it manually.

But I tried and got this error:

getCurrentLink.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'url') at getCurrentLink (getCurrentLink.js:6:18)

hrg...@gmail.com

unread,
Dec 19, 2022, 7:42:55 PM12/19/22
to Chromium Extensions, SB, hrg...@gmail.com
That's probably because you are calling the function from a separate DevTools window instead of a DevTools panel.
DevTools windows don't have a tab object (actually they do but this tab object doesn't have an ID), so chrome.tabs.query() doesn't retrieve those tabs (however, chrome.windows.getAll() does return them)

In general, your code must allow for the case of an empty array being returned when calling chrome.tabs.query()

For example:
let [tab] = await chrome.tabs.query(queryOptions);
if(tab){
    console.log( new URL(tab.url).hostname );
}else{
   console.log("No tab found");

wOxxOm

unread,
Dec 20, 2022, 5:22:00 AM12/20/22
to Chromium Extensions, hrg...@gmail.com, SB
Here's a workaround for the problem with separate devtools window mentioned above, also in https://crbug.com/1005701:

(async () => {
  const windowId = (await chrome.windows.getCurrent()).id;
  const [tab] = await chrome.tabs.query({ active: true, windowId });
  console.log(tab.url);
})();
Message has been deleted

SB

unread,
Dec 21, 2022, 5:25:33 AM12/21/22
to Chromium Extensions, wOxxOm, hrg...@gmail.com, SB
Thank you both for the help,

I ended up going with this: 

(async () => {
const windowId = (await chrome.windows.getCurrent()).id;
const [tab] = await chrome.tabs.query({ active: true, windowId });
if (tab) {
console.log(new URL(tab.url).hostname);
} else {
console.log("No tab found");
}
})();

Reply all
Reply to author
Forward
0 new messages