Mottie/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Testing Chrome Extension

This code is meant to supplement this Stackoverflow question: http://stackoverflow.com/q/32288996/145346
To use:

Download these files into a folder.
Open up Chrome extensions: chrome://extensions/
Click on the "Developer mode" checkbox at the top
Click on "Load unpacked extension..."
Find the folder, and click ok
An ugly smiley face icon will be added to the extension list.
Click on the icon on any page to see every div get a light blue outline.

The issue with this code is that it won't open in a popup window, even though the chrome.tab.executeScript includes a matchAboutBlank option.
Use this demo: http://jsbin.com/tayuho/edit?js,output


Click on "Open popup"


Right click on the popup window header "Demo - Google Chrome" & select "Show as Tab"


Now click on the ugly smiley extension icon.


Nothing happens...


Right click on the ugly smiley extension popup and choose "Inspect Element"


In the Developer Tools window, choose "Console" and you'll see the error:

Unchecked runtime.lastError while running tabs.executeScript: Cannot access contents of url "". Extension manifest must request permission to access this host.
at Object.callback (chrome-extension://.../popup.js:8:15)


## icon.png

      
    Raw
  

              icon.png
            
          
## manifest.json
{
  "name": "Test",
  "version": "1.0.0",
  "manifest_version": 2,
  "author": "Foo",
  "description": "Bar",
  "homepage_url": "https://google.com",
  "icons": {
    "48": "icon.png"
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ],
  "web_accessible_resources": [
    "myExtension.js",
    "myExtension.css"
  ]
}

## myExtension.css
body._myExtension_code_injected div {
	outline: #0080ff 1px solid;
}

## myExtension.js
;(function(){

	window.myExtension = {
		init:  function(){
			document.querySelector('body').classList.add('_myExtension_code_injected');
			console.log( 'js injected!' );
		}
	};

})();

## popup.css
html, body {
	width: 200px;
	min-height: 100px;
	padding: 0;
	margin: 0;
}

## popup.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<link href="popup.css" rel="stylesheet">
	<script src="popup.js"></script>
</head>

<body>
	<p>Injecting css to add blue div outlines...</p>
</body>
</html>

## popup.js
chrome.windows.getCurrent( function(win) {
	chrome.tabs.query({
		'windowId': win.id,
		'active': true
	}, function(tabArray) {

		// inject css & js only on initial click
		chrome.tabs.executeScript( null, {
			code : 'document.querySelector( "body" ).classList.contains( "_myExtension_code_injected" )',
			matchAboutBlank: true
		}, function( result ) {

			if ( result && !result[0] ) {
				chrome.tabs.insertCSS( null, {
					file: 'myExtension.css',
					matchAboutBlank: true
				});

				chrome.tabs.executeScript(null, {
					file: 'myExtension.js',
					matchAboutBlank: true
				}, function(){
					chrome.tabs.executeScript(null, {
						code: 'myExtension.init();'
					});
				});
			}
		});

	});
});
	{
	"name": "Test",
	"version": "1.0.0",
	"manifest_version": 2,
	"author": "Foo",
	"description": "Bar",
	"homepage_url": "https://google.com",
	"icons": {
	"48": "icon.png"
	},
	"browser_action": {
	"default_icon": "icon.png",
	"default_popup": "popup.html"
	},
	"permissions": [
	"activeTab"
	],
	"web_accessible_resources": [
	"myExtension.js",
	"myExtension.css"
	]
	}
	body._myExtension_code_injected div {
	outline: #0080ff 1px solid;
	}
	;(function(){

	window.myExtension = {
	init: function(){
	document.querySelector('body').classList.add('_myExtension_code_injected');
	console.log( 'js injected!' );
	}
	};

	})();