chrome-extension/entrypoints/content.ts

import { OptionScript } from "./content_script/OptionScript";
export default defineContentScript({
  matches: ["<all_urls>"],

  main() {
    // 辅助函数：提取背景图片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的消息
    browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
      if (request.action === "getTbodyData") {
        // 获取所有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 });
      }
      // 模拟用户重复性操作
      if (request.action === "autoSendMessages") {
        OptionScript(request, sender, sendResponse)
      }
    });
  }
});