Feat: Create custom header changer (#694)

* Add custom header adder

* Make custom headers work in apip

* remove unnecesarry console.logs

* Remove add-cookie button remains

* getFile and remove unnecesarry ifs

* Add warning and copy to code function

test_web/api/plugins.ts

@@ -6,6 +6,8 @@ import { Plugin, isPlugin } from "@typings/plugin";
 import { Filters } from "@libs/filterInputs";
 const root = path.dirname(require?.main?.filename || "");
 
+export const fetchHeaders: Record<string, string> = {}
+
 export const all_plugins = (): PluginList => {
     const res: PluginList = {};
     for (let languageEnglish in languages) {

test_web/index.html

@@ -50,16 +50,30 @@
             </script>
     </nav>
     <div id="test-container">
-        <div class="test-wrapper" id="add-cookie">
+        <div class="test-wrapper" id="headerChanger">
             <div class="form-group">
-                <label for="cookie">Cookie 🍪</label> <span id="cookie-content"></span> 
-                <input type="email" class="form-control" id="cookie" aria-describedby="cookieHelp" placeholder="cf_clearance=abcxyzblalba">
-                <small id="cookieHelp" class="form-text text-muted">Add cookie into headers to bypass cloudflare</small>
-                <button type="button" class="btn btn-primary" id="add-cookie-btn">Add</button>
-            </div>
+                <div class="title">Headers</div>
+                <div id="headerinfos">
+                    <div class="headerinfo" data-headername="User-Agent">
+                        <span class="headername" >User-Agent</span><b>:</b>
+                        <span class="headervalue"></span>
+                    </div>
+                    <div class="headerinfo">
+                        <span class="headername">Cookie</span><b>:&nbsp;</b>
+                        <span class="headervalue" contenteditable="true" ></span>
+                    </div>
+                </div>
+                <button id="addheaderbtn" class="btn-secondary pl-1 pr-1">Add header</button>
+                <button id="copyascode" class="btn-secondary pl-1 pr-1">Copy as code</button>
+                <div id="headersnotcopied">Remember to copy the headers into the plugin file after changing them!</div>
+                <div id="headerscopied" display="none">Copied</div>
+            </div> 
         </div>
         <div class="test-wrapper" id="popularNovels">
-            <div class="modal-container">
+            <div class="title">
+                popularNovels
+            </div>
+            <div style="display: inline-block;" class="modal-container">
                 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#filtersModal">
                     Filters
                 </button>
@@ -82,12 +96,9 @@
                     </div>
                 </div>
             </div>
-            <div class="title">
-                popularNovels
-                <button type="button" class="btn btn-primary popularNovels-btn">fetch</button>
-                <div class="spinner-border" role="status">
-                    <span class="sr-only">Loading...</span>
-                </div>
+            <button type="button" class="btn btn-primary popularNovels-btn">fetch</button>
+            <div class="spinner-border" role="status">
+                <span class="sr-only">Loading...</span>
             </div>
             <div class="novel-list">
             </div>

test_web/static/css/darkmode.less

@@ -11,6 +11,9 @@
 .darkmode {
     color-scheme: dark;
     background-color: var(--main-bg);
+    .headerinfo span[contenteditable="true"]{
+        border: 1px solid #fff2;
+    }
     select,
     input {
         background-color: var(--main-bg);

test_web/static/css/index.less

@@ -228,6 +228,7 @@
 }
 
 #popularNovels,
+#headerChanger,
 #searchNovels,
 #parseNovelAndChapters,
 #parseChapter,
@@ -237,6 +238,36 @@
     margin-inline: auto;
 }
 
+.headerinfo {
+    margin-bottom: 5px;
+    span[contenteditable="true"] {
+        border: 1px solid black;
+        padding: 3px 10px;
+        display: inline;
+    }
+}
+
+#headersnotcopied,
+#headerscopied {
+    font-size: 1.3rem;
+}
+
+#headersnotcopied {
+    color: red;
+    display: none;
+}
+
+#headerscopied {
+    color: green;
+    display: none;
+}
+
+.headereditbutton {
+    margin-left: 5px;
+    border: none;
+    padding-inline: 5px;
+}
+
 #popularNovels,
 #searchNovels {
     height: 350px;

test_web/static/js/index.js

@@ -45,6 +45,40 @@ const plugin_search = $("#plugin");
 /** @type {JQuery<HTMLDivElement>} */
 const search_results = $("#search-results");
 
+const getHeaders = () => {
+    /** @type {Record<string,string>} */
+    const headers = {};
+    const els = document.querySelectorAll(".headerinfo").forEach((el) => {
+        /** @type {HTMLSpanElement | null} */
+        const nameSpan = el.querySelector(".headername");
+        /** @type {HTMLSpanElement | null} */
+        const valueSpan = el.querySelector(".headervalue");
+        if (nameSpan && valueSpan) {
+            const { innerText: name } = nameSpan;
+            const { innerText: value } = valueSpan;
+            if (typeof name === "string" && typeof value === "string") {
+                headers[name] = value;
+            }
+        }
+    });
+    return headers;
+};
+
+/**
+ *
+ * @param {string} path
+ * @param {RequestInit | undefined} init
+ */
+const fetchFromAPI = async (path, init = undefined) => {
+    if (init) {
+        init.headers = {
+            ...init.headers,
+            "x-custom-headers": JSON.stringify(getHeaders()),
+        };
+    }
+    return fetch(path, init);
+};
+
 const loadPluginsIntoSearchBar = () => {
     const { language, keyword } = state.plugin_search;
     const plugins = language ? state.all_plugins[language] : state.plugin_infos;
@@ -59,7 +93,7 @@ const loadPluginsIntoSearchBar = () => {
         : plugins;
 };
 
-fetch("/all_plugins")
+fetchFromAPI("/all_plugins")
     .then((res) => res.json())
     .then((/** @type {PluginList} */ all) => {
         state.all_plugins = all;
@@ -410,7 +444,7 @@ class PluginWrapper {
         try {
             /** @type {Filters} */
             const filters = await (
-                await fetch("/filters", {
+                await fetchFromAPI("/filters", {
                     method: "POST",
                     headers: {
                         "Content-Type": "application/json",
@@ -548,7 +582,7 @@ class PluginWrapper {
         try {
             /** @type {NovelItem[] | {error:string}} */
             const novels = await (
-                await fetch(`/popularNovels/`, {
+                await fetchFromAPI(`/popularNovels/`, {
                     method: "POST",
                     headers: {
                         "Content-Type": "application/json",
@@ -592,7 +626,7 @@ class PluginWrapper {
         try {
             /** @type {NovelItem[] | {error:string}} */
             const novels = await (
-                await fetch(`/searchNovels/`, {
+                await fetchFromAPI(`/searchNovels/`, {
                     method: "POST",
                     headers: {
                         "Content-Type": "application/json",
@@ -633,7 +667,7 @@ class PluginWrapper {
         try {
             /** @type {SourceNovel  | {error:string}} */
             const sourceNovel = await (
-                await fetch(`/parseNovelAndChapters/`, {
+                await fetchFromAPI(`/parseNovelAndChapters/`, {
                     method: "POST",
                     headers: {
                         "Content-Type": "application/json",
@@ -687,7 +721,7 @@ class PluginWrapper {
         spinner.show();
         try {
             const chapterText = await (
-                await fetch(`/parseChapter/`, {
+                await fetchFromAPI(`/parseChapter/`, {
                     method: "POST",
                     headers: {
                         "Content-Type": "application/json",
@@ -898,7 +932,7 @@ class PluginWrapper {
         spinner.show();
         try {
             const base64 = await (
-                await fetch(`/fetchImage/`, {
+                await fetchFromAPI(`/fetchImage/`, {
                     method: "POST",
                     headers: {
                         "Content-Type": "application/json",
@@ -922,23 +956,6 @@ class PluginWrapper {
     }
 }
 
-$("#add-cookie-btn").on("click", () => {
-    const cookie = $('#cookie').val();
-    fetch('/add_cookie', {
-        method: 'POST',
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-            'cookie': cookie,
-        }),
-    }).then(() => {
-        $('#cookie').val('');
-        $('#cookie-content').text(`: ${cookie}`);
-    })
-        
-})
-
 $(".popularNovels-btn").on("click", () =>
     state.current_plugin?.getPopularNovels()
 );
@@ -954,6 +971,93 @@ $(".parseNovelAndChapters-btn").on("click", () =>
 $(".parseChapter-btn").on("click", () => state.current_plugin?.getChapter());
 $(".fetchImage-btn").on("click", () => state.current_plugin?.fetchImage());
 
+/** @type {Record<string,string>} */
+let lastCopiedHeaders = {};
+
+const checkIfHeadersChanged = () => {
+    const currentHeaders = getHeaders();
+
+    const headers = new Set(Object.keys(currentHeaders));
+    // quick exit if all custom headers removed
+    if (headers.size <= 2) {
+        $("#headersnotcopied").css({ display: "none" });
+        return;
+    }
+
+    // get a list of all headers
+    for (const headername of Object.keys(lastCopiedHeaders)) {
+        headers.add(headername);
+    }
+
+    headers.delete("Cookie");
+    headers.delete("User-Agent");
+
+    let headersChanged = false;
+    // check if they're all the same
+    for (const headername of Array.from(headers)) {
+        if (currentHeaders[headername] !== lastCopiedHeaders[headername])
+            headersChanged = true;
+    }
+
+    if (headersChanged) $("#headersnotcopied").css({ display: "block" });
+    else $("#headersnotcopied").css({ display: "none" });
+};
+
+// get all header inputs and check if headers changed after
+$(".headerinfo > span[contenteditable='true']").each((_, inputElement) => {
+    $(inputElement).on("input", checkIfHeadersChanged);
+});
+
+$("#addheaderbtn").on("click", () => {
+    /**
+     <div class="headerinfo" data-headername="Cookie">
+        <span class="headername" onclick="this.nextElementSibling.nextElementSibling.focus()">Cookie</span><b>:&nbsp;</b>
+        <span class="headervalue" contenteditable="true" ></span>
+    </div>
+     */
+    const nameSpan = $("<span>").addClass("headername");
+    const valueSpan = $("<span>").addClass("headervalue");
+    const separator = $("<b>").html(":&nbsp;");
+    const clearButton = $("<button>")
+        .text("Clear")
+        .addClass("headereditbutton")
+        .on("click", () => {
+            valueSpan.text("");
+            checkIfHeadersChanged();
+        });
+    const removeButton = $("<button>")
+        .text("Remove")
+        .addClass("headereditbutton");
+    nameSpan[0].contentEditable = "true";
+    valueSpan[0].contentEditable = "true";
+    nameSpan.on("input", checkIfHeadersChanged);
+    valueSpan.on("input", checkIfHeadersChanged);
+    const headerinfo = $("<div>")
+        .append(nameSpan, separator, valueSpan, clearButton, removeButton)
+        .attr("class", "headerinfo");
+    removeButton.on("click", () => {
+        headerinfo.remove();
+        checkIfHeadersChanged();
+    });
+    $("#headerinfos").append(headerinfo);
+});
+
+$("#copyascode").on("click", async () => {
+    const headers = getHeaders();
+    const strippedHeaders = {
+        ...headers,
+    };
+    delete strippedHeaders["Cookie"];
+    delete strippedHeaders["User-Agent"];
+    await navigator.clipboard.writeText(
+        JSON.stringify(strippedHeaders, null, 4)
+    );
+    lastCopiedHeaders = headers;
+    checkIfHeadersChanged();
+    $("#headerscopied").css({ display: "block" });
+    setTimeout(() => $("#headerscopied").css({ display: "none" }), 1000);
+});
+
 const currentWrapper = () => state.current_plugin || emptyPluginWrapper;
 
 /**
@@ -1088,20 +1192,26 @@ const refreshPreviewSettings = () => {
 
 // JQuery document.body.onload
 $(() => {
+    /** @type {JQuery<HTMLSpanElement>} */
+    const userAgentInput = $('[data-headername="User-Agent"] .headervalue');
+    if (userAgentInput.length) {
+        userAgentInput.text(navigator.userAgent);
+    }
+    // TODO read the values from localstorage
     state.plugin_search.keyword = plugin_search[0].value;
     PluginWrapper.previewSettings.sanitize = false;
     Promise.allSettled([
-        fetch("static/html/template.html")
+        fetchFromAPI("static/html/template.html")
             .then((r) => r.text())
             .then((t) => {
                 PluginWrapper.previewSettings.htmlTemplate = t;
             }),
-        fetch(
+        fetchFromAPI(
             "https://raw.githubusercontent.com/LNReader/lnreader/plugins/android/app/src/main/assets/css/index.css"
         )
             .then((r) => r.text())
             .then((t) => (PluginWrapper.previewSettings.fillCSS = t)),
-        fetch(
+        fetchFromAPI(
             "https://raw.githubusercontent.com/LNReader/lnreader/plugins/android/app/src/main/assets/js/index.js"
         )
             .then((r) => r.text())
@@ -1132,4 +1242,6 @@ $(() => {
         );
     }
     refreshPreviewSettings();
+    lastCopiedHeaders = getHeaders();
+    checkIfHeadersChanged();
 });