Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

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

  • 6 replies
  • 1 has this problem
  • 44 views
  • Last reply by cor-el

more options

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)

more options

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?

more options

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));
more options

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

more options

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?

Modified by b5488275

more options

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

more options

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