1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<!DOCTYPE HTML>
<html id="root">
<head>
<meta charset="utf-8">
<title jscontent="title"></title>
<script type="text/javascript">
// TODO(rafaelw): Remove. This is stub data. The idea is that the C++ will
// populate a similar json structure and hand it to this page with real data
// from the extensions system
var testExtensionData = [
{
"name": "Dummy Extension",
"description": "Does some extremely cool stuff that I won't ever bother " +
"explaining, because it's just that cool.",
"version": "1.0.231",
"content_scripts": [
{
"js": ["file1.js", "file2.js"],
"matches": ["http://*/*", "http://other.com/*"]
},
{
"js": ["file1.js", "file2.js"],
"matches": ["http://*/*", "http://other.com/*"]
},
{
"js": ["file1.js", "file2.js"],
"matches": ["http://*/*", "http://other.com/*"]
},
],
},
{
"name": "PlaceHolder Extension",
"description": "",
"version": "1.0.231",
"content_scripts": [],
}
];
/**
* Takes the |extensionsData| input argument which represents data about the
* currently installed/running extensions and populates the html jstemplate with
* that data
* @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);
}
</script>
<style type="text/css">
h1 {
text-align: center;
}
.extension{
padding: 8px;
}
.scriptMatches {
padding: 4px;
font-size: 12px;
}
</style>
</head>
<body onload="showExtensionsData(testExtensionData);">
<h1>Installed Extensions</h1>
<div id="extensionTemplate">
<div class="extension" jsselect="$this">
<div jscontent="name">Extension Name</div>
<div jscontent="description">Extension Description</div>
<div>Version: <span jscontent="version">x.x.x.x</span></div>
<div class="scriptMatches" jsselect="content_scripts">
<div>
<span jsselect="js"
jscontent="(($index > 0) ? ' ' : '') + $this">
</span>
</div>
<div>
<span jsselect="matches"
jscontent="(($index > 0) ? ' ' : '') + $this">
</span>
</div>
</div>
</div>
</body>
</html>
|
