从Google表格向Chrome扩展发送事件的替代方案求助

之前在Google表格中使用HYPERLINK公式生成带参数的链接，公式示例：

=HYPERLINK(CONCATENATE("#gid=12345678&player=", ENCODEURL(C3), "&team=", D3), "chrome")

点击该链接会修改当前标签页的URL，Chrome扩展的background.js通过以下代码监听URL变化：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  if (tab.url.match(/google.com\/spreadsheets/g)) {
    console.log(tab.url);
  }
});

该方法正常运行多年，但近期Google屏蔽了表格内的URL操作，导致消息传递失效。尝试用内容脚本为HYPERLINK生成的链接添加事件监听器，但Google表格将整个DOM渲染在canvas中，无法定位到超链接元素，寻求替代方案。

方案1：Google Apps Script + 跨页面消息传递 #

在表格中编写Apps Script，通过弹窗触发页面消息，让内容脚本接收参数后传递给扩展后台：

1. 打开表格的脚本编辑器，添加触发逻辑：

function onSelectionChange(e) {
  const range = e.range;
  // 限定触发范围（根据实际表格结构调整Sheet ID和列位置）
  if (range.getSheet().getSheetId() === 12345678 && range.getColumn() === 你的链接所在列号) {
    const player = range.offset(0, C列与当前列的偏移量).getValue();
    const team = range.offset(0, D列与当前列的偏移量).getValue();
    const params = JSON.stringify({player, team});
    
    // 创建临时弹窗发送消息
    const html = HtmlService.createHtmlOutput(`
      <script>
        window.postMessage(${params}, '*');
        setTimeout(() => google.script.host.close(), 100);
      </script>
    `);
    SpreadsheetApp.getUi().showModalDialog(html, '');
  }
}

2. 内容脚本中监听消息并转发到后台：

window.addEventListener('message', (event) => {
  if (event.origin.includes('google.com') && event.data.player && event.data.team) {
    chrome.runtime.sendMessage({
      type: 'sheetParams',
      data: event.data
    });
  }
});

3. 后台脚本接收消息：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'sheetParams') {
    console.log('收到参数:', request.data);
    sendResponse({status: 'success'});
  }
});

方案2：扩展上下文菜单 + Sheets API #

给Google表格页面添加自定义右键菜单，用户点击后直接获取选中单元格的关联数据：

1. 后台脚本注册上下文菜单：

chrome.contextMenus.create({
  id: 'fetchSheetParams',
  title: '获取球员与球队信息',
  contexts: ['page'],
  documentUrlPatterns: ['*://docs.google.com/spreadsheets/*']
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  chrome.tabs.sendMessage(tab.id, {type: 'getSelectedData'}, (response) => {
    if (response?.data) {
      console.log('获取到参数:', response.data);
    }
  });
});

2. 内容脚本注入代码调用Sheets内置API：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'getSelectedData') {
    try {
      const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
      const activeRange = sheet.getActiveRange();
      const player = activeRange.offset(0, C列偏移量).getValue();
      const team = activeRange.offset(0, D列偏移量).getValue();
      sendResponse({data: {player, team}});
    } catch (err) {
      sendResponse({error: err.message});
    }
  }
});

注意：需在扩展manifest.json中配置matches: ["*://docs.google.com/spreadsheets/*"]，并设置run_at: "document_idle"。

方案3：自定义函数 + 剪贴板监听 #

用Apps Script写自定义函数，点击后将参数复制到剪贴板，扩展监听剪贴板变化获取数据：

1. 脚本编辑器添加复制函数：

function COPY_PARAMS(playerCell, teamCell) {
  const params = JSON.stringify({player: playerCell, team: teamCell});
  const html = HtmlService.createHtmlOutput(`
    <script>
      navigator.clipboard.writeText('${params}').then(() => google.script.host.close());
    </script>
  `);
  SpreadsheetApp.getUi().showModalDialog(html, '复制参数中...');
  return '已复制';
}

2. 表格单元格中调用：=COPY_PARAMS(C3, D3)，点击单元格旁的运行按钮触发复制。
3. 后台脚本监听剪贴板：

chrome.permissions.request({permissions: ['clipboardRead']}, (granted) => {
  if (granted) {
    setInterval(async () => {
      const text = await navigator.clipboard.readText();
      try {
        const params = JSON.parse(text);
        if (params.player && params.team) {
          console.log('剪贴板获取参数:', params);
          // 清空剪贴板避免重复触发
          await navigator.clipboard.writeText('');
        }
      } catch (e) {
        // 非目标格式，忽略
      }
    }, 1000);
  }
});

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