Add support for entering comment

TODO.org

@@ -11,7 +11,19 @@ npm run flow
 * DONE [#A] move server to a separate folder, systemd install script
   CLOSED: [2019-01-05 Sat 14:38]
   
-* TODO [#A] release somewhere? not sure if necessary
+* START [#A] entering additional information and tags
+
+* TODO the benefit is that you can also add anything as a backend, e.g. you might be more of markdown fan or todo.txt
+
+* TODO shortcut for org mode to create timestsamped note  
+  
+* TODO not sure, maybe extension press should be default? control it via option?
+* TODO or, add menu to extension?
+
+* TODO [#B] release somewhere? not sure if necessary
+* TODO unsafe-eval in content security policy??
+  
+* TODO make manifest templated so we don't have to hardcode actions
 
 * TODO [#B] docs on using
   
@@ -19,3 +31,7 @@ npm run flow
 * TODO [#D] nicer manifest?
 * TODO [#D] do not minfy for dev
 * TODO [#C] motivation
+* TODO [#B] doesn't look like hotkey working unless you manually rebind.. wtf?
+
+  
+* TODO [#C] how to test it? try on different pages?

package.json

@@ -1,6 +1,6 @@
 {
   "name": "grasp-extension",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A reliable way of capturing web pages and content",
   "scripts": {
     "build": "webpack --progress --profile --colors",

src/js/background.js

@@ -1,7 +1,7 @@
 /* @flow */
 // TODO do I really need to annotate all files with @flow??
 
-import {CAPTURE_SELECTED_METHOD, showNotification} from './common';
+import {COMMAND_CAPTURE_SIMPLE, METHOD_CAPTURE_WITH_EXTRAS, showNotification} from './common';
 import {capture_url} from './config';
 
 
@@ -51,18 +51,9 @@ function makeCaptureRequest(
     request.send(data);
 }
 
-
+function capture(comment: ?string = null) {
-// TODO mm. not sure if should do browserAction.onclicked instead?? I suppose it's more flexible??
+    chrome.tabs.query({currentWindow: true, active: true }, tabs => {
-// TODO hmm. content script or js??
+        const tab = tabs[0];
-// chrome.runtime.onMessage.addListener((message: any, sender: chrome$MessageSender, sendResponse) => {
-//     if (message.method === CAPTURE_SELECTED_METHOD) {
-//     }
-// });
-
-// TODO hmm. I suppose we wanna title + url instead...
-// TODO handle cannot access chrome:// url??
-// TODO ok, need to add comment popup?
-chrome.browserAction.onClicked.addListener(tab => {
         if (tab.url == null) {
             showNotification('ERROR: trying to capture null');
             return;
@@ -80,7 +71,24 @@ chrome.browserAction.onClicked.addListener(tab => {
                 url: url,
                 title: title,
                 selection: selection,
-            comment: null,
+                comment: comment,
             });
         });
     });
+}
+
+
+chrome.commands.onCommand.addListener(command => {
+    if (command === COMMAND_CAPTURE_SIMPLE) {
+        capture(null);
+    }
+});
+
+chrome.runtime.onMessage.addListener((message: any, sender: chrome$MessageSender, sendResponse) => {
+    if (message.method === METHOD_CAPTURE_WITH_EXTRAS) {
+        const comment = message.comment;
+        capture(comment);
+    }
+});
+
+// TODO handle cannot access chrome:// url??

src/js/common.js

@@ -1,6 +1,7 @@
 /* @flow */
-export const CAPTURE_SELECTED_METHOD = 'captureSelected';
+export const COMMAND_CAPTURE_SIMPLE = 'capture-simple';
 
+export const METHOD_CAPTURE_WITH_EXTRAS = 'captureWithExtras';
 
 export function showNotification(text: string, priority: number=0) {
     if (Notification.permission !== "granted") {

src/js/popup.js

@@ -1,15 +1,43 @@
 /* @flow */
 
-import {CAPTURE_SELECTED_METHOD} from './common';
+import {METHOD_CAPTURE_WITH_EXTRAS} from './common';
 
-function captureSelected () {
+// TODO template it in html too?
-    // TODO add command to run capture server as a hint??
+const BUTTON_ID = 'button_id';
-    console.log('[popup] capturing!');
+const COMMENT_ID = 'comment_id';
+
+function getComment(): HTMLInputElement {
+    const comment = ((document.getElementById(COMMENT_ID) : any): HTMLInputElement);
+    return comment;
+}
+
+function getButton(): HTMLElement {
+    const button = ((document.getElementById(BUTTON_ID): any): HTMLElement);
+    return button;
+}
+
+function submitComment () {
+    const comment_text = getComment().value;
+    // TODO focus
     chrome.runtime.sendMessage({
-        'method': CAPTURE_SELECTED_METHOD,
+        'method': METHOD_CAPTURE_WITH_EXTRAS,
+        'comment': comment_text,
     }, resp => {
         console.log("[popup] captured!");
     });
+    window.close();
 }
 
-document.addEventListener('DOMContentLoaded', captureSelected);
+function setupPage () {
+    const comment = getComment();
+    comment.focus();
+    // $FlowFixMe
+    comment.addEventListener('keydown', e => {
+	      if (e.ctrlKey && e.key === 'Enter') {
+		        submitComment();
+	      }
+    });
+    getButton().addEventListener('click', submitComment);
+}
+
+document.addEventListener('DOMContentLoaded', setupPage);

src/manifest.json

@@ -5,6 +5,8 @@
     "page": "background.html"
   },
   "browser_action": {
+      "default_popup": "popup.html",
+      "default_title": "Capture page, with extra information"
   },
   "permissions": [
       "notifications",
@@ -12,12 +14,19 @@
       "http://*/"
   ],
   "commands": {
-    "_execute_browser_action": {
+    "capture-simple": {
-      "description": "Capture current page",
+      "description": "Quick capture: url, title and selection",
       "suggested_key": {
         "default": "Ctrl+Shift+C",
         "mac": "Command+Shift+C"
       }
+    },
+    "_execute_browser_action": {
+      "description": "Capture page, with extra information",
+      "suggested_key": {
+        "default": "Ctrl+Shift+Y",
+        "mac": "Command+Shift+Y"
+      }
     }
   },
   "manifest_version": 2,

src/popup.html

@@ -2,9 +2,9 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title></title>
 </head>
 <body>
-  <h1>Capturing!</h1>
+    <div><textarea id="comment_id" rows="4" cols="50" placeholder="Enter your comments; press Ctrl-Enter to capture"></textarea></div>
+    <div><button id="button_id" type="button" align="right">capture!</button></div>
 </body>
 </html>

webpack.config.js

@@ -19,6 +19,7 @@ if (fileSystem.existsSync(secretsPath)) {
 }
 
 var options = {
+  mode: 'development',
   entry: {
     popup: path.join(__dirname, "src", "js", "popup.js"),
     options: path.join(__dirname, "src", "js", "options.js"),