Implement originaltitle preservation with direct title mutation

Needed for websites like YouTube
ahmad-PH · Feb 19, 2024 · 605a729 · 605a729
1 parent a7ed4e7
commit 605a729
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 20 deletions.
diff --git a/src/config.js b/src/config.js
@@ -22,9 +22,5 @@ export const COMMAND_OPEN_RENAME_DIALOG = `open_rename_dialog`;
 
 
 // Favicon restoration strategy:
-export const FAVICON_RESTORE_STRATEGY = Object.freeze({
-    FETCH_SEPARATELY: 'fetch_separately',
-    MUTATION_OBSERVER: 'mutation_observer'
-});
-
-export const faviconRestorationStrategy = FAVICON_RESTORE_STRATEGY.MUTATION_OBSERVER;
+// Accepted values: 'fetch_separately', 'mutation_observer'
+export const faviconRestorationStrategy = 'mutation_observer';
diff --git a/src/contentScript/components/App/App.js b/src/contentScript/components/App/App.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState, useContext } from 'react';
 import styles from './App.module.css';
-import { ROOT_ELEMENT_ID, INPUT_BOX_ID, OVERLAY_ID, COMMAND_OPEN_RENAME_DIALOG } from '../../../config';
+import { ROOT_ELEMENT_ID, INPUT_BOX_ID, OVERLAY_ID, COMMAND_OPEN_RENAME_DIALOG, faviconRestorationStrategy } from '../../../config';
 import PropTypes from 'prop-types';
 import { getLogger } from "../../../log";
 import SelectedEmoji from '../SelectedEmoji';
@@ -27,11 +27,14 @@ export default function App() {
      */
     const tab = useContext(TabContext);
 
-    useEffect(() => {
-        if (isVisible) {
-            tab.preFetchOriginalFavicon();
-        }
-    }, [isVisible]);
+    // @ts-ignore
+    if (faviconRestorationStrategy === 'fetch_separately') {
+        useEffect(() => {
+            if (isVisible) {
+                tab.preFetchOriginalFavicon();
+            }
+        }, [isVisible]);
+    }
 
     useEffect(() => {
         const handleKeyDown = (event) => {

diff --git a/src/contentScript/initializationContentScript.js b/src/contentScript/initializationContentScript.js
@@ -29,7 +29,7 @@ const olog = getLogger('Title Observer', 'debug');
     let titleElements = Array.from(document.querySelectorAll('head > title')).map(el => el.textContent);
 
     log.debug('document.title:', originalTitle, 'document.readyState:', document.readyState, 'title elements:', titleElements);
-    log.debug('document head:', document.head.outerHTML);
+    // log.debug('document head:', document.head.outerHTML);
 
     await tab.setSignature(title, null, false, false);
     if (originalTitle) {
@@ -40,7 +40,6 @@ const olog = getLogger('Title Observer', 'debug');
 
     // =================================== Title Observer: ===================================
     let headMutationObserver = new MutationObserver((mutations) => {
-        // olog.debug('headMutationObsever callback called', mutations);
         mutations.forEach((mutation) => {
             if (mutation.type === 'childList') {
                 mutation.addedNodes.forEach(async (node) => {

diff --git a/src/contentScript/tab.js b/src/contentScript/tab.js
@@ -3,12 +3,12 @@ import { getLogger } from "../log";
 import { TabSignature, FaviconDTO } from "../types";
 import bgScriptApi from "./backgroundScriptApi";
 import FaviconRetriever from "./faviconRetriever";
-import { faviconRestorationStrategy, FAVICON_RESTORE_STRATEGY } from "../config";
+import { faviconRestorationStrategy } from "../config";
 
 export const faviconLinksCSSQuery = "html > head link[rel~='icon']";
 
 const log = getLogger('Tab', 'debug');
-const plog = getLogger('Preservers', 'warn');
+const plog = getLogger('Preservers', 'debug');
 const olog = getLogger('Observer', 'warn');
 
 /**
@@ -115,7 +115,8 @@ export class Tab {
     }
 
     _setFavicon(faviconUrl, preserve = true) {
-        if (faviconRestorationStrategy === FAVICON_RESTORE_STRATEGY.FETCH_SEPARATELY) {
+        // @ts-ignore
+        if (faviconRestorationStrategy === 'fetch_separately') {
             // Check if a favicon link element already exists
             log.debug('setDocumentFavicon called with faviconUrl:', 
                 faviconUrl ? faviconUrl.substring(0, 15) : faviconUrl, preserve);
@@ -132,7 +133,7 @@ export class Tab {
             document.getElementsByTagName('head')[0].appendChild(link);
             this.injectedFaviconLinkElement = link;
 
-        } else if (faviconRestorationStrategy === FAVICON_RESTORE_STRATEGY.MUTATION_OBSERVER) {
+        } else if (faviconRestorationStrategy === 'mutation_observer') {
             // Check if a favicon link element already exists
             log.debug('setDocumentFavicon called with faviconUrl:', 
                 faviconUrl ? faviconUrl.substring(0, 15) : faviconUrl, preserve);
@@ -174,7 +175,7 @@ export class Tab {
         log.debug('restoreFavicon called. Current signature', this.signature);
 
         // @ts-ignore
-        if (faviconRestorationStrategy === FAVICON_RESTORE_STRATEGY.FETCH_SEPARATELY) {
+        if (faviconRestorationStrategy === 'fetch_separately') {
             this.disconnectFaviconPreserver();
             if (this.signature && this.signature.favicon) { // favicon has been modified from original value
                 log.debug('Favicon has been modified.');
@@ -192,7 +193,7 @@ export class Tab {
                 head.append(...faviconLinks);
 
             }
-        } else if (faviconRestorationStrategy === FAVICON_RESTORE_STRATEGY.MUTATION_OBSERVER) {
+        } else if (faviconRestorationStrategy === 'mutation_observer') {
             this.disconnectFaviconPreserver();
 
             if (this.signature && this.signature.favicon) { // favicon has been modified from original value
@@ -241,6 +242,7 @@ export class Tab {
                     plog.debug('TITLE mutation detected', newTitle, 'while desriedTitle is:', desiredTitle);
                     if (newTitle !== desiredTitle) {
                         document.title = desiredTitle;
+                        this.originalTitle = newTitle;
                     }
                 }
             });