notification, proper message routing, etc

.flowconfig

@@ -1,8 +1,10 @@
 [ignore]
+.*/node_modules/.*
 
 [include]
 
 [libs]
+node_modules/flow-interfaces-chrome/interfaces/
 
 [lints]
 

package.json

@@ -19,6 +19,7 @@
     "eslint": "^5.11.1",
     "eslint-config-google": "^0.11.0",
     "file-loader": "^0.11.2",
+    "flow-interfaces-chrome": "^0.5.3",
     "fs-extra": "^0.30.0",
     "html-loader": "^0.4.5",
     "html-webpack-plugin": "2.24.1",

src/js/background.js

@@ -1,23 +1,14 @@
 /* @flow */
 // TODO do I really need to annotate all files with @flow??
 
-// TODO wtf?? what does that import mean??
-// import '../img/icon-128.png'
-// import '../img/icon-34.png'
-
-const capture_endpoint = 'capture';
-// TODO configure port
-const port = 8000;
-
-
-function capture_url (): string {
-    return `http://localhost:${port}/${capture_endpoint}`;
-}
+import {CAPTURE_SELECTED_METHOD, showNotification} from './common';
+import {capture_url} from './config';
 
 function makeCaptureRequest(
     url: string,
     selection: ?string=null,
-    comment: ?string=null, // TODO anything alse??
+    comment: ?string=null,
+    // TODO anything alse??
 ) {
     const data = JSON.stringify({
         'url': url,
@@ -27,25 +18,32 @@ function makeCaptureRequest(
 
 
     var request = new XMLHttpRequest();
-    console.log(`capturing ${data}`);
+    console.log(`[background] capturing ${data}`);
 
     request.open('POST', capture_url(), true);
-    request.onload = function() {
-        if (this.status >= 200 && this.status < 400) {
-            // Success!
-            var response = JSON.parse(this.response);
-            console.log(`SUCCESS ${response}`);
-        } else {
-            // We reached our target server, but it returned an error
+    request.onreadystatechange = () => {
+        if (request.readyState != 4) {
+            return;
+        }
+        console.log('[background] status:', request.status);
+        if (request.status >= 200 && request.status < 400) { // success
+            var response = JSON.parse(request.response);
+            console.log(`[background] success: ${response}`);
+            showNotification(`OK: ${response}`);
+        } else {
+            // TODO more error context?
+            console.log(`[background] ERROR: ${request.status}`);
+            showNotification(`ERROR: ${request.status}`, 1);
+            // TODO crap, doesn't really seem to respect urgency...
         }
-    };
-
-    request.onerror = function() {
-        console.log("ERROR!!!");
-        // There was a connection error of some sort
     };
 
     request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
     request.send(data);
 }
-makeCaptureRequest('hello');
+
+chrome.runtime.onMessage.addListener((message: any, sender: chrome$MessageSender, sendResponse) => {
+    if (message.method === CAPTURE_SELECTED_METHOD) {
+        makeCaptureRequest(message.url);
+    }
+});

src/js/common.js

@@ -0,0 +1,20 @@
+/* @flow */
+export const CAPTURE_SELECTED_METHOD = 'captureSelected';
+
+
+export function showNotification(text: string, priority: number=0) {
+    if (Notification.permission !== "granted") {
+        Notification.requestPermission();
+    } else {
+        // TODO ugh. is there no way to show in-browser only notification??
+        const notification = new Notification(
+            'grasp-notification',
+            // $FlowFixMe
+            {
+                title: 'Grasp extension',
+                body: text,
+                priority: priority,
+            },
+        );
+    }
+}

src/js/config.js

@@ -0,0 +1,9 @@
+/* @flow */
+
+// TODO configure port in options?
+const capture_endpoint = 'capture';
+const port = 8000;
+
+export function capture_url (): string {
+    return `http://localhost:${port}/${capture_endpoint}`;
+}

src/js/options.js

@@ -1 +0,0 @@
-import "../css/options.css";

src/js/popup.js

@@ -1,6 +1,17 @@
-import "../css/popup.css";
-import hello from "./popup/example";
+/* @flow */
 
-hello();
+import {CAPTURE_SELECTED_METHOD} from './common';
 
-// TODO on popup, should 
+function captureSelected () {
+    // TODO add command to run capture server as a hint??
+    const url = "TODO FIXME";
+    console.log(`[popup] capturing ${url}`);
+    chrome.runtime.sendMessage({
+        'method': CAPTURE_SELECTED_METHOD,
+        'url': url,
+    }, resp => {
+        console.log("[popup] captured!");
+    });
+}
+
+document.addEventListener('DOMContentLoaded', captureSelected);

src/js/popup/example.js

@@ -1,4 +0,0 @@
-export default function () {
-  // alert("hello! (find me on src/js/popup/example.js)");
-
-}

src/manifest.json

@@ -8,8 +8,18 @@
     "default_popup": "popup.html"
   },
   "permissions": [
+      "notifications",
       "http://*/"
   ],
+  "commands": {
+    "_execute_browser_action": {
+      "description": "Capture current page",
+      "suggested_key": {
+        "default": "Ctrl+Shift+C",
+        "mac": "Command+Shift+C"
+      }
+    }
+  },
   "manifest_version": 2,
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
 }

src/popup.html

@@ -5,7 +5,6 @@
   <title></title>
 </head>
 <body>
-  <h1>Hello!</h1>
-  <img src="img/icon-128.png">
+  <h1>Capturing!</h1>
 </body>
 </html>