Add a chrome://webapks page.

components/webapks_ui/resources/about_webapks.js

Index: components/webapks_ui/resources/about_webapks.js
diff --git a/components/webapks_ui/resources/about_webapks.js b/components/webapks_ui/resources/about_webapks.js
new file mode 100644
index 0000000000000000000000000000000000000000..12eb4193ef84d309af38454ac4f97afd08fedc74
--- /dev/null
+++ b/components/webapks_ui/resources/about_webapks.js
@@ -0,0 +1,49 @@
+// Copyright (c) 2011 The Chromium Authors. All rights reserved.

[hartmanng, 2017/01/13 15:40:22]

s/(c) 2011/2017/

[gonzalon, 2017/01/13 20:24:40]

Done.

+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * Creates and returns a text node (with |text| as content) wrapped around a <b>
+ * tag and assigning it the |className| class.
+ */
+function boldedTextNode(text, className) {

[pkotwicz, 2017/01/13 17:00:59]

Can you instead:
Call createElementWithClassName() with <span>
Bold the text via CSS

[gonzalon, 2017/01/13 20:24:40]

Done.

+  var node = document.createElement("B");
+  node.appendChild(document.createTextNode(text));

[pkotwicz, 2017/01/13 17:00:59]

Can you set the text by setting node.textContent ?

[gonzalon, 2017/01/13 20:24:40]

Done.

+  node.className = className;
+  return node;
+}
+
+/**
+ * Callback from the backend with the information of a Web APK to display.
+ * This will be called once for each web APK available on the device and each

[pkotwicz, 2017/01/13 17:00:59]

"web APK" -> WebAPK

[gonzalon, 2017/01/13 20:24:40]

Done.

+ * one will be appended at the end of the other.
+ */
+function returnWebAPKsInfo(appName, packageName, shellApkVersion, versionCode) {

[pkotwicz, 2017/01/13 17:00:59]

Can this function be called just once with the info for all of the WebAPKs.

The history page does this with history entries I think.
BrowsingHistoryHandler::OnQueryComplete()

[gonzalon, 2017/01/13 20:24:40]

From what I understood, the history page works a bit differently in the C++ <->
Java communication.

The reason I did it this way is because I can't return `WebApkInfo[]` in the
call from C++ to Java (because of JNI limitations, correct me if I'm wrong). The
only way to make this receive a list I can think of would be to store the
results of the callback somewhere (maybe the WebApkInfoCallback?) and when all
of the information is received, put in on a list and call a second callback that
calls this JS code with the list of information.

So, to summarize, WebApkInfoCallback (C++) calls ShortcutHelper (Java) and
stores all results on a list. When it finishes, it calls a callback to return
the whole list at once to WebApksHandler (C++) which just gives the list to the
Javascript code.

Does that sound good or did you have a different implementation in mind?

+  var webApksList = $('webapks-list');
+
+  webApksList.appendChild(document.createElement("BR"));
+  webApksList.appendChild(document.createElement("BR"));
+  webApksList.appendChild(boldedTextNode(appName, "app-name"));
+
+  webApksList.appendChild(document.createElement("BR"));
+  webApksList.appendChild(boldedTextNode(
+      loadTimeData.getString('packageName'), "app-property-label"));
+  webApksList.appendChild(document.createTextNode(packageName));
+
+  webApksList.appendChild(document.createElement("BR"));
+  webApksList.appendChild(boldedTextNode(
+      loadTimeData.getString('shellApkVersion'), "app-property-label"));
+  webApksList.appendChild(document.createTextNode(shellApkVersion));
+
+  webApksList.appendChild(document.createElement("BR"));
+  webApksList.appendChild(boldedTextNode(
+      loadTimeData.getString('versionCode'), "app-property-label"));
+  webApksList.appendChild(document.createTextNode(versionCode));
+}
+
+/* All the work we do onload. */
+function onLoadWork() {
+  chrome.send('requestWebAPKsInfo');
+}
+
+document.addEventListener('DOMContentLoaded', onLoadWork);