feat(plugins): restore and fix adblocker plugin

src/i18n/resources/de.json

@@ -288,7 +288,7 @@
       "name": "Ambiente-Modus"
     },
     "amuse": {
-      "description": "Fügt Unterstützung für das Amuse \"Spielt gerade\"-Widget von 6K Labs hinzu",
+      "description": "Fügt {{applicationName}} Unterstützung für das Amuse \"Spielt gerade\"-Widget von 6K Labs hinzu",
       "name": "Amuse",
       "response": {
         "query": "Amuse API-Server läuft. /query für Liedinformationen."

src/index.ts

@@ -126,6 +126,7 @@ if (config.get('options.disableHardwareAcceleration')) {
 }
 
 if (is.linux()) {
+  app.commandLine.appendSwitch('enable-transparent-visuals');
   // Overrides WM_CLASS for X11 to correspond to icon filename
   app.setName(
     'com.github.th_ch.\u0079\u006f\u0075\u0074\u0075\u0062\u0065\u005f\u006d\u0075\u0073\u0069\u0063',
@@ -163,11 +164,12 @@ electronDebug({
   showDevTools: false, // Disable automatic devTools on new window
 });
 
-let icon = 'assets/icon.png';
+const iconPath = app.getAppPath();
+let icon = path.join(iconPath, 'assets/icon.png');
 if (process.platform === 'win32') {
-  icon = 'assets/generated/icons/win/icon.ico';
+  icon = path.join(iconPath, 'assets/generated/icons/win/icon.ico');
 } else if (process.platform === 'darwin') {
-  icon = 'assets/generated/icons/mac/icon.icns';
+  icon = path.join(iconPath, 'assets/generated/icons/mac/icon.icns');
 }
 
 function onClosed() {
@@ -323,6 +325,8 @@ async function createMainWindow() {
   const windowMaximized = config.get('window-maximized');
   const windowPosition: Electron.Point = config.get('window-position');
   const useInlineMenu = await config.plugins.isEnabled('in-app-menu');
+  const isTransparentPlayerEnabled =
+    await config.plugins.isEnabled('transparent-player');
 
   const defaultTitleBarOverlayOptions: Electron.TitleBarOverlay = {
     color: '#00000000',
@@ -349,11 +353,14 @@ async function createMainWindow() {
 
   const electronWindowSettings: Electron.BrowserWindowConstructorOptions = {
     icon,
+    title: 'Youtube Music',
     width: windowSize.width,
     height: windowSize.height,
     minWidth: 325,
     minHeight: 425,
-    backgroundColor: '#000',
+    backgroundColor:
+      is.linux() && isTransparentPlayerEnabled ? '#00000000' : '#000',
+    transparent: is.linux() && isTransparentPlayerEnabled,
     show: false,
     webPreferences: {
       contextIsolation: true,

src/plugins/adblocker/.gitignore

@@ -0,0 +1 @@
+/ad-blocker-engine.bin

src/plugins/adblocker/blocker.ts

@@ -0,0 +1,80 @@
+// Used for caching
+import path from 'node:path';
+import fs, { promises } from 'node:fs';
+
+import { ElectronBlocker } from '@ghostery/adblocker-electron';
+import { app, net } from 'electron';
+
+const SOURCES = [
+  'https://raw.githubusercontent.com/kbinani/adblock-youtube-ads/master/signed.txt',
+  // UBlock Origin
+  'https://raw.githubusercontent.com/ghostery/adblocker/master/packages/adblocker/assets/ublock-origin/filters.txt',
+  'https://raw.githubusercontent.com/ghostery/adblocker/master/packages/adblocker/assets/ublock-origin/quick-fixes.txt',
+  'https://raw.githubusercontent.com/ghostery/adblocker/master/packages/adblocker/assets/ublock-origin/unbreak.txt',
+    'https://raw.githubusercontent.com/ghostery/adblocker/master/packages/adblocker/assets/ublock-origin/filters-2020.txt',
+    'https://raw.githubusercontent.com/ghostery/adblocker/master/packages/adblocker/assets/ublock-origin/filters-2021.txt',
+    'https://raw.githubusercontent.com/ghostery/adblocker/master/packages/adblocker/assets/ublock-origin/filters-2022.txt',
+    'https://raw.githubusercontent.com/ghostery/adblocker/master/packages/adblocker/assets/ublock-origin/filters-2023.txt',
+    // Fanboy Annoyances
+    'https://secure.fanboy.co.nz/fanboy-annoyance_ubo.txt',
+    // AdGuard
+    'https://filters.adtidy.org/extension/ublock/filters/122_optimized.txt',
+];
+
+let blocker: ElectronBlocker | undefined;
+
+export const loadAdBlockerEngine = async (
+    session: Electron.Session | undefined = undefined,
+    cache: boolean = true,
+    additionalBlockLists: string[] = [],
+    disableDefaultLists: boolean | unknown[] = false,
+) => {
+    // Only use cache if no additional blocklists are passed
+    const cacheDirectory = path.join(app.getPath('userData'), 'adblock_cache');
+    if (!fs.existsSync(cacheDirectory)) {
+        fs.mkdirSync(cacheDirectory);
+    }
+    const cachingOptions =
+        cache && additionalBlockLists.length === 0
+            ? {
+                path: path.join(cacheDirectory, 'adblocker-engine.bin'),
+                read: promises.readFile,
+                write: promises.writeFile,
+            }
+            : undefined;
+    const lists = [
+        ...((disableDefaultLists && !Array.isArray(disableDefaultLists)) ||
+            (Array.isArray(disableDefaultLists) && disableDefaultLists.length > 0)
+            ? []
+            : SOURCES),
+        ...additionalBlockLists,
+    ];
+
+    try {
+        blocker = await ElectronBlocker.fromLists(
+            (url: string) => net.fetch(url),
+            lists,
+            {
+                // When generating the engine for caching, do not load network filters
+                // So that enhancing the session works as expected
+                // Allowing to define multiple webRequest listeners
+                loadNetworkFilters: session !== undefined,
+            },
+            cachingOptions,
+        );
+        if (session) {
+            blocker.enableBlockingInSession(session);
+        }
+    } catch (error) {
+        console.log('Error loading adBlocker engine', error);
+    }
+};
+
+export const unloadAdBlockerEngine = (session: Electron.Session) => {
+    if (blocker) {
+        blocker.disableBlockingInSession(session);
+    }
+};
+
+export const isBlockerEnabled = (session: Electron.Session) =>
+    blocker !== undefined && blocker.isBlockingEnabled(session);

src/plugins/adblocker/index.ts

@@ -0,0 +1,133 @@
+import { contextBridge, webFrame } from 'electron';
+
+import { blockers } from './types';
+import { createPlugin } from '@/utils';
+import {
+    isBlockerEnabled,
+    loadAdBlockerEngine,
+    unloadAdBlockerEngine,
+} from './blocker';
+
+import injectCliqzPreload from './injectors/inject-cliqz-preload';
+import { inject, isInjected } from './injectors/inject';
+
+import { t } from '@/i18n';
+
+import type { BrowserWindow } from 'electron';
+
+interface AdblockerConfig {
+    /**
+     * Whether to enable the adblocker.
+     * @default true
+     */
+    enabled: boolean;
+    /**
+     * When enabled, the adblocker will cache the blocklists.
+     * @default true
+     */
+    cache: boolean;
+    /**
+     * Which adblocker to use.
+     * @default blockers.InPlayer
+     */
+    blocker: (typeof blockers)[keyof typeof blockers];
+    /**
+     * Additional list of filters to use.
+     * @example ["https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters.txt"]
+     * @default []
+     */
+    additionalBlockLists: string[];
+    /**
+     * Disable the default blocklists.
+     * @default false
+     */
+    disableDefaultLists: boolean;
+}
+
+export default createPlugin({
+    name: () => t('plugins.adblocker.name'),
+    description: () => t('plugins.adblocker.description'),
+    restartNeeded: false,
+    config: {
+        enabled: true,
+        cache: true,
+        blocker: blockers.InPlayer,
+        additionalBlockLists: [],
+        disableDefaultLists: false,
+    } as AdblockerConfig,
+    menu: async ({ getConfig, setConfig }) => {
+        const config = await getConfig();
+
+        return [
+            {
+                label: t('plugins.adblocker.menu.blocker'),
+                submenu: Object.values(blockers).map((blocker) => ({
+                    label: blocker,
+                    type: 'radio',
+                    checked: (config.blocker || blockers.WithBlocklists) === blocker,
+                    click() {
+                        setConfig({ blocker });
+                    },
+                })),
+            },
+        ];
+    },
+    backend: {
+        mainWindow: null as BrowserWindow | null,
+        async start({ getConfig, window }) {
+            const config = await getConfig();
+            this.mainWindow = window;
+
+            if (config.blocker === blockers.WithBlocklists) {
+                await loadAdBlockerEngine(
+                    window.webContents.session,
+                    config.cache,
+                    config.additionalBlockLists,
+                    config.disableDefaultLists,
+                );
+            }
+        },
+        stop({ window }) {
+            if (isBlockerEnabled(window.webContents.session)) {
+                unloadAdBlockerEngine(window.webContents.session);
+            }
+        },
+        async onConfigChange(newConfig) {
+            if (this.mainWindow) {
+                if (
+                    newConfig.blocker === blockers.WithBlocklists &&
+                    !isBlockerEnabled(this.mainWindow.webContents.session)
+                ) {
+                    await loadAdBlockerEngine(
+                        this.mainWindow.webContents.session,
+                        newConfig.cache,
+                        newConfig.additionalBlockLists,
+                        newConfig.disableDefaultLists,
+                    );
+                }
+            }
+        },
+    },
+    preload: {
+        script: 'window.JSON.parse = window._proxyJsonParse; window._proxyJsonParse = undefined; window.Response.prototype.json = window._proxyResponseJson; window._proxyResponseJson = undefined; 0',
+        async start({ getConfig }) {
+            const config = await getConfig();
+
+            if (config.blocker === blockers.WithBlocklists) {
+                // Preload adblocker to inject scripts/styles
+                await injectCliqzPreload();
+            } else if (config.blocker === blockers.InPlayer && !isInjected()) {
+                inject(contextBridge);
+                await webFrame.executeJavaScript(this.script);
+            }
+        },
+        async onConfigChange(newConfig) {
+            if (newConfig.blocker === blockers.WithBlocklists) {
+                await injectCliqzPreload();
+            } else if (newConfig.blocker === blockers.InPlayer && !isInjected()) {
+                inject(contextBridge);
+                await webFrame.executeJavaScript(this.script);
+            }
+        },
+    },
+});

src/plugins/adblocker/injectors/inject-cliqz-preload.ts

@@ -0,0 +1,3 @@
+export default async () => {
+    await import('@ghostery/adblocker-electron-preload');
+};

src/plugins/adblocker/injectors/inject.d.ts

@@ -0,0 +1,5 @@
+import type { ContextBridge } from 'electron';
+
+export const inject: (contextBridge: ContextBridge) => void;
+
+export const isInjected: () => boolean;