🐛 (Libération) Correction du lien (#198)

Surveiller l'apparition de la bannière ne suffit pas.
lovasoa · Jan 28, 2024 · d3d5045 · d3d5045
1 parent eb807d0
commit d3d5045
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 41 deletions.
diff --git a/ophirofox/content_scripts/liberation.css b/ophirofox/content_scripts/liberation.css
@@ -1,8 +1,8 @@
 .ophirofox-europresse {
+    display: inline-block;
     font-size: 0.875rem;
     line-height: 1.125rem;
-    /* margin-top: 1.5rem; */
-    margin-bottom: 10px;
+    margin-bottom: 1rem;
     margin-left: 0px;
     padding: 5px 10px;
     background-color: #eeb54e;

diff --git a/ophirofox/content_scripts/liberation.js b/ophirofox/content_scripts/liberation.js
@@ -1,5 +1,3 @@
-console.log('Ophirofox injected');
-
 function extractKeywords() {
   return document
     .querySelector("meta[property='og:title']")
@@ -19,48 +17,48 @@ function findPremiumBanner() {
   return anchor;
 }
 
-async function onLoad() {
-  const premiumBanner = findPremiumBanner();
-  if (!premiumBanner) return;
-
-  /* 
-    The UI is reactive (and DOM rewritten), so we need to wait for the banner to be added 
-    to the DOM before we can add our link. It seems that it is a React component added to 
-    the DOM in a particular order (last). Safe to use until it is not.
-    Weird choices for a nearly-static content-driven website with SEO concerns.
-  */
-  const observer = new MutationObserver(async mutationsList => {
-    for (let mutation of mutationsList) {
-      if (mutation.addedNodes.length > 0) {
-        const addedNode = mutation.addedNodes[0];
-
-        /*
-        <figure class="lead-art-wrapper">
-          <div>
-            <div class="dynamicClass1 dynamicClass2">
-            ...
-            </div>
-          </div>
-          ...
-        </figure> is added dynamically.
-        */
+async function onLoad(premiumBanner) {
+  if (premiumBanner) {
+    /* 
+      The UI is reactive (and DOM rewritten), so we need to wait for some nodes to be rewritten to the DOM 
+      before we can add our link. It seems that the React components are added to the DOM in a particular order. 
+      
+      With heavy loading, the MutationObserver execution is too late, and only catch .dossier-feed class.
+      After caching, we can rely on the .article-body-paywall added node.
+      
+      Weird choices for a nearly-static content-driven website with SEO concerns.
+    */
+    const observer = new MutationObserver(async mutationsList => {
+      for (let mutation of mutationsList) {
+        if (mutation.addedNodes.length > 0) {
+          const addedNode = mutation.addedNodes[0];
 
-        if (addedNode && addedNode.parentElement && addedNode.parentElement.parentElement &&
-          addedNode.parentElement.parentElement.nodeName === 'FIGURE') {
-          const link = await createLink();
-          if (link) {
+          if (addedNode.classList.contains('dossier-feed') ||
+            addedNode.classList.contains('article-body-paywall')
+          ) {
             observer.disconnect();
-            premiumBanner.after(link);
-            break;
-          } else {
-            console.error('Ophirofox HTML anchor failed to create');
+
+            // Not sure if premiumBanner is (and will be) still valid after DOM rewrite
+            if (!document.querySelector('div.TypologyArticle__BlockPremium-sc-1vro4tp-2 + a.ophirofox-europresse')) {
+              findPremiumBanner().after(await createLink());
+              console.log('Ophirofox injected after React DOM rewrite');
+              break;
+            }
           }
         }
       }
-    }
-  });
+    });
 
-  observer.observe(document.querySelector('#fusion-app'), { childList: true, subtree: true });
+    observer.observe(document.querySelector('#fusion-app'), { childList: true, subtree: true });
+  }
 }
 
-onLoad();
+// Edge-cases, it costs nothing to try to add it *à l'anciene*
+createLink().then(link => {
+  const premiumBanner = findPremiumBanner();
+  if (premiumBanner) {
+    premiumBanner.after(link);
+    console.log('Ophirofox injected');
+  }
+  onLoad(premiumBanner);
+});