[firefox quantum] (How to) Create a tabs menu with current tabs listed on it?
Hi, I would like to replicate what this extension does in the older firefox versions: https://addons.mozilla.org/en-US/firefox/addon/tabs-menu/ I ask: How? 'Casuse I know I'm sending work to someone else, if you just have an idea where to search please share, I would already appreciate a lot.
All Replies (6)
I don't know whether there is an add-on for this, but you could consider a custom style rule approach.
You may have noticed that when there are enough tabs to "overflow" and cause a scroll button at the left ("<") and right (">") of the tabs, there also is a button that looks like an inverted caret (upside down ^) you can use to list all the tabs and jump among them.
If you would like to have that button appear all the time regardless of the number of tabs, you can do that by applying a custom style rule to the button. This requires creating a userChrome.css file, which is about a 10 minute project, but if you don't find an easier way, here's how you do it:
This assumes you do not already have a userChrome.css file. If you do already have a working userChrome.css file, you just need to add the rule under (A) to your file.
(A) Select and copy all of the following code
/* Always Show "All Tabs" button */
#alltabs-button {
visibility: visible !important;
}
(B) Generate and download a userChrome.css file
Open the following page and paste the above rules into the editor, replacing the sample rule:
https://www.userchrome.org/download-userchrome-css.html
Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)
Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)
Minimize that Windows Explorer window for later reference.
(C) Create a new chrome folder in your profile folder
The following article has the detailed steps for that (#1, #2, and I recommend #3)
https://www.userchrome.org/how-create-userchrome-css.html
I have videos for both Mac and Windows in case the text is not clear.
(D) Move the userChrome.css file you generated in Step B into the chrome folder you created in Step C
The next time you quit Firefox and start it up again, it should discover that file and apply the rules.
Success?
A possibility is to use the Browser Console and run this code via the command line to get the current browser state. You need to enable the command line (set devtools.chrome.enabled = true) and possibly type some text to enable pasting.
ssj = SessionStore.getBrowserState();
prompt("BrowserState: JSON",ssj);
sj = JSON.parse(ssj);
sd = "<html><body><style>body,hr{counter-reset:links} a:before{content:%22[%22 counter(links) %22] %22; counter-increment:links; color:#000; font-weight:bold}</style>";
for (j = 0; win = sj.windows[j]; j++){
sd += "[window: " + (j+1) + "][tabs: "+(win.tabs.length)+"][selected: "+ (win.selected) +"]<br>";
for (i = 0; tab = win.tabs[i]; i++) {
ent = tab.entries;
if (last = ent[ent.length-1]){
url = last.url.replace(/#/g,"%2523").replace(/&/g,"&");
title = last.title?last.title.replace(/</g,"<").replace(/>/g,">"):url;
} else { url = "about:blank"; title = url; }
sd += "<a href=%22" + url + "%22>" + title + "</a><br>";
}
}
sd+="</body></html>";
prompt("BrowserState: Tabs",unescape(sd));
jscher2000 said
I don't know whether there is an add-on for this, but you could consider a custom style rule approach. You may have noticed that when there are enough tabs to "overflow" and cause a scroll button at the left ("<") and right (">") of the tabs, there also is a button that looks like an inverted caret (upside down ^) you can use to list all the tabs and jump among them.
I already tweaked some stuff with user chrome (in attachment my current quite simple firefox layout, just out of curiosity), so this is a simple helpful solution to the problem, thankyou very much for the idea and really quick answer damn ahah.
Modified by b5488275
cor-el said
ssj = SessionStore.getBrowserState();
prompt("BrowserState: JSON",ssj);
sj = JSON.parse(ssj);
sd = "<html><body><style>body,hr{counter-reset:links} a:before{content:%22[%22 counter(links) %22] %22; counter-increment:links; color:#000; font-weight:bold}</style>";
for (j = 0; win = sj.windows[j]; j++){
sd += "[window: " + (j+1) + "][tabs: "+(win.tabs.length)+"][selected: "+ (win.selected) +"]<br>";
for (i = 0; tab = win.tabs[i]; i++) {
ent = tab.entries;
if (last = ent[ent.length-1]){
url = last.url.replace(/#/g,"%2523").replace(/&/g,"&");
title = last.title?last.title.replace(/</g,"<").replace(/>/g,">"):url;
} else { url = "about:blank"; title = url; }
sd += "<a href=%22" + url + "%22>" + title + "</a><br>";
}
}
sd+="</body></html>";
prompt("BrowserState: Tabs",unescape(sd));
Hey, I don't program a lot, so if I have a few questions: - 'sd' is a kind of html string you can edit? - if the last is true, why '+=' even make sense? - the stop condition 'win = sj.windows[j]', ok I'm gessing the window array is an array with pointers to tabs?
Modified by b5488275
Q: 'sd' is a kind of html string you can edit? A: sd, sj, and ssj are variables; the "var" is optional
Q: if the last is true, why '+=' even make sense? A: += is a shorthand: a = a+b can be written as a += b
Q: the stop condition 'win = sj.windows[j]', ok I'm gessing the window array is an array with pointers to tabs? A: cor-el will have to explain this, as I have not looked at the structure of the browser state object
You can save the JSON data to a file with .json file extension and open this file in a Firefox tab. Then you can use the builtin JSON viewer to inspect the structure. This json file should have the same structure as used by sessionstore files in the sessionstore-backups folder and you basically have two nested arrays, one with the windows and each window has a list of open and closed tabs.
You can use the scrounger tool with only the first two lines and save this data to a .json file (e.g. via the Scratchpad).
ssj = SessionStore.getBrowserState();
var fp=Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker);
fp.init(window,"Save File",Ci.nsIFilePicker.modeSave);
fp.defaultString = "sessionstate.json";
fp.open((rv) => {
if (rv == Ci.nsIFilePicker.returnOK || rv == Ci.nsIFilePicker.returnReplace) {
var fos = Cc['@mozilla.org/network/file-output-stream;1'].createInstance(Ci.nsIFileOutputStream);
fos.init(fp.file, 0x02 | 0x08 | 0x20, 0666, 0);
var converter = Cc['@mozilla.org/intl/converter-output-stream;1'].createInstance(Ci.nsIConverterOutputStream);
converter.init(fos, 'UTF-8', 0, 0);
converter.writeString(ssj);
converter.close();
}})
Modified by cor-el