chrome-extension開発で選択したタブIDとの通信を制限します

Question

クローム拡張機能の新機能です。私はチュートリアルに続き、後でextensionで遊んでいました。この拡張機能を私に迷惑をかけるものがあります。再現する

手順：

• はサイド
• で2ページ側のデベロッパーツールを開き、githubのページに記載された手順に従ってください。
• パネルの[ページを挿入してページからdevtoolsにメッセージを送る]ボタンをクリックすると、Htmlページが変更されていることがわかります。
• ページに表示されているボタンをクリックします。両方のパネルで、ボタン/テキストが変更されていることがわかります。

これを制限し、クリックされたページのボタン/テキストのみを変更するフィルターはありますか？ background.jsページのport.postMessage(message);のため、これが起こっていることがわかりました。

thisが見つかりましたが、動作させることができませんでした。

任意の助けをいただければ幸いです:)

Answer 1

通信方式は単純です：

1. あなたのデベロッパーツールパネルには、背景ページ
2. にポートを開き、背景ページは、そのポートでリッスンし、タブID - ポートマッピングのルックアップテーブルを格納する
3. バックグラウンドページはコンテンツスクリプトからのメッセージもリッスンし、上記ルックアップテーブルを使用してメッセージをchrome.runtime.onMessageがあるので

デベロッパーツール-panel.jsポートチャネルに対応する

var port = chrome.runtime.connect(); 

port.onMessage.addListener(message => { 
    $id('insertmessagebutton').innerHTML = message.content; 
}); 

$id('executescript').onclick =() => 
    runContentScript({code: "console.log('Content script executed')"}); 

$id('insertscript').onclick =() => 
    runContentScript({file: "inserted-script.js"}); 

$id('insertmessagebutton').onclick =() => { 
    runContentScript({code: "document.body.innerHTML='<button>Send to panel</button>'"}); 
    runContentScript({file: "messageback-script.js"}); 
}; 

function runContentScript(params) { 
    port.postMessage(
     Object.assign({ 
      tabId: chrome.devtools.inspectedWindow.tabId, 
     }, params) 
    ); 
} 

function $id(id) { 
    return document.getElementById(id); 
} 

background.jsは

var tabPorts = {}; 

chrome.runtime.onConnect.addListener(port => { 
    let tabId; 
    port.onMessage.addListener(message => { 
     if (!tabId) { 
      // this is a first message from devtools so let's set the tabId-port mapping 
      tabId = message.tabId; 
      tabPorts[tabId] = port; 
     } 
     if (message.code || message.file) { 
      delete message.tabId; 
      chrome.tabs.executeScript(tabId, message); 
     } 
    }); 
    port.onDisconnect.addListener(() => { 
     delete tabPorts[tabId]; 
    }); 
}); 

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { 
    const port = sender.tab && tabPorts[sender.tab.id]; 
    if (port) { 
     port.postMessage(message); 
    } 
}); 

chrome.tabs.onRemoved.addListener(tabId => { 
    delete tabPorts[tabId]; 
}); 

chrome.tabs.onReplaced.addListener((newTabId, oldTabId) => { 
    delete tabPorts[oldTabId]; 
});