I found a request from reddit yesterday to toggle sets of extension icons. Since this is easy to do and already mentioned in OP I'll throw this in here. This setup uses 3 sets of buttons, but this could easily be expanded. If you want a button hidden, just don't input it in any of these sets (which solves the current chromium 67 problem too).
function extensionToggle() {
// Add extension IDs of buttons. On each click of the toggle another set of buttons is being shown. You can leave any one of these empty. In this example no extensions are being shown on start, 3 extensions are being shown in set2 and 3 in set3. Extension that are installed and enabled but not entered will be hidden from all sets.
var set1 =
[
];
var set2 =
[
'ffhafkagcdhnhamiaecajogjcfgienom',
'aapbdbdomjkkjkaonfhkkikfgjllcleb',
'nngceckbapebfimnlniiiahkandclblb'
];
var set3 =
[
'cjpalhdlnbpafiamejdnhcphjbkeiagm',
'pgdnlhfefecpicbbihgmbmffkjpaplco',
'hipnollokpifchndpfhnlfjbdnkhiigg'
];
// create the button
var button = document.createElement('button');
button.classList.add('button-toolbar', 'toggle-extensions-group');
button.id = 'togglemod';
button.setAttribute('title', 'Toggle mod');
button.setAttribute('tabindex', '-1');
button.innerHTML = '<svg width="4" height="16" viewBox="0 0 4 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 4c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm0 6c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm0 6c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z"></path></svg>';
adr.appendChild(button);
// startup setting
const startup = document.querySelectorAll('button.button-toolbar.browserAction-button');
const togstat = document.getElementById('togglemod');
togstat.classList.add('SET1');
for (var i=0; i < startup.length; i++) {
if (set1.indexOf(startup[i].id) != -1) {
startup[i].style.display = 'flex';
}
else {
startup[i].style.display = 'none';
}
}
// toggle logic
togstat.addEventListener('click', function() {
const buttons = document.querySelectorAll('button.button-toolbar.browserAction-button');
if (togstat.classList.contains('SET1')) {
togstat.classList.remove('SET1');
togstat.classList.add('SET2');
}
else if (togstat.classList.contains('SET2')) {
togstat.classList.remove('SET2');
togstat.classList.add('SET3');
}
else {
togstat.classList.remove('SET3');
togstat.classList.add('SET1');
}
for (var i=0; i < buttons.length; i++) {
if (togstat.classList.contains('SET1') && set1.indexOf(buttons[i].id) != -1) {
buttons[i].style.display = 'flex';
}
else if (togstat.classList.contains('SET2') && set2.indexOf(buttons[i].id) != -1) {
buttons[i].style.display = 'flex';
}
else if (togstat.classList.contains('SET3') && set3.indexOf(buttons[i].id) != -1) {
buttons[i].style.display = 'flex';
}
else {
buttons[i].style.display = 'none';
}
}
});
};
// Below code is a loop waiting for the browser to load the UI. Something like it has to be used in all similar javascript mods to ensure the interface has loaded before running dependent functions. You can call all functions you might use from just one instance.
let adr = {};
setTimeout(function wait() {
adr = document.querySelector('.toolbar-addressbar.toolbar');
if (adr) {
extensionToggle();
}
else {
setTimeout(wait, 300);
}
}, 300);
It would probably be a good idea to add the names of the extensions as comment in the same line, so you can shuffle/delete/replace them when your setup changes.
