| <!DOCTYPE HTML> |
| <html id="root"> |
| <head> |
| <meta charset="utf-8"> |
| <title jscontent="title"></title> |
| <script type="text/javascript"> |
| /** |
| * This variable structure is here to document the structure that the template |
| * expects to correctly populate the page. |
| */ |
| var extensionDataFormat = { |
| "extensions": [ |
| { |
| "name": "Extension Name", |
| "description": "Extension long format description", |
| "version": "1.0.231", |
| "content_scripts": [ |
| { |
| "js": ["script1_file1.js", "script1_file2.js"], |
| "css": ["script1_file1.css", "script1_file2.css"], |
| "matches": ["http://*/*", "http://other.com/*"] |
| }, |
| { |
| "js": ["script2_file1.js", "script2_file2.js"], |
| "css": ["script2_file1.css", "script2_file2.css"], |
| "matches": ["http://*/*", "http://other.com/*"] |
| } |
| ] |
| }, |
| { |
| "name": "Extension Name", |
| "description": "Extension long format description", |
| "version": "1.0.231", |
| "content_scripts": [ |
| { |
| "js": ["script1_file1.js", "script1_file2.js"], |
| "css": ["script1_file1.css", "script1_file2.css"], |
| "matches": ["http://*/*", "http://other.com/*"] |
| }, |
| { |
| "js": ["script2_file1.js", "script2_file2.js"], |
| "css": ["script2_file1.css", "script2_file2.css"], |
| "matches": ["http://*/*", "http://other.com/*"] |
| } |
| ] |
| } |
| ], |
| "errors": [ |
| "something failed to happen", |
| "something else failed to happen" |
| ] |
| }; |
| |
| /** |
| * Takes the |extensionsData| input argument which represents data about the |
| * currently installed/running extensions and populates the html jstemplate with |
| * that data. It expects an object structure like the above. |
| * @param {Object} extensionsData Detailed info about installed extensions |
| */ |
| function showExtensionsData(extensionsData) { |
| // This is the javascript code that processes the template: |
| var input = new JsExprContext(extensionsData); |
| var output = document.getElementById('extensionTemplate'); |
| jstProcess(input, output); |
| } |
| |
| /* |
| * Asks the C++ ExtensionDOMHandler to inspect the installed extensions and |
| * return detailed data about the configuration. The ExtensionDOMHandler |
| * should reply to returnExtensionsData() (below). |
| */ |
| function requestExtensionsData() { |
| chrome.send("requestExtensionsData", []); |
| } |
| function returnExtensionsData(extensionsData) { |
| showExtensionsData(extensionsData); |
| |
| // We are currently hiding the body because the first call to jstProcess() to |
| // insert localized strings happens prior to this call which runs during the |
| // body.onload event, causes a flickering. |
| document.getElementById('body-container').style.display = "inline"; |
| } |
| </script> |
| <style type="text/css"> |
| body { |
| background-color: Window; |
| color: WindowText; |
| font: message-box; |
| } |
| |
| div#outside { |
| margin-left: 5%; |
| margin-right: 5%; |
| text-align: justify; |
| width: 90%; |
| } |
| |
| div#installed-extensions { |
| font-size: xx-large; |
| font-weight: bold; |
| text-align: center; |
| } |
| |
| div.extension-name { |
| font-size: large; |
| font-weight: bold; |
| margin-top: 2em; |
| margin-bottom: 1em; |
| text-align: left; |
| } |
| |
| dl { |
| margin: 0px 0px 3px 0px; |
| } |
| |
| table { |
| background-color: Window; |
| border: 1px solid ThreeDShadow; |
| border-spacing: 0px; |
| color: WindowText; |
| font: message-box; |
| margin-bottom: 20px; |
| text-align: left; |
| width: 100%; |
| } |
| |
| th { |
| background-color: Highlight; |
| color: HighlightText; |
| text-align: center; |
| } |
| |
| th + th, |
| td + td { |
| border-left: 1px dotted ThreeDShadow; |
| } |
| |
| td { |
| border-top: 1px dotted ThreeDShadow; |
| text-align: left; |
| } |
| |
| th, td { |
| padding: 3px; |
| } |
| |
| th.type, th.suff { |
| width: 20%; |
| } |
| |
| th.desc { |
| width: 50%; |
| } |
| |
| th.enabled { |
| width: 10%; |
| } |
| |
| #error-box { |
| background-color:#D8D8D8; |
| margin-top: 8px; |
| padding: 8px; |
| width: 100%; |
| } |
| #error-log { |
| color: #B00000; |
| font-weight: bold; |
| } |
| .error { |
| font-style:italic; |
| } |
| </style> |
| </head> |
| <body onload="requestExtensionsData();"> |
| <div id="body-container" style="display:none;"> |
| <div id="outside"> |
| <div id="installed-extensions">Installed Extensions</div> |
| <div id="extensionTemplate"> |
| |
| <div id="error-box" jsdisplay="errors.length > 0"> |
| <div id="error-log">Errors</div> |
| <div class="error" jsselect="errors" jscontent="$this"> |
| Error Detail</div> |
| </div> |
| |
| <div class="extension-name" jsdisplay="extensions.length === 0"> |
| No Extensions Installed</div> |
| |
| <div jsdisplay="extensions.length > 0"> |
| <div class="extension" jsselect="extensions"> |
| <div class="extension-name" jscontent="name"> |
| sExtension Name</div> |
| <dl> |
| <dd> |
| <span jscontent="description">Extension Description</span> |
| </dd> |
| <dd>Version: <span jscontent="version">x.x.x.x</span></dd> |
| </dl> |
| |
| <table jsselect="content_scripts"> |
| <thead> |
| <tr><th colspan="2">Content Script</th></tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>URL Match Patterns</td> |
| <td> |
| <span jsselect="matches" |
| jscontent="(($index > 0) ? ', ' : '') + $this"> |
| </span> |
| </td> |
| </tr> |
| <tr> |
| <td>CSS Files</td> |
| <td> |
| <span jsselect="css" |
| jscontent="(($index > 0) ? ', ' : '') + $this"> |
| </span> |
| </td> |
| </tr> |
| <tr> |
| <td>JavaScript Files</td> |
| <td> |
| <span jsselect="js" |
| jscontent="(($index > 0) ? ', ' : '') + $this"> |
| </span> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |
