Preview detailed note via floating window || 通过悬浮窗预览笔记详情

[rawlkian]

Other users have previously implemented this feature by forking the source code and rebuilding it.
Ref: https://github.com/orgs/usememos/discussions/4837

I tried replicating this feature with custom CSS styles and JavaScript scripts.

The specific principle is to use Memos' API to fetch the note list, match the corresponding ID based on the timestamp of the button that triggers the details, and then display the content in a floating window. Feel free to share your ideas if you have better approaches.

Add the following code to Custom CSS:

/* Popup window */
#memo-custom-modal {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.memo-modal-backdrop {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(5px);
}

/* Main container */
.memo-modal-container {
  position: relative; 
  width: 92%; 
  max-width: 820px; 
  height: 88vh;     
  background: var(--bg-main, #ffffff); 
  border: 1px solid var(--border-sub, #e2e8f0);
  border-radius: 18px; 
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.3);
  display: flex; flex-direction: column; overflow: hidden;
  animation: memoIframeModalShow 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.memo-modal-content-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Close button */
.memo-modal-close {
  position: absolute; 
  top: 16px; 
  left: 18px; 
  
  /* Round frame */
  background: rgba(0, 0, 0, 0.08); 
  border: none; 
  font-size: 14px; 
  cursor: pointer; 
  color: #718096; 
  z-index: 10000; 
  
  width: 30px; 
  height: 30px; 
  border-radius: 8px; 
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.memo-modal-close:hover { 
  background: rgba(0, 0, 0, 0.15); 
  color: #1a202c; 
}

/* For night mode */
html.dark .memo-modal-container { 
  background: #1e293b; border-color: #334155; 
}
html.dark .memo-modal-close { 
  background: rgba(255, 255, 255, 0.1); color: #cbd5e1; 
}
html.dark .memo-modal-close:hover { 
  background: rgba(255, 255, 255, 0.18); color: #ffffff; 
}

/* loading animation */
.memo-iframe-spinner { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-sub, #64748b); font-size: 14px; }
.memo-iframe-spinner::before {
  content: ""; width: 20px; height: 20px; margin-right: 12px;
  border: 2px solid var(--border-sub, #cbd5e1); border-top-color: var(--brand-main, #3b82f6);
  border-radius: 50%; animation: memoIframeSpin 0.6s linear infinite;
}
@keyframes memoIframeSpin { to { transform: rotate(360deg); } }
@keyframes memoIframeModalShow { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

Add the following code to the custom JavaScript.

document.addEventListener("click", async function (e) {
  // Locating time button
  const timeButton = e.target.closest("button.text-muted-foreground");
  if (!timeButton) return;
  
  const timeEl = timeButton.querySelector("relative-time");
  if (!timeEl) return;

  // Intercept jump events
  e.preventDefault();
  e.stopPropagation();

  // Find timestamp
  const domDatetime = timeEl.getAttribute("datetime");
  const targetIsoTime = new Date(domDatetime).toISOString();

  // Pop-up window, You can replace the caution text with custom content.
  showStyledIframeModal("<div class='memo-iframe-spinner'>正在加载中... / Now loading...</div>");

  try {
    // Locate the auth token to ensure private notes can be retrieved when fetching the memos list via the API.
    let token = "";
    
    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      if (key.includes("memos") || key.includes("auth") || key.includes("token")) {
        const val = localStorage.getItem(key);
        try {
          const parsed = JSON.parse(val);
          token = parsed.accessToken || parsed.token || parsed.val || token;
        } catch(e) {
          if (val && val.length > 30) token = val;
        }
      }
    }

    const headers = new Headers();
    if (token) {
      headers.append("Authorization", `Bearer ${token}`);
    }

    // Parameters for requesting the memos list can be customized.
    const listResponse = await fetch(`${window.location.origin}/api/v1/memos?pageSize=60`, {
      method: "GET",
      headers: headers 
    });
    
    if (!listResponse.ok) throw new Error("同步列表失败。 / Failed to sync list.");
    const listData = await listResponse.json();
    
    const memosArray = listData.memos || [];
    let realUid = null;

    for (let memo of memosArray) {
      if (memo.createTime) {
        const memoIsoTime = new Date(memo.createTime).toISOString();
        if (memoIsoTime === targetIsoTime || Math.abs(new Date(memoIsoTime) - new Date(targetIsoTime)) <= 2500) {
          realUid = memo.name.split('/').pop();
          break;
        }
      }
    }

    if (realUid) {
      const realDetailUrl = `${window.location.origin}/memos/${realUid}`;
      
      const iframeHtml = `
        <iframe 
          src="${realDetailUrl}" 
          style="width:100%; height:100%; border:none; background:transparent;"
          allow="clipboard-write"
          id="memo-detail-iframe"
          onload="syncAuthAndInjectStyle(this)"
        ></iframe>
      `;
      updateStyledModalContent(iframeHtml);
    } else {
      throw new Error("未找到该 ID 对应的笔记。 / No note found for this ID.");
    }

  } catch (err) {
    console.error("安全解锁加载失败: / Secure unlock loading failed:", err);
    updateStyledModalContent(`<p style='padding:30px; color:#ef4444; font-size:14px; text-align:center;'>❌ 身份同步失败 / Identity synchronization failed: ${err.message}<br>请检查当前是否处于正常登录状态。 / Please check if you are currently logged in.</p>`);
  }
}, true);

function syncAuthAndInjectStyle(iframe) {
  try {
    const iframeWindow = iframe.contentWindow;
    const iframeDoc = iframe.contentDocument || iframeWindow.document;
    if (!iframeDoc || !iframeWindow) return;

    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      iframeWindow.localStorage.setItem(key, localStorage.getItem(key));
    }

    const styleString = `
      aside.sidebar, .sidebar-wrapper, [class*="sidebar"] {
        display: none !important; width: 0 !important; opacity: 0 !important; visibility: hidden !important;
      }
      header, .header-wrapper, [class*="header"] {
        display: none !important;
      }
      main, .main-wrapper, [class*="main-content"] {
        padding-left: 14px !important; padding-right: 14px !important;
        margin: 0 auto !important; width: 100% !important; max-width: 100% !important;
        left: 0 !important; transition: none !important;
      }
      main > .w-full { max-width: 100% !important; width: 100% !important; }
      main .py-4 { padding-top: 10px !important; }
    `;

    const styleEl = iframeDoc.createElement('style');
    styleEl.textContent = styleString;
    iframeDoc.head.appendChild(styleEl);
  } catch (e) {
    console.warn("CSS样式调整失败 / Style adjustment failed:", e);
  }
}

function showStyledIframeModal(initialContent) {
  const existing = document.getElementById("memo-custom-modal");
  if (existing) existing.remove();

  const modalOverlay = document.createElement("div");
  modalOverlay.id = "memo-custom-modal";
  modalOverlay.innerHTML = `
    <div class="memo-modal-backdrop"></div>
    <div class="memo-modal-container">
      <div class="memo-modal-content-wrapper">${initialContent}</div>
      <button class="memo-modal-close">✕</button>
    </div>
  `;

  const closeBox = () => modalOverlay.remove();
  modalOverlay.querySelector(".memo-modal-backdrop").addEventListener("click", closeBox);
  modalOverlay.querySelector(".memo-modal-close").addEventListener("click", closeBox);

  const escHandler = (e) => { if(e.key === 'Escape') closeBox(); document.removeEventListener('keydown', escHandler); };
  document.addEventListener('keydown', escHandler);

  document.body.appendChild(modalOverlay);
}

function updateStyledModalContent(html) {
  const wrapper = document.querySelector("#memo-custom-modal .memo-modal-content-wrapper");
  if (wrapper) { wrapper.innerHTML = html; }
}

Here is the preview.

[rawlkian]

I've optimized the code. The memos list is now cached to avoid repeated data fetching during each preview. Data will only be re-fetched when it falls outside the cache range. Notes you browse are automatically added to the cache. Errors will rarely occur except when jumping directly without prior browsing.

(function() {
  if (window.location.pathname.startsWith('/setting')) return;

  const CACHE_KEY = "memos_timestamp_uid_vault";
  const originalFetch = window.fetch;

  let memoryFallbackCache = {};
  let isLocalStorageAvailable = false;

  try {
    const testKey = "__memos_storage_test__";
    localStorage.setItem(testKey, testKey);
    localStorage.removeItem(testKey);
    isLocalStorageAvailable = true; 
  } catch (e) {
    console.warn("⚠️ 处于 HTTP 或受限环境，本地缓存已被浏览器禁用。降级为内存缓存模式。");
    isLocalStorageAvailable = false; 
  }

  function getSafeCache() {
    if (isLocalStorageAvailable) {
      try {
        const data = localStorage.getItem(CACHE_KEY);
        return data ? JSON.parse(data) : {};
      } catch (e) {
        return {};
      }
    } else {
      return memoryFallbackCache;
    }
  }

  function saveSafeCache(cacheObj) {
    if (isLocalStorageAvailable) {
      try {
        localStorage.setItem(CACHE_KEY, JSON.stringify(cacheObj));
      } catch (e) {}
    } else {
      memoryFallbackCache = cacheObj;
    }
  }

  function populateCache(memosArray) {
    if (!memosArray || memosArray.length === 0) return;
    const currentCache = getSafeCache();
    let hasNew = false;

    memosArray.forEach(memo => {
      if (memo.name && memo.createTime) {
        const uid = memo.name.split('/').pop();
        const standardizedTime = new Date(memo.createTime).toISOString();
        if (currentCache[standardizedTime] !== uid) {
          currentCache[standardizedTime] = uid;
          hasNew = true;
        }
      }
    });

    if (hasNew) {
      saveSafeCache(currentCache);
    }
  }

  function findUidInCache(targetIsoTime) {
    const currentCache = getSafeCache();
    if (currentCache[targetIsoTime]) {
      return currentCache[targetIsoTime];
    }
    const targetMs = new Date(targetIsoTime).getTime();
    for (let cachedIsoTime in currentCache) {
      const cachedMs = new Date(cachedIsoTime).getTime();
      if (Math.abs(targetMs - cachedMs) <= 2500) {
        return currentCache[cachedIsoTime];
      }
    }
    return null;
  }

  window.fetch = async function (...args) {
    const url = args[0] ? args[0].toString() : "";
    const options = args[1] || {};

    const response = await originalFetch.apply(this, args);

    if (url.includes('/api/v1/memos') && options.method === 'GET' && response.ok) {
      try {
        const cloneRes = response.clone();
        cloneRes.json().then(data => populateCache(data.memos));
      } catch (e) {}
    }
    return response;
  };

  document.addEventListener("click", async function (e) {
    const timeButton = e.target.closest("button.text-muted-foreground");
    if (!timeButton) return;
    const timeEl = timeButton.querySelector("relative-time");
    if (!timeEl) return;

    e.preventDefault();
    e.stopPropagation();

    const domDatetime = timeEl.getAttribute("datetime");
    const targetIsoTime = new Date(domDatetime).toISOString();

    let realUid = findUidInCache(targetIsoTime);

    if (realUid) {
      openIframeModalDirectly(realUid);
      return;
    }

    showStyledIframeModal("<div class='memo-iframe-spinner'>本地缓存未找到，正在检索历史列表中...</div>");

    try {
      let token = "";
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key.includes("memos") || key.includes("auth") || key.includes("token")) {
          try {
            const parsed = JSON.parse(localStorage.getItem(key));
            token = parsed.accessToken || parsed.token || parsed.val || token;
          } catch (err) {
            const val = localStorage.getItem(key);
            if (val && val.length > 30) token = val;
          }
        }
      }

      const headers = new Headers();
      if (token) headers.append("Authorization", `Bearer ${token}`);

      const listResponse = await originalFetch(`${window.location.origin}/api/v1/memos?pageSize=100`, {
        method: "GET",
        headers: headers
      });

      if (!listResponse.ok) throw new Error("同步笔记列表失败");
      const listData = await listResponse.json();
      const memosArray = listData.memos || [];
      
      populateCache(memosArray);
      realUid = findUidInCache(targetIsoTime);

      if (realUid) {
        openIframeModalDirectly(realUid);
      } else {
        throw new Error("该笔记在近 100 条记录中未匹配到，可能太久远了。");
      }
    } catch (err) {
      updateStyledModalContent(`<p style='padding:30px; color:#ef4444; font-size:14px; text-align:center;'>❌ 身份同步失败: ${err.message}</p>`);
    }
  }, true);

  function openIframeModalDirectly(uid) {
    const realDetailUrl = `${window.location.origin}/memos/${uid}`;
    const iframeHtml = `
      <iframe src="${realDetailUrl}" style="width:100%; height:100%; border:none; background:transparent;"
        allow="clipboard-write" id="memo-detail-iframe" onload="syncAuthAndInjectStyle(this)">
      </iframe>`;
    
    if (!document.getElementById("memo-custom-modal")) {
      showStyledIframeModal("");
    }
    updateStyledModalContent(iframeHtml);
  }
})();

function syncAuthAndInjectStyle(iframe) {
  try {
    const iframeWindow = iframe.contentWindow;
    const iframeDoc = iframe.contentDocument || iframeWindow.document;
    if (!iframeDoc || !iframeWindow) return;

    try {
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        iframeWindow.localStorage.setItem(key, localStorage.getItem(key));
      }
    } catch (secErr) {
      console.warn("受限于安全策略:", secErr);
    }
    
    const styleString = `
      aside.sidebar, .sidebar-wrapper, [class*="sidebar"] { display: none !important; width: 0 !important; opacity: 0 !important; visibility: hidden !important; }
      header, .header-wrapper, [class*="header"] { display: none !important; }
      main, .main-wrapper, [class*="main-content"] { padding-left: 14px !important; padding-right: 14px !important; margin: 0 auto !important; width: 100% !important; max-width: 100% !important; left: 0 !important; transition: none !important; }
      main > .w-full { max-width: 100% !important; width: 100% !important; }
      main .py-4 { padding-top: 10px !important; }
    `;
    const styleEl = iframeDoc.createElement('style');
    styleEl.textContent = styleString;
    iframeDoc.head.appendChild(styleEl);
  } catch (e) {
    console.warn("样式调整受阻:", e);
  }
}

function showStyledIframeModal(initialContent) {
  const existing = document.getElementById("memo-custom-modal");
  if (existing) existing.remove();
  const modalOverlay = document.createElement("div");
  modalOverlay.id = "memo-custom-modal";
  modalOverlay.innerHTML = `
    <div class="memo-modal-backdrop"></div>
    <div class="memo-modal-container">
      <div class="memo-modal-content-wrapper">${initialContent}</div>
      <button class="memo-modal-close">✕</button>
    </div>`;
  const closeBox = () => modalOverlay.remove();
  modalOverlay.querySelector(".memo-modal-backdrop").addEventListener("click", closeBox);
  modalOverlay.querySelector(".memo-modal-close").addEventListener("click", closeBox);
  const escHandler = (e) => { if (e.key === 'Escape') closeBox(); document.removeEventListener('keydown', escHandler); };
  document.addEventListener('keydown', escHandler);
  document.body.appendChild(modalOverlay);
}

function updateStyledModalContent(html) {
  const wrapper = document.querySelector("#memo-custom-modal .memo-modal-content-wrapper");
  if (wrapper) wrapper.innerHTML = html;
}