如何在 chrome 扩展的内容脚本中将事件侦听器添加到谷歌表格链接？

Question

我正在开发一个 chrome 扩展程序来打开从不同列到分配的选项卡的链接。 使用 Google 应用脚本 API 在 chrome 扩展中创建工作表的上下文。但是 Google 应用脚本 API 是一条漫长的道路，我无法避免在单击链接表单时打开和关闭选项卡。

现在我想添加一个事件监听器来点击工作表链接/工具提示链接。 我已经在使用内容脚本在工作表中注入一个面板。

这是来自（内容脚本）的代码。与链接相关。

(function() {
  let sheetLinks = document.querySelectorAll('.waffle-hyperlink-tooltip-link');
  for (let i = 0; i < link.length; i++) {
    sheetLinks[i].addEventListener("click", sendHref);
  }

  function sendHref(e) {
    e.preventDefault()
    console.log('link was clicked')
  }
})()

通过将鼠标悬停在 google sheet 链接上，我们可以点击工具提示中的链接。 在那里我想阻止默认并通过 chrome 消息将 Href 发送到后台脚本。然后我可以从那里更新标签 URL。

Answer 1

因为dom元素是变化的，所以在这里听的时候，dom元素在下次更新后就没有用了。

解决方案是使用 DOMSubtreeModified。

以下是我的解决方案：

const stopURL = 'javascript:void(0)';
document.querySelector('#docs-editor-container').addEventListener('DOMSubtreeModified', event => {
  const aTags = event.path.filter(dom => dom.nodeName === 'A' && dom.className === 'waffle-hyperlink-tooltip-link');

  if (aTags.length === 0) return;

  aTags.forEach(a => {
    const oldHref = a.href;
    if (oldHref === stopURL) return;
    a.href = stopURL;
    console.log(oldHref);
  })
})

现在您可以将 oldHref 发送到您的扩展程序，然后从扩展程序进行操作。

需要注意的是，这会触发一个CSP错误，不过没关系，这个错误不会影响整个页面和你的扩展。

如图：