如何在Chrome扩展程序的内容脚本中将事件监听器添加到Google表格链接?

时间:2019-02-18 08:54:31

标签: javascript google-chrome google-chrome-extension google-sheets google-docs

我正在开发chrome扩展程序,以打开从不同列到其指定标签的链接。 使用 Google Apps脚本API 在chrome扩展程序内创建工作表的上下文。但是 Google Apps脚本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。

1 个答案:

答案 0 :(得分:3)

由于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错误,但没关系,此错误不会影响整个页面和您的扩展名。

如图所示:

enter image description here