X
Tap here to go to the mobile version of the site.
An updated version of Firefox is available to address the issues with Add-ons disabled or fail to install on Firefox. You can download the update for your OS here: https://www.mozilla.org/firefox/new/ For Known Issues and Workarounds, please check out the update at https://support.mozilla.org/kb/add-ons-disabled-or-fail-to-install-firefox

Support Forum

[firefox quantum] (How to) Create a tabs menu with current tabs listed on it?

Posted

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.

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.
jscher2000
  • Top 10 Contributor
8316 solutions 68074 answers

Helpful Reply

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?

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''' <pre>/* Always Show "All Tabs" button */ #alltabs-button { visibility: visible !important; } </pre> '''(B) Generate and download a''' <code>userChrome.css</code> '''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''' <code>chrome</code> '''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''' <code>userChrome.css</code> '''file you generated in Step B into the''' <code>chrome</code> '''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?
cor-el
  • Top 10 Contributor
  • Moderator
17104 solutions 154461 answers

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,"&amp;");
   title = last.title?last.title.replace(/</g,"&lt;").replace(/>/g,"&gt;"):url;
  } else { url = "about:blank"; title = url; }
  sd += "<a href=%22" + url + "%22>" + title + "</a><br>";
 }
}
sd+="</body></html>";
prompt("BrowserState: Tabs",unescape(sd));
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. *https://developer.mozilla.org/en/Tools/Browser_Console ----- <pre><nowiki>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,"&amp;"); title = last.title?last.title.replace(/</g,"&lt;").replace(/>/g,"&gt;"):url; } else { url = "about:blank"; title = url; } sd += "<a href=%22" + url + "%22>" + title + "</a><br>"; } } sd+="</body></html>"; prompt("BrowserState: Tabs",unescape(sd));</nowiki></pre>

Question owner

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.

''jscher2000 [[#answer-1144132|said]]'' <blockquote> 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. </blockquote> 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

Question owner

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,"&amp;");
   title = last.title?last.title.replace(/</g,"&lt;").replace(/>/g,"&gt;"):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?

''cor-el [[#answer-1144211|said]]'' <blockquote> <pre><nowiki>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,"&amp;"); title = last.title?last.title.replace(/</g,"&lt;").replace(/>/g,"&gt;"):url; } else { url = "about:blank"; title = url; } sd += "<a href=%22" + url + "%22>" + title + "</a><br>"; } } sd+="</body></html>"; prompt("BrowserState: Tabs",unescape(sd));</nowiki></pre> </blockquote> 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

jscher2000
  • Top 10 Contributor
8316 solutions 68074 answers

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

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
cor-el
  • Top 10 Contributor
  • Moderator
17104 solutions 154461 answers

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();
}})
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). *https://www.jeffersonscher.com/res/scrounger.html ---- <pre><nowiki>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(); }})</nowiki></pre>

Modified by cor-el