如何将事件侦听器添加到 chrome 扩展内容脚本中的 google 工作表 link？

Question

我正在开发一个 chrome 扩展程序以将 link 从不同的列打开到指定的选项卡。使用 Google 应用程序脚本 API 在 chrome 扩展中创建 sheet 的上下文。但是 Google 应用程序脚本 API 是一条很长的路，我无法避免在单击 link 表单时打开和关闭选项卡 sheet.

现在我想为点击 sheet link/tooltip link. 添加一个事件监听器我已经在使用内容脚本在 sheet.

中注入面板

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

(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 link 上，我们可以单击工具提示中的 link。在那里我想防止默认并通过 chrome 消息将 Href 发送到后台 script.and 从那里我可以更新选项卡 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错误，不过没关系，这个错误不会影响整个页面和你的扩展。

如图：

如何将事件侦听器添加到 chrome 扩展内容脚本中的 google 工作表 link？

How can I add event Listener to google sheets link in chrome extension's content script?

javascript

google-chrome

google-docs

google-sheets

google-chrome-extension