Add custom CSS and JS support

Added an event listener for message event.
The idea is the website which embeds the widget will send a message using postMessage().
The expected message is:
{
css: // custom CSS code
js: // custom JS code
}

static/skin/widget.js

@@ -51,6 +51,25 @@ function insertNewCssRules(stylesheet, ruleList) {
     }
 }
 
+function addCustomCss(cssCode) {
+    let customCSS = document.createElement('style');
+    customCSS.innerHTML = cssCode;
+    document.head.appendChild(customCSS);
+}
+
+function addCustomJs(jsCode) {
+    new Function(`"use strict";${jsCode}`)();
+}
+
+function handleMessages(event) {
+    if ('css' in event.data) {
+        addCustomCss(event.data.css);
+    }
+    if ('js' in event.data) {
+        addCustomJs(event.data.js);
+    }
+}
+
 function handleWidget() {
     const params = new URLSearchParams(window.location.search || filters || '');
     const widgetStyleElem = document.createElement('style');
@@ -82,4 +101,5 @@ function handleWidget() {
     kiwixServe.updateBookCount();
 }
 
+window.addEventListener('message', handleMessages);
 handleWidget();

test/server.cpp

@@ -184,7 +184,7 @@ R"EXPECTEDRESULT(      href="/ROOT/skin/index.css?cacheid=56e818cd"
           src: url("/ROOT/skin/fonts/Roboto.ttf?cacheid=84d10248") format("truetype");
     <script src="/ROOT/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script>
     <script src="/ROOT/skin/iso6391To3.js?cacheid=ecde2bb3"></script>
-    <script type="text/javascript" src="/ROOT/skin/index.js?cacheid=76440e7a" defer></script>
+    <script type="text/javascript" src="/ROOT/skin/index.js?cacheid=e1bd2e60" defer></script>
 )EXPECTEDRESULT"
     },
     {