如何将DOM节点指针从页面传输到内容脚本

我已将内容脚本和脚本插入到页面中进行扩展。注入的脚本引用了一些DOM节点，我想将它传递给内容脚本。我知道注入的脚本和内容脚本存在于不同的上下文中，但它们共享DOM，因此它必须是可能的。如何将DOM节点指针从页面传输到内容脚本

理想的每个DOM节点将有唯一的ID，这样我就可以得到一个，通过邮件发送给内容脚本，然后通过这个ID检索DOM节点。但据我所知，没有这样的ID。

我目前的解决方案是发送完整的节点路径，像root/child#1/child#10/...。

有没有更有效的解决方案？

2013-08-22 kriomant

你可以派遣一个冒泡事件，并使用event.target属性来获取节点的参考：

// content script 
var myEventName = 'whatever' + Math.random(); // Unpredictable, avoid conflicts 
document.addEventListener(myEventName, function(event) { 
    event.stopPropagation(); // No need to bubble further 
    var element = event.target; 
    // ... rest of your code 
}, true); // <-- Get event at capture phase 

// Inject the injected script 
var script = document.createElement('script'); 
script.textContent = '(' + function(myEventName) { 
    function sendElementToContentScript(element) { 
     var event = new CustomEvent(myEventName, { bubbles: true }); 
     element.dispatchEvent(event); 
    } 
    // ... rest of your code, e.g. sendElementToContentScript(document.body); 
} + ')("' + myEventName + '");'; 
(document.head||document.documentElement).appendChild(script); 
script.parentNode.removeChild(script);

如果你要传递更多的信息与事件，设置event.detail属性：

// set 
var event = new CustomEvent(myEventName, { 
    bubbles: true, 
    detail: 'any serializable type' 
}); 

// read (in event listener 
console.log(event.detail);

欲了解更多信息，请参阅CustomEvent（MDN）和Building a Chrome Extension - Inject code in a page using a Content script（对于那些不熟悉脚本注入技术的人）。

来源

2013-08-22 07:27:05

巧妙！它的工作原理，谢谢！ – kriomant

如何将DOM节点指针从页面传输到内容脚本

回答

相关问题