Merge pull request #2 from chromeos/refactor

Refactor to a button

README.md

@@ -12,7 +12,7 @@ This is a sample demonstrating calling kiosk APIs from an extension in kiosk mod
 
 ### manifest.json
 
-The `manifest.json` file describes the extension and provides key metadata about the extension. One important thing to note here is the `externally_connectable` field in the manifest. This field allows websites from that wildcard location `*://hexagonal-numerous-zebu.glitch.me/*` to call the extension. We have a [sample PWA](https://hexagonal-numerous-zebu.glitch.me/) deployed to that URL currently for users that are interested in testing the extension with a PWA.
+The `manifest.json` file describes the extension and provides key metadata about the extension. One important thing to note here is the `externally_connectable` field in the manifest. This field allows websites from that wildcard location `*://chromeos.dev/*` to call the extension. We have a [sample PWA](https://chromeos.dev/) deployed to that URL currently for users that are interested in testing the extension with a PWA.
 
 Note that you will need to replace these 2 fields in the manifest.json file accordingly to match your self hosted extension information:
 - key

src/background.js

@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 
-chrome.runtime.onMessageExternal.addListener(
-    function(request, _, sendResponse) {
+chrome.runtime.onMessage.addListener(
+    function(request, _, _) {
         if (request.methodName == 'callRestart') {
             chrome.runtime.restart();
-            sendResponse({response: "restarted"});
         }
     }
   );

src/content.css

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.extension-button {
+    position: fixed;
+    width: 100px;
+    height: 100px;
+    bottom: 0;
+    right: 0;
+    margin: 75px;
+    z-index: 1000;
+    background-color: #00208b;
+    border-radius: 50%;
+    box-shadow: 2px 2px 6px black;
+  }
+
+  .button-text {
+  display: flex;
+    margin: 0px;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    color: white;
+    font-family: 'Roboto', sans-serif;
+  }

src/content.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+let restartButton = document.createElement('div');
+restartButton.className = 'extension-button';
+restartButton.id = 'extension-button';
+document.body.appendChild(restartButton);
+
+let buttonText = document.createElement('p');
+buttonText.className = 'button-text';
+buttonText.innerText = 'Restart App';
+restartButton.appendChild(buttonText);
+
+const STATIC_EXTENSION_ID = 'mygeneratedid';
+restartButton.addEventListener('click', () => {
+    chrome.runtime.sendMessage(
+        STATIC_EXTENSION_ID,
+        {
+         methodName: 'callRestart',
+        });
+});

src/manifest.json

@@ -5,8 +5,18 @@
     "description": "This restarts your kiosk app. Lucky you!",
     "externally_connectable": {
        "accepts_tls_channel_id": false,
-       "matches": [ "*://hexagonal-numerous-zebu.glitch.me/*" ]
+       "matches": [ "*://chromeos.dev/*" ]
     },
+    "content_scripts": [
+      {
+        "matches": ["*://chromeos.dev/*"],
+        "css": ["content.css"],
+        "js": ["content.js"],
+        "all_frames": true,
+        "run_at": "document_idle"
+      }
+    ],
+    "action": {},
     "key": "keygeneratedfrompackagingandinstallingextensioninchromeThisProvidesAStableExtensionId",
     "manifest_version": 3,
     "name": "Restart your kiosk app",