title: Hooking Websockets from a Chrome Extension
body: <p>I'm trying to create a Chrome extension content script which can hook the WebSocket of a specific page. Currently when the page is accessed, the content script injects another script into the page like so:</p>
  
  <pre><code>    var s = document.createElement('script');
      s.src = chrome.extension.getURL('Script.js');
      s.onload = function () {
          this.remove();
      };
      (document.head || document.documentElement).appendChild(s);
  </code></pre>
  
  <p>Then my Script.js contains an addEventListener for the websockets.</p>
  
  <pre><code>Window.WebSocket.addEventListener("message",function(event){
  console.log("Websocket read");
  })
  </code></pre>
  
  <p>But when I run the extension I receive an error can not read property addEventListener of undefined. So I'm not entirely certain if that's the correct way to do it. I have verified that the script does get injected the page but how would I override or create my own listener on top of original onmessage WebSocket from the page. Is it possible?</p>