linkfeed-pro 1.0.7

package/entrypoints/content.ts

@@ -0,0 +1,656 @@
+import { getLicenseState, getCachedLicense } from '../lib/license';
+import type { FeatureFlags } from '@linkfeed/shared';
+import { settingsStorage, cachedLicenseStorage, type Settings } from '../lib/storage';
+import { LNK_SELECTORS } from '../lib/selectors';
+
+const FREE_FEATURES: FeatureFlags = { wideFeed: false, fontSize: false, autoExpandPosts: false };
+let currentLicenseFeatures: FeatureFlags = { ...FREE_FEATURES };
+let licenseRefreshInFlight: Promise<void> | null = null;
+
+const REMOVED_FROM_FEED_MARKERS = [
+  'post removed from your feed',
+  'post removed form your feed',
+  'removed from your feed',
+  'removed form your feed',
+  'publication supprimee de votre fil',
+  'supprime de votre fil',
+  'publicacion eliminada de tu feed',
+  'beitrag wurde aus deinem feed entfernt',
+  'post rimosso dal tuo feed',
+  'post verwijderd uit je feed',
+  'post removido do seu feed',
+  'post removido do teu feed',
+  'gonderi akisindan kaldirildi',
+];
+
+const UNDO_MARKERS = [
+  'undo',
+  'annuler',
+  'deshacer',
+  'ruckgangig',
+  'annulla',
+  'ongedaan',
+  'desfazer',
+  'geri al',
+  'batalkan',
+];
+
+const FEEDBACK_MARKERS = [
+  'not interested',
+  'not appropriate',
+  'pas interesse',
+  'pas approprie',
+  'no me interesa',
+  'inappropriate for linkedin',
+  'no es apropiado para linkedin',
+  'nicht interessiert',
+  'non interessato',
+];
+
+const PROMOTED_MARKERS = [
+  'promoted',
+  'sponsored',
+  'sponsorise',
+  'patrocinado',
+  'gesponsert',
+  'sponsorizzato',
+];
+
+const PROMOTED_LABEL_SELECTORS = [
+  '.update-components-actor__sub-description',
+  '.update-components-actor__description',
+  '.feed-shared-actor__sub-description',
+  '.feed-shared-actor__description',
+];
+
+export default defineContentScript({
+  matches: ['https://www.linkedin.com/*'],
+  runAt: 'document_idle',
+
+  async main() {
+    // Load settings from storage
+    let settings = await settingsStorage.getValue();
+
+    // Apply cached license immediately, then refresh
+    await applyCachedLicense(settings);
+    void refreshLicense(settings);
+
+    // Listen for settings changes
+    settingsStorage.watch(async (newSettings) => {
+      if (newSettings) {
+        await applyLicenseFeatures(newSettings, currentLicenseFeatures);
+        void refreshLicense(newSettings);
+        settings = newSettings;
+      }
+    });
+
+    // Re-check license if license data changed
+    cachedLicenseStorage.watch(async (cached) => {
+      const currentSettings = await settingsStorage.getValue();
+      await applyCachedLicense(currentSettings, cached ?? undefined);
+    });
+  },
+});
+
+async function applyCachedLicense(settings: Settings, cached?: Awaited<ReturnType<typeof getCachedLicense>>) {
+  const resolved = cached ?? await getCachedLicense();
+  if (resolved?.features) {
+    await applyLicenseFeatures(settings, resolved.features);
+  } else {
+    await applyLicenseFeatures(settings, FREE_FEATURES);
+  }
+}
+
+async function refreshLicense(settings: Settings) {
+  if (!settings.globalEnabled) return;
+  if (licenseRefreshInFlight) return;
+
+  licenseRefreshInFlight = (async () => {
+    const licenseState = await getLicenseState();
+    currentLicenseFeatures = licenseState.features;
+    await applyLicenseFeatures(settings, currentLicenseFeatures);
+  })().finally(() => {
+    licenseRefreshInFlight = null;
+  });
+}
+
+// Migration logic is now handled in settingsStorage.getValue() via migrate property in storage.ts
+// (Actually I reverted migrate and put it in popup, but content script should also be clean)
+// Since I want best practices, I'll rely on settingsStorage giving me valid data.
+
+/**
+ * Injects the base styles once with CSS variables
+ */
+function injectBaseStyles() {
+  if (document.getElementById('linkfeed-styles')) return;
+
+  const style = document.createElement('style');
+  style.id = 'linkfeed-styles';
+  style.textContent = `
+    :root {
+      --lf-feed-width: 800px;
+      --lf-font-size: 16px;
+      --lf-feed-gap: 24px;
+    }
+
+    /* Global Disable Handle */
+    html:not(.lf-global-enabled) .lf-premium-feature,
+    html:not(.lf-global-enabled) .lf-sidebar-feature {
+      /* Reset or do nothing - handled by class toggles */
+    }
+
+    .feed-shared-inline-show-more-text:focus,
+    .feed-shared-inline-show-more-text:focus-visible,
+    .feed-shared-inline-show-more-text__see-more-less-toggle:focus {
+      outline: none !important;
+    }
+
+    /* Sidebars */
+    html.lf-hide-sidebars ${LNK_SELECTORS.SIDEBAR_RIGHT},
+    html.lf-hide-sidebars ${LNK_SELECTORS.SIDEBAR_LEFT} {
+      display: none !important;
+    }
+
+    /* Wide Feed */
+    html.lf-wide-feed body.render-mode-BIGPIPE {
+      display: flex !important;
+      justify-content: center !important;
+    }
+
+    html.lf-wide-feed .authentication-outlet,
+    html.lf-wide-feed .application-outlet,
+    html.lf-wide-feed .scaffold-layout,
+    html.lf-wide-feed .scaffold-layout__inner,
+    html.lf-wide-feed ${LNK_SELECTORS.MAIN_GRID},
+    html.lf-wide-feed .scaffold-layout__main,
+    html.lf-wide-feed .core-rail,
+    html.lf-wide-feed .scaffold-finite-scroll {
+      max-width: var(--lf-feed-width) !important;
+      width: 100% !important;
+      justify-content: center !important;
+    }
+
+    html.lf-wide-feed ${LNK_SELECTORS.MAIN_GRID} {
+      display: block !important;
+      margin: 0 auto !important;
+    }
+
+    html.lf-wide-feed ${LNK_SELECTORS.SCROLL_CONTENT} {
+      width: 100% !important;
+      max-width: 100% !important;
+      display: flex !important;
+      flex-direction: column !important;
+      align-items: center !important;
+      gap: var(--lf-feed-gap) !important;
+    }
+
+    html.lf-wide-feed ${LNK_SELECTORS.SCROLL_CONTENT} > * {
+       width: 100% !important;
+       max-width: 100% !important;
+       margin-left: 0 !important;
+       margin-right: 0 !important;
+    }
+
+    html.lf-wide-feed ${LNK_SELECTORS.SCROLL_CONTENT} > [data-finite-scroll-hotkey-item],
+    html.lf-wide-feed ${LNK_SELECTORS.SCROLL_CONTENT} > .scaffold-finite-scroll__content-item,
+    html.lf-wide-feed ${LNK_SELECTORS.SCROLL_CONTENT} > .feed-shared-update-v2,
+    html.lf-wide-feed ${LNK_SELECTORS.SCROLL_CONTENT} > .feed-shared-update-v1 {
+       border-radius: 8px !important;
+    }
+
+    html.lf-wide-feed ${LNK_SELECTORS.SCROLL_CONTENT} > ${LNK_SELECTORS.FEED_SKIP_LINK} {
+      display: none !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      min-height: 0 !important;
+      height: 0 !important;
+      border: 0 !important;
+    }
+
+    html.lf-wide-feed ${LNK_SELECTORS.POST_CONTAINER},
+    html.lf-wide-feed .feed-shared-update-v2__description-wrapper {
+       width: 100% !important;
+       max-width: 100% !important;
+       margin: 0 auto !important;
+    }
+
+    /* Feature Visibility */
+    html.lf-hide-start-post ${LNK_SELECTORS.SHARE_BOX} {
+      display: none !important;
+    }
+
+    html.lf-hide-messenger ${LNK_SELECTORS.MESSENGER} {
+      display: none !important;
+    }
+
+    html.lf-hide-nav-bar ${LNK_SELECTORS.NAV_BAR} {
+      display: none !important;
+    }
+
+    html.lf-hide-nav-bar body.render-mode-BIGPIPE {
+      padding-top: 0 !important;
+    }
+
+    html.lf-hide-nav-bar main {
+      margin-top: 0 !important;
+      padding-top: 0 !important;
+    }
+
+    /* Font Size */
+    html.lf-custom-font ${LNK_SELECTORS.POST_TEXT} {
+      font-size: var(--lf-font-size) !important;
+      line-height: 1.6 !important;
+      font-weight: 400 !important;
+      color: var(--text-color-primary) !important;
+    }
+    
+    html.lf-custom-font .update-components-text .break-words,
+    html.lf-custom-font .update-components-text span[dir="ltr"],
+    html.lf-custom-font .feed-shared-inline-show-more-text .break-words,
+    html.lf-custom-font .feed-shared-inline-show-more-text span[dir="ltr"] {
+      font-size: var(--lf-font-size) !important;
+      line-height: 1.6 !important;
+    }
+    
+    html.lf-custom-font.lf-auto-expand .feed-shared-inline-show-more-text {
+      width: 100% !important;
+      max-width: 100% !important;
+      padding-right: 24px !important;
+      box-sizing: border-box !important;
+    }
+    
+    html.lf-custom-font.lf-auto-expand .feed-shared-update-v2__description-wrapper {
+       padding-right: 24px !important;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+async function applyStyles(settings: Settings, licenseFeatures: FeatureFlags) {
+  injectBaseStyles();
+
+  const root = document.documentElement;
+
+  // Toggle global visibility
+  root.classList.toggle('lf-global-enabled', settings.globalEnabled);
+
+  if (!settings.globalEnabled) {
+    root.className = root.className.split(' ').filter(c => !c.startsWith('lf-')).join(' ');
+    return;
+  }
+
+  // Toggle features
+  const hideSidebars = settings.hideSidebars ?? (settings as Settings & { removeSidebars?: boolean }).removeSidebars ?? true;
+  root.classList.toggle('lf-hide-sidebars', hideSidebars);
+  root.classList.toggle('lf-hide-promoted', settings.hidePromoted ?? false);
+  root.classList.toggle('lf-hide-start-post', settings.hideStartPost);
+  root.classList.toggle('lf-hide-messenger', settings.hideMessenger);
+  root.classList.toggle('lf-hide-nav-bar', settings.hideNavBar);
+
+  // Wide Feed (Premium)
+  const isWideEnabled = licenseFeatures.wideFeed && settings.feedWidth > 600;
+  root.classList.toggle('lf-wide-feed', isWideEnabled);
+  if (isWideEnabled) {
+    root.style.setProperty('--lf-feed-width', `${settings.feedWidth}px`);
+    root.style.setProperty('--lf-feed-gap', `${settings.feedSpacing ?? 24}px`);
+  }
+
+  // Font Size (Premium)
+  const isFontEnabled = licenseFeatures.fontSize && settings.fontSize !== 14;
+  root.classList.toggle('lf-custom-font', isFontEnabled);
+  if (isFontEnabled) {
+    root.style.setProperty('--lf-font-size', `${settings.fontSize}px`);
+  }
+
+  // Auto-expand (Premium) – used for conditional layout tweaks
+  const isAutoExpandEnabled = licenseFeatures.autoExpandPosts && settings.autoExpandPosts;
+  root.classList.toggle('lf-auto-expand', isAutoExpandEnabled);
+}
+
+async function applyLicenseFeatures(settings: Settings, features: FeatureFlags) {
+  currentLicenseFeatures = features;
+  await applyStyles(settings, features);
+
+  const hasPremiumAccess = features.autoExpandPosts || features.fontSize || features.wideFeed;
+  const hidePromotedEnabled = settings.hidePromoted ?? false;
+  const hideRemovedFeedCardsEnabled = (settings.hideRemovedFeedCards ?? true) && hasPremiumAccess;
+  shouldHidePromotedPosts = hidePromotedEnabled;
+  shouldHideDismissedFeedCards = hideRemovedFeedCardsEnabled;
+
+  if (settings.globalEnabled && (hidePromotedEnabled || hideRemovedFeedCardsEnabled)) {
+    observeDismissedPosts();
+  } else {
+    stopDismissedPostObserver();
+  }
+
+  if (features.autoExpandPosts && settings.globalEnabled && settings.autoExpandPosts) {
+    observeNewPosts();
+  } else {
+    stopAutoExpandObserving();
+  }
+}
+
+let expansionObserver: IntersectionObserver | null = null;
+let mutationObserver: MutationObserver | null = null;
+let dismissedPostObserver: MutationObserver | null = null;
+let dismissedClickHandler: ((event: MouseEvent) => void) | null = null;
+let dismissedScanTimeout: ReturnType<typeof setTimeout> | null = null;
+let shouldHideDismissedFeedCards = false;
+let shouldHidePromotedPosts = false;
+
+/**
+ * Clicks a "See More" button efficiently
+ */
+function expandButton(button: HTMLElement) {
+  const text = button.textContent?.toLowerCase() || '';
+  // Check for English "more" or French "plus", or just click if it's the right class
+  if (text.includes('more') || text.includes('plus') || button.matches(LNK_SELECTORS.SEE_MORE_BTN)) {
+    button.click();
+    button.blur();
+    const parentContainer = button.closest('.feed-shared-inline-show-more-text') as HTMLElement;
+    if (parentContainer) {
+      parentContainer.blur();
+    }
+  }
+}
+
+function normalizeLinkedInText(value: string | null | undefined) {
+  if (!value) return '';
+  return value
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function hasMarker(text: string, markers: string[]) {
+  return markers.some((marker) => text.includes(marker));
+}
+
+function isUndoControl(element: HTMLElement) {
+  const normalized = normalizeLinkedInText(`${element.textContent ?? ''} ${element.getAttribute('aria-label') ?? ''}`);
+  return normalized.length > 0 && hasMarker(normalized, UNDO_MARKERS);
+}
+
+function isDismissedFeedCard(element: HTMLElement) {
+  const normalized = normalizeLinkedInText(element.innerText || element.textContent);
+  if (!normalized) return false;
+  const hasRemovedText = hasMarker(normalized, REMOVED_FROM_FEED_MARKERS);
+  const hasUndoText = hasMarker(normalized, UNDO_MARKERS);
+  const hasFeedbackText = hasMarker(normalized, FEEDBACK_MARKERS);
+  return hasRemovedText && (hasUndoText || hasFeedbackText);
+}
+
+function isPromotedFeedCard(element: HTMLElement) {
+  const promotedLabels = element.querySelectorAll(PROMOTED_LABEL_SELECTORS.join(','));
+  for (const label of promotedLabels) {
+    if (!(label instanceof HTMLElement)) continue;
+    const normalized = normalizeLinkedInText(label.innerText || label.textContent);
+    if (normalized && hasMarker(normalized, PROMOTED_MARKERS)) {
+      return true;
+    }
+  }
+
+  const actorArea = element.querySelector('header, .update-components-actor, .feed-shared-actor');
+  if (actorArea instanceof HTMLElement) {
+    const normalized = normalizeLinkedInText(actorArea.innerText || actorArea.textContent);
+    if (normalized && hasMarker(normalized, PROMOTED_MARKERS)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function getTopLevelFeedItem(element: HTMLElement) {
+  const feedRoot = element.closest(LNK_SELECTORS.SCROLL_CONTENT) as HTMLElement | null;
+  if (!feedRoot) return element;
+
+  let current: HTMLElement | null = element;
+  while (current?.parentElement && current.parentElement !== feedRoot) {
+    current = current.parentElement;
+  }
+
+  return current?.parentElement === feedRoot ? current : element;
+}
+
+function findDismissedFeedCard(start: HTMLElement) {
+  const nearestFeedItem = start.closest(LNK_SELECTORS.FEED_ITEM) as HTMLElement | null;
+  if (nearestFeedItem && isDismissedFeedCard(nearestFeedItem)) {
+    return nearestFeedItem;
+  }
+
+  let current: HTMLElement | null = start;
+  for (let depth = 0; current && depth < 8; depth += 1) {
+    if (isDismissedFeedCard(current)) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+
+  return null;
+}
+
+function removeFeedItemFromFeed(card: HTMLElement) {
+  if (card.dataset.lfDismissedCardHidden === '1') return;
+  const topLevelFeedItem = getTopLevelFeedItem(card);
+  const previousSibling = topLevelFeedItem.previousElementSibling as HTMLElement | null;
+  if (previousSibling?.matches(LNK_SELECTORS.FEED_SKIP_LINK)) {
+    previousSibling.remove();
+  }
+  topLevelFeedItem.dataset.lfDismissedCardHidden = '1';
+  topLevelFeedItem.remove();
+}
+
+function removeOrphanFeedSkipLinks(root: ParentNode) {
+  const feedRoot =
+    root instanceof HTMLElement && root.matches(LNK_SELECTORS.SCROLL_CONTENT)
+      ? root
+      : root instanceof Document
+        ? root.querySelector(LNK_SELECTORS.SCROLL_CONTENT)
+        : root instanceof HTMLElement
+          ? root.closest(LNK_SELECTORS.SCROLL_CONTENT) || root.querySelector(LNK_SELECTORS.SCROLL_CONTENT)
+          : null;
+
+  if (!(feedRoot instanceof HTMLElement)) return;
+
+  const children = Array.from(feedRoot.children);
+  children.forEach((child) => {
+    if (!(child instanceof HTMLElement) || !child.matches(LNK_SELECTORS.FEED_SKIP_LINK)) return;
+
+    const next = child.nextElementSibling as HTMLElement | null;
+    const isNextFeedItem = Boolean(next?.hasAttribute('data-finite-scroll-hotkey-item'));
+    if (!isNextFeedItem) {
+      child.remove();
+    }
+  });
+}
+
+function scheduleDismissedCardScan(delayMs = 180) {
+  if (dismissedScanTimeout) {
+    clearTimeout(dismissedScanTimeout);
+  }
+  dismissedScanTimeout = setTimeout(() => {
+    dismissedScanTimeout = null;
+    removeDismissedFeedCardsFromRoot(document);
+  }, delayMs);
+}
+
+function removeDismissedFeedCardsFromRoot(root: ParentNode) {
+  const actionButtons = new Set<HTMLElement>();
+  const feedItems = new Set<HTMLElement>();
+
+  if (root instanceof HTMLElement && root.matches(LNK_SELECTORS.ACTION_BUTTON)) {
+    actionButtons.add(root);
+  }
+
+  if ('querySelectorAll' in root) {
+    root.querySelectorAll(LNK_SELECTORS.ACTION_BUTTON).forEach((el) => {
+      if (el instanceof HTMLElement) {
+        actionButtons.add(el);
+      }
+    });
+  }
+
+  if (root instanceof HTMLElement && root.matches(LNK_SELECTORS.FEED_ITEM)) {
+    feedItems.add(root);
+  }
+
+  if ('querySelectorAll' in root) {
+    root.querySelectorAll(LNK_SELECTORS.FEED_ITEM).forEach((el) => {
+      if (el instanceof HTMLElement) {
+        feedItems.add(el);
+      }
+    });
+  }
+
+  actionButtons.forEach((button) => {
+    if (!shouldHideDismissedFeedCards) return;
+    if (!isUndoControl(button)) return;
+    const card = findDismissedFeedCard(button);
+    if (card) {
+      removeFeedItemFromFeed(card);
+    }
+  });
+
+  feedItems.forEach((item) => {
+    if (shouldHideDismissedFeedCards && isDismissedFeedCard(item)) {
+      removeFeedItemFromFeed(item);
+      return;
+    }
+    if (shouldHidePromotedPosts && isPromotedFeedCard(item)) {
+      removeFeedItemFromFeed(item);
+    }
+  });
+
+  removeOrphanFeedSkipLinks(root);
+}
+
+function observeDismissedPosts() {
+  if (dismissedPostObserver || !document.body) return;
+
+  removeDismissedFeedCardsFromRoot(document);
+
+  dismissedPostObserver = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === 'characterData') {
+        const target = mutation.target.parentElement;
+        if (target) {
+          removeDismissedFeedCardsFromRoot(target);
+        }
+      }
+
+      mutation.addedNodes.forEach((node) => {
+        if (node instanceof HTMLElement) {
+          removeDismissedFeedCardsFromRoot(node);
+        }
+      });
+    });
+  });
+
+  dismissedPostObserver.observe(document.body, {
+    childList: true,
+    characterData: true,
+    subtree: true,
+  });
+
+  if (!dismissedClickHandler) {
+    dismissedClickHandler = (event: MouseEvent) => {
+      const target = event.target as HTMLElement | null;
+      if (!target) return;
+      if (!target.closest(LNK_SELECTORS.ACTION_BUTTON)) return;
+      scheduleDismissedCardScan();
+    };
+    document.addEventListener('click', dismissedClickHandler, true);
+  }
+}
+
+function stopDismissedPostObserver() {
+  if (!dismissedPostObserver) return;
+  dismissedPostObserver.disconnect();
+  dismissedPostObserver = null;
+
+  if (dismissedClickHandler) {
+    document.removeEventListener('click', dismissedClickHandler, true);
+    dismissedClickHandler = null;
+  }
+
+  if (dismissedScanTimeout) {
+    clearTimeout(dismissedScanTimeout);
+    dismissedScanTimeout = null;
+  }
+}
+
+/**
+ * Stops auto-expand observers
+ */
+function stopAutoExpandObserving() {
+  if (expansionObserver) {
+    expansionObserver.disconnect();
+    expansionObserver = null;
+  }
+  if (mutationObserver) {
+    mutationObserver.disconnect();
+    mutationObserver = null;
+  }
+}
+
+function observeNewPosts() {
+  if (mutationObserver) return; // Already observing
+
+  initExpansionObserver();
+
+  mutationObserver = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.addedNodes.length > 0) {
+        mutation.addedNodes.forEach(node => {
+          if (node instanceof HTMLElement) {
+            const buttons = node.querySelectorAll(LNK_SELECTORS.SEE_MORE_BTN);
+            buttons.forEach(btn => {
+              expansionObserver?.observe(btn);
+            });
+
+            // Also check if the node itself is the button (rare but possible)
+            if (node.classList.contains(LNK_SELECTORS.SEE_MORE_BTN.substring(1))) {
+              expansionObserver?.observe(node);
+            }
+          }
+        });
+      }
+    }
+  });
+
+  const feedContainer = document.querySelector(LNK_SELECTORS.MAIN_GRID);
+  if (feedContainer) {
+    mutationObserver.observe(feedContainer, {
+      childList: true,
+      subtree: true,
+    });
+  }
+}
+
+/**
+ * Initializes IntersectionObserver to expand posts as they enter viewport
+ */
+function initExpansionObserver() {
+  if (expansionObserver) expansionObserver.disconnect();
+
+  expansionObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        const button = entry.target as HTMLElement;
+        expandButton(button);
+        // Once clicked, we don't need to observe this specific button anymore
+        expansionObserver?.unobserve(button);
+      }
+    });
+  }, {
+    rootMargin: '200px', // Expand slightly before it becomes visible
+    threshold: 0
+  });
+
+  // Start by observing existing buttons
+  const buttons = document.querySelectorAll(LNK_SELECTORS.SEE_MORE_BTN);
+  buttons.forEach(btn => expansionObserver?.observe(btn));
+}