如何在Chrome扩展程序的内容脚本中添加事件监听器到google工作表链接？

Question

我正在开发一个chrome扩展来打开从不同列到其指定选项卡的链接.使用Google应用脚本API在Chrome扩展程序中创建工作表的上下文.但谷歌应用程序脚本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工作表链接上,我们可以点击工具提示中的链接.在那里我想阻止 - 默认并通过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错误，不过没关系，这个错误不会影响整个页面和你的扩展。

如图所示：