Bypass Cloudflare with Firefox Cookies

[tellu-white]

Since many extensions expose their context menu entries on/off status in their UI, I'd only suggest for you to consider adding it as an UI preference.

I've made a new version of this add-on (version 8.3) in which I've added a "checkbox" to the add-on's initialization panel that lets you choose whether to show or hide the "Bypass Cloudflare with Backup Browser Cookies" entry in the Context Menu.

Screenshots:

01.png

02.png

03.png

04.png

05.png

Download link ( Bypass Cloudflare with Firefox Cookies 8.3 ):

https://www.mediafire.com/file/nme2peczwnnh7p4/bypass_cloudflare_with_firefox_cookies_8_3.zip/file

[back2themoon]

Thank you, tellu-white. It's now tuned to perfection.

[tellu-white]

Thank you, tellu-white. It's now tuned to perfection.

You're welcome, back2themoon.

I'm glad my add-on is useful to you, but at the same time I'm annoyed that this add-on has to exist in the first place because Cloudflare is abusively blocking websites from being accessed by Pale Moon. In doing so, Cloudflare violates (intentionally or out of sheer disregard) the right of niche - but legitimate - web browsers to be treated without discrimination compared to browsers of big corporations. This abusive and perpetuated behavior perpetrated by Cloudflare is, at the very least, morally reprehensible.

[pacopacopaco]

Firstable, thanks a lot for the add-on!

Using Mac OS X 10.8.5 / Pale Moon 34.0.1 64-bit (latest version does not open Gmail).
I still get the loop with CF after installing Backup Browser Cookies v 8.3

Thanks again for the add-on

[tellu-white]

Firstable, thanks a lot for the add-on!

Using Mac OS X 10.8.5 / Pale Moon 34.0.1 64-bit (latest version does not open Gmail).
I still get the loop with CF after installing Backup Browser Cookies v 8.3

Thanks again for the add-on

You're welcome, pacopacopaco.

My add-on is for Windows and Linux. I've tested this add-on only on Windows and Linux. I'm sorry, but I don't use Mac OS, so I can't replicate the problems that occur there and therefore I can't fix them.

[back2themoon]

I still get the loop with CF after installing Backup Browser Cookies v 8.3

I don't know if this is issue is OS X related, but have you set up the extension? Installing it is not enough to make it work.

[tellu-white]

I don't know if this is issue is OS X related, but have you set up the extension? Installing it is not enough to make it work.

As I mentioned in my previous post, I have limited the functionality of this add-on to Windows and Linux (since those are the only operating systems I can test it on). Thus, the add-on’s code contains a function named "get_Operating_System_for_bypass_cloudflare" that is called both when the path for the "Backup Browser app" needs to be saved (in "prefs.js") and when the path for the "Cookies file of Backup Browser" is saved. If the user’s operating system detected by this function is not Windows or Linux, then the add-on does not save any path in "prefs.js" (in fact, it saves a zero-length string). Unfortunately, I forgot to include a message in the code informing the users that their operating system is not supported by the add-on. Perhaps I should release a new version of the add-on to correct this oversight.

[back2themoon]

Perhaps I should release a new version of the add-on to correct this oversight.

In this case, please also take a look at the Status Bar situation mentioned here. I think it occurs with this extension too.

[back2themoon]

Found a minor issue with the code to replace the Add-ons Manager icon. If you stay in the Add-ons Manager, pick any other extension or category then back, the original icon will return. If you close the Add-ons Manager and reopen it (i.e. its tab) the same will occur. The new icon only "sticks" for the first visit in the Add-ons Manager.

Played a bit with AI and the only solution was to replace this in the uc.js file:

From:

Code: Select all

setTimeout(function() {
    // icon replacement
}, 100);

To:

Code: Select all

setInterval(function() {
    // icon replacement
}, 3000);

This change was also suggested:

Code: Select all

"if(page_URL == "about:addons"){

to:

Code: Select all

if(page_URL.startsWith("about:addons")){

[thosrtanner]

with the last round of cloudflare outageness, I reinstalled bypass cloudflare with cookies, which worked wonderfully

Until cloudflare came back. See here: https://forum.palemoon.org/viewtopic.ph ... 01#p272198

[tellu-white]

Found a minor issue with the code to replace the Add-ons Manager icon. If you stay in the Add-ons Manager, pick any other extension or category then back, the original icon will return. If you close the Add-ons Manager and reopen it (i.e. its tab) the same will occur. The new icon only "sticks" for the first visit in the Add-ons Manager.

Played a bit with AI and the only solution was to replace this in the uc.js file:

From:

Code: Select all

setTimeout(function() {
    // icon replacement
}, 100);

To:

Code: Select all

setInterval(function() {
    // icon replacement
}, 3000);

This change was also suggested:

Code: Select all

"if(page_URL == "about:addons"){

to:

Code: Select all

if(page_URL.startsWith("about:addons")){

I ran some tests myself and found the same issue. However, the solution suggested by AI isn't a good one because "setInterval 3000" causes the code to run every 3 seconds, even if the "about:addons" page isn't open.

Screenshots:

01.png

02.png

Below is a new code for the "change__bypass_cloudflare_with_firefox_cookies__addon_icon.uc.js" file that worked without any problems in the tests I ran:

Code: Select all

function get_Operating_System__change__bypass_cloudflare_with_firefox_cookies__addon_LOGO_icon() {
    var os = Services.appinfo.OS.toLowerCase();
	
	if (os.startsWith("win")) {
		return "Windows";
		
	} else if (os == "linux") {
		return "Linux";
		
	} else{
		return "";
	}
}

gBrowser.addProgressListener({ onLocationChange: function() {
	var page_URL = gBrowser.contentDocument.location.href;
	
	if(page_URL == "about:addons"){
		/*
		var hour = new Date().toLocaleFormat("%H");
		var minute = new Date().toLocaleFormat("%M");
		var second = new Date().toLocaleFormat("%S");		
		var time_now = hour + ":" + minute + ":" + second;		
		console.log('Message from "about:addons" Page - Time Now = ' + time_now + ' ');
		*/
		
		setTimeout(function() {
			var arr_addons = content.document.getElementsByClassName("addon addon-view");

			if(arr_addons){
				for(var i=0; i<arr_addons.length; i++){
					var addon = arr_addons[i];
					var addon_name = addon.getAttribute("name");
					
					if(addon_name == 'Bypass Cloudflare with "Backup Browser" Cookies'){
						var directoryService = Components.classes["@mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties);
						var ProfilesDir = directoryService.get("ProfD", Components.interfaces.nsIFile);
						var ProfilesDir_Path = ProfilesDir.path;
						
						var addon_LOGO_icon_PATH = "";

						var operating_system = get_Operating_System__change__bypass_cloudflare_with_firefox_cookies__addon_LOGO_icon();

						if(operating_system == "Windows"){
							ProfilesDir_Path = ProfilesDir_Path.replace(/\\/g,'/');	
							addon_LOGO_icon_PATH = 'file:///' + ProfilesDir_Path + "/chrome/bypass_cloudflare_with_firefox_cookies_LOGO.png";
							
						} else if(operating_system == "Linux"){
							addon_LOGO_icon_PATH = 'file:///' + ProfilesDir_Path + "/chrome/bypass_cloudflare_with_firefox_cookies_LOGO.png";
						}
						
						addon._icon.src = addon_LOGO_icon_PATH;
					}
				}
			}
			
		}, 1000);
	}
}});

I kept the "setTimeout" function and increased the waiting time from 100 to 1000. I don't think 3000 is necessary, but if you notice any issues, you can increase this waiting time.

I also kept the following: if(page_URL == "about:addons"){

There is no need for if(page_URL.startsWith("about:addons")){ because the entire page URL is "about:addons," not just the beginning of the URL.

Screenshot:

03.png

**********

The issue with the "Status Bar" height involves several factors to consider, so I'll dedicate another post to it.

[tellu-white]

with the last round of cloudflare outageness, I reinstalled bypass cloudflare with cookies, which worked wonderfully

Until cloudflare came back. See here: https://forum.palemoon.org/viewtopic.ph ... 01#p272198

Thanks, thosrtanner, for the feedback.

[back2themoon]

Thanks for the updated code, tellu-white. It works much better.

The "startsWith" part was supposed to make it work for sub-pages too, but if you press More ("Show more details...") the original button re-appears in that sub-page anyway.

To be honest, I kind of regret mentioning these trivial "issues". No need for you to waste time on them, the Status Bar included.

[tellu-white]

The "startsWith" part was supposed to make it work for sub-pages too, but if you press More ("Show more details...") the original button re-appears in that sub-page anyway.

I've made a new version of the code for "change__bypass_cloudflare_with_firefox_cookies__addon_icon.uc.js" that changes the button image also on the page that opens after clicking "Show more details about this add-on".

I set the timeout for "setTimeout" back to 100 because it works fine for me, but if you notice any issues, you can increase this waiting time.

Below is a new code for the "change__bypass_cloudflare_with_firefox_cookies__addon_icon.uc.js" file:

Code: Select all

function get_Operating_System__change__bypass_cloudflare_with_firefox_cookies__addon_LOGO_icon() {
    var os = Services.appinfo.OS.toLowerCase();
	
	if (os.startsWith("win")) {
		return "Windows";
		
	} else if (os == "linux") {
		return "Linux";
		
	} else{
		return "";
	}
}

gBrowser.addProgressListener({ onLocationChange: function() {
	var page_URL = gBrowser.contentDocument.location.href;
	
	if(page_URL == "about:addons"){
		setTimeout(function() {
			var arr_addons = content.document.getElementsByClassName("addon addon-view");

			if(arr_addons){
				for(var i=0; i<arr_addons.length; i++){
					var addon = arr_addons[i];
					var addon_name = addon.getAttribute("name");
					
					if(addon_name == 'Bypass Cloudflare with "Backup Browser" Cookies'){
						var directoryService = Components.classes["@mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties);
						var ProfilesDir = directoryService.get("ProfD", Components.interfaces.nsIFile);
						var ProfilesDir_Path = ProfilesDir.path;
						
						var addon_LOGO_icon_PATH = "";

						var operating_system = get_Operating_System__change__bypass_cloudflare_with_firefox_cookies__addon_LOGO_icon();

						if(operating_system == "Windows"){
							ProfilesDir_Path = ProfilesDir_Path.replace(/\\/g,'/');	
							addon_LOGO_icon_PATH = 'file:///' + ProfilesDir_Path + "/chrome/bypass_cloudflare_with_firefox_cookies_LOGO.png";
							
						} else if(operating_system == "Linux"){
							addon_LOGO_icon_PATH = 'file:///' + ProfilesDir_Path + "/chrome/bypass_cloudflare_with_firefox_cookies_LOGO.png";
						}
						
						addon._icon.src = addon_LOGO_icon_PATH;
						
						var detail_name = content.document.getElementById("detail-name");

						if(detail_name){
							if(detail_name.innerHTML == 'Bypass Cloudflare with "Backup Browser" Cookies'){
								var detail_icon = content.document.getElementById("detail-icon");
								
								if(detail_icon){
									detail_icon.src = addon_LOGO_icon_PATH;
								}
							}
						}
					}
				}
			}
			
		}, 100);
	}
}});

[tellu-white]

Perhaps I should release a new version of the add-on to correct this oversight.

In this case, please also take a look at the Status Bar situation mentioned here. I think it occurs with this extension too.

As I mentioned in my previous post, the issue with the "Status Bar" height involves several factors to consider.

If I add class="toolbarbutton-1" to the add-on button, the height of the "Status Bar" no longer changes (if you use an 16x16 pixels image for "bypass_cloudflare_with_firefox_cookies_BUTTON.png" file). However, I don't like this solution because the button's appearance changes depending on the bar it's placed on ("Status Bar", "Menu Bar", "Navigation Toolbar"). I'll post some screenshots comparing two add-ons:

1. The "Grabit" add-on developed by RealityRipple, which uses class="toolbarbutton-1" for the add-on button.

2. My add-on "Bypass Cloudflare with Backup Browser Cookies", which does not use this class for the add-on button.

Screenshots:

1. The "Grabit" add-on:

01.png

02.png

03.png

04.png

05.png

2. My "Bypass Cloudflare with Backup Browser Cookies" add-on:

06.png

07.png

08.png

Considering this, I won't be adding class="toolbarbutton-1" to my add-on, but I'll present two solutions from which you can choose to maintain the "Status Bar" height.

1. You can modify the add-on's code as follows:

Code snippet from the original "bypass_cloudflare_with_firefox_cookies.xul" file in the add-on's "content" folder:

Code: Select all

		<toolbarbutton
			type='menu-button'
			id="btn_bypass_cloudflare_with_firefox_cookies"
			label='Bypass Cloudflare with "Backup Browser" Cookies' 

The same code snippet with the addition of class="toolbarbutton-1":

Code: Select all

		<toolbarbutton
			type='menu-button'
			id="btn_bypass_cloudflare_with_firefox_cookies"
			class="toolbarbutton-1"
			label='Bypass Cloudflare with "Backup Browser" Cookies' 

If you use this option, you have two choices:

A. Replace the image files below in the add-on's "content" folder:

bypass_cloudflare_with_firefox_cookies_BUTTON.png (16x16 pixels)
bypass_cloudflare_with_firefox_cookies_LOGO.png (32x32 pixels)

In this case, don't keep these image files in the "chrome" folder and use the following code in the "userChrome.css" file (only if you want to preserve the same image for the "down arrow" in all three bars mentioned above):

Code: Select all

/***********************  "Bypass Cloudflare with Firefox Cookies" Icon  ************************/

#addon-bar #btn_bypass_cloudflare_with_firefox_cookies .toolbarbutton-menubutton-dropmarker {
	list-style-image: url("arrow-dn.gif") !important;
}

#nav-bar #btn_bypass_cloudflare_with_firefox_cookies .toolbarbutton-icon{
	margin-right: 0px !important;
	padding: 2px 5px 2px 3px !important;
	border-right: none !important;
}

#nav-bar #btn_bypass_cloudflare_with_firefox_cookies .toolbarbutton-menubutton-dropmarker {
	list-style-image: url("arrow-dn.gif") !important;
	margin: 0px !important;
	padding: 0px !important;
	border-left: none !important;
}

#toolbar-menubar #btn_bypass_cloudflare_with_firefox_cookies .toolbarbutton-menubutton-dropmarker {
	list-style-image: url("arrow-dn.gif") !important;
}

/************************************************************************************************/

If you use the code above, you also need to copy the "arrow-dn.gif" file into the "chrome" folder:

arrow-dn.zip

B. If you don't replace the image files in the add-on's "content" folder, you must keep the image files of the add-on button in the "chrome" folder and use the following code in "userChrome.css":

Code: Select all

/***********************  "Bypass Cloudflare with Firefox Cookies" Icon  ************************/

#addon-bar #btn_bypass_cloudflare_with_firefox_cookies {
	list-style-image: url("bypass_cloudflare_with_firefox_cookies_BUTTON.png") !important;
	-moz-box-orient: horizontal !important;
}

#addon-bar #btn_bypass_cloudflare_with_firefox_cookies .toolbarbutton-menubutton-dropmarker {
	list-style-image: url("arrow-dn.gif") !important;
}

#nav-bar #btn_bypass_cloudflare_with_firefox_cookies {
	list-style-image: url("bypass_cloudflare_with_firefox_cookies_BUTTON.png") !important;
	-moz-box-orient: horizontal !important;
}

#nav-bar #btn_bypass_cloudflare_with_firefox_cookies .toolbarbutton-icon{
	margin-right: 0px !important;
	padding: 2px 5px 2px 3px !important;
	border-right: none !important;
}

#nav-bar #btn_bypass_cloudflare_with_firefox_cookies .toolbarbutton-menubutton-dropmarker {
	list-style-image: url("arrow-dn.gif") !important;
	margin: 0px !important;
	padding: 0px !important;
	border-left: none !important;
}

#toolbar-menubar #btn_bypass_cloudflare_with_firefox_cookies {
	list-style-image: url("bypass_cloudflare_with_firefox_cookies_BUTTON.png") !important;
	-moz-box-orient: horizontal !important;
}

#toolbar-menubar #btn_bypass_cloudflare_with_firefox_cookies .toolbarbutton-menubutton-dropmarker {
	list-style-image: url("arrow-dn.gif") !important;
}

/************************************************************************************************/

You also need to copy the "arrow-dn.gif" file into the "chrome" folder.

**********

2. The second option is more simple, but it keeps the "Status Bar" height fixed (it isn't fixed in the Pale Moon code - which is why my add-on can change it). If you choose this option, use the following code in "userChrome.css":

Code: Select all

/***********************************  Status Bar & Addon Bar  ***********************************/

#status-bar{
	max-height: 19px !important;
}

#addon-bar .toolbarbutton-menubutton-dropmarker{
	max-height: 19px !important;
	padding: 0px 2px 0px 1px !important;
}

#addon-bar .toolbarbutton-icon{
	width: 16px !important;
	max-height: 16px !important;
}

/************************************************************************************************/

/***********************  "Bypass Cloudflare with Firefox Cookies" Icon  ************************/

#addon-bar #btn_bypass_cloudflare_with_firefox_cookies {
	list-style-image: url("bypass_cloudflare_with_firefox_cookies_BUTTON.png") !important;
}

#nav-bar #btn_bypass_cloudflare_with_firefox_cookies {
	list-style-image: url("bypass_cloudflare_with_firefox_cookies_BUTTON.png") !important;
}

#toolbar-menubar #btn_bypass_cloudflare_with_firefox_cookies {
	list-style-image: url("bypass_cloudflare_with_firefox_cookies_BUTTON.png") !important;
}

/************************************************************************************************/

In this case, you'll need to keep in the "chrome" folder the files:

bypass_cloudflare_with_firefox_cookies_BUTTON.png (16x16 pixels)
bypass_cloudflare_with_firefox_cookies_LOGO.png (32x32 pixels)

The file "bypass_cloudflare_with_firefox_cookies_BUTTON.png" you're using is 17x17 pixels, so you'll need to resize it to 16x16 pixels.

This is what the button for my add-on "Bypass Cloudflare with Backup Browser Cookies" looks like in version 2:

09.png

***************************************

As for the add-on "Intercept & Modify HTTP Response" ( https://forum.palemoon.org/viewtopic.php?f=71&t=32889#p272052 ), this add-on has 4 image files for the add-on button (the ones that appear on the Pale Moon toolbar). These images have different colors and are displayed selectively, depending on the add-on's current state. Given this, the fix using the code in the "userChrome.css" file is not feasible. The remaining solution is to add class="toolbarbutton-1" to the code in the "modify_HTTP_response.xul" add-on file and to replace the image files below in the add-on's "content" folder:

modify_HTTP_response_BUTTON_BLUE.png (16x16 pixels)
modify_HTTP_response_BUTTON_GREY.png (16x16 pixels)
modify_HTTP_response_BUTTON_PURPLE.png (16x16 pixels)
modify_HTTP_response_BUTTON_RED.png (16x16 pixels)

modify_HTTP_response_LOGO.png (32x32 pixels)

[back2themoon]

Many thanks tellu-white for providing all these customisation options. I will carefully pick the best one for me.

I have to ask though: personal preferences aside, isn't there a "standard", default icon size for each Toolbar that must not be altered?

It does seem strange to me that an extension, any extension, would be able to modify the browser's UI this way, even if it's a small change?

(I only noticed it on my laptop's small screen where "Use Small Icons" is enabled)

update: Status Bar height isn't fixed in the Pale Moon code - which is why my add-on can change it

Yes, that's a bit strange but perhaps it's due to the customisable, open nature of the browser. Or, I don't know, an "omission" i.e. perhaps it'd be useful not allowing extensions to do that - unless they are meant to do so and modify the UI specifically via CSS/JavaScript/whatever.

[tellu-white]

Isn't there a "standard", default icon size for each Toolbar that must not be altered?
(I only noticed it on my laptop's small screen where "Use Small Icons" is enabled)

I have the setting "Use Small Icons" enabled in Pale Moon on Desktop.
It is recommended that the "small icon size" should be 16x16 pixels and the "big icon size" should be 24x24 pixels:

http://udn.realityripple.com/docs/Archive/Mozilla/XUL/Toolbars/Creating_toolbar_buttons#Styling_the_button

However, I have encountered many add-ons that do not follow these recommendations. I will give just one example: "Aardvark" by Rob Brown. I took a screenshot of the button on the "Status Bar" ("Add-on Bar") in Pale Moon Portable. The height of the "Status Bar" without any buttons on it is 21 pixels. With the "Aardvark" add-on button, it is 26 pixels. With the button of my (unmodified) "Bypass Cloudflare with Backup Browser Cookies" add-on, it is 28 pixels. However, even though I modify my add-on and use "bypass_cloudflare_with_firefox_cookies_BUTTON.png" with a size of 16x16 pixels, the "Status Bar" height is still 28 pixels if I do not include class="toolbarbutton-1" in the add-on code. But if class="toolbarbutton-1" is added to an add-on button, its appearance changes depending on the bar it is placed on (see my previous post). For this reason, I do not like using class="toolbarbutton-1" in the add-on code.

Screenshots:

1. The height of the "Status Bar" without any buttons on it is 21 pixels:

01.png

2. The height of the "Status Bar" with "Aardvark" button on it is 26 pixels:

02.png

3. The height of the "Status Bar" with the button of unmodified "Bypass Cloudflare with Backup Browser Cookies" add-on on it is 28 pixels:

03.png

4. The height of the "Status Bar" with the button of modified "Bypass Cloudflare with Backup Browser Cookies" add-on on it ( but without class="toolbarbutton-1" ) is 28 pixels:

04.png

[back2themoon]

However, I have encountered many add-ons that do not follow these recommendations.

Perhaps @Moonchild can chime in? What's the status of the Status Bar here? Is it strictly not to be touched/modified, or can any extension icon change its height at will or randomly? Shouldn't it be "protected" somehow? Unless it's a UI-modifying extension obviously, but we are not talking about that. Just extension icons of varying sizes that modify the Status Bar at will.

[tellu-white]

Perhaps @Moonchild can chime in? What's the status of the Status Bar here? Is it strictly not to be touched/modified, or can any extension icon change its height at will or randomly? Shouldn't it be "protected" somehow? Unless it's a UI-modifying extension obviously, but we are not talking about that. Just extension icons of varying sizes that modify the Status Bar at will.

The "Status Bar" behaves strangely even with the buttons that belong to Pale Moon, such as the "Home" button. This button changes its appearance (displayed size) in the "Navigation Toolbar" (where it appears by default) depending on the "Use Small Icons" setting (Enabled or Disabled), but it does not change its appearance (displayed size) when placed in the "Status Bar". Furthermore, the height of the "Status Bar" remains the same and does not depend on the "Use Small Icons" setting (Enabled or Disabled):

01.png

02.png

03.png

04.png

However, the height of the "Status Bar" changes depending on the size of the largest button placed on it. I ran a test with my add-on "Bypass Cloudflare with Backup Browser Cookies", in which I included an image file "bypass_cloudflare_with_firefox_cookies_BUTTON.png" with an (inflated) size of 32x32 pixels. In this case, the height of the "Status Bar" with this button on it has increased to 40 pixels:

05.png

Actually, the add-on button is located in the bar with the ID "addon-bar" and not in the bar with the ID "status-bar":

06.png

07.png

If code is added to the "userChrome.css" file, the height of the "Status Bar" is set by the code added to the bar with the ID "status-bar", but the size of the displayed image for this button ("bypass_cloudflare_with_firefox_cookies_BUTTON.png" 32x32 pixels) is scaled down only by the code added to the bar with the ID "addon-bar":

08.png

09.png

**********

All that being said, I like the fact that the size of the buttons on the "Status Bar" isn't limited by a fixed height of this bar, so I don't like the idea of @Moonchild changing this behavior in the Pale Moon code. Instead, he could add an entry in "about:config" for the option to make the heights of the "add-on bar + status bar" fixed or flexible, depending on users' preferences.

[back2themoon]

The problem here is that the decision whether to change (or not) the browser's UI, should be left to user. Not to extension icons.

I like flexibility too but if any extension can happily break it, then there's no point. So, IMO some sort of hardening against extension icons is needed and ideally a few extra options to play with the Status Bar's height.

I believe the Status Bar not getting affected by "Use Small Icons" is by design, but cannot be 100%. Only Moonchild can answer this stuff.

I like the fact that the size of the buttons on the "Status Bar" isn't limited by a fixed height of this bar, so I don't like the idea of @Moonchild changing this behavior in the Pale Moon code. Instead, he could add an entry in "about:config" for the option to make the heights of the "add-on bar + status bar" fixed or flexible, depending on users' preferences.

I like it too, but flexible should mean "only allow the user the change it", not "allow any extension icon to break it".