将事件从 Google 电子表格发送到 Chrome 扩展程序

Question

我以前有一个 Google 电子表格，可以将带有参数的事件发送到我的 Google Chrome 扩展程序。这有点麻烦，但我的电子表格中的单元格有这样的东西 -

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

单击此链接将编辑当前选项卡的 URL，在我的 Chrome ext 中，我的 background.js 文件中有类似的内容 -

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

这种方法在几年内运行良好，但最近 Google 一定已经开始阻止电子表格中的 URL 操作，这破坏了我所采用的消息传递技巧。我尝试使用内容脚本在电子表格中的

=HYPERLINK()

输出上放置一个事件侦听器，但 Google Spreadsheet 将整个 DOM 输出到画布上，因此我无法向下钻取并找到超链接元素。

有人知道针对我的用例有更好的解决方法吗？

Answer 1

超链接容器只有在您将鼠标悬停/单击相关单元格时才会加载，当您在工作表之间切换时也会删除/添加超链接容器。

因此，使用 MutationObserver 和 Navigation API 应该可以工作：

function main(){
    function hyperlinkCallback(e){
        const data = Object.fromEntries(new URLSearchParams(e.currentTarget.hash));
        console.log(data);
    }

    const container = document.querySelector('div[id$="static-overlay-container"]');
    const config = {attributes: false, childList: true, subtree: true };

    new MutationObserver((mutations, observer) => {
        const hyperlink = container.querySelector('a#docs-linkbubble-link-text');
        if (!hyperlink) return;

        observer.disconnect();
        hyperlink.addEventListener('click', hyperlinkCallback);

    }).observe(container, config);

}

window.addEventListener('load', () => {
    main();
    window.navigation.addEventListener('navigatesuccess', main);
})