feat(customScript): Support inject custom script into generated html head.

walkthunder · walkthunder · commit 45fe0694005a · 2024-09-24T15:18:24.000+08:00
diff --git a/src/baseTypes.ts b/src/baseTypes.ts
@@ -114,6 +114,7 @@ export interface InvioPluginSettings {
 
   customFooter?: string;
   customStyle?: string;
+  customScript?: string;
 
   /**
    * @deprecated
diff --git a/src/exporter.ts b/src/exporter.ts
@@ -49,7 +49,7 @@ export const exportFile = async (
             const { s3BucketName: bucket, s3Endpoint: endpoint } = remoteClient.s3Config;
             remoteCOSDomain = `https://${bucket}.${endpoint}/`;
         }
-        const customPageSettings: ICustomPageSettings = { footer: settings.customFooter, style: settings.customStyle };
+        const customPageSettings: ICustomPageSettings = { script: settings.customScript, footer: settings.customFooter, style: settings.customStyle };
         await HTMLGenerator.generateWebpage(exportedFile, rootPath, view, remoteCOSDomain, customPageSettings);
     }
     catch (e)
diff --git a/src/html-generation/html-generator.ts b/src/html-generation/html-generator.ts
@@ -14,6 +14,7 @@ import { Utils } from "src/utils/utils";
 export interface ICustomPageSettings {
 	footer?: string;
 	style?: string;
+	script?: string; // head 中的js脚本，支持外链
 }
 const LogoSVGDefault = `<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg238067" height="768px" width="1024px" version="1.1" viewBox="0 0 100 100" class="svg-icon invio-sync-wait"><g fill-rule="evenodd" style="transform: scale3d(0.89, 0.99, 1.5);"><path d="M27 97.93A56.08 56.08 0 0 1 9.29 19.08 55.77 55.77 0 0 0 23.59 50l.07.07c.53.58 1.06 1.14 1.62 1.7s1.12 1.09 1.72 1.62L45.54 72a14.93 14.93 0 0 1 4.53 10.93v1.59a15.12 15.12 0 0 1-8 13.52A15.09 15.09 0 0 1 27 97.93z" style="fill: var(--icon-color);"></path><path d="M23.59 50a55.77 55.77 0 0 1-14.3-30.92A56.46 56.46 0 0 1 27 2.08 15.08 15.08 0 0 1 42.11 2a15.12 15.12 0 0 1 8 13.52v1.59A15 15 0 0 1 45.55 28l-22 22z" fill="#999999" opacity=".8"></path><path d="M85.16 2.08a56.08 56.08 0 0 1 17.67 78.84A55.77 55.77 0 0 0 88.53 50l-.08-.07c-.52-.58-1.06-1.14-1.62-1.7s-1.12-1.09-1.69-1.62L66.58 28a14.93 14.93 0 0 1-4.53-10.93v-1.55A15.12 15.12 0 0 1 70 2a15.08 15.08 0 0 1 15.15.08z" style="fill: var(--icon-color);"></path><path d="M88.53 50a55.77 55.77 0 0 1 14.3 30.92 56.35 56.35 0 0 1-17.67 17 15.46 15.46 0 0 1-23.11-13.44v-1.59A15 15 0 0 1 66.57 72l22-22z" fill="#999999" opacity=".8"></path></g></svg>`
 
@@ -185,7 +186,7 @@ export class HTMLGenerator {
 
 
 		await this.appendFooter(file);
-		await this.fillInHead(file, rootPath, remoteDomain);
+		await this.fillInHead(file, rootPath, remoteDomain, customPageSettings);
 
 		file.downloads.unshift(file.getSelfDownloadable());
 
@@ -443,7 +444,7 @@ export class HTMLGenerator {
 		return { mediaPath: imagePath, jsPath: jsPath, cssPath: cssPath, rootPath: rootPath };
 	}
 
-	private static async fillInHead(file: ExportFile, rootPath: Path, remoteDomain: string = '') {
+	private static async fillInHead(file: ExportFile, rootPath: Path, remoteDomain: string = '', customPageSettings?: ICustomPageSettings) {
 		const pageConfig = await this.getMeta(file);
 		log.info('get file metadata: ', pageConfig, remoteDomain);
 		log.info('head with remote domain: ', remoteDomain);
@@ -520,6 +521,16 @@ export class HTMLGenerator {
 			scripts += `\n<script src='${remoteDomain}${remoteDomain}${relativePaths.jsPath}/webpage.js'></script>\n`;
 		}
 
+		if (customPageSettings.script) {
+			// 确保js外链资源合法
+			if (customPageSettings.script?.startsWith('http') && customPageSettings.script?.endsWith('.js')) {
+				scripts += `\n<script src='${customPageSettings.script}'></script>\n`;
+			} else if (customPageSettings.script?.startsWith('<script>')) {
+				scripts += `\n${customPageSettings.script}\n`
+			} else {
+				scripts += `\n<script>\n${customPageSettings.script}\n</script>\n`;
+			}
+		}
 
 		// --- CSS ---
 		let cssSettings = document.getElementById("css-settings-manager")?.innerHTML ?? "";
diff --git a/src/langs/en.json b/src/langs/en.json
@@ -177,6 +177,9 @@
   "settings_customstyle": "Custom Style",
   "settings_customstyle_desc": "Costom style css contents.",
 
+  "settings_customscript": "Custom Script",
+  "settings_customscript_desc": "Costom script inject to html header.",
+  
   "settings_checkonnectivity": "Check Connectivity",
   "settings_checkonnectivity_desc": "Check connectivity.",
   "settings_checkonnectivity_button": "Check",
diff --git a/src/langs/zh_cn.json b/src/langs/zh_cn.json
@@ -176,6 +176,9 @@
   "settings_customstyle": "自定义样式",
   "settings_customstyle_desc": "自定义Css样式",
 
+  "settings_customscript": "自定义Script",
+  "settings_customscript_desc": "要插入html header中的script内容，支持script函数或者外链如https://docs.webinfra.cloud/demo.js",
+  
   "settings_checkonnectivity": "检查可否连接",
   "settings_checkonnectivity_desc": "检查可否连接。",
   "settings_checkonnectivity_button": "检查",
diff --git a/src/langs/zh_tw.json b/src/langs/zh_tw.json
@@ -175,6 +175,9 @@
   "settings_customstyle": "自定义样式",
   "settings_customstyle_desc": "自定义Css样式",
 
+  "settings_customscript": "自定义Script",
+  "settings_customscript_desc": "要插入html header中的script内容，支持script函数或者外链如https://docs.webinfra.cloud/demo.js",
+  
   "settings_checkonnectivity": "檢查可否連線",
   "settings_checkonnectivity_desc": "檢查可否連線。",
   "settings_checkonnectivity_button": "檢查",
diff --git a/src/settings.ts b/src/settings.ts
@@ -82,6 +82,7 @@ const DEFAULT_SETTINGS: InvioPluginSettings = {
   skipSizeLargerThan: -1,
   customFooter: '',
   customStyle: '',
+  customScript: '',
 };
 
 export const getDEFAULT_SETTINGS = (): InvioPluginSettings => {
@@ -112,6 +113,7 @@ export const getDEFAULT_SETTINGS = (): InvioPluginSettings => {
     skipSizeLargerThan: -1,
     customFooter: '',
     customStyle: '',
+    customScript: '',
   });
 }
 
@@ -1051,6 +1053,19 @@ export class InvioSettingTab extends PluginSettingTab {
             await this.plugin.saveSettings();
           })
       ); 
+    
+    new Setting(basicDiv)
+      .setName(t("settings_customscript"))
+      .setDesc(t("settings_customscript_desc"))
+      .addTextArea((text) =>
+        text
+          .setPlaceholder("")
+          .setValue(`${this.plugin.settings.customScript}`)
+          .onChange(async (value) => {
+            this.plugin.settings.customScript = value.trim();
+            await this.plugin.saveSettings();
+          })
+      ); 
 
     //////////////////////////////////////////////////
     // below for advanced settings

Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ export const exportFile = async (`
`49`	`49`	`const { s3BucketName: bucket, s3Endpoint: endpoint } = remoteClient.s3Config;`
`50`	`50`	remoteCOSDomain = `https://${bucket}.${endpoint}/`;
`51`	`51`	`}`
`52`		`- const customPageSettings: ICustomPageSettings = { footer: settings.customFooter, style: settings.customStyle };`
	`52`	`+ const customPageSettings: ICustomPageSettings = { script: settings.customScript, footer: settings.customFooter, style: settings.customStyle };`
`53`	`53`	`await HTMLGenerator.generateWebpage(exportedFile, rootPath, view, remoteCOSDomain, customPageSettings);`
`54`	`54`	`}`
`55`	`55`	`catch (e)`