phillipskevin/0-readme.md

## 0-readme.md

      
    Raw
  

              0-readme.md
            
          
    Description

This gist shows two techniques for (simultaneously) accessing the DOM and the window from a Chrome extension
solution 1: eval aka the easy way

You can run arbitrary code in the page using chrome.devtools.inspectedWindow.eval( ... )
This solution is shown in the files below prefixed with 1-.
This will work at any time - even when you're stopped at a breakpoint in the debugger.
The only limitations are

it has to be synchronous
it is bound to cross-origin policies. For example, you can't read something like return window.frames[0].my_global if frames[0] is cross-origin.
return value is serialized

solution 2: message passing

The more complicated option is to inject a script into the pages/frames you want to read data from and use message passing to pass that data back to your extension.
This is shown in the files below prefixed with 2-.
Limitations of this solution

it's complicated
the content-script and injected-script cannot run while at a breakpoint


## 1-index.html
<!doctype html>
<script src="index.js"></script>

## 1-index.js
chrome.devtools.inspectedWindow.eval(
    // you can do more complicated things by stringifying IIFEs like "(function(){ /*do whatever you want here*/ }())"
    "document.location.href",
    function(result, isException) {
        console.log("result", result);
    }
);

## 1-manifest.json
{
    "manifest_version": 2,
    "name": "Simple Example Extension",
    "version": "0.0.0",
    "devtools_page": "index.html"
}

## 2-background.js
/*
 * executed by: manifest - once
 * has access to DOM:
 * has access to `window`:
 * has access to `$0`:
 * an run while debugger is paused:
 * communication:
 *   -
 *   -
 */
chrome.runtime.onConnect.addListener(function(port) {
    port.onMessage.addListener(function(msg, port) {
        chrome.runtime.sendMessage(msg);
    });
});

## 2-content-script.js
/*
 * executed by: manifest - once per frame
 * has access to DOM:
 * has access to `window`:
 * has access to `$0`:
 * an run while debugger is paused:
 * communication:
 *   -
 *   -
 */
var port = chrome.runtime.connect();

document.addEventListener("__msg-from-injected-script__", function(response) {
    port.postMessage(response.detail);
});

var s = document.createElement("script");
s.src = chrome.extension.getURL("injected-script.js");
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);

## 2-index.html
<!doctype html>
<script src="index.js"></script>

## 2-index.js
/*
 * executed by:
 * has access to DOM:
 * has access to `window`:
 * has access to `$0`:
 * an run while debugger is paused:
 * communication:
 *   -
 *   -
 */
chrome.runtime.onMessage.addListener(function(result, sender) {
    console.log("result", result);
});

## 2-injected-script.js
/*
 * executed by:
 * has access to DOM:
 * has access to `window`:
 * has access to `$0`:
 * communication:
 *   -
 *   -
 */
var customEvent = new CustomEvent("__msg-from-injected-script__", {
	detail: document.location.href
});

document.dispatchEvent(customEvent);

## 2-manifest.json
{

    "manifest_version": 2,
    "name": "Complex Example Extension",
    "version": "0.0.0",
    "devtools_page": "index.html",
    "background": {
        "scripts": [ "background.js" ]
    },
    "content_scripts": [ {
        "all_frames": true,
        "js": [ "content-script.js" ],
        "matches": [ "*://*/*" ]
    } ],
    "web_accessible_resources": [
        "injected-script.js"
    ]
}
	chrome.devtools.inspectedWindow.eval(
	// you can do more complicated things by stringifying IIFEs like "(function(){ /do whatever you want here/ }())"
	"document.location.href",
	function(result, isException) {
	console.log("result", result);
	}
	);
	{
	"manifest_version": 2,
	"name": "Simple Example Extension",
	"version": "0.0.0",
	"devtools_page": "index.html"
	}
	/*
	* executed by: manifest - once
	* has access to DOM:
	* has access to `window`:
	* has access to `$0`:
	* an run while debugger is paused:
	* communication:
	* -
	* -
	*/
	chrome.runtime.onConnect.addListener(function(port) {
	port.onMessage.addListener(function(msg, port) {
	chrome.runtime.sendMessage(msg);
	});
	});
	/*
	* executed by: manifest - once per frame
	* has access to DOM:
	* has access to `window`:
	* has access to `$0`:
	* an run while debugger is paused:
	* communication:
	* -
	* -
	*/
	var port = chrome.runtime.connect();

	document.addEventListener("__msg-from-injected-script__", function(response) {
	port.postMessage(response.detail);
	});

	var s = document.createElement("script");
	s.src = chrome.extension.getURL("injected-script.js");
	s.onload = function() {
	this.remove();
	};
	(document.head \|\| document.documentElement).appendChild(s);
	/*
	* executed by:
	* has access to DOM:
	* has access to `window`:
	* has access to `$0`:
	* an run while debugger is paused:
	* communication:
	* -
	* -
	*/
	chrome.runtime.onMessage.addListener(function(result, sender) {
	console.log("result", result);
	});
	{

	"manifest_version": 2,
	"name": "Complex Example Extension",
	"version": "0.0.0",
	"devtools_page": "index.html",
	"background": {
	"scripts": [ "background.js" ]
	},
	"content_scripts": [ {
	"all_frames": true,
	"js": [ "content-script.js" ],
	"matches": [ ":///*" ]
	} ],
	"web_accessible_resources": [
	"injected-script.js"
	]
	}