feat: inline article preview embed

packages/extension/rspack.config.js

@@ -220,6 +220,10 @@ const mainConfig = {
       import: path.join(sourcePath, 'frame', 'index.ts'),
       runtime: false,
     },
+    ping: {
+      import: path.join(sourcePath, 'ping', 'index.ts'),
+      runtime: false,
+    },
     newtab: {
       import: path.join(sourcePath, 'newtab', 'index.tsx'),
       runtime: 'runtime',
@@ -253,7 +257,9 @@ const mainConfig = {
     ...baseConfig.optimization,
     splitChunks: {
       chunks(chunk) {
-        return !['content', 'companion', 'manifest'].includes(chunk.name);
+        return !['content', 'companion', 'manifest', 'ping'].includes(
+          chunk.name,
+        );
       },
       maxSize: 244000,
       cacheGroups: {

packages/extension/src/content/index.tsx

@@ -2,30 +2,34 @@ import browser from 'webextension-polyfill';
 import { removeLinkTargetElement } from '@dailydotdev/shared/src/lib/strings';
 import { ExtensionMessageType } from '@dailydotdev/shared/src/lib/extension';
 
-const isRendered = !!document.querySelector('daily-companion-app');
+// Keep the companion out of embedded article/reader iframes so our injected
+// host element and CSS can never alter the page being previewed.
+if (window.top === window.self) {
+  const isRendered = !!document.querySelector('daily-companion-app');
 
-if (!isRendered) {
-  // Inject app div
-  const appContainer = document.createElement('daily-companion-app');
-  document.body.appendChild(appContainer);
+  if (!isRendered) {
+    // Inject app div
+    const appContainer = document.createElement('daily-companion-app');
+    document.body.appendChild(appContainer);
 
-  // Create shadow dom
-  const shadow = document
-    .querySelector('daily-companion-app')
-    .attachShadow({ mode: 'open' });
+    // Create shadow dom
+    const shadow = appContainer.attachShadow({ mode: 'open' });
 
-  const wrapper = document.createElement('div');
-  wrapper.id = 'daily-companion-wrapper';
-  shadow.appendChild(wrapper);
+    const wrapper = document.createElement('div');
+    wrapper.id = 'daily-companion-wrapper';
+    shadow.appendChild(wrapper);
 
-  browser.runtime.sendMessage({ type: ExtensionMessageType.ContentLoaded });
+    browser.runtime.sendMessage({ type: ExtensionMessageType.ContentLoaded });
 
-  let lastUrl = removeLinkTargetElement(window.location.href);
-  new MutationObserver(() => {
-    const current = removeLinkTargetElement(window.location.href);
-    if (current !== lastUrl) {
-      lastUrl = current;
-      browser.runtime.sendMessage({ type: ExtensionMessageType.ContentLoaded });
-    }
-  }).observe(document, { subtree: true, childList: true });
+    let lastUrl = removeLinkTargetElement(window.location.href);
+    new MutationObserver(() => {
+      const current = removeLinkTargetElement(window.location.href);
+      if (current !== lastUrl) {
+        lastUrl = current;
+        browser.runtime.sendMessage({
+          type: ExtensionMessageType.ContentLoaded,
+        });
+      }
+    }).observe(document, { subtree: true, childList: true });
+  }
 }

packages/extension/src/frame/controller.spec.ts

@@ -0,0 +1,90 @@
+import { extensionSiteEmbedFrameEvent } from '@dailydotdev/shared/src/features/extensionEmbed/common';
+import browser from 'webextension-polyfill';
+import { initializeFrame } from './controller';
+import {
+  enableFrameEmbeddingViaBackground,
+  hasFrameEmbeddingPermissions,
+  requestFrameEmbeddingPermissions,
+} from '../lib/frameEmbedding';
+import { renderMessage, renderPermissionPrompt } from './render';
+
+jest.mock('../lib/frameEmbedding', () => ({
+  enableFrameEmbeddingViaBackground: jest.fn(),
+  hasFrameEmbeddingPermissions: jest.fn(),
+  requestFrameEmbeddingPermissions: jest.fn(),
+}));
+
+jest.mock('webextension-polyfill', () => ({
+  runtime: {
+    reload: jest.fn(),
+  },
+}));
+
+jest.mock('./render', () => ({
+  renderMessage: jest.fn(),
+  renderPermissionPrompt: jest.fn(),
+}));
+
+describe('initializeFrame', () => {
+  const root = document.createElement('div');
+  const target = new URL('https://example.com/article');
+  const sendParentMessage = jest.fn();
+  const onEmbeddingEnabled = jest.fn();
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('requests an extension reload after permission is granted', async () => {
+    (hasFrameEmbeddingPermissions as jest.Mock).mockResolvedValue(false);
+    (requestFrameEmbeddingPermissions as jest.Mock).mockResolvedValue(true);
+
+    let requestPermission:
+      | (() => Promise<'granted' | 'dismissed' | 'failed'>)
+      | undefined;
+    (renderPermissionPrompt as jest.Mock).mockImplementation(
+      ({
+        onRequestPermission,
+      }: {
+        onRequestPermission: () => Promise<'granted' | 'dismissed' | 'failed'>;
+      }) => {
+        requestPermission = onRequestPermission;
+      },
+    );
+
+    await initializeFrame({
+      root,
+      target,
+      sendParentMessage,
+      onEmbeddingEnabled,
+    });
+
+    expect(requestPermission).toBeDefined();
+    await expect(requestPermission?.()).resolves.toBe('granted');
+
+    expect(sendParentMessage).toHaveBeenCalledWith(
+      extensionSiteEmbedFrameEvent.Error,
+      {
+        reason: 'missing-permission',
+        target: target.href,
+      },
+    );
+    expect(sendParentMessage).toHaveBeenCalledWith(
+      extensionSiteEmbedFrameEvent.ReloadRequested,
+      {
+        target: target.href,
+      },
+    );
+    expect(enableFrameEmbeddingViaBackground).not.toHaveBeenCalled();
+    expect(onEmbeddingEnabled).not.toHaveBeenCalled();
+    expect(renderMessage).not.toHaveBeenCalled();
+    expect(browser.runtime.reload).toHaveBeenCalledTimes(0);
+    jest.runOnlyPendingTimers();
+    expect(browser.runtime.reload).toHaveBeenCalledTimes(1);
+  });
+});

packages/extension/src/frame/controller.ts

@@ -15,6 +15,50 @@ const errorLog = (...args: unknown[]): void => {
 
 type SendParentMessage = (type: string, detail: Record<string, string>) => void;
 
+type PermissionRequestOutcome = 'granted' | 'dismissed' | 'failed';
+
+const prepareEmbedding = async ({
+  root,
+  target,
+  sendParentMessage,
+  onEmbeddingEnabled,
+}: {
+  root: HTMLDivElement;
+  target: URL;
+  sendParentMessage: SendParentMessage;
+  onEmbeddingEnabled: () => void;
+}): Promise<boolean> => {
+  sendParentMessage(extensionSiteEmbedFrameEvent.PermissionsReady, {
+    target: target.href,
+  });
+
+  // The visible site iframe only mounts after the tab-scoped rule is live.
+  // That avoids a flash of the browser's built-in frame-blocked error page.
+  renderMessage(
+    root,
+    'Preparing embedded browsing',
+    'Configuring this tab so the requested site can be embedded safely.',
+  );
+
+  const result = await enableFrameEmbeddingViaBackground();
+  if (!result.enabled) {
+    sendParentMessage(extensionSiteEmbedFrameEvent.Error, {
+      reason: 'enable-frame-embedding-failed',
+      target: target.href,
+      error: result.error ?? 'Unknown frame embedding error',
+    });
+    return false;
+  }
+
+  // The webapp keeps this frame mounted invisibly after success so it can
+  // tear the tab-scoped rule down when the page unloads or a new target starts.
+  onEmbeddingEnabled();
+  sendParentMessage(extensionSiteEmbedFrameEvent.EmbeddingReady, {
+    target: target.href,
+  });
+  return true;
+};
+
 export const createFrameCleanupController = () => {
   let shouldDisableEmbeddingOnCleanup = false;
 
@@ -53,39 +97,41 @@ export const initializeFrame = async ({
   const hasPermissions = await hasFrameEmbeddingPermissions();
 
   if (!hasPermissions) {
-    renderPermissionPrompt({
-      root,
-      onRequestPermission: async () => {
-        try {
-          const granted = await requestFrameEmbeddingPermissions();
-
-          if (!granted) {
-            sendParentMessage(extensionSiteEmbedFrameEvent.Error, {
-              reason: 'permission-denied',
-              target: target.href,
-            });
-            return 'dismissed';
-          }
-
-          sendParentMessage(extensionSiteEmbedFrameEvent.ReloadRequested, {
-            target: target.href,
-          });
-
-          // After the optional permission prompt resolves, the fresh extension
-          // context is much more reliable for enabling the DNR session rule.
-          globalThis.setTimeout(() => {
-            browser.runtime.reload();
-          }, 100);
+    const onRequestPermission = async (): Promise<PermissionRequestOutcome> => {
+      try {
+        const granted = await requestFrameEmbeddingPermissions();
 
-          return 'granted';
-        } catch {
+        if (!granted) {
           sendParentMessage(extensionSiteEmbedFrameEvent.Error, {
-            reason: 'permission-request-failed',
+            reason: 'permission-denied',
             target: target.href,
           });
-          return 'failed';
+          return 'dismissed';
         }
-      },
+
+        sendParentMessage(extensionSiteEmbedFrameEvent.ReloadRequested, {
+          target: target.href,
+        });
+
+        // After the optional permission prompt resolves, the fresh extension
+        // context is much more reliable for enabling the DNR session rule.
+        globalThis.setTimeout(() => {
+          browser.runtime.reload();
+        }, 100);
+
+        return 'granted';
+      } catch {
+        sendParentMessage(extensionSiteEmbedFrameEvent.Error, {
+          reason: 'permission-request-failed',
+          target: target.href,
+        });
+        return 'failed';
+      }
+    };
+
+    renderPermissionPrompt({
+      root,
+      onRequestPermission,
     });
 
     sendParentMessage(extensionSiteEmbedFrameEvent.Error, {
@@ -95,32 +141,10 @@ export const initializeFrame = async ({
     return;
   }
 
-  sendParentMessage(extensionSiteEmbedFrameEvent.PermissionsReady, {
-    target: target.href,
-  });
-
-  // The visible site iframe only mounts after the tab-scoped rule is live.
-  // That avoids a flash of the browser's built-in frame-blocked error page.
-  renderMessage(
+  await prepareEmbedding({
     root,
-    'Preparing embedded browsing',
-    'Configuring this tab so the requested site can be embedded safely.',
-  );
-
-  const result = await enableFrameEmbeddingViaBackground();
-  if (!result.enabled) {
-    sendParentMessage(extensionSiteEmbedFrameEvent.Error, {
-      reason: 'enable-frame-embedding-failed',
-      target: target.href,
-      error: result.error ?? 'Unknown frame embedding error',
-    });
-    return;
-  }
-
-  // The webapp keeps this frame mounted invisibly after success so it can
-  // tear the tab-scoped rule down when the page unloads or a new target starts.
-  onEmbeddingEnabled();
-  sendParentMessage(extensionSiteEmbedFrameEvent.EmbeddingReady, {
-    target: target.href,
+    target,
+    sendParentMessage,
+    onEmbeddingEnabled,
   });
 };

packages/extension/src/frame/parentMessaging.ts

@@ -9,9 +9,26 @@ const isAllowedParentHost = (hostname: string): boolean =>
   hostname.endsWith('.daily.dev') ||
   hostname.endsWith('.local.fylla.dev');
 
+const isSelfExtensionOrigin = (origin: URL): boolean => {
+  if (
+    origin.protocol !== 'chrome-extension:' &&
+    origin.protocol !== 'moz-extension:'
+  ) {
+    return false;
+  }
+  // Only accept the frame's own extension origin — this allows the new tab
+  // page (same extension) to embed frame.html, but rejects other extensions.
+  return (
+    typeof window !== 'undefined' && origin.origin === window.location.origin
+  );
+};
+
 const getAllowedOrigin = (value: string): string | null => {
   try {
     const origin = new URL(value);
+    if (isSelfExtensionOrigin(origin)) {
+      return origin.origin;
+    }
     return isAllowedParentHost(origin.hostname) ? origin.origin : null;
   } catch {
     return null;