Safari扩展开发：页面滚动后如何捕获顶部区域截图？

方案一：临时滚动页面后恢复（简单易上手） #

这种思路是先把页面滚到顶部，截完图再滚回去，缺点是可能会有轻微页面跳动，但实现最直接：

1. 编写Content Script（注入到目标页面） #

// 接收来自后台脚本的消息
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  switch (message.action) {
    case 'getScroll':
      sendResponse({
        top: document.documentElement.scrollTop || document.body.scrollTop,
        left: document.documentElement.scrollLeft || document.body.scrollLeft
      });
      break;
    case 'scrollToTop':
      window.scrollTo(0, 0);
      sendResponse(true);
      break;
    case 'restoreScroll':
      window.scrollTo(message.left, message.top);
      sendResponse(true);
      break;
  }
});

2. 编写Background Script #

async function captureTopArea() {
  const [activeTab] = await browser.tabs.query({active: true, currentWindow: true});
  if (!activeTab) return;

  // 记录当前滚动位置
  const scrollPos = await browser.tabs.sendMessage(activeTab.id, {action: 'getScroll'});
  
  // 滚动到页面顶部
  await browser.tabs.sendMessage(activeTab.id, {action: 'scrollToTop'});
  
  // 给页面留渲染时间（可选，根据页面复杂度调整延迟）
  await new Promise(resolve => setTimeout(resolve, 100));
  
  // 捕获当前可见区域（此时为顶部区域）
  const screenshot = await browser.tabs.captureVisibleTab(activeTab.windowId, {format: 'png'});
  
  // 恢复之前的滚动位置
  await browser.tabs.sendMessage(activeTab.id, {action: 'restoreScroll', ...scrollPos});
  
  return screenshot;
}

方案二：用Canvas绘制指定顶部区域（无页面跳动） #

如果不想让页面滚动，直接在页面内用Canvas绘制顶部区域，体验更流畅，但要注意跨域iframe的限制：

1. 编写Content Script #

async function captureTopCanvas(captureHeight = 800) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // 设置画布尺寸为要捕获的顶部区域大小
  canvas.width = document.documentElement.clientWidth;
  canvas.height = captureHeight;
  
  // 直接绘制页面顶部区域，window作为绘制源可包含视口外内容
  ctx.drawImage(window, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
  
  // 转成图片URL返回
  return canvas.toDataURL('image/png');
}

// 监听后台的捕获请求
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'captureTop') {
    captureTopCanvas(message.height).then(sendResponse);
    return true; // 标记为异步响应
  }
});

2. 编写Background Script #

async function captureTopArea() {
  const [activeTab] = await browser.tabs.query({active: true, currentWindow: true});
  if (!activeTab) return;
  
  // 调用content script的捕获方法，指定要截的顶部高度（比如800px）
  const screenshot = await browser.tabs.sendMessage(activeTab.id, {
    action: 'captureTop',
    height: 800
  });
  
  return screenshot;
}

必配权限（manifest.json） #

不管用哪种方案，都要在manifest.json里配置好权限和content script：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

注意点 #

• 方案二中，如果页面包含跨域iframe，Canvas会被污染，无法生成图片URL，这种情况下建议用方案一
• Safari 14及以上才支持标准WebExtensions API，确保你的扩展基于这个规范开发

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