userChrome.js not working in ESR 68, 78, 91, 102, 115 or Waterfox G6.0.5

[jabcreations]

I've got a pretty good handle on how profiles work, about:config, about:support, etc for Firefox and Waterfox. I've used userChrome.css for a while now for minor stuff.

This works in Firefox 115 ESR on Windows 10: AppData\Roaming\Waterfox\Profiles\Waterfox 115\chrome\userChrome.css #toolbar-menubar {background-color: #f00;}/*Red*/

Then to do a very basic test I tried setting the background-color via JavaScript: AppData\Roaming\Waterfox\Profiles\Waterfox 115\chrome\userChrome.js document.getElementById('toolbar-menubar').style.backgroundColor = '#0f0';//Green

So the File toolbar is red from CSS but not green from the JavaScript code.

So I figured there is some obnoxious setting preventing this and read through this page: https://www.userchrome.org/what-is-userchrome-js.html

SAFETY FIRST! userChrome.js scripting requires disabling a safety mechanism

Okay...and that safety mechanism is...? It was like drivers ed: 1% instructions (not even explaining how to put fuel in your car) and 99% about how your head will explode like a melon. Totally worthless!

I just want to define my function and then call it. Example, this code works perfectly when manually executed via the Browser Tools:

function gui_fixes()
{
 //Fix tabs bar, put it on bottom:
 document.getElementById('navigator-toolbox').appendChild(document.getElementById('TabsToolbar'));

 //Move New Tab button back to Main Toolbar:
 document.getElementById('urlbar-container').parentNode.insertBefore(document.getElementById('tabs-newtab-button'), document.getElementById('urlbar-container'))

 //Move Address bar back to the start of the bookmarks toolbar:
 document.getElementById('PersonalToolbar').insertBefore(document.getElementById('urlbar-container'), document.getElementById('PersonalToolbar').firstChild);

 //Move Downloads button to the right of the New Tab button:
 document.getElementById('nav-bar-customization-target').insertBefore(document.getElementById('downloads-button'), document.getElementById('tabs-newtab-button'));
}

gui_fixes();

Suggestions please?

[jscher2000]

Startup scripting requires a file that points to your script in the program folder, typically here:

C:\Program Files\Mozilla Firefox\defaults\pref

For more information, please check out https://www.userchrome.org/what-is-userchrome-js.html#installloader

The code that disables the safety mechanism will be in the script file in that location. Check the 4th-5th lines in the example here:

https://www.userchrome.org/what-is-userchrome-js.html#combinedloader

[jabcreations]

Thank you for your reply. So the directions aren't clear so I'll clarify what I can and maybe we can meet in the middle? I downloaded the fx-folder.zip and utils_scripts_only.zip earlier.

My installation directory: C:\MEDIA\INTERNET\Waterfox\115.0\

The initial loader directory: C:\MEDIA\INTERNET\Waterfox\115.0\defaults\pref\

The load file (I think?): C:\MEDIA\INTERNET\Waterfox\115.0\defaults\pref\config-prefs.js

Contains: pref("general.config.obscure_value", 0); pref("general.config.filename", "config.js"); pref("general.config.sandbox_enabled", false);

Which apparently loads the following: C:\MEDIA\INTERNET\Waterfox\115.0\config.js

Which contains the following (changed the file name to userChrome.js near the bottom):

// skip 1st line
lockPref('xpinstall.signatures.required', false);
lockPref('extensions.install_origins.enabled', false);

try {
  const cmanifest = Cc['@mozilla.org/file/directory_service;1'].getService(Ci.nsIProperties).get('UChrm', Ci.nsIFile);
  cmanifest.append('utils');
  cmanifest.append('chrome.manifest');
  Components.manager.QueryInterface(Ci.nsIComponentRegistrar).autoRegister(cmanifest);

  const objRef = ChromeUtils.import('resource://gre/modules/addons/AddonSettings.jsm');
  const temp = Object.assign({}, Object.getOwnPropertyDescriptors(objRef.AddonSettings), {
    REQUIRE_SIGNING: { value: false }
  });
  objRef.AddonSettings = Object.defineProperties({}, temp);

  Cu.import('chrome://userchromejs/content/BootstrapLoader.jsm');
} catch (ex) {};

try {
  Cu.import('chrome://userchromejs/content/userChrome.js');
} catch (ex) {};

The appData directory: C:\Users\[user]\AppData\Roaming\Waterfox\Profiles\Waterfox 115\chrome\

The appData JavaScript file: C:\Users\[user]\AppData\Roaming\Waterfox\Profiles\Waterfox 115\chrome\userChrome.js

So I still have document.getElementById('toolbar-menubar').style.backgroundColor = '#0f0'; in the userChrome.js file for testing and it doesn't change the File toolbar from red (set by userChrome.css) to green. What am I missing?

[jabcreations]

So I've found success with Waterfox 115 though hitting some odd error with Firefox 115 ESR.

First, what works!

I followed the directions/copied the files via https://github.com/Aris-t2/CustomJSforFx. Here is the exact code in the exact places that got Waterfox Current working:

C:\MEDIA\INTERNET\Waterfox\115.0\config.js

// config.js 

try {
  Cu.importGlobalProperties(['PathUtils']);

  if (!Services.appinfo.inSafeMode) {
    Services.scriptloader.loadSubScript(
      PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir,
      'chrome', 'userChrome', 'userChromeJS.js')), this, 'UTF-8'
    );
  }
} catch(e) {
    Components.utils.reportError(e);
};

C:\MEDIA\INTERNET\Waterfox\115.0\defaults\pref\config-prefs.js

pref("general.config.obscure_value", 0);
pref("general.config.filename", "config.js");
pref("general.config.sandbox_enabled", false);

C:\Users\[user]\AppData\Roaming\Waterfox\Profiles\Waterfox 115\chrome\userChrome.js

// userChrome.js
function gui_fixes()
{
 //Fix tabs bar, put it on bottom:
 document.getElementById('navigator-toolbox').appendChild(document.getElementById('TabsToolbar'));

 //Move New Tab button back to Main Toolbar:
 document.getElementById('urlbar-container').parentNode.insertBefore(document.getElementById('tabs-newtab-button'), document.getElementById('urlbar-container'))

 //Move Address bar back to the start of the bookmarks toolbar:
 document.getElementById('PersonalToolbar').insertBefore(document.getElementById('urlbar-container'), document.getElementById('PersonalToolbar').firstChild);

 //Move Downloads button to the right of the New Tab button:
 document.getElementById('nav-bar-customization-target').insertBefore(document.getElementById('downloads-button'), document.getElementById('tabs-newtab-button'));

 //Add 'Back' text label to Back button:
 var d = document.createElement('span');
 d.appendChild(document.createTextNode('Back'));
 document.getElementById('back-button').appendChild(d);

 //Add 'Forward' text label to Forward button:
 var d = document.createElement('span');
 d.appendChild(document.createTextNode('Forward'));
 document.getElementById('forward-button').appendChild(d);

 //Add 'Reload' text label to Reload button:
 var d = document.createElement('span');
 d.appendChild(document.createTextNode('Reload'));
 document.getElementById('reload-button').appendChild(d);

 //Add 'Stop' text label to Reload button:
 var d = document.createElement('span');
 d.appendChild(document.createTextNode('Stop'));
 document.getElementById('stop-button').appendChild(d);

 //Add 'Home' text label to Reload button:
 var d = document.createElement('span');
 d.appendChild(document.createTextNode('Home'));
 document.getElementById('home-button').appendChild(d);

 //Add 'Downloads' text label to Reload button:
 var d = document.createElement('span');
 d.appendChild(document.createTextNode('Downloads'));
 document.getElementById('downloads-button').appendChild(d);
}

gui_fixes();

document.getElementById('toolbar-menubar').style.backgroundColor = '#0f0';

[jabcreations]

Firefox 115 ESR does not work!

Now I effectively copied everything over from the Waterfox directories to the Firefox 115 ESR directory. I don't believe I need to copy/paste everything with minor directory modifications here.

Then when I loaded Firefox 115 ESR nothing happened. Okay, so I went to check the console in the Browser Toolbox. The pathing was off. So I modified the following:

C:\MEDIA\INTERNET\Mozilla Firefox\115.0 x64 ESR\config.js

// config.js 

try {
  Cu.importGlobalProperties(['PathUtils']);

  if (!Services.appinfo.inSafeMode) {
    Services.scriptloader.loadSubScript(
      PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir,
      'chrome', 'userChrome.js')), this, 'UTF-8'
    );
  }
} catch(e) {
    Components.utils.reportError(e);
};

Then I started Firefox 115 ESR up again, didn't see the File toolbar changed to green and so went in to the Browser Toolbox again. Now it sees my userChrome.js file though it gives me the following error:

document is not defined

I also got the same message for the window object and setTimeout! If my file being loaded too quickly? What am I missing here? At least I got Waterfox Current working.

[jscher2000]

I think you forgot the folder with the userChromeJS engine:

https://github.com/Aris-t2/CustomJSforFx/tree/master/script_loader/profile/userChrome

That is why you needed to edit config.js and nothing works.

[jabcreations]

Firefox is still not working, did you miss that post? Please read the post immediately before your last one. I just added the header Firefox 115 ESR does not work! to it.

[jscher2000]

Of course I read it but I guess my reply to it was not clear enough. Your config.js did not work and:

I modified the following:

  PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir,
  'chrome', 'userChrome.js')), this, 'UTF-8'

But after this change, you get script errors.

config.js is supposed to load the userChromeJS engine, NOT your file.

My guess as to why the original config.js file didn't work was that you forgot to install the userChrome folder:

Hopefully that makes my earlier reply clearer.

[jabcreations]

Okay, well somehow I had it working once in Waterfox Current. But then I noticed that my updates to the userChrome.js file weren't being applied. Thankfully I was using a console.log('!!!!!!!'); and found it stuck in two cache files at: C:\Users\[user]\AppData\Local\Waterfox\Profiles\Waterfox 115\startupCache\

Okay, so I closed Waterfox, deleted the cache files, restarted and now I have the same exact error in Waterfox that I still have in Firefox...that you still haven't seemed to acknowledge?

window is not defined console is not defined

So... my best guess is that the file is being executed too quickly? Or did I miss something permission related? I can absolutely find nothing online about things like the window object being undefined with userChrome.js.

I have this error regardless of using chrome/ or userChrome/ for the Waterfox/Firefox profile directories. I just want to get the basic scripting working please, nothing too fancy.

[jscher2000]

... now I have the same exact error in Waterfox that I still have in Firefox...that you still haven't seemed to acknowledge?

window is not defined console is not defined

I have no idea where those error messages come from. The screenshot refers to your file on line 2, but your file posted earlier doesn't have any references to window or console.

I have this error regardless of using chrome/ or userChrome/ for the Waterfox/Firefox profile directories. I just want to get the basic scripting working please, nothing too fancy.

Please review the file structure again:

• [profile.folder]\chrome\userChrome.js => your file
• [profile.folder]\chrome\userChrome => the folder which has the two core script from Aris:
• [profile.folder]\chrome\userChrome\userChromeJS.js and
• [profile.folder]\chrome\userChrome\userChromeJSutilities.js
• config.js points to the userChromeJS.js file in [profile.folder]\chrome\userChrome\: PathUtils.join(PathUtils.profileDir, 'chrome', 'userChrome', 'userChromeJS.js')

More generally:

Other than the example I created for the article, I don't write userChrome.js scripts. Therefore, I probably wouldn't be able to tell you why your script doesn't work. I suggest following up on r/FirefoxCSS at https://www.reddit.com/r/FirefoxCSS/.

[jabcreations]

For reference I posted here: https://www.reddit.com/r/FirefoxCSS/comments/17jl0xh/userchromejs_windowdocumentconsole_is_not_defined/

Thank you for trying to help.

[jabcreations]

Good and bad news.

The bad news is that the Reddit Firefox CSS page is controlled by an anonymous troll who does not deserve moderator privileges.

The good news is that I did get a working answer over at the Mozillazine forums here: https://forums.mozillazine.org/viewtopic.php?f=38&t=3114953

The useful reply was to this other post that can be found here: https://forums.mozillazine.org/viewtopic.php?p=14854175#p14854175

I don't want to be one of the thousands of "that guy" who gets the answer but doesn't share it leaving people in the same state of frustration. 👍🏻 I'll also post a tutorial over at fixedfirefox.com sometime within the next week.

[jabcreations]

I was able to get the answer at https://forums.mozillazine.org/viewtopic.php?f=38&t=3114953.