notification, proper message routing, etc

This commit is contained in:
Dima Gerasimov 2019-01-04 22:24:51 +00:00
parent cced1bdcc4
commit 4115b6e003
12 changed files with 83 additions and 38 deletions

View file

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

View file

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

View file

View file

View file

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

20
src/js/common.js Normal file
View file

@ -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,
},
);
}
}

9
src/js/config.js Normal file
View file

@ -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}`;
}

View file

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

View file

@ -1,6 +1,17 @@
import "../css/popup.css"; /* @flow */
import hello from "./popup/example";
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);

View file

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

View file

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

View file

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