Version 1.0.10

1. Add set background color forcely option. (#12)

README.md

@@ -46,7 +46,7 @@ This is a plugin for Obsidian (https://obsidian.md). Can open document with `.ht
 
 Set Operating Mode for this plugin to protect user and app.
 
-#### Comparsion
+##### Comparsion
 
 |                          | Images | Styles  | Scripting             | DSD<sup>*</sup>  | CSP<sup>#</sup> | HTML Sanitization | Isolated |
 |         ---:             | :---:  | :---:   | :---:                 | :---:            | :---: | :---: | :---: |
@@ -63,7 +63,7 @@ Set Operating Mode for this plugin to protect user and app.
 [3]: The external script files may not executable due to Obsidian's limitation. <br />
 
 <details>
-<summary><h4>Detail Explanation</h4></summary>
+<summary><h5>Detail Explanation</h5></summary>
 
 1. **Text Mode** - Highly recommended for the files came from untrusted source! This mode almost sanitized all visual effects, script codes, and styles out. eanwhile, it keeps text parts for reading the content of HTML files with HTML layout elements.
 2. **High Restricted Mode** - This mode recommended for the user who wants more security. It would keep custom elements but sanitize unsafe HTML elements out, as well as unsafe attributes and their contents. The external image sources would be blocked by CSP, and the images are only available from the HTML files themselves.
@@ -82,7 +82,7 @@ Set Operating Mode for this plugin to protect user and app.
 
 </details>
 <details>
-<summary><h4>Terms Explanation</h4></summary>
+<summary><h5>Terms Explanation</h5></summary>
 
 This section would try to explain some terms used by Operating Mode more detail. You can ignore some terms without bold font face (they are technical terms).
 
@@ -98,6 +98,10 @@ This section would try to explain some terms used by Operating Mode more detail.
 
 <br />
 
+#### Background Color
+Set HTML &lt;body&gt; element background color forcely.
+
+
 ### Hotkeys and touch gestures settings
 Almost all keyboard hotkeys are taken from Obsidian's global hotkey settings, so you shall modify them via ⚙"Settings" ⇨ "Hotkeys" options page. <br>
 That means this plugin does not design any new configuration interface for keyboard hotkeys. And it just show the first two settings of corresponding hotkeys with readonly mode.
@@ -111,7 +115,7 @@ Zoom out current file.
 #### Reset document zoom
 Reset current file zoom.
 #### Quick document zoom in and out
-Zoom the document using Ctrl + Wheel (zoom in: ↑, zoom out: ↓), or using the trackpad/touch screen/touch panel by two-finger pinch-zoom gesture (zoom in: ← →, zoom out: → ←).
+Zoom the document using Ctrl + Wheel (zoom in: ↑, zoom out: ↓), or using the trackpad/touch screen/touch panel two-finger pinch-zoom gesture (zoom in: ← →, zoom out: → ←).
 
 
 ## More options

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-html-plugin",
 	"name": "HTML Reader",
-	"version": "1.0.9",
+	"version": "1.0.10",
 	"minAppVersion": "0.15.3",
 	"description": "This is a HTML file reader plugin for Obsidian. Can open document with \".html\" and \".htm\" file extensions.",
 	"author": "Nuthrash",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-html-plugin",
-	"version": "1.0.9",
+	"version": "1.0.10",
 	"description": "This is a HTML file reader plugin for Obsidian. Can open document with \".html\" and \".htm\" file extensions.",
 	"main": "main.js",
 	"scripts": {

src/HtmlPluginSettings.ts

@@ -3,12 +3,16 @@ import HtmlPlugin from "./HtmlPlugin";
 import { HtmlPluginOpMode, OP_MODE_INFO_DATA, OP_MODE_INFO_HTML } from "./HtmlPluginOpMode";
 
 export interface HtmlPluginSettings {
+	bgColorEnabled: boolean;
+	bgColor: string; // Hex strings are 6-digit hash-prefixed rgb strings in lowercase form.
 	opMode: HtmlPluginOpMode;
 	zoomByWheelAndGesture: boolean;
 	zoomValue: number;
 }
 
 export const DEFAULT_SETTINGS: HtmlPluginSettings = {
+	bgColorEnabled: false,
+	bgColor: "#ffffff",
 	opMode: HtmlPluginOpMode.Balance,
 	zoomByWheelAndGesture: true,
 	zoomValue: 1.0,
@@ -32,9 +36,10 @@ export class HtmlSettingTab extends PluginSettingTab {
 		containerEl.createEl('pre', { text: '※ Remember to reload the file after changing any setting.'})
 						.setAttribute('style', 'color:red');
 
-		// ----- General Settings ----
+		// ----- General Settings -----
 		containerEl.createEl('h2', { text: 'General Settings' });
 
+		// ----- General Settings: Operating Mode -----
 		const opModeSetting = new Setting(containerEl);
 		opModeSetting
 			.setName("Operating Mode")
@@ -55,7 +60,29 @@ export class HtmlSettingTab extends PluginSettingTab {
 
 		opModeSetting.infoEl.appendChild( this.opModeInfoFrag.cloneNode(true) );
 
-		// ----- HotKeys and Touch Gestures Settings ----
+		// ----- General Settings: Background Color -----
+		const bgColorSetting = new Setting(containerEl);
+		bgColorSetting
+			.setName("Background Color")
+			.setDesc("Set HTML <body> element background color forcely.")
+			.addColorPicker((picker) => {
+				picker
+					.setValue(this.plugin.settings.bgColor)
+					.onChange( async (newColor: string) => {
+						this.plugin.settings.bgColor = newColor;
+						await this.plugin.saveSettings();
+					});
+			})
+			.addToggle( (toggle) => {
+				toggle
+					.setValue(this.plugin.settings.bgColorEnabled)
+					.onChange( async (enabled: boolean) => {
+						this.plugin.settings.bgColorEnabled = enabled;
+						await this.plugin.saveSettings();
+					});
+			});
+
+		// ----- HotKeys and Touch Gestures Settings -----
 		containerEl.createEl('h2', { text: 'HotKeys and Touch Gestures Settings' });
 		containerEl.createEl('small', { text: `Almost all keyboard hotkeys are taken from Obsidian's global hotkey settings, so you shall modify them via ⚙"Settings" ⇨ "Hotkeys" options page.` });
 
@@ -67,7 +94,7 @@ export class HtmlSettingTab extends PluginSettingTab {
 			.addToggle( (toggle) => {
 				toggle
 					.setValue(this.plugin.settings.zoomByWheelAndGesture)
-					.onChange( async (enabled) => {
+					.onChange( async (enabled: boolean) => {
 						this.plugin.settings.zoomByWheelAndGesture = enabled;
 						await this.plugin.saveSettings();
 					});

src/HtmlView.ts

@@ -371,6 +371,11 @@ async function modifyAnchorTarget( doc: HTMLDocument ): Promise<void> {
 async function restoreStateBySettings( doc: HTMLDocument, settings: HtmlPluginSettings ): Promise<void> {
 	doc.body.style.transformOrigin = "left top"; // CSS transform-origin
 	doc.body.style.transform = `scale(${settings.zoomValue})`;
+
+	if( settings.bgColorEnabled ) {
+		doc.body.setAttribute( "bgColor", settings.bgColor );
+		doc.body.style.backgroundColor = settings.bgColor;
+	}
 }
 
 function isUnselectableElement( elm: HTMLElement ): boolean {
@@ -435,7 +440,7 @@ function checkHotkeyModifier( modifiers: Modifier[], evt: KeyboardEvent | MouseE
 				if( !evt.altKey ) // This key value is also used for the Apple Option key. 
 					return false;
 				break;
-			case 'Mod': // Mod = Cmd on MacOS(iOS?) and Ctrl on other OS
+			case 'Mod': // Mod = Cmd on MacOS/iOS/iPadOS and Ctrl on other OS
 				if( isAppleSys ? !evt.metaKey : !evt.ctrlKey)
 					return false;
 				break;
@@ -756,7 +761,7 @@ async function buildUserInteractiveFacilities( mainView: HTMLElement ): Promise<
 		clearAllMarks( false );
 		hltAllNodes = preAllNodes;
 
-		searchBar.style.display = 'none'; // hide Search box
+		searchBar.style.display = 'none'; // hide Search bar
 		isSearchBarVisible = false;
 		iframe.contentWindow.focus();
 	} );

versions.json

@@ -8,5 +8,6 @@
 	"1.0.6": "0.15.0",
 	"1.0.7": "0.15.0",
 	"1.0.8": "0.15.3",
-	"1.0.9": "0.15.3"
+	"1.0.9": "0.15.3",
+	"1.0.10": "0.15.3"
 }