Restore "src" attribute of "img" TAGs

[tellu-white]

After receiving this feed back from "ltcomdata" (whom I thank for his appreciation):

https://forum.palemoon.org/viewtopic.php?f=46&t=28304#p233616

I decided to make a dedicated topic for this add-on:

Restore "src" attribute of "img" TAGs ( Version VII )

As I said in the topic linked above, the reason for making this add-on was the following:

I usually save web pages with "ScrapBook Plus". There are cases where not all images are saved. To solve this problem, I made an add-on that modifies the HTML code that prevents images from being saved.

In that post I also pointed out:

Of course, this add-on can be improved (is not perfect).

Now I also point out that some problems related to loading images in the page are very difficult to solve, like the one in the page below, where there is a TAG "amp-base-carousel":

https://amp.dev/

Moonchild » 2022-10-25

It's because they decided to use AMP which is a web component library that, well, uses Google's WebComponents
We don't support WebComponents (yet, or at least not fully, so it's disabled by default).

https://forum.palemoon.org/viewtopic.php?f=70&t=29006#p233360

However, for some problems that occur due to the use of the "amp-img" TAG there are satisfactory solutions, so in version VII of the Restore "src" attribute of "img" TAGs add-on ( the first one in this topic ) I added code that works for some pages with "amp-img" TAGs, like in the ones below:

https://www.heise.de/tipps-tricks/Excel-Tabellen-vergleichen-so-geht-s-4988585.html

https://www.heise.de/tipps-tricks/

These pages were brought up by "mseliger" in this post:

https://forum.palemoon.org/viewtopic.php?f=70&t=29006

Also in that post, "moonbat" offered a script for "Greasemonkey" to redirect the user to the "regular version of the page - a non amp version of the page". However, there are cases where there is no "a non amp version of the page". In such cases, my add-on may be useful.

***

In this latest version of the add-on I have also added code that tries to solve cases where there is no URL to the image except in a "noscript" TAG, as for example in this page:

https://www.diy.com/departments/lighting/indoor-lights/ceiling-lights/DIY579439.cat

As can be seen from the above, the usefulness of this add-on is not only limited to cases where saving the page (with images) is desired, but also covers some cases where images do not load in the pages viewed online.

With the hope that there will be users who will find this add-on useful, I would like to point out once again that this add-on is not a workaround for "all those web compatibility problems we keep facing" in relation to loading images on the page:

Moonchild » 2022-10-25

The interesting bit here is that some web research led me to the organization that actually drives all this web compatibility stuff we keep running into. It's the "OpenJS Foundation". Don't be fooled by te name or the fact it's been set up as a non-profit. This is all the big players come together to push the Javascript Storm that is actually favoring the Blink and V8 engine monoculture. Check out their governance team; note which companies they are employed by. https://openjsf.org/about/governance/

https://forum.palemoon.org/viewtopic.php?f=70&t=29006#p233360

***

Help:

1. Open the page you want to save & Click on Restore "src" attribute of "img" TAGs add-on button:

01.png

2. After click on Restore "src" attribute of "img" TAGs add-on button:

02.png

3. Save the page.

***

Restore "src" attribute of "img" TAGs add-on ( Version VII ).

Download link:

https://www.mediafire.com/file/zs68ey4qx8pfbvs/Restore_SRC_attribute_of_IMG_TAGs_before_saving_the_page__Version_VII.zip/file

[mseliger]

Thank you, tellu-white. Works like a charm. I also use ScrapBook for my information management - so this extension is very useful.

[tellu-white]

I also use ScrapBook for my information management - so this extension is very useful.

I'm glad my add-on is useful to you.

[ltcomdata]

Hello:

I have come across another instance where your extension might be able to help.
In the PillarCatholic website the initial lead image does not load in Pale Moon (see viewtopic.php?f=70&t=28809).
When the relevant code is inspected, it appears that the website relies on a lazy load feature which seems to not be implemented yet in Pale Moon.
If I entirely delete the "img" "class" to be empty (but retain the quotation marks), the image is restored to the webpage.

It seems that this is the kind of thing that your extension is helpful in fixing.
I wonder how easy it would be to integrate a solution for this kind of problem into your extension.
If you have time, and are willing, that is.

Thanks!

[tellu-white]

This is a bugfix.

Download link ( Restore "src" attribute of "img" TAGs 2.1 ):

https://www.mediafire.com/file/zllck5d45w1b91x/restore_src_attribute_of_img_TAGs_2_1.zip/file

[billmcct]

Why is it that none of your add-ons are on the add-on site?

[tellu-white]

Why is it that none of your add-ons are on the add-on site?

As I've said in other posts, programming add-ons is a hobby of mine. For this reason, I keep the structure of these add-ons as simple as possible (this choice does not affect the functionality of add-ons). To explain this choice, I will use an example: I will compare the structure of my add-on (Restore "src" attribute of "img" TAGs) with the structure of FranklinDM's "Toolbox Plus" add-on ( https://addons.palemoon.org/addon/toolboxplus/ ).

The source code of my add-on has a single folder, which contains the three essential components: the add-on interface (the "xul" file), the graphical appearance of the interface (the "css" file), and the functionality plus the add-on's "preferences" (the "js" file). The source code for FranklinDM's add-on has four folders. The functionality is in the "content" folder, the "preferences" are in the "defaults/preferences" folder, the graphical appearance of the interface is in the "skin" folder, and there is also a "locale" folder containing translations of the texts displayed by the add-on.

If I were to upload my add-on to the add-on website, I would have to use the same structure as FranklinDM, which would involve additional routine work rather than creative work (creative activity is the motivational foundation of my hobby). In addition, there are other administrative tasks involved - a prospect that does not appeal to me.

I don't know either how many users will want to use my add-ons, so I prefer to present them on the forum, where there are users who are actively looking for solutions to certain problems or ways to simplify the handling of these problems. If anyone thinks there is a high demand for any of my add-ons and believes it would be useful on the add-on website, he/she can make a "fork" of it and post it there.

"A hobby is considered to be a regular activity that is done for enjoyment, typically during one's leisure time."

https://en.wikipedia.org/wiki/Hobby

Screenshots:

1. My add-on:

01.jpg

02.jpg

03.jpg

2. FranklinDM's add-on:

04.jpg

05.jpg

06.jpg

07.jpg

08.jpg

09.jpg

[ltcomdata]

This is a bugfix.

Do you have the stamina to share what kind of bugs were fixed in this version?

[tellu-white]

Do you have the stamina to share what kind of bugs were fixed in this version?

Since I last posted a link to download this add-on (for the version I called "Version VII"), I 've made several updates that I didn't post. I won't spend time looking for all the reasons why I made those (unposted) updates, instead I will just post here the differences between the modified Javascript files of "Version VII" and "version 2.1". I 've got these differences using a PowerShell script.

01_Code_in_''Version VII''___NOT_in_''version 2.1''.txt

Code: Select all

			amp_img_tag.className = "img__from__amp_img";
				arr_img_tags[i].width = img_tag_width;
				arr_img_tags[i].setAttribute("height", "auto");
		str__src_attributes = decodeURIComponent(str__src_attributes);

02_Code_in_''version 2.1''___NOT_in_''Version VII''.txt

Code: Select all

			new_img_tag.className = "img__from__amp_img";
				if(!img_tag_height || img_tag_height == 0){
					var img_tag_naturalWidth = parseInt(arr_img_tags[i].naturalWidth);
					var img_tag_naturalHeight = parseInt(arr_img_tags[i].naturalHeight);
					if(img_tag_naturalWidth && img_tag_naturalWidth != 0 && img_tag_naturalHeight && img_tag_naturalHeight != 0){
						var img_width_to_height_ratio = img_tag_naturalWidth / img_tag_naturalHeight;
						img_tag_height = parseInt(img_tag_width / img_width_to_height_ratio);
				var page_size = {
					width: content.innerWidth,
					// height: content.innerHeight
				var page_width = page_size.width;
				// var page_height = page_size.height;
				if(img_tag_width > page_width){
					var img_with_height = " width: unset !important; height: " + img_tag_height + "px !important; ";					
					var parentNode_minWidth_minHeight = " min-width: unset !important; min-height: " + img_tag_height + "px !important; ";
					var img_with_height = " width: " + img_tag_width + "px !important; height: " + img_tag_height + "px !important; ";					
					var parentNode_minWidth_minHeight = " min-width: " + img_tag_width + "px !important; min-height: " + img_tag_height + "px !important; ";
				if(arr_img_tags[i].parentNode.style.cssText){
					arr_img_tags[i].parentNode.style.cssText = arr_img_tags[i].parentNode.style.cssText + parentNode_minWidth_minHeight;
					arr_img_tags[i].parentNode.style.cssText = parentNode_minWidth_minHeight;
				arr_img_tags[i].style.cssText = arr_img_tags[i].style.cssText + img_with_height;
	// If the "img" TAG has a "src" with a URL without extension (e.g. PNG, JPG, SVG, etc.) and if that image is of type "svg",
	// then AFTER saving the page followed by opening it in Pale Moon, the "svg" image without extension is no longer displayed.
	// To avoid this problem, we convert this image from "svg" format to "base64" format BEFORE saving the page
	// (see functions "get_image_in_blob_format_and_image_type" and "get_base64_image_from_image_blob").
	content.document.querySelectorAll("img").forEach(image => {
		var img_URL = image.src;
		// alert(img_URL);
		if(img_URL){
			get_image_in_blob_format_and_image_type(image, img_URL);
	// We make sure that the saved page will have a "favicon"
	str__src_attributes = str__src_attributes.replace(/%20/g, " ");	
		str_src__return = decodeURIComponent(str_src__return);
function get_image_in_blob_format_and_image_type(image, img_URL) {
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
		if(this.readyState == 4 && this.status == 200){
			var contentType = xhr.getResponseHeader('Content-Type');
			var img_blob = xhr.response;
			if(contentType && img_blob){
				var regEx_type = /image\/svg/i;
				var regEx_extension = /\.svg/i;
				var found_svg_type = contentType.match(regEx_type);
				var found_svg_extension = img_URL.match(regEx_extension);
				if(found_svg_type && !found_svg_extension){
					get_base64_image_from_image_blob(image, img_blob, contentType);
	};
	xhr.open("GET", img_URL, true);
	xhr.responseType = "blob";
	xhr.send();
function get_base64_image_from_image_blob(image, img_blob, contentType) {
		// Convert "blob" to "base64"
		var blobToBase64 = function(blob, cb) {
			var reader = new FileReader();
			reader.onload = function() {
				var dataUrl = reader.result;
				var base64 = dataUrl.split(',')[1];
				cb(base64);
			reader.readAsDataURL(blob);
		};
		blobToBase64(img_blob, function(base64) {
			var base64_URL = "data:" + contentType + ";base64," + base64;
			image.src = base64_URL;
		});

[FranklinDM]

If I were to upload my add-on to the add-on website, I would have to use the same structure as FranklinDM ...

This isn't necessarily true. We don't require that add-ons be localized (which is what you're pointing out in the screenshots) or follow the best structure possible. I've recently reviewed and approved extensions that even have a much simpler structure (e.g., Auto Free Memory).

What we really check for is adherence to the basic guidelines indicated here, which should be minimal and straightforward at best. We've made this easy and hassle-free for add-on developers as much as possible. The only administrative process that you'd have to do at most after submission and approval is just uploading an updated version of the add-on whenever you release a new version.

[tellu-white]

If I were to upload my add-on to the add-on website, I would have to use the same structure as FranklinDM ...

This isn't necessarily true. We don't require that add-ons be localized (which is what you're pointing out in the screenshots) or follow the best structure possible. I've recently reviewed and approved extensions that even have a much simpler structure (e.g., Auto Free Memory).

What we really check for is adherence to the basic guidelines indicated here, which should be minimal and straightforward at best. We've made this easy and hassle-free for add-on developers as much as possible. The only administrative process that you'd have to do at most after submission and approval is just uploading an updated version of the add-on whenever you release a new version.

01.jpg

https://developer.palemoon.org/addons/site/

02.jpg

https://forum.palemoon.org/viewtopic.php?f=71&t=32098&start=40#p260067

03.jpg

https://forum.palemoon.org/viewtopic.php?f=71&t=32098&start=40#p260071

04.jpg

https://forum.palemoon.org/viewtopic.php?f=71&t=32098&start=40#p260096

[FranklinDM]

I haven't read the full context, the linked thread looks lengthy and I'm not really keen on reading them in their entirety since I don't have much free time right now. The key point based on the screenshots you've attached is that those are just recommendations from one of the members of the add-ons team and not strict requirements, however. As a reviewer, I could still choose to accept your submission if it's good enough. If there is room for improvement, then they could be acted upon, but from my perspective, it really isn't a hard requirement for listing in the add-ons site. If it works and is useful for the community, then it works.

[Moonchild]

FYI: The general approach for addons review is that we try to guide extension developers into as clear and maintainable meta data and install manifest content as possible, but ultimately the reviews are primarily to verify what is uploaded isn't doing anything untoward or blatantly risky for browser stability or usability. So we tend to be pretty flexible. The point is to make it relatively straightforward to publish so all Pale Moon/Basilisk/etc. users can make use of it from a single automated and update-streamlined site.