From ab33ed093713be8ed4f794401b9ce7654e46def5 Mon Sep 17 00:00:00 2001 From: Dima Gerasimov Date: Sun, 6 Jan 2019 13:27:36 +0000 Subject: [PATCH] Add support for entering comment --- TODO.org | 18 +++++++++++- package.json | 2 +- src/js/background.js | 68 +++++++++++++++++++++++++------------------- src/js/common.js | 3 +- src/js/popup.js | 40 ++++++++++++++++++++++---- src/manifest.json | 13 +++++++-- src/popup.html | 4 +-- webpack.config.js | 1 + 8 files changed, 106 insertions(+), 43 deletions(-) diff --git a/TODO.org b/TODO.org index 31ebcd8..04adebe 100644 --- a/TODO.org +++ b/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? diff --git a/package.json b/package.json index a1072e9..e7e79f8 100644 --- a/package.json +++ b/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", diff --git a/src/js/background.js b/src/js/background.js index 7eaf8e2..6094432 100644 --- a/src/js/background.js +++ b/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,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?? diff --git a/src/js/common.js b/src/js/common.js index 741c566..501fcfa 100644 --- a/src/js/common.js +++ b/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") { diff --git a/src/js/popup.js b/src/js/popup.js index c24d54a..17acab8 100644 --- a/src/js/popup.js +++ b/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 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); diff --git a/src/manifest.json b/src/manifest.json index 40ae87a..982c778 100644 --- a/src/manifest.json +++ b/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": { - "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, diff --git a/src/popup.html b/src/popup.html index 0b7d917..0133f81 100644 --- a/src/popup.html +++ b/src/popup.html @@ -2,9 +2,9 @@ - -

Capturing!

+
+
diff --git a/webpack.config.js b/webpack.config.js index e3b22b2..b61f26b 100644 --- a/webpack.config.js +++ b/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"),