☰

Floating Screenshot Button for Facebook Posts

A floating screenshot button is added to the top-right corner of the post. When clicked, it allows users to capture and save a screenshot of the post, making it easier to share with others.

// ==UserScript==
// @name         Floating Screenshot Button for Facebook Posts
// @name:zh-TW   FaceBook 貼文懸浮截圖按鈕
// @name:zh-CN   FaceBook 贴文悬浮截图按钮
// @namespace    http://tampermonkey.net/
// @version      2.2
// @description  A floating screenshot button is added to the top-right corner of the post. When clicked, it allows users to capture and save a screenshot of the post, making it easier to share with others.
// @description:zh-TW 在貼文右上新增一個懸浮截圖按鈕，按下後可以對貼文進行截圖保存，方便與其他人分享
// @description:zh-CN 在贴文右上新增一个悬浮截图按钮，按下后可以对贴文进行截图保存，方便与其他人分享
// @author       chatgpt
// @match        https://www.facebook.com/*
// @grant        none
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/html-to-image.min.js
// @license MIT
// ==/UserScript==

(function () {
  'use strict';

  // 動態注入CSS，禁止focus時的藍框或陰影
  const style = document.createElement('style');
  style.textContent = `
    *:focus, *:focus-visible, *:focus-within {
      outline: none !important;
      box-shadow: none !important;
    }
  `;
  document.head.appendChild(style);

  let lastRun = 0;
  const debounceDelay = 1000;

  function getFbidFromPost(post) {
    const links = Array.from(post.querySelectorAll('a[href*="fbid="], a[href*="story_fbid="]'));
    for (const a of links) {
      try {
        const url = new URL(a.href);
        const fbid = url.searchParams.get('fbid') || url.searchParams.get('story_fbid');
        if (fbid) return fbid;
      } catch (e) { }
    }
    try {
      const dataFt = post.getAttribute('data-ft');
      if (dataFt) {
        const match = dataFt.match(/"top_level_post_id":"(\d+)"/);
        if (match) return match[1];
      }
    } catch (e) { }
    try {
      const url = new URL(window.location.href);
      const fbid = url.searchParams.get('fbid') || url.searchParams.get('story_fbid');
      if (fbid) return fbid;
    } catch (e) { }
    return 'unknownFBID';
  }

  const observer = new MutationObserver(() => {
    const now = Date.now();
    if (now - lastRun < debounceDelay) return;
    lastRun = now;

    document.querySelectorAll('div.x1lliihq').forEach(post => {
      if (post.dataset.sbtn === '1') return;

      let btnGroup = post.querySelector('div[role="group"]')
        || post.querySelector('div.xqcrz7y')
        || post.querySelector('div.x1qx5ct2');
      if (!btnGroup) return;

      post.dataset.sbtn = '1';
      btnGroup.style.position = 'relative';

      const btn = document.createElement('div');
      btn.textContent = '📸';
      btn.title = '截圖貼文';
      Object.assign(btn.style, {
        position: 'absolute',
        left: '-40px',
        top: '0',
        width: '32px',
        height: '32px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: '50%',
        backgroundColor: '#3A3B3C',
        color: 'white',
        cursor: 'pointer',
        zIndex: '9999',
        transition: 'background .2s',
      });

      btn.addEventListener('mouseenter', () => btn.style.backgroundColor = '#4E4F50');
      btn.addEventListener('mouseleave', () => btn.style.backgroundColor = '#3A3B3C');

      btn.addEventListener('click', async e => {
        e.stopPropagation();

        btn.textContent = '⏳';
        btn.style.pointerEvents = 'none';

        try {
          // 展開「查看更多」
          const seeMoreCandidates = post.querySelectorAll('span, a, div, button');
          let clicked = false;
          for (const el of seeMoreCandidates) {
            const text = el.innerText?.trim() || el.textContent?.trim();
            if (!text) continue;
            // 只判斷幾種明確的「查看更多」關鍵字，避免誤點含 "more" 的字
            if (text === '查看更多' || text === 'See more' || text === 'See More' || text === '…更多') {
              try {
                el.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
                clicked = true;
                console.log('已點擊查看更多：', el);
              } catch (err) {
                console.warn('點擊查看更多失敗：', err);
              }
            }
          }
          if (clicked) await new Promise(r => setTimeout(r, 1000));

          post.scrollIntoView({ behavior: 'smooth', block: 'center' });
          await new Promise(r => setTimeout(r, 500));

          const fbid = getFbidFromPost(post);
          const nowDate = new Date();
          const pad = n => n.toString().padStart(2, '0');
          const datetimeStr =
            nowDate.getFullYear().toString() +
            pad(nowDate.getMonth() + 1) +
            pad(nowDate.getDate()) + '_' +
            pad(nowDate.getHours()) + '_' +
            pad(nowDate.getMinutes()) + '_' +
            pad(nowDate.getSeconds());

          const dataUrl = await window.htmlToImage.toPng(post, {
            backgroundColor: '#1c1c1d',
            pixelRatio: 2,
            cacheBust: true,
          });

          const filename = `${fbid}_${datetimeStr}.png`;
          const link = document.createElement('a');
          link.href = dataUrl;
          link.download = filename;
          link.click();

          btn.textContent = '✅';
        } catch (err) {
          console.error('截圖錯誤：', err);
          alert('截圖失敗，請稍後再試');
          btn.textContent = '❌';
        }

        setTimeout(() => {
          btn.textContent = '📸';
          btn.style.pointerEvents = 'auto';
        }, 1000);
      });

      btnGroup.appendChild(btn);
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });
})();