Fix notification in firefox, adapt manifest for chrome

README.md

@@ -1,6 +1,6 @@
 Build status: [![CircleCI](https://circleci.com/gh/karlicoss/grasp.svg?style=svg)](https://circleci.com/gh/karlicoss/grasp)
 
-Grasp is an [extension for Chrome](https://chrome.google.com/webstore/detail/org-grasp/ohhbcfjmnbmgkajljopdjcaokbpgbgfa) (Firefox support is in progress), which adds a button/keybinding to capture current page title and url,
+Grasp is an [extension for Chrome](https://chrome.google.com/webstore/detail/org-grasp/ohhbcfjmnbmgkajljopdjcaokbpgbgfa) and Firefox (publishing to to store in progress), which adds a button/keybinding to capture current page title and url,
 possibly selected text, additional comments or tags and adds it into your [Org Mode](https://orgmode.org/) file.
 
 [Screenshot](https://user-images.githubusercontent.com/291333/51799721-a984eb80-221c-11e9-9612-8eb7f553dc01.png), [short demo](https://www.youtube.com/watch?v=Z8Bk-IazdGo).
@@ -10,6 +10,12 @@ Install from Chrome store:
 * [localhost only version](https://chrome.google.com/webstore/detail/org-grasp/ohhbcfjmnbmgkajljopdjcaokbpgbgfa)
 * [any host version](https://chrome.google.com/webstore/detail/org-grasp-any-host/gcfhlnaalomahoampfjhinmgjikkkgep) (the only difference are permissions in manifest)
 
+Install from Firefox store:
+
+* In progress
+
+Install from a zip: [releases](https://github.com/karlicoss/grasp/releases).
+
 # Running
 In the simplest setup, the server runs locally, and you can use 'localhost' version of the extension. If you have to work on a computer where you can't run python scripts,
 or your target capture file is just not there, you can selfhost the server part elsewhere and use the 'any host' version. Don't forget to set the endpoint in extension settings!
@@ -57,7 +63,10 @@ You're gonna need `npm` for building extension.
 After that you can find the extension in `build` directory and 'Load unpacked** if necessary. There is also Flow and Eslint set up.
 
 ## building any host version
-If you do need unresticted url permissions, build the extensions like that: `ANY_URL=yes npm run build`.
+If you do need unresticted url permissions, build the extensions like that: `ANY_HOST=yes npm run build`.
+
+## building for Firefox
+Default target is Chrome. use `TARGET=firefox npm run build` to build for firefox. The code is actually same, the only differences are minor appearance adjustments in manifest.
 
 # Permissions used
 * `storage` for settings

TESTING.org

@@ -0,0 +1,4 @@
+Till I've got some sort of automatic tests, just gonna write down manual testing scenarios here...
+
+* [#A] successful capture throught extension button press. should show notification and respect the notification option.
+* [#A] unsuccessful capture (set bad port in settings). should always show notification.

src/js/background.js

@@ -30,7 +30,8 @@ function makeCaptureRequest(
     request.timeout = 10 * 1000; // TODO should it be configurable?
     request.open('POST', curl, true);
     request.onreadystatechange = () => {
-        if (request.readyState != 4) {
+        const XHR_DONE = 4;
+        if (request.readyState != XHR_DONE) {
             return;
         }
         const status = request.status;

src/js/common.js

@@ -4,18 +4,11 @@ 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") {
+    chrome.notifications.create({
-        Notification.requestPermission();
+        'type': "basic",
-    } else {
+        'title': "org-grasp",
-        // TODO ugh. is there no way to show in-browser only notification??
+        'message': text,
-        new Notification(
+        'priority': priority,
-            'grasp-notification',
+        'iconUrl': 'unicorn.png',
-            // $FlowFixMe
+    });
-            {
-                title: 'Grasp extension',
-                body: text,
-                priority: priority,
-            },
-        );
-    }
 }

src/manifest.json

@@ -4,14 +4,14 @@
       "128": "unicorn.png"
   },
   "options_ui": {
-      "page": "options.html",
+      "page": "options.html"
-      "chrome_style": true
   },
 
   "background": {
     "page": "background.html"
   },
   "browser_action": {
+      "default_icon": "unicorn.png",
       "default_popup": "popup.html",
       "default_title": "Capture page, with extra information"
   },

utils/env.js

@@ -3,4 +3,5 @@ module.exports = {
     NODE_ENV: (process.env.NODE_ENV || "development"),
     PORT: (process.env.PORT || 3000),
     ANY_HOST: (process.env.ANY_HOST ? true : false),
+    TARGET: (process.env.TARGET || 'chrome'),
 };

webpack.config.js

@@ -11,6 +11,7 @@ var webpack = require("webpack"),
 const pkg = require('./package.json');
 const baseManifest = require('./src/manifest.json');
 
+const target = env.TARGET;
 const pkg_name = env.ANY_HOST ? "org-grasp (any host)" : "org-grasp";
 
 const permissions = [
@@ -25,7 +26,20 @@ if (env.ANY_HOST) {
     permissions.push("https://*/capture");
 }
 
+const manifestExtra = {
+    name: pkg_name,
+    version: pkg.version,
+    description: pkg.description,
+    permissions: permissions,
+};
 
+if (target == 'chrome') {
+    manifestExtra.options_ui = {chrome_style: true};
+}
+if (target == 'firefox') {
+    manifestExtra.options_ui = {browser_style: true};
+    manifestExtra.browser_action = {browser_style: true};
+}
 
 // load the secrets
 var alias = {};
@@ -82,7 +96,7 @@ var options = {
     // clean the build folder
     new CleanWebpackPlugin(["build/*"]),
     new CopyWebpackPlugin([
-        { from: 'src/img/unicorn.png' },
+        { from: 'src/img/*.png', flatten: true },
     ]),
     // expose and write the allowed env vars on the compiled bundle
     new webpack.DefinePlugin({
@@ -91,12 +105,7 @@ var options = {
     new WebpackExtensionManifestPlugin({
         config: {
             base: baseManifest,
-            extend: {
+            extend: manifestExtra,
-                name: pkg_name,
-                version: pkg.version,
-                description: pkg.description,
-                permissions: permissions,
-            }
         }
     }),
     new HtmlWebpackPlugin({