A few suggestions and feature requests

[MilaMurry]

1) Toolbar color - I'd like to have the same color as the browser's toolbar. 2) Close all tabs - One click closes all open tabs, which is easier than the built-in one. Useful for some add-ons that clear cookies when a tab closes. 3) Open a tab/close last tab, which goes to the homepage rather than some URL. 4) Tab menu - Easier to switch between tabs. It would be good if one can change the height, full screen, half screen, etc and an image for each tab. 5) Add-on menu - Easier to open or trigger an add-on. 6) Shortcut menu - A new grid layout with custom rows/columns. Currently, I have to click 3/4 times to open a new shortcut; it's annoying. Make sure the shortcuts can be rearranged, renamed, and edited (their URLs), too. Maybe export/import them in a zip as well. 7) Bookmark button and menu - The built-in one is pretty useless. A new button to bookmark and a button to open bookmarks would be better. When opening the bookmark menu, one can then export, import, edit, create a folder or even sort them. Useful when using multiple browsers. 8) Scroll to top/bottom - A button that changes its icon depending on the user's scrolling. When scrolling down, the button shows down, and when scrolling up, the button shows up. When on the top/new page, the button shows down and when on the bottom, the button shows up. 9) Run as soon as possible - It seems this add-on runs a bit late, after the document has been completed but I'd like it triggered as early as possible.

I'm not sure if all these can be done. Currently, I only use the close tab button, but because it doesn't go to the homepage for the last tab, this add-on is not very useful to me. Anyway, it is a good add-on. Thanks and good luck.

[MilaMurry]

Another minor issue is the UI needs a little update. It looks like this on my tablet.

[MilaMurry]

Content-security-policy (CSP) issue.

Huh, when I view one of the images above on a different tab, your add-on stops working.

Using this add-on called CSP for Me solved the problem.

You may need to modify the response header without compromise any security. Maybe reset the header back? 🤔

[KristhianX]

Hi! Thank you for using the add-on and for reporting issues and making feature requests. Your feedback is immensely valuable in improving the add-on. I appreciate the detailed list you provided.

Toolbar color - I'd like to have the same color as the browser's toolbar.

The background color used is almost the same as the one used by Firefox in the dark theme. However, to match the color of the browser toolbar, you will need to disable transparency (set it to 1). An option for more theme colors or custom colors is in the roadmap.

Close all tabs - One click closes all open tabs, which is easier than the built-in one. Useful for some add-ons that clear cookies when a tab closes.

The 'Close all tabs' button is also in the roadmap. Unfortunately, one of the functionalities needed for it to work properly is not fully supported for Android extensions. The tabs.query() API should return a list of all tabs, but on Android, it does not include any unloaded tabs. Therefore, using its result for a 'close all tabs' button will only close loaded tabs.

Open a tab/close last tab, which goes to the homepage rather than some URL.

I don't understand your point; sorry about that. Could you please provide more details?

Tab menu - Easier to switch between tabs. It would be good if one can change the height, full screen, half screen, etc and an image for each tab.

A tab menu will face the same issue with tabs.query(). Although there is an add-on that adds a tab bar, it does not display unloaded tabs, as mentioned earlier. I'll check on full screen, split tabs, etc., but I don't think there is much an add-on can do at the moment.

Add-on menu - Easier to open or trigger an add-on.

It would be great, but there is no easy way, and I'm not sure if it's possible at all. I'll definitely conduct some tests in the future.

Shortcut menu - A new grid layout with custom rows/columns. Currently, I have to click 3/4 times to open a new shortcut; it's annoying. Make sure the shortcuts can be rearranged, renamed, and edited (their URLs), too. Maybe export/import them in a zip as well.

Yes, it's a nice idea! I am considering adding a very simple start page and, of course, making the shortcuts available from the toolbar. However, I have to ensure it remains lightweight so that users who don't need it don't feel the add-on is getting bloated. Perhaps creating it as a new add-on and establishing communication between them could be an approach. This will take some time.

Bookmark button and menu - The built-in one is pretty useless. A new button to bookmark and a button to open bookmarks would be better. When opening the bookmark menu, one can then export, import, edit, create a folder or even sort them. Useful when using multiple browsers.

None of the bookmarks APIs work for Android extensions. It will require developing it from scratch.

Scroll to top/bottom - A button that changes its icon depending on the user's scrolling. When scrolling down, the button shows down, and when scrolling up, the button shows up. When on the top/new page, the button shows down and when on the bottom, the button shows up.

It's an interesting idea; scroll to the top/bottom buttons are next on my to-do list. However, I was thinking of developing them separately. The scroll detection doesn't work consistently on all sites, so I believe making them separately would help avoid issues and ensure greater reliability.

Run as soon as possible - It seems this add-on runs a bit late, after the document has been completed but I'd like it triggered as early as possible.

This add-on aims to be as unintrusive as possible; that's why I have not made it load at document start, so it does not affect the page loading times. However, I will test how well it behaves at document start and let you know. It should not have a significant impact on performance.

Currently, I only use the close tab button, but because it doesn't go to the homepage for the last tab, this add-on is not very useful to me.

Please give me more information about this.

[KristhianX]

Another minor issue is the UI needs a little update. It looks like this on my tablet.

Thanks, I'll center it.

[KristhianX]

You may need to modify the response header without compromise any security. Maybe reset the header back? 🤔

I'll see what options there are; that is the first page I encounter with this issue.

[MilaMurry]

Regarding the homepage thingy, when you got only ONE tab and close it, the add-on will go to, by default, tabliss.io. I'd rather have a local/cached HTML; relying on some servers is not something I keen to.

A feature-rich homepage is probably a bliss, I just need a simple, non-bloated and faster one, mainly for the speed dials or shortcuts.

The close-tab button works just fine for closing other tabs, except the last remain one or when you got only one tab open. And I don't think the browser allows closing the last window; based on what I have read on Tampermonkey site, it is for security reasons.

Therefore, using its result for a 'close all tabs' button will only close loaded tabs.

It's fine, better have it than not, I guess. Maybe a little info of this on the description of the button would be good.

it does not display unloaded tabs

Again, just a blank without any images is fine; there's nothing can be done about it after all, enough with a title/URL for each tab.

None of the bookmarks APIs work for Android extensions. It will require developing it from scratch.

Well, I expected that much. Just a simple list is more than enough. Potentially put a limit too should be considered. 255 or 500? For now, I'm using this app called Bookmark Folder which is then can be imported from a Chrome-based browser.

However, I was thinking of developing them separately. The scroll detection doesn't work consistently on all sites, so I believe making them separately...

Separately? Mmm, can it not include on the add-on itself? I need it a lot on some sites, so it's good to have one. I know it might not work on some pages like this one; I believe it only works on layer pages, so when it doesn't, you can just lower its alpha or hide it completely and maybe, remove the listener or observer.

that's why I have not made it load at document start, so it does not affect the page loading times.

The problem with this approach is that it causes flickering/flashing, which hurts my eyes. You know, 1 sec it's there, 1 sec it's gone, 1 sec it's there, 1 sec it's gone. I prefer it to be visible all the time. Plus, I might want to use one of the buttons while the page is still loading.

Oh, one more thing, sometimes, the add-on can be laggy or unresponsive when using it while a page is loading. One time, it opened 20+ new tabs. Maybe call window.stop() beforehand for some buttons?

[KristhianX]

Thanks for clarifying about the homepage. In a future update, there will be an optional integrated homepage with shortcut support (similar to the default Firefox homepage but in a tab).

At the moment, you can use a local server to serve a custom homepage. Take a look at the instructions to run Bonjourr homepage locally; you can use any HTML file with this method: https://github.com/victrme/Bonjourr#online-web-version

And I don't think the browser allows closing the last window;

You are correct; the browser does not allow closing the browser with the last tab. One reason I made the close tab button open a new one if it is the last is that closing the last tab does not clear the browser appearance. You can see what I mean by installing Violentmonkey and installing the userscript (outdated) version of this add-on. The userscript's close tab button does not attempt to open a new tab.

It's fine, better have it than not, I guess. Maybe a little info of this on the description of the button would be good.

Close all tabs and close other tabs buttons added in the 1.5.1 update :)

Well, I expected that much. Just a simple list is more than enough.

If there is no news about proper bookmarks API support, I'll consider developing it from scratch and implementing the import/export settings as well.

Separately? Mmm, can it not include on the add-on itself? I need it a lot on some sites, so it's good to have one.

Added in the update; for now, they will be simple. Please see how well they work.

The problem with this approach is that it causes flickering/flashing, which hurts my eyes. You know, 1 sec it's there, 1 sec it's gone, 1 sec it's there, 1 sec it's gone. I prefer it to be visible all the time. Plus, I might want to use one of the buttons while the page is still loading.

The toolbar will load as soon as possible now. The toolbar is inserted next to the body element, so it needs the page to load partially before being able to be appended. Having it always visible is not possible.

Some pages are heavy or poorly optimized for Android. In those cases, as the toolbar becomes part of the page, it will also be affected. In my daily usage, I noticed the toolbar is slow and less responsive on Twitter. Other pages work just fine.

One time, it opened 20+ new tabs.

Don't know what could cause that; if it ever happens again, please try to reproduce that behavior and let me know to investigate it.

[KristhianX]

Another minor issue is the UI needs a little update. It looks like this on my tablet.

Thanks, I'll center it.

This change was made in the 1.5.1 update.

[MilaMurry]

Well foremost, the new added buttons work fantastic, especially the up & down buttons. Faster than other add-ons. Can't wait for shortcuts though, hopefully they can be rearranged. Only one site it doesn't work in my test so far is farside. Scroll To Top somehow managed to do the job.

Another issue is that the background color gets affected by other add-ons like Dark Reader that modifies every CSS style.

ON

OFF

Return to last tab One thing I think it needs to improve is returning to the previous tab. Often times I just open a link in a new tab temporarily or open this add-on's settings. Something like this:

• have multiple tabs open
• on tab 1
• on tab 4 (switch to the new open tab)
• close tab 4
• return to tab 1

Haptic feedback / vibration I like the subtle sensation when I'm clicking something. Have I touched the button before?

Find in page The built-in one is good enough for most cases but it is far from the best. Would love to have something better, something that has case sensitive/case insensitive/wildcards and regex.

Don't know what could cause that; if it ever happens again, please try to reproduce that behavior and let me know to investigate it.

Well god knows which site that caused that but you may want to try this infamous laggy site especially for the up and down buttons as soon as you entered the site.

The toolbar will load as soon as possible now. The toolbar is inserted next to the body element, so it needs the page to load partially before being able to be appended. Having it always visible is not possible.

Well, it is still not as earliest as I thought it could be. It seems it is inserted after the body tag, which requires the document to be almost completely downloaded. As shown in this picture using Mobile Devtools:

So I made an userscript to do a comparison. As it is just a simple script it may NOT justify the behavior and I don't look at your source code, so who knows what it does behind the scenes. So don't get mad. Most of the time, my script loads faster than yours, yours can be 5-10 secs slower. And here is the script:

// ==UserScript==
// @name        New script
// @namespace   Violentmonkey Scripts
// @match       *://*/*
// @grant       none
// @version     1.0
// @author      Mila
// @description Speed & persistent bg color test.
// @run-at      document-start
// ==/UserScript==

let currURL;

function onCreate() {
  if(currURL === window.location.href) return;
  currURL = window.location.href;

  const ready = (timeout, interval) => {
    //Checking via document.documentElement is a bit slower.
    if(!document['documentElement']) return;
    clearInterval(interval); //Cancel the setInterval() early.
    clearTimeout(timeout); //Cancel the setTimeout() early.

    //Initialisation.
    const bgColor = 'white';
    const iframe = document.createElement('IFRAME');
    iframe.style.height = '50px';
    iframe.style.width = '100%';
    iframe.style.display = 'block';
    iframe.style.position = 'fixed';
    iframe.style.zIndex = 999999;
    iframe.style.pointerEvents = 'none';
    //iframe.style.top = `${window.innerHeight - iframe.style.height.replace('px', "")}px`; //Redundant in this case.
    iframe.style.bottom = '0px';
    iframe.style.backgroundImage = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" color="${bgColor}" fill="currentcolor"/></svg>')`;

    //Injection.
    document.documentElement.insertAdjacentElement('afterbegin', iframe);
    //Avoid covering the contents. Add a 3px padding.
    iframe.insertAdjacentHTML('afterend', `<style>body { margin-bottom: ${Number(iframe.style.height.replace('px', "")) + 3}px !important }</style>`);
  };

  let timeout, interval;
  timeout = setTimeout(() => clearInterval(interval), 10000); //Avoid an infinite loop. Worst case, cancel the setInterval() after 10 secs.
  interval = setInterval(() => ready(timeout, interval), 1);
}

//Also works for dynamic sites such as Bitchute, Github, YouTube.
new MutationObserver(onCreate).observe(document, { attributes: false, subtree: true, childList: true });

[MilaMurry]

One more thing that I want to add is execution speed and code size. Not sure if you have already done it, but minifying your code for the final product is obviously the way to go. 😉🤗. Mozilla seems to allow it though, which is good I think, especially on mobile with barely have a 4-core CPU and few RAM.

I also think that the update notification should be in its own tab. Some people may want to revisit, reread that thing. Anyway, relax and take your time. 😆😄😊

[KristhianX]

Thanks for the excellent feedback you provide ❤️.

Well foremost, the new added buttons work fantastic, especially the up & down buttons. Faster than other add-ons. Can't wait for shortcuts though, hopefully they can be rearranged. Only one site it doesn't work in my test so far is farside. Scroll To Top somehow managed to do the job.

I am glad that you like the added buttons. All the buttons are subject to improvements if needed. I'll check the behavior of the Scroll to Top add-on and let you know if changes are made in this add-on.

Another issue is that the background color gets affected by other add-ons like Dark Reader that modifies every CSS style.

Yeah, you are right; I stopped using background changers, but it is definitely an issue I have to resolve. It should not be hard; I think it will be included in the next update.

Looking at the beautiful settings page of Dark Reader, I realized how ugly this add-on's settings page looks. I will try to give it a better look.

Return to last tab

It should be possible; that should be the default behavior.

Haptic feedback / vibration

Nice idea. I'll take a look.

Find in page

Great idea as well; adding it to the to-do list.

It seems it is inserted after the body tag, which requires the document to be almost completely downloaded

That is intended. It turns out that setting the max z-index is not enough on some sites, as some developers also set the max z-index for their elements. When two elements have the same z-index, the last in the DOM tree is the one that will be on top. That's why the toolbar is inserted outside the body.

Most of the time, my script loads faster than yours, yours can be 5-10 secs slower.

I ran your userscript, and you are right; it is faster. I've made changes in the add-on; for instance, I removed inline icons in favor of icon files, since in the add-on upload process, it will return warnings. When uploading the last update, I took a screenshot:

I like how it gets 0 warnings. I don't know if this is why, but since I upload clean versions, the approval is automatic, in less than 1 minute or so. Changes like this, and the query for settings to the storage and messages between the add-on scripts, may add to the loading time. Nevertheless, I keep improving the code as I find better approaches or get better ideas or suggestions like yours 😊.

but minifying your code for the final product is obviously the way to go.

The code is not minified, and from the link you provided:

Minifying your code isn't recommended. Unlike the advantage that minified code offers web pages loaded over the internet, extension code is loaded from a local source, so performance benefits are not significant.

Minifying the code will make the approval process take longer, and I also want users who download the .xpi file to see that the code is the same as the one in this repo and is trustworthy.

I also think that the update notification should be in its own tab.

I'll improve that as well.

Thank you! Please let me know of any other suggestions or issues. Have a nice day 🤗.

[MilaMurry]

It turns out that setting the max z-index is not enough on some sites, as some developers also set the max z-index for their elements. When two elements have the same z-index, the last in the DOM tree is the one that will be on top. That's why the toolbar is inserted outside the body.

I strongly believe there should be options for this injection mode per site, maybe call them root and content, and use the latter by default (for stability). This would give a better experience for users. Plus, most of the sites I visit will work with root injection anyway.

The up and down buttons don't work on this site. I can see a scroll slider at the right of the screen while scrolling the page manually, but what do I know? 🤔

[edited] Never mind. It is a nested element after all. If possible, maybe you could check for direct children's height inside the body as well? I can scroll to bottom with this:

const nestedElement = document.body.querySelector(':scope > #main');
nestedElement.scrollTo(0, nestedElement.scrollHeight);

As I previously said, I think the go back, go forward, reload page, home and close tab should call window.stop() or equivalents beforehand as soon as a user click it. That is, don't wait for a page or javascripts to complete their stuff. Currently, they behave the same as the browser's. Most of the time I don't care anymore or maybe the page is too laggy and I just want to either go back or close the tab.

One example is this page. After clicking the "DISCUSS THIS VIDEO" button, you'll see a chat at the right screen (not visible on mobile, not sure in landscape mode), and if you click the go back while it's listing the messages, the button is highlighted but waiting for the chat to be completed first. Thus, not a smooth experience right there.

Well that's it. Everything so far is pretty good. 👍

Only one thing that bother me so much is a lack of cookies and storage add-ons for Android. You know privacy, trackings and bloatware free stuff. Wish CAD works properly but it doesn't and there are no add-ons to view cookies and local storage either.

[MilaMurry]

Hi there, I hope you're fine. 😆

Stretching the layouts After looking at the settings so many times, it became so weird not having the layouts fill the screen's width, especially the input fills. I had to scroll left and right to see a long text, which made it a bit annoying when editing/testing the URL.

Reset for each tab & reset add-on When editing the URLs, there will be a time when you want to reset the settings for the "General" tab only, so I hope there will be a "Reset" button for each tab and a "Reset add-on" for a factory reset.

Blank HTML The problem with "about:blank" is that your add-on won't run on the page. So it is pretty useless to use. I'd like to set the URL for the homepage to something like this:

moz-extension://087d6b7f-a6d4-4f1d-9e00-402bcb788094/blank.html

Share button Well, I think I use the share button quite often, so it's good to have something quicker. This one is pretty easy to implement. I have tested it and it worked. Adding other keys other than these two and files is useless, they will be stripped away by Android anyway. I use this app to debug that.

navigator.share({
  title: document.title,
  url: 'https://github.com/KristhianX/essential-buttons-toolbar/issues/4'
});

Open in app/Open with Even though the browser already has one, it is not universal enough—not for all pages. The button needs to be exactly like the "Home" button, where you can modify the URL and it doesn't open a new tab, so you don't have to delete unnecessary tabs when returning to the browser. It can be done like this (which I have tested).

FORMAT
intent://{URL}#Intent;action=android.intent.action.VIEW;scheme={SCHEME};end

URL: https://m.youtube.com/
intent://m.youtube.com/#Intent;action=android.intent.action.VIEW;scheme=https;end

URL: https://github.com/KristhianX/essential-buttons-toolbar/issues/4
intent://github.com/KristhianX/essential-buttons-toolbar/issues/4#Intent;action=android.intent.action.VIEW;scheme=https;end

Maybe support for FTP, FTPS, etc as well.

TL;DR 1) In my case, having a blank page where your add-on runs is better than not having it. A wallpaper or two would be nice. Even a simple color selection is enough. It will be a temporary fix before the shortcuts are implemented. Having this makes closing all the tabs and reusing the browser bearable. 2) The "open with" is useful to me to fix that Bookmark Folder not able to be opened from the browser. I have to mod it to make it work. The URL will be like this:

intent:#Intent;action=android.intent.action.VIEW;category=com.coconuts.webnavigator;scheme=https;type=text/plain;end

Now when I click the "Home" button, it will open straight to the app without having to pick and mess with the default app selections.

[KristhianX]

Hi! I'm fine, thank you 😊. I hope you are fine as well.

I have read your previous comments; they are excellent as always. I'll reply to them later when I have the time to make a longer comment.

The toolbar color change made by Dark Reader and similar add-ons has been addressed. I have been working on the 'Known Issues' section in the readme, attempting to achieve a consistent toolbar height in desktop mode and, well, hopefully everywhere. This is to make possible (and more consistent) the last feature request on the first issue opened: a toggle desktop site button.

I really like the idea of the blank page; it's definitely going to be added in the next update. Thanks for all your feedback and excellent suggestions.

[MilaMurry]

That would be excellent. Still remember a userscript I made to fix the font size setting, which has no effect on Kiwi Browser. It's been fixed now. Anyway good luck 🍀.

[KristhianX]

Hi! The add-on has been updated. I included some of your suggestions, thank you! I'll try to reply to your previous comments tomorrow. Have a nice day!

[MilaMurry]

Well done @KristhianX for your hard work and being very responsive. Here are some issues/suggestions I'd to see in the future updates.

z-index setting

• overlapped with TWP - Translate Web Pages add-on # Based on user's settings or the pages you're visiting, it may always be visible. # Adding margin-bottom/top for head, body or element has no effect.

Auto scroll

• smooth animation
• can adjust the speed (slider?)
• able to pause & resume while scrolling # Reading web novels, news, source codes, mangas, etc. I'm tired of scrolling down. 😭

Page up/down # Based on screen's height? Adjustable size? percentage?

A switch for "Always open new tab in private window" # Must enable allow it to "Run in private browsing" setting first.

A switch for "Always duplicate tab in private window"

Thank you very much for making Firefox great again and have an awesome day 😊.

[KristhianX]

Hi there!

I hope you're doing well. I have some news to share and would also like to reply to some of your suggestions. However, keeping track of the topics is getting hard.

If it's not too much trouble, could you create separate GitHub issues for the following discussions? Feel free to create as many as needed. Here's a list of our discussions to date:

(Note: "Pending" doesn't necessarily mean implementation; it signifies consideration, though some are confirmed.)

• Toolbar color (Pending)
• Closes all tabs (Done)
• New tab page with shortcuts support (Pending)
• Tab menu (Pending)
• Add-on menu (Pending)
• Shortcuts menu (Pending)
• Bookmark button and menu (Pending)
• Scroll top/bottom (Done)
• Run as soon as possible and injection mode (News about this)
• Settings page UI fixes (Done)
• CSP issue (Likely won't fix)
• Call window.stop() for some buttons (Pending)
• Toolbar color changed by Dark Reader (Done)
• Return to the previous tab after closing a tab (Pending)
• Haptic feedback (Pending)
• Find in page (Pending)
• More reset options (Pending)
• blank.html (Done) custom color or background for it (Won't do)
• Share button (Pending)
• Open in app / open with button (Pending)
• Z-index (Won't change, as the hide toolbar button behavior will be improved)
• Auto-scroll (Pending)
• Page up/down (Pending)
• Always open a new tab in a private window and Always duplicate tab in a private window (Not possible as far as I know. I just disabled the add-on from running in private browsing to avoid privacy risks)

Some marked as done can be improved, as I mentioned in other comment.

Please start with 'Run as soon as possible and injection mode.' Other issues can be created gradually.

Thanks for all your support and feedback! Have a nice day!

[MilaMurry]

Sure. I should have done it before. Make it easier for others to interact with each issue. Will do so later when I have free time. With that being said, Im closing this issue.

[MilaMurry]

I have decided not to open some issues such as toolbar color, z-index, running as soon as it could (can be improved especially on YouTube), etc., and everything that has been done, as I'm pretty satisfied with the latest installment. Other people can open a new issue if they think it is necessary.

[KristhianX]

Thank you for taking the time to open the issues separately. It will be easier now to keep track of the status of the issues/feature requests.

Since you did not open one for the 'run as soon as possible' request, here is an update about it:

In version 1.6, I changed the add-on to run at 'document start' instead of 'document end.' I considered the code you suggested and applied some of it. In my initial tests, I couldn't see any difference, which is why I didn't mention it in the release notes. However, with daily usage, I now believe it is a bit faster. What do you think?

Thanks for sharing the code; here is part of the new code...

function appendToolbar() {
    let timeout, interval
    const checkAndLoadToolbar = () => {
        // also tested with document['documentElement'], but I still prefer
        // body to ensure it will be on top of everything
        if (document.body) {
            document.body.insertAdjacentElement('afterend', toolbarIframe)
            // this is necessary to append items to the iframe on firefox 
            toolbarIframe.addEventListener('load', function () {
                toolbarIframe.contentWindow.document.body.appendChild(menuDiv)
                toolbarIframe.contentWindow.document.body.appendChild(toolbarDiv)
            })
            window.visualViewport.addEventListener('resize', updateToolbarHeight)
            clearInterval(interval)
            clearTimeout(timeout)
        }
    }
    timeout = setTimeout(() => clearInterval(interval), 10000)
    interval = setInterval(checkAndLoadToolbar, 100)
}

async function initializeToolbar() {
    removeToolbar()
    await getSettingsValues()
    if (!isCurrentPageExcluded) {
        createToolbar()
        createButtons()
        appendButtons()
        // Calling it here
        await appendToolbar()
        updateToolbarHeight()
        checkExistenceAndHeight()
        hideOnScroll()
    }
}

Regarding the toolbar issue in YouTube, it works well in my daily usage. Can you please provide more details about that issue? Could it be related to another add-on working on YouTube?"

[MilaMurry]

Well I was comparing it with my previous script and opened YouTube several times with the duplicate button. Most sites seemed pretty fast though.

clearInterval(interval)
clearTimeout(timeout)

I'd put them at the top, as creating and adding elements (creating objects, IO operations) incurs extra overhead. 100 ms is not that long. My concern here is that the setInterval() will execute the checkAndLoadToolbar() twice or probably more before one is finished.

The appendToolbar() doesn't seem to return a Promise, so this await appendToolbar() seems unnecessary. Are you trying to wait the function to complete?

Another thing I want to add is to be careful with adding listeners. A lot of userscripts I've encountered run havoc; keep adding a new listener without removing the old one. So make sure to use AbortController if necessary.

toolbarIframe.addEventListener('load', function () {
        toolbarIframe.contentWindow.document.body.appendChild(menuDiv)
        toolbarIframe.contentWindow.document.body.appendChild(toolbarDiv)
 })

It looks redundant to me. After all, JavaScript runs on a single thread. Are you sure it is important for it to have a listener? Try removing it.

[KristhianX]

I'd put them at the top, as creating and adding elements (creating objects, IO operations) incurs extra overhead. 100 ms is not that long. My concern here is that the setInterval() will execute the checkAndLoadToolbar() twice or probably more before one is finished.

You are right.

The appendToolbar() doesn't seem to return a Promise, so this await appendToolbar() seems unnecessary. Are you trying to wait the function to complete?

Also right, I have to remove the await.

Another thing I want to add is to be careful with adding listeners. A lot of userscripts I've encountered run havoc; keep adding a new listener without removing the old one. So make sure to use AbortController if necessary.

Will add the removeEventListener after the items are appended.

It looks redundant to me. After all, JavaScript runs on a single thread. Are you sure it is important for it to have a listener? Try removing it.

When I was making the userscript I had to add it to make it correctly append items to the iframe body. But it was not needed in chromium. https://stackoverflow.com/questions/9967478/iframe-content-disappears-on-firefox

I want to thank you again for all your suggestions and feedback. It has made the add-on so much better. 😉🤗

[MilaMurry]

You're welcome. I think the function appendToolbar() should use a Promise. If not, these functions (updateToolbarHeight(), checkExistenceAndHeight(), hideOnScroll()) will likely run before it. So, something like this:

async function appendToolbar() {
    await new Promise(resolve => {
        let timeout, interval
        const checkAndLoadToolbar = () => {
            if (document.body) {
                clearInterval(interval)
                clearTimeout(timeout)
                document.body.insertAdjacentElement('afterend', toolbarIframe)
                // this is necessary to append items to the iframe on firefox
                toolbarIframe.addEventListener('load', function appendChildren() {
                    toolbarIframe.contentWindow.document.body.appendChild(menuDiv)
                    toolbarIframe.contentWindow.document.body.appendChild(toolbarDiv)
                    toolbarIframe.removeEventListener('load',  appendChildren) //Added this.
                })
                window.visualViewport.addEventListener('resize', updateToolbarHeight)
                resolve() //Important.
            }
        }
        timeout = setTimeout(() => {
            clearInterval(interval)
            resolve() //Important.
        }, 10000)
        interval = setInterval(checkAndLoadToolbar, 100)
    })
}

async function initializeToolbar() {
    removeToolbar()
    await getSettingsValues()
    if (!isCurrentPageExcluded) {
        createToolbar()
        createButtons()
        appendButtons()
        // Calling it here
        appendToolbar() //No need for await.
        updateToolbarHeight()
        checkExistenceAndHeight()
        hideOnScroll()
    }
}