[Fix] for xExtension-ColorfulList: JavaScript error on pages that hav…

…e no feed articles #187 (#188)

* fix for issue 183

* info update

* Update version

* fix for ticket#187

* refine strict

* strict syntax refine

* refine

* refine

* para refine

* further improvement for initial colorization

* eslint fix

* conner case escape of colorize

* eslint format issue

* use strict

* make fix-all (whitespace details)

---------

Co-authored-by: shinemoon <[email protected]>
Co-authored-by: Alexandre Alapetite <[email protected]>

README.md

@@ -100,7 +100,6 @@ There are some FreshRSS extensions out there, developed by community members:
 
 * [Kagi Summarizer](https://code.sitosis.com/rudism/freshrss-kagi-summarizer): Adds a "Summarize" button to the top of all entries that will fetch the summary of the entry using the [Kagi Universal Summarizer](https://kagi.com/summarizer/index.html).
 
-
 ### By [@shinemoon](https://github.com/shinemoon)
 
 * [Colorful List](https://github.com/shinemoon/FreshRSS-Dev/tree/master/extensions/xExtension-ColorfulList): Generate light different background color for article list rows (relying on the feed name)

xExtension-ColorfulList/static/script.js

@@ -1,29 +1,27 @@
 'use strict';
-
-document.addEventListener('DOMContentLoaded', function () {
+window.onload = function () {
 	// Initial Colorize for situation where 'no new item changes triggered later' (https://github.com/FreshRSS/Extensions/issues/183)
 	colorize();
-
-	// Insert entry monitor
+	// Insert entry monitor for autoloading list
 	monitorEntry(colorize);
-});
-
-function monitorEntry(monitorCallback) {
-	const targetNode = document.getElementById('stream');
-	const config = { attributes: false, childList: true, subtree: false };
-	const callback = function (mutationsList, observer) {
-		for (const mutation of mutationsList) {
-			if (mutation.type === 'childList') {
-				monitorCallback(mutationsList);
+	function monitorEntry(monitorCallback) {
+		const targetNode = document.getElementById('stream');
+		const config = { attributes: false, childList: true, subtree: false };
+		const callback = function (mutationsList, observer) {
+			for (const mutation of mutationsList) {
+				if (mutation.type === 'childList') {
+					monitorCallback(mutationsList);
+				}
 			}
+		};
+		const observer = new MutationObserver(callback);
+		if (targetNode) {
+			observer.observe(targetNode, config);
 		}
-	};
-	const observer = new MutationObserver(callback);
-	observer.observe(targetNode, config);
-	// observer.disconnect();
-}
+	}
+};
 
-function colorize() {
+function colorize(mList) {
 	const entry = document.querySelectorAll('.flux_header');
 	entry.forEach((e, i) => {
 		const cl = stringToColour(e.querySelector('.website').textContent) + '12';