chrome-extension/.history/entrypoints/content_20250812164814.ts

export default defineContentScript({
  matches: ["<all_urls>"],

  main(ctx) {
    // 辅助函数：提取背景图片URL
    const extractBackgroundUrl = (element: Element): string | null => {
      const computedStyle = window.getComputedStyle(element);
      const backgroundImage = computedStyle.backgroundImage;

      if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
        // 处理包含转义字符的URL
        const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
        if (urlMatch && urlMatch[1]) {
          // 解码HTML实体
          let url = urlMatch[1];
          const textarea = document.createElement('textarea');
          textarea.innerHTML = url;
          return textarea.value;
        }
      }

      return null;
    };

    // 监听来自popup的消息
    const handleMessage = (request: any, sender: any, sendResponse: any) => {
      console.log("Received message:", request);

      if (request.action === "getTbodyData") {
        console.log(document.querySelectorAll('table'), "tables found");
        // 获取所有tbody中的数据，包括背景图片
        const tables = Array.from(document.querySelectorAll('table')).map((table, tableIndex) => {
          const tbodies = Array.from(table.querySelectorAll('tbody'));

          return tbodies.map(tbody => {
            const rows = Array.from(tbody.querySelectorAll('tr'));

            return rows.map((row, rowIndex) => {
              const cells = Array.from(row.querySelectorAll('td, th'));
              return cells.map((cell, cellIndex) => {
                // 获取单元格文本内容
                const textContent = cell.textContent?.trim() || '';

                // 查找单元格内所有带有背景图片的div元素
                const divsWithBackground = Array.from(cell.querySelectorAll('div[style*="background-image"]'))
                  .map((div, divIndex) => {
                    const backgroundUrl = extractBackgroundUrl(div);
                    if (backgroundUrl) {
                      return {
                        url: backgroundUrl,
                        className: div.className || '',
                        style: div.getAttribute('style') || ''
                      };
                    }
                    return null;
                  })
                  .filter(item => item !== null);

                // 如果找到带背景图片的div，返回包含这些信息的对象
                if (divsWithBackground.length > 0) {
                  return {
                    text: textContent,
                    backgroundImages: divsWithBackground
                  };
                }

                // 检查单元格本身是否有背景图片
                const cellBackgroundUrl = extractBackgroundUrl(cell);
                if (cellBackgroundUrl) {
                  return {
                    text: textContent,
                    cellBackgroundUrl: cellBackgroundUrl
                  };
                }

                // 否则返回文本内容
                return textContent;
              });
            });
          }).flat();
        }).flat();

        // 过滤掉空表格
        const nonEmptyTables = tables.filter(table => table.length > 0);

        sendResponse({ tables: nonEmptyTables });
        return true; // 保持消息通道开放
      }

      if (request.action === "getBackgroundImages") {
        // 获取所有带有background-image的元素
        const allElements = Array.from(document.querySelectorAll('*'));
        const backgroundImages: Array<{ url: string, element: string, class: string, id: string }> = [];

        allElements.forEach(element => {
          const computedStyle = window.getComputedStyle(element);
          const backgroundImage = computedStyle.backgroundImage;

          // 检查是否有background-image
          if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
            // 提取URL
            const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
            if (urlMatch && urlMatch[1]) {
              // 解码HTML实体
              const textarea = document.createElement('textarea');
              textarea.innerHTML = urlMatch[1];
              const decodedUrl = textarea.value;

              backgroundImages.push({
                url: decodedUrl,
                element: element.tagName.toLowerCase(),
                class: element.className || '',
                id: element.id || ''
              });
            }
          }
        });

        sendResponse({ backgroundImages });
        return true; // 保持消息通道开放
      }
    };

    // 添加消息监听器
    browser.runtime.onMessage.addListener(handleMessage);

    // 清理函数
    ctx.onInvalidated(() => {
      browser.runtime.onMessage.removeListener(handleMessage);
    });
  }
});