Sample Extension for chrome.devtools.inspectedWindow.reload preprocessor option

chrome/common/extensions/docs/examples/api/devtools/inspectedWindow/chrome-preprocessor/Panel/PreprocessorPanel.js

Index: chrome/common/extensions/docs/examples/api/devtools/inspectedWindow/chrome-preprocessor/Panel/PreprocessorPanel.js
diff --git a/chrome/common/extensions/docs/examples/api/devtools/inspectedWindow/chrome-preprocessor/Panel/PreprocessorPanel.js b/chrome/common/extensions/docs/examples/api/devtools/inspectedWindow/chrome-preprocessor/Panel/PreprocessorPanel.js
new file mode 100644
index 0000000000000000000000000000000000000000..0c810b6c038716a0a4b885decfa65566b9f71b5e
--- /dev/null
+++ b/chrome/common/extensions/docs/examples/api/devtools/inspectedWindow/chrome-preprocessor/Panel/PreprocessorPanel.js
@@ -0,0 +1,73 @@
+// Copyright (c) 2013 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(function() {
+
+// This function is converted to a string and becomes the preprocessor
+function preprocessor(source, url, listenerName) {
+  url = url ? url : '(eval)';
+  url += listenerName ? '#' + listenerName : '';
+  var prefix = 'window.__preprocessed = window.__preprocessed || [];\n';
+  prefix += 'window.__preprocessed.push(\'' + url +'\');\n';
+  var postfix = '\n//# sourceURL=' + url + '.js\n';

[Mike West, 2013/09/04 08:54:37]

Do you need the '.js' postfix? If 'listenerName' is set, you'd end up with
'http://example.com/file.html#listener.js', which seems strange.

[johnjbarton, 2013/09/04 18:57:48]

The .js postfix helps distinguish the preprocessor result (eg .js.js) from
network inputs (eg .js). 
Of course developers can make other choices, but I think for the example it is
important to not 
confuse the two buffers.
Indeed. I changed # to _, eg 'http://example.com/file.html_listener.js'

+  return prefix + source + postfix;
+}
+
+function extractPreprocessedFiles(onExtracted) {
+  var expr = 'window.__preprocessed';
+  function onEval(files, isException) {
+    if (isException)
+      throw new Error('Eval failed for ' + expr, isException.value);
+    onExtracted(files);
+  }
+  chrome.devtools.inspectedWindow.eval(expr, onEval);
+}
+
+function reloadWithPreprocessor(injectedScript) {
+  var options = {
+    ignoreCache: true,
+    userAgent: undefined,
+    injectedScript: '(' + injectedScript  + ')',
+    preprocessingScript: '(' + preprocessor + ')'
+  };
+  chrome.devtools.inspectedWindow.reload(options);
+}
+
+function demoPreprocessor() {
+  function onLoaded() {
+    extractPreprocessedFiles(updateUI);
+  }
+  var loadMonitor = new InspectedWindow.LoadMonitor(onLoaded);
+  reloadWithPreprocessor(loadMonitor.injectedScript);
+}
+
+function listen() {
+  var reloadButton = document.querySelector('.reload-button');
+  reloadButton.addEventListener('click', demoPreprocessor);
+}
+
+window.addEventListener('load', listen);
+
+function createRow(url) {
+  function createCell(text) {

[Mike West, 2013/09/04 08:54:37]

Somewhat irrelevant to the extension's point, I know, but why use a table here?
It seems like you're really just building a list?

[johnjbarton, 2013/09/04 18:57:48]

Done.

+    var td = document.createElement('td');
+    td.textContent = text;

[Mike West, 2013/09/04 08:54:37]

Thank you for not using 'innerHTML'! :)

+    return td;
+  }
+  var tr = document.createElement('tr');
+  tr.appendChild(createCell(url));
+  return tr;
+}
+
+function updateUI(preprocessedFiles) {
+  var rowContainer = document.querySelector('.js-preprocessed-urls');
+  rowContainer.innerHTML = '';
+  preprocessedFiles.forEach(function(url) {
+    rowContainer.appendChild(createRow(url));
+  });
+}
+
+})();
+
+