Can I maniupulate tabs from Browser Toolbox?

Developer Tools
#1

Hi!

I wanto to quickly run my custom code to to manipulate tabs. I don’t want to go through process of writing my own addon, packing it, installing it and so on. Is it possible?

I see that under Tools > Browser Tools > Browser Toolbox there is a separate devtools that seems to have power over entire browser instead of just 1 page. Can I use this to access tabs for example? I mean I can use there $$(“tab”)[3].click() 4th tab for example but is there way to use some official API? For example this one? https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs ? According to this there should be browser.tabs but this console says it is undefined.

For example what do I need to write in this console if I want to iterate over tabs one by one and for each tab 1) refresh tab, and 2) sleep 1 sec, and then loop with next item?

For testing I tried to just refresh 1 tab to see if it works by typing
$$(“tab”)[3].dispatchEvent(new KeyboardEvent(‘keydown’, {‘key’: ‘F5’}));

In this Browser toolbox console but it did not seem to work, it just printed true to console and that was all. At the end of day it does not matter so much to me if I can access official API or if I can hack it somehow like with $$(“tab”) just any solution that works is ok as I never plan to write addon out of this code, just plan to store some quick code snippets in notepad where I can copy them and paste into firefox to get come stuff done. With Tabs API it would look nicer of course I care more about just getting it to work. In case I cant access tabs API from there, how do I have modifier keys? For example F5 is not guaranteed to refresh from server so if possible I would prefer to send ctrl + f5 to my tab instead of just f5.

#2

Yes, the browser toolbox can be used to do what you want I think.
There’s no documented API though, you’ll leverage Firefox’s own code

To click on the second tab: gBrowser.tabs[1].click()
To refresh it: gBrowser.tabs[1].linkedBrowser.reload() and to refresh and clear the cache: gBrowser.tabs[1].linkedBrowser.reloadWithFlags(Ci.nsIWebNavigation.LOAD_FLAGS_BYPASS_CACHE)

You can read the code for the browser element here https://searchfox.org/mozilla-central/source/toolkit/content/widgets/browser-custom-element.js#809-811 so you can figure out what’s possible.

Hope this helps

1 Like
#3

Thanks!

Btw why does addon documentation refer to is as browser.tabs but browser toolbox as gBrowser.tabs? And how did you find that out?

Also do you know if there is any sleep function available in browser toolbox?

#4

They are simply different things.

Webextensions API is driven by a spec, and exposes standardized methods

The browser toolbox is an internal tool for Firefox developers, helping them debug the UI, where we can directly access Firefox code. I found out because I know gBrowser.tabs exists, and from there I started exploring what properties were available.

I don’t think there’s a sleep function, but you can write it yourself:

async function sleep(t) { 
  await new Promise(res => setTimeout(res, t))
}
#5

Thanks.

Since I mostly develop backend at my work, this async, await, Promise are all new to me. Is the only reason we use async so that we could then use await? and what’s res? Just a dummy placeholder so we can construct setTimeout call?

Btw can I also access Webextensions API itself from browser toolbox? For example if I should ever decide to write some addon and want to be able to test some API out quickly without having to go through steps of building addon and installing addon is that also possible? I would imagine that specially in the beginning when I don’t know what I exactly want it would be a time saver to access addon api from browser toolbox directly. Or even for random hacking it could be sometimes more convenient to copy examples from Webextensions API documentation rather than read the internal JS file.