开发Chrome扩展：如何仅通过URL获取网站截图或Logo？

一、网站Logo获取 #

1. 标准路径快速获取 #

多数网站会将Logo放在通用路径，直接构造请求尝试：

function fetchSiteLogo(url) {
  const domain = new URL(url).hostname;
  const candidateUrls = [
    `https://${domain}/favicon.ico`,
    `https://${domain}/apple-touch-icon.png`,
    `https://${domain}/apple-touch-icon-precomposed.png`
  ];

  return new Promise(resolve => {
    const tryUrl = (index) => {
      if (index >= candidateUrls.length) return resolve(null);
      const img = new Image();
      img.onload = () => resolve(candidateUrls[index]);
      img.onerror = () => tryUrl(index + 1);
      img.src = candidateUrls[index];
    };
    tryUrl(0);
  });
}

2. 页面注入脚本提取 #

如果标准路径无Logo，通过注入脚本解析页面<link>标签：

// 需确保已获取目标标签页的tabId
chrome.tabs.executeScript(tabId, {
  code: `
    const iconLinks = document.querySelectorAll('link[rel*="icon"], link[rel="apple-touch-icon"]');
    for (const link of iconLinks) {
      if (link.href) return link.href;
    }
    return null;
  `
}, (results) => {
  const logoUrl = results[0];
  // 处理获取到的Logo链接
});

需在manifest.json中声明tabs权限。

二、网站截图实现 #

1. 活跃标签页截图 #

使用chrome.tabs.captureVisibleTab直接获取当前活跃标签截图：

chrome.tabs.captureVisibleTab(null, { format: 'png' }, (dataUrl) => {
  // dataUrl为Base64编码的截图，可直接赋值给img标签src
  document.getElementById('screenshot-img').src = dataUrl;
});

需在manifest.json中声明activeTab权限。

2. 非活跃标签页无跳转截图 #

通过chrome.debuggerAPI调用调试协议实现无界面截图：

async function captureInactiveTab(tabId) {
  await chrome.debugger.attach({ tabId }, '1.3');
  await chrome.debugger.sendCommand({ tabId }, 'Page.enable');
  const { data } = await chrome.debugger.sendCommand({ tabId }, 'Page.captureScreenshot', { format: 'png' });
  await chrome.debugger.detach({ tabId });
  return `data:image/png;base64,${data}`;
}

需在manifest.json中声明debugger权限，且用户需授权调试权限。

三、页面预览优化（替代iframe） #

针对iframe缩放问题，用CSS缩放+容器裁剪解决：

.preview-wrapper {
  width: 320px;
  height: 240px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.preview-wrapper iframe {
  width: 1920px;
  height: 1080px;
  transform: scale(0.1667);
  transform-origin: top left;
  border: none;
}

通过调整transform: scale()的数值，适配不同尺寸的容器，同时利用overflow: hidden裁剪多余内容，模拟新标签页的预览效果。

内容的提问来源于stack exchange，提问作者Zvikomborero Masike