Need help 🙏

[emvaized]

I'm trying to write my own first little script, but got stuck with this question — and it seems really hard to find proper documentation on gBrowser and all that stuff these days...

Could you please tell me, is it possible to add a listener to execute code whenever new "browser" element is about to be added to the browser DOM? I would like to modify some of it's attributes.
Thanks!

[aminomancer]

What attributes are you trying to modify? Some attributes may need to be set before the element connects, others could be set at any point.

[emvaized]

transparent="true" attribute, in attempt to get fully transparent background for all about: pages

[emvaized]

I think it needs to be set before element connects

[aminomancer]

Maybe you should override gBrowser.createBrowser?

[emvaized]

Yeah, looks like it would be the best way to do it! But is it possible to override this method from user script? I was thinking more about attaching some kind of event listener for browser element creation event

[aminomancer]

Yes, it's possible to override it from a user script. Why wouldn't it be?

There is no event that fires precisely when a browser element is created, and even if there was, that wouldn't let you modify it before it connects to the document. It's much better to change how the element is created than to try to hook into its creation from outside.

[emvaized]

Okay, got it! Could you please give an example of such gBrowser method override? I think I haven't seen it before in other user scripts

[aminomancer]

Check the scripts in my repo, most of them override methods

gBrowser.createBrowser = function (...) {
  ...
}

[emvaized]

Thanks, it seems I misunderstood this part. Just tried it and got my browser hanged on startup😁
However, thanks for pointing out! I will try to dig in that direction

[aminomancer]

Well you gotta make sure you're overriding the method with a method that actually works. It needs to have all the existing behavior plus the behavior you want to add.

[emvaized]

Yeah, makes sense... Thanks for the help! I was using "TabOpen" callback for applying the attribute. But it doesn't work for new about:newtab pages and selected tab's browser element on Firefox startup (probably because browser element gets precached somewhere ommiting the "TabOpen" callback in these cases)

[aminomancer]

Yeah TabOpen doesn't seem like a good option for your use case, it represents the creation of a tab element (the actual visual tab) and not the linked browser.

If you wanna get this happening as early as possible, you can probably do something like this.

// ==UserScript==
// @name           Make Browsers Transparent
// @version        1.0.0
// @author         emvaized
// ==/UserScript==

let gBrowser = window.gBrowser ?? window._gBrowser;
if (gBrowser.createBrowser.name !== "customCreateBrowser") {
  eval(
    `gBrowser.createBrowser = function customCreateBrowser` +
      gBrowser.createBrowser
        .toSource()
        .replace(/^createBrowser/, "")
        .replace(/(\s*)(type: \"content\",)/, `$1$2$1transparent: "true",`)
  );
}

However, I'm not sure this gets called for the first browser tab at startup. The first tab in a window is special in a lot of ways. You'll have to do some trial and error probably.

The later parts in the readme on my repo has a lot of useful links on learning how to do these kinds of mods. The best advice is to get familiar with searching for stuff on searchfox :P

[emvaized]

Thanks, I'll check this!

[emvaized]

I just tested the script you provided, and it works just perfect! Even for the first browser tab at startup. Huge thanks👍
I only had to rename all "gBrowser" to just "gBrow", because somehow got an error in console on trying to reassign global variable.

However, now a new task arose in my head — it seems sidebar's browser element is not affected by this patch, as it seems to be using another method for browser creation. I guess, this one couldn't be overriden in the same way, as it's not part of globally exposed object like gBrowser?

[emvaized]

Thanks for your explanation. Yeah, definetely the sidebar with "webext-panels-browser" id should also be modified for my purpose.

Guess I'm out of luck then//. After some research I only found this SidebarShown event — which is good since it seems to be fired before the "webext-panels-browser" sidebar gets loaded and inserted into it. But trying to overwrite the SidebarUI.browser.contentWindow.getBrowser method there results in errors that promiseEvent and ExtensionUtils are undefined...

[emvaized]

I managed to do it! By setting my userscript to be run only in chrome://browser/content/webext-panels.xhtml documents via @include option, I managed to overwrite window.getBrowser function in the same way you showed previously.

[aminomancer]

Nice! Out of curiosity, did you ever try the manifest method I described earlier?

[emvaized]

Nah, I didn't, as it seemed too much for me to overwrite the whole file just for adding that one attribute... Also I had worries that on Firefox updates potential changes will not be included in the overwritten file, and I will have to do it manually each time. I decided to consider it as a plan B to try later, if I won't find a way to overwrite the function in the runtime — which feels much more simple and sustainable to me.

[emvaized]

Guess I will publish the script later and create some corresponding repo, as there are many folks out there who request such changes occasionally – in most cases, to get the fully transparent background for TreeStyleTabs or Sidebery sidebars.