Update extension to set endpoint

README.md

@@ -14,7 +14,7 @@ No third party dependencies! Just `python 3.6`.
     Or alternatively, just run it directly if you don't want to autostart it: `server/grasp_server.py --path /path/to/your/capture.org [--port <custom_port>] [--template <custom org-capture template>]`.
 2. Install chrome extension and configure hotkeys
 
-That's it! If you're using custom port make sure it's same as in the extension settings.
+That's it! If you're using custom port make sure it's same as in the extension settings (default is `12212`).
 
 # Motivation
 Why use org-capture? Well, it's hard to explain, maybe some other time... However if you do know you want to use it instead/alongside your browser bookmarks, by default
@@ -42,7 +42,10 @@ You're gonna need `npm` for building extension.
     npm install
     npm run build
     
-After that you can find the extension in `build` directory and 'Load unpacked' if necessary. There is also Flow and Eslint set up.
+After that you can find the extension in `build` directory and 'Load unpacked** if necessary. There is also Flow and Eslint set up.
+
+## Unrestricted url
+If you want to run server remotely, you need extra permissions. Chrome store requires some extra checks when publishing if you do that, so I figured it's better to have localhost only by default. If you do need unresticted url permissions, build the extensions like that: `ANY_URL=yes npm run build`. Then don't forget to set the endpoint in extension settings.
 
 # Permissions used
 * `storage` for settings

src/js/background.js

@@ -2,7 +2,7 @@
 // TODO do I really need to annotate all files with @flow??
 
 import {COMMAND_CAPTURE_SIMPLE, METHOD_CAPTURE_WITH_EXTRAS, showNotification} from './common';
-import {get_options, capture_url} from './options';
+import {get_options} from './options';
 
 type Params = {
     url: string,
@@ -25,7 +25,9 @@ function makeCaptureRequest(
     console.log(`[background] capturing ${data}`);
 
     var request = new XMLHttpRequest();
-    const curl = capture_url(options);
+    const curl = options.endpoint;
+
+    request.timeout = 10 * 1000; // TODO should it be configurable?
     request.open('POST', curl, true);
     request.onreadystatechange = () => {
         if (request.readyState != 4) {

src/js/options.js

@@ -1,16 +1,14 @@
 /* @flow */
 
-const capture_endpoint = 'capture';
-
 type Options = {
-    port: string;
+    endpoint: string;
     default_tags: string;
     notification: boolean;
 }
 
 function default_options(): Options {
     return {
-        port: "12212",
+        endpoint: "http://localhost:12212/capture",
         default_tags: "grasp",
         notification: true,
     };
@@ -27,7 +25,3 @@ export function set_options(opts: Options, cb: () => void) {
     console.log('Saving %s', JSON.stringify(opts));
     chrome.storage.local.set(opts, cb);
 }
-
-export function capture_url(options: Options): string {
-    return `http://localhost:${options.port}/${capture_endpoint}`;
-}

src/js/options_page.js

@@ -1,14 +1,15 @@
 /* @flow */
 import {get_options, set_options} from './options';
 
-const SAVE_ID = 'save_id';
+const ENDPOINT_ID = 'endpoint_id';
-const PORT_ID = 'port_id';
 const NOTIFICATION_ID = 'notification_id';
 const DEFAULT_TAGS_ID = 'default_tags_id';
 // TODO specify capture path here?
 
-function getPort(): HTMLInputElement {
+const SAVE_ID = 'save_id';
-    return ((document.getElementById(PORT_ID): any): HTMLInputElement);
+
+function getEndpoint(): HTMLInputElement {
+    return ((document.getElementById(ENDPOINT_ID): any): HTMLInputElement);
 }
 
 function getDefaultTags(): HTMLInputElement {
@@ -26,7 +27,7 @@ function getSaveButton(): HTMLInputElement {
 
 function restoreOptions() {
     get_options(opts => {
-        getPort().value = opts.port;
+        getEndpoint().value = opts.endpoint;
         getDefaultTags().value = opts.default_tags;
         getEnableNotification().checked = opts.notification;
     });
@@ -34,11 +35,11 @@ function restoreOptions() {
 
 function saveOptions() {
     const opts = {
-        port: getPort().value, // TODO validate??
+        endpoint: getEndpoint().value, // TODO validate??
         default_tags: getDefaultTags().value,
         notification: getEnableNotification().checked,
     };
-    set_options(opts, () => { console.log('fewf'); alert('Saved!'); });
+    set_options(opts, () => { alert('Saved!'); });
 }
 
 

src/options.html

@@ -5,8 +5,8 @@
   <title></title>
 </head>
 <body>
-    <label for="port_id">Port</label>
+    <label for="endpoint_id">Endpoint</label>
-        <div><input type="text" id="port_id"/></div>
+    <div><input type="text" id="endpoint_id"/></div>
     <label for="notification_id">Notification after capturing</label>
         <div><input type="checkbox"  id="notification_id"/></div>
     <label for="default_tags_id">Default tags</label>