我正在开发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。
答案 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错误,但没关系,此错误不会影响整个页面和您的扩展名。
如图所示: