0

コンテンツ スクリプトとスクリプトがページに挿入された拡張機能があります。挿入されたスクリプトにはいくつかの DOM ノードへの参照があり、それをコンテンツ スクリプトに渡したいと考えています。インジェクトされたスクリプトとコンテンツ スクリプトが異なるコンテキストに存在することはわかっていますが、それらは DOM を共有しているため、可能である必要があります。

理想的には、各 DOM ノードには一意の ID があるため、ID を取得し、メッセージを介してコンテンツ スクリプトに送信し、この ID で DOM ノードを取得できます。しかし、私の知る限りそのようなIDはありません。

私の現在の解決策は、のような完全なノードパスを送信することroot/child#1/child#10/...です。

より効果的な解決策はありますか？

4

1 に答える 1

2

バブリング イベントをディスパッチし、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) および「 Chrome 拡張機能の構築 - コンテンツ スクリプトを使用してページにコードを挿入する」 (スクリプト インジェクション手法に慣れていない人向け) を参照してください。

于 2013-08-22T07:27:05.423 に答える