|
@@ -15,6 +15,8 @@ class SidebarManager {
|
|
|
this.sidebarId = SidebarManager.CONFIG.SIDEBAR_ID;
|
|
|
this.wrapperId = SidebarManager.CONFIG.WRAPPER_ID;
|
|
|
this.isOpen = false;
|
|
|
+ this.currentUrl = window.location.href;
|
|
|
+ this.currentTitle = document.title;
|
|
|
this.init();
|
|
|
}
|
|
|
|
|
@@ -58,12 +60,29 @@ class SidebarManager {
|
|
|
this.checkAndRestoreState();
|
|
|
});
|
|
|
|
|
|
+ // 监听标题变化
|
|
|
+ const titleObserver = new MutationObserver(() => {
|
|
|
+ if (document.title !== this.currentTitle) {
|
|
|
+ this.currentTitle = document.title;
|
|
|
+ this.updatePageInfo();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ titleObserver.observe(
|
|
|
+ document.querySelector("head > title") || document.head,
|
|
|
+ {
|
|
|
+ subtree: true,
|
|
|
+ characterData: true,
|
|
|
+ childList: true,
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
// 监听页面 URL 变化
|
|
|
- let lastUrl = location.href;
|
|
|
new MutationObserver(() => {
|
|
|
const url = location.href;
|
|
|
- if (url !== lastUrl) {
|
|
|
- lastUrl = url;
|
|
|
+ if (url !== this.currentUrl) {
|
|
|
+ this.currentUrl = url;
|
|
|
+ this.updatePageInfo();
|
|
|
this.checkAndRestoreState();
|
|
|
}
|
|
|
}).observe(document, { subtree: true, childList: true });
|
|
@@ -210,26 +229,25 @@ class SidebarManager {
|
|
|
* 发送页面信息到iframe
|
|
|
*/
|
|
|
sendPageInfo() {
|
|
|
+ this.updatePageInfo();
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 更新页面信息
|
|
|
+ */
|
|
|
+ updatePageInfo() {
|
|
|
const iframe = document.getElementById(this.sidebarId);
|
|
|
if (!iframe) return;
|
|
|
|
|
|
- // 获取页面favicon
|
|
|
- let favicon = "";
|
|
|
- const iconLink = document.querySelector('link[rel*="icon"]');
|
|
|
- if (iconLink) {
|
|
|
- favicon = iconLink.href;
|
|
|
- } else {
|
|
|
- // 如果没有找到,使用网站根目录的favicon.ico
|
|
|
- const url = new URL(window.location.href);
|
|
|
- favicon = `${url.protocol}//${url.hostname}/favicon.ico`;
|
|
|
- }
|
|
|
+ // 获取最新的favicon
|
|
|
+ const favicon = this.getFavicon();
|
|
|
|
|
|
- // 发送页面信息到iframe
|
|
|
+ // 发送更新后的页面信息
|
|
|
iframe.contentWindow.postMessage(
|
|
|
{
|
|
|
type: "PAGE_INFO",
|
|
|
pageInfo: {
|
|
|
- favicon: favicon,
|
|
|
+ favicon,
|
|
|
title: document.title,
|
|
|
url: window.location.href,
|
|
|
},
|
|
@@ -238,6 +256,31 @@ class SidebarManager {
|
|
|
);
|
|
|
}
|
|
|
|
|
|
+ /**
|
|
|
+ * 获取最新的favicon
|
|
|
+ */
|
|
|
+ getFavicon() {
|
|
|
+ // 尝试获取动态favicon
|
|
|
+ const iconLinks = Array.from(
|
|
|
+ document.querySelectorAll('link[rel*="icon"]')
|
|
|
+ );
|
|
|
+ const favicon = iconLinks
|
|
|
+ .sort((a, b) => {
|
|
|
+ // 优先使用大尺寸图标
|
|
|
+ const sizeA = parseInt(a.sizes?.value) || 0;
|
|
|
+ const sizeB = parseInt(b.sizes?.value) || 0;
|
|
|
+ return sizeB - sizeA;
|
|
|
+ })
|
|
|
+ .map((link) => link.href)
|
|
|
+ .find(Boolean);
|
|
|
+
|
|
|
+ if (favicon) return favicon;
|
|
|
+
|
|
|
+ // 如果没有找到,返回网站根目录的favicon.ico
|
|
|
+ const url = new URL(window.location.href);
|
|
|
+ return `${url.protocol}//${url.hostname}/favicon.ico`;
|
|
|
+ }
|
|
|
+
|
|
|
/**
|
|
|
* 创建侧边栏
|
|
|
*/
|