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

Question

I\'m developing a chrome extension to open links from different columns to their assigned tab. Using Google apps script API to create a context of the sheet inside

Answer 1

Because the dom element is changing, when you listen here, the dom element will not be useful after the next update.

The solution is to use DOMSubtreeModified.

Below is my solution:

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);
  })
})

Now you can send oldHref to your extension and then operate from the extension.

It should be noted that this will trigger a CSP error, but it doesn't matter, this error will not affect the entire page and your extension.

As shown: