From 4115b6e003b7cca2db7515c4d0fe6ab25d561230 Mon Sep 17 00:00:00 2001 From: Dima Gerasimov Date: Fri, 4 Jan 2019 22:24:51 +0000 Subject: [PATCH] notification, proper message routing, etc --- .flowconfig | 2 ++ package.json | 1 + src/css/options.css | 0 src/css/popup.css | 0 src/js/background.js | 52 ++++++++++++++++++++--------------------- src/js/common.js | 20 ++++++++++++++++ src/js/config.js | 9 +++++++ src/js/options.js | 1 - src/js/popup.js | 19 +++++++++++---- src/js/popup/example.js | 4 ---- src/manifest.json | 10 ++++++++ src/popup.html | 3 +-- 12 files changed, 83 insertions(+), 38 deletions(-) delete mode 100644 src/css/options.css delete mode 100644 src/css/popup.css create mode 100644 src/js/common.js create mode 100644 src/js/config.js delete mode 100644 src/js/popup/example.js diff --git a/.flowconfig b/.flowconfig index 1fed445..5aaad51 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,8 +1,10 @@ [ignore] +.*/node_modules/.* [include] [libs] +node_modules/flow-interfaces-chrome/interfaces/ [lints] diff --git a/package.json b/package.json index f09a4c6..56e447d 100644 --- a/package.json +++ b/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", diff --git a/src/css/options.css b/src/css/options.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/css/popup.css b/src/css/popup.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/js/background.js b/src/js/background.js index 7e6c271..7ebfd87 100644 --- a/src/js/background.js +++ b/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); + } +}); diff --git a/src/js/common.js b/src/js/common.js new file mode 100644 index 0000000..741c566 --- /dev/null +++ b/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, + }, + ); + } +} diff --git a/src/js/config.js b/src/js/config.js new file mode 100644 index 0000000..88bc57a --- /dev/null +++ b/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}`; +} diff --git a/src/js/options.js b/src/js/options.js index f560dc5..e69de29 100644 --- a/src/js/options.js +++ b/src/js/options.js @@ -1 +0,0 @@ -import "../css/options.css"; diff --git a/src/js/popup.js b/src/js/popup.js index d0b76f3..c7b2fbe 100644 --- a/src/js/popup.js +++ b/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); diff --git a/src/js/popup/example.js b/src/js/popup/example.js deleted file mode 100644 index c79708f..0000000 --- a/src/js/popup/example.js +++ /dev/null @@ -1,4 +0,0 @@ -export default function () { - // alert("hello! (find me on src/js/popup/example.js)"); - -} diff --git a/src/manifest.json b/src/manifest.json index c690718..8eaff3b 100644 --- a/src/manifest.json +++ b/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'" } diff --git a/src/popup.html b/src/popup.html index 24eaaef..0b7d917 100644 --- a/src/popup.html +++ b/src/popup.html @@ -5,7 +5,6 @@ -

Hello!

- +

Capturing!