Add support for entering comment

This commit is contained in:
Dima Gerasimov 2019-01-06 13:27:36 +00:00
parent 67682ba492
commit ab33ed0937
8 changed files with 106 additions and 43 deletions

View file

@ -11,7 +11,19 @@ npm run flow
* DONE [#A] move server to a separate folder, systemd install script * DONE [#A] move server to a separate folder, systemd install script
CLOSED: [2019-01-05 Sat 14:38] 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 * TODO [#B] docs on using
@ -19,3 +31,7 @@ npm run flow
* TODO [#D] nicer manifest? * TODO [#D] nicer manifest?
* TODO [#D] do not minfy for dev * TODO [#D] do not minfy for dev
* TODO [#C] motivation * 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?

View file

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

View file

@ -1,7 +1,7 @@
/* @flow */ /* @flow */
// TODO do I really need to annotate all files with @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'; import {capture_url} from './config';
@ -51,36 +51,44 @@ function makeCaptureRequest(
request.send(data); request.send(data);
} }
function capture(comment: ?string = null) {
chrome.tabs.query({currentWindow: true, active: true }, tabs => {
const tab = tabs[0];
if (tab.url == null) {
showNotification('ERROR: trying to capture null');
return;
}
const url: string = tab.url;
const title: ?string = tab.title;
// TODO mm. not sure if should do browserAction.onclicked instead?? I suppose it's more flexible?? // console.log('action!');
// TODO hmm. content script or js?? // ugh.. https://stackoverflow.com/a/19165930/706389
// chrome.runtime.onMessage.addListener((message: any, sender: chrome$MessageSender, sendResponse) => { chrome.tabs.executeScript( {
// if (message.method === CAPTURE_SELECTED_METHOD) { code: "window.getSelection().toString();"
// } }, selections => {
// }); const selection = selections == null ? null : selections[0];
makeCaptureRequest({
// TODO hmm. I suppose we wanna title + url instead... url: url,
// TODO handle cannot access chrome:// url?? title: title,
// TODO ok, need to add comment popup? selection: selection,
chrome.browserAction.onClicked.addListener(tab => { comment: comment,
if (tab.url == null) { });
showNotification('ERROR: trying to capture null');
return;
}
const url: string = tab.url;
const title: ?string = tab.title;
// console.log('action!');
// ugh.. https://stackoverflow.com/a/19165930/706389
chrome.tabs.executeScript( {
code: "window.getSelection().toString();"
}, selections => {
const selection = selections == null ? null : selections[0];
makeCaptureRequest({
url: url,
title: title,
selection: selection,
comment: null,
}); });
}); });
}
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??

View file

@ -1,6 +1,7 @@
/* @flow */ /* @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) { export function showNotification(text: string, priority: number=0) {
if (Notification.permission !== "granted") { if (Notification.permission !== "granted") {

View file

@ -1,15 +1,43 @@
/* @flow */ /* @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({ chrome.runtime.sendMessage({
'method': CAPTURE_SELECTED_METHOD, 'method': METHOD_CAPTURE_WITH_EXTRAS,
'comment': comment_text,
}, resp => { }, resp => {
console.log("[popup] captured!"); 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);

View file

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

View file

@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title></title>
</head> </head>
<body> <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> </body>
</html> </html>

View file

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