NV/README.markdown Secret

## README.markdown

      
    Raw
  

              README.markdown
            
          
    Chrome DevTools Extension Panel sample

Adds a button to turn on contentEditable on the inspected webpage.
Injects content script lazyly.

  
## background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
	if (request.action === 'run') {
		chrome.tabs.executeScript(request.tabId, {
			file: 'content-script.js'
		}, function() {
			console.log('content-script.js executed');
		});
	}
});

## content-script.js
document.body.contentEditable = true;

## devtools.html
<script src="devtools.js"></script>

## devtools.js
chrome.devtools.panels.create("Edit",
	"icon_32.png",
	"panel.html",
	function(panel) {
		var shown = false;
		panel.onShown.addListener(function(panelWindow) {
			if (shown) return;
			shown = true; // Run code below only once

			var startButton = panelWindow.document.getElementById('start_button');
			startButton.addEventListener('click', function() {
				chrome.runtime.sendMessage({
					action: "run",
					tabId: chrome.devtools.inspectedWindow.tabId
				});
			}, false);
		});
	}
);

## icon_32.png

      
    Raw
  

              icon_32.png
            
          
## icon_48.png

      
    Raw
  

              icon_48.png
            
          
## manifest.json
{
	"name": "Chrome DevTools Panel Extension",
	"version": "1.0",
	"manifest_version": 2,
	"description": "",
	"icons": {
		"32": "icon_32.png",
		"48": "icon_48.png"
	},
	"background": {
		"scripts": ["background.js"]
	},
	"permissions": [
		"<all_urls>"
	],
	"web_accessible_resources": [
		"content-script.js"
	],
	"devtools_page": "devtools.html"
}

## panel.css
html {
	background: #f3f3f3;
}

#start_button {
	font-size: 16px;
}

## panel.html
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="panel.css">
</head>
<body>
	<input type="button" id="start_button" value="Turn editing on">
</body>
</html>

## screenshot.png

      
    Raw
  

              screenshot.png
	chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
	if (request.action === 'run') {
	chrome.tabs.executeScript(request.tabId, {
	file: 'content-script.js'
	}, function() {
	console.log('content-script.js executed');
	});
	}
	});
	chrome.devtools.panels.create("Edit",
	"icon_32.png",
	"panel.html",
	function(panel) {
	var shown = false;
	panel.onShown.addListener(function(panelWindow) {
	if (shown) return;
	shown = true; // Run code below only once

	var startButton = panelWindow.document.getElementById('start_button');
	startButton.addEventListener('click', function() {
	chrome.runtime.sendMessage({
	action: "run",
	tabId: chrome.devtools.inspectedWindow.tabId
	});
	}, false);
	});
	}
	);
	{
	"name": "Chrome DevTools Panel Extension",
	"version": "1.0",
	"manifest_version": 2,
	"description": "",
	"icons": {
	"32": "icon_32.png",
	"48": "icon_48.png"
	},
	"background": {
	"scripts": ["background.js"]
	},
	"permissions": [
	"<all_urls>"
	],
	"web_accessible_resources": [
	"content-script.js"
	],
	"devtools_page": "devtools.html"
	}
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="panel.css">
	</head>
	<body>
	<input type="button" id="start_button" value="Turn editing on">
	</body>
	</html>