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
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?

View file

@ -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",

View file

@ -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,36 +51,44 @@ function makeCaptureRequest(
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??
// TODO hmm. content script or js??
// 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;
}
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,
// 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: 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??

View file

@ -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") {

View file

@ -1,15 +1,43 @@
/* @flow */
import {CAPTURE_SELECTED_METHOD} from './common';
import {METHOD_CAPTURE_WITH_EXTRAS} from './common';
function captureSelected () {
// TODO add command to run capture server as a hint??
console.log('[popup] capturing!');
// TODO template it in html too?
const BUTTON_ID = 'button_id';
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);

View file

@ -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": {
"description": "Capture current page",
"capture-simple": {
"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,

View file

@ -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>

View file

@ -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"),