fix: TrustedHTML warning

package-lock.json

@@ -44,6 +44,7 @@
         "@types/electron-localshortcut": "3.1.0",
         "@types/howler": "2.2.9",
         "@types/html-to-text": "9.0.2",
+        "@types/trusted-types": "2.0.4",
         "@types/youtube-player": "5.5.7",
         "@typescript-eslint/eslint-plugin": "6.7.0",
         "auto-changelog": "2.4.0",
@@ -1275,6 +1276,12 @@
       "integrity": "sha512-cJRQXpObxfNKkFAZbJl2yjWtJCqELQIdShsogr1d2MilP8dKD9TE/nEKHkJgUNHdGKCQaf9HbIynuV2csLGVLg==",
       "dev": true
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.4.tgz",
+      "integrity": "sha512-IDaobHimLQhjwsQ/NMwRVfa/yL7L/wriQPMhw1ZJall0KX6E1oxk29XMDeilW5qTIg5aoiqf5Udy8U/51aNoQQ==",
+      "dev": true
+    },
     "node_modules/@types/verror": {
       "version": "1.10.6",
       "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.6.tgz",

package.json

@@ -106,7 +106,7 @@
     "start": "npm run tsc-and-copy && electron ./dist/index.js",
     "start:debug": "ELECTRON_ENABLE_LOGGING=1 electron ./dist/index.js",
     "generate:package": "node utils/generate-package-json.js",
-    "postinstall": "npm run plugins",
+    "postinstall": "patch-package && npm run plugins",
     "clean": "del-cli dist && del-cli pack",
     "ytm-resource-copy-files": "copyfiles error.html youtube-music.css assets/**/* dist/",
     "copy-files": "copyfiles -u 1 plugins/**/*.html plugins/**/*.css plugins/**/*.bin plugins/**/*.js dist/plugins/",
@@ -172,6 +172,7 @@
     "@types/electron-localshortcut": "3.1.0",
     "@types/howler": "2.2.9",
     "@types/html-to-text": "9.0.2",
+    "@types/trusted-types": "2.0.4",
     "@types/youtube-player": "5.5.7",
     "@typescript-eslint/eslint-plugin": "6.7.0",
     "auto-changelog": "2.4.0",

plugins/precise-volume/front.ts

@@ -4,6 +4,7 @@ import { setOptions, setMenuOptions, isEnabled } from '../../config/plugins';
 import { debounce } from '../../providers/decorators';
 
 import { YoutubePlayer } from '../../types/youtube-player';
+import { noopTrustedHtmlPolicy } from '../utils';
 
 import type { ConfigType } from '../../config/dynamic';
 
@@ -87,14 +88,18 @@ function injectVolumeHud(noVid: boolean) {
     const position = 'top: 18px; right: 60px;';
     const mainStyle = 'font-size: xx-large;';
 
-    $('.center-content.ytmusic-nav-bar')?.insertAdjacentHTML('beforeend',
+    $('.center-content.ytmusic-nav-bar')?.insertAdjacentHTML(
-      `<span id="volumeHud" style="${position + mainStyle}"></span>`);
+      'beforeend',
+      noopTrustedHtmlPolicy().createHTML(`<span id="volumeHud" style="${position + mainStyle}"></span>`) as unknown as string,
+    );
   } else {
     const position = 'top: 10px; left: 10px;';
     const mainStyle = 'font-size: xxx-large; webkit-text-stroke: 1px black; font-weight: 600;';
 
-    $('#song-video')?.insertAdjacentHTML('afterend',
+    $('#song-video')?.insertAdjacentHTML(
-      `<span id="volumeHud" style="${position + mainStyle}"></span>`);
+      'afterend',
+      noopTrustedHtmlPolicy().createHTML(`<span id="volumeHud" style="${position + mainStyle}"></span>`) as unknown as string,
+    );
   }
 }
 

plugins/utils.ts

@@ -5,11 +5,17 @@ import { ipcMain, ipcRenderer } from 'electron';
 
 import { ValueOf } from '../utils/type-utils';
 
+export const noopTrustedHtmlPolicy = () => window?.trustedTypes?.createPolicy('forceInner', {
+  createHTML: (s: string): string => s,
+}) ?? {
+  createHTML: (s: string): string => s,
+};
+
 // Creates a DOM element from an HTML string
 export const ElementFromHtml = (html: string): HTMLElement => {
   const template = document.createElement('template');
   html = html.trim(); // Never return a text node of whitespace as the result
-  template.innerHTML = html;
+  template.innerHTML = noopTrustedHtmlPolicy().createHTML(html) as unknown as string;
 
   return template.content.firstElementChild as HTMLElement;
 };