Merge pull request #6 from JasonXian/develop

UI Update!

.babelrc

@@ -0,0 +1,12 @@
+{
+    "presets": [
+      "react",
+      "es2016",
+      "stage-2"
+    ],
+    "plugins": [
+      "transform-class-properties",
+      "transform-async-to-generator",
+      "transform-decorators-legacy"
+    ]
+}

.gitignore

@@ -1,4 +1,6 @@
-node_modules/
-src/*.js
+/node_modules
+/dist
+.DS_store
+.vscode
 *.zip
-.vscode
+*.js

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Jason Xian
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,16 +1,20 @@
 # Introduction
 
-Easy clipboard is a lightweight chrome extension built in HTML/CSS/TypeScript for keeping track of things that you copy and paste on the web. It also comes with a couple of customizable features through the options page.
+Easy clipboard is a lightweight chrome extension built in React/Redux and TypeScript for keeping track of things that you copy and paste on the web. It also comes with a couple of customizable features through the options page.
 
 Free to download here: https://chrome.google.com/webstore/detail/easy-clipboard/lkpiolleljimgohflbgekkbeoiajighj
 
+Feel free to submit a pull request if you have features that you want to add to this extension!
+
 # Building & Testing
 
-1. `npm install` all dependancies
-2. Go to `chrome://extensions` in your browser
-3. Turn on developer mode
-4. Click on `Load unpacked` and drop the manifest file src, static and views folders in!
+1. `yarn run dev` to generate a fast development build for debugging in the `dist` folder
+2. Navigate to `chrome://extensions/` URL in Chrome
+3. Turn on `developer mode` in the top right hand corner
+4. Click on `Load unpacked`
+5. Select the entire `dist` folder
 
-# TODO:
+# TODO
 
-1. Use Webpack to generate static files and to make development and production builds easier
+1. Install linter and clean up code
+2. Test cases :)

package.json

@@ -1,17 +1,52 @@
 {
   "name": "easy-clipboard",
-  "version": "1.0.0",
   "description": "chrome extension for easy copy and pasting",
-  "main": "index.js",
-  "dependencies": {
-    "@types/chrome": "0.0.71",
-    "typescript": "^2.9.2"
-  },
-  "devDependencies": {},
+  "version": "2.0.0",
+  "author": "Jason Xian",
+  "license": "ISC",
   "scripts": {
-    "build": "tsc",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "webpack --watch --progess --mode development",
+    "build": "webpack --watch --progress --mode production"
   },
-  "author": "Jason Xian",
-  "license": "ISC"
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.17",
+    "@fortawesome/free-solid-svg-icons": "^5.8.1",
+    "@fortawesome/react-fontawesome": "^0.1.4",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^0.28.4",
+    "file-loader": "^0.11.2",
+    "normalize.css": "^8.0.1",
+    "react": "^16.8.5",
+    "react-dom": "^16.8.5",
+    "react-redux": "^4.4.6",
+    "redux": "^4.0.1",
+    "svg-inline-loader": "^0.8.0",
+    "svg-inline-react": "^3.1.0",
+    "url-loader": "^0.5.9",
+    "uuid": "^3.3.2",
+    "webext-redux": "2.0.1"
+  },
+  "devDependencies": {
+    "@types/chrome": "0.0.81",
+    "@types/node": "^11.13.0",
+    "@types/react": "^16.8.8",
+    "@types/react-dom": "^16.8.3",
+    "@types/react-redux": "^7.0.5",
+    "babel-core": "^6.25.0",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-transform-async-to-generator": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "html-webpack-plugin": "^3.2.0",
+    "style-loader": "^0.23.1",
+    "ts-loader": "^5.3.3",
+    "typescript": "^3.3.4000",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0",
+    "write-file-webpack-plugin": "^3.4.2"
+  }
 }

manifest.json → src/manifest.json

@@ -1,26 +1,26 @@
 {
     "manifest_version": 2,
     "name": "Easy Clipboard",
-    "version": "1.4",
+    "version": "2.0.0",
     "description": "Easy Clipboard allows you to quickly copy and paste text, urls and more, and store them safely in your browser for future use.",
     "icons": {
         "128": "./static/icon128.png",
         "48": "./static/icon48.png",
         "16": "./static/icon16.png"
     },
-    "options_page" : "./views/options.html",
+    "options_page" : "./pages/options.html",
     "browser_action": {
         "default_icon": "./static/icon16.png",
-        "default_popup": "./views/popup.html"
+        "default_popup": "./pages/popup.html"
     },
     "background" : {
-        "scripts" : ["./src/eventPage.js"],
-        "persistant" : false
+        "scripts" : ["./pages/background.js"],
+        "persistant" : true
     },
     "content_scripts" : [
         {
             "matches" : ["<all_urls>"],
-            "js" : ["./src/contentScript.js"]
+            "js" : ["./pages/contentScript.js"]
         }
     ],
     "permissions" : [

src/pages/background/background.ts

@@ -0,0 +1,63 @@
+import { wrapStore } from 'webext-redux';
+import ContextMenu from './contextMenus';
+import store from '../redux/store';
+import { IChromeStorage } from '../interfaces';
+import { updateOptions, updateClipboard } from '../redux/actions';
+
+const startupScripts = (isFirst: boolean) => {
+    wrapStore(store, {
+        portName: 'easy-clipboard',
+    });
+    store.subscribe(() => {
+        const { clipboard } = store.getState();
+        chrome.browserAction.setBadgeText({
+            text: `${clipboard.length}`,
+        });
+    });
+    if (!isFirst) {
+        chrome.storage.sync.get([
+            'clipboard', 
+            'backgroundColor',
+            'textColor',
+            'autoCopy',
+            'lineCount'
+        ], (result: IChromeStorage) => {
+            const options = {
+                backgroundColor: result.backgroundColor,
+                textColor: result.textColor,
+                autoCopy: result.autoCopy,
+                lineCount: result.lineCount,
+            }
+            store.dispatch(updateClipboard(result.clipboard));
+            store.dispatch(updateOptions(options));
+        });
+    } else {
+        store.dispatch(updateOptions({
+            backgroundColor: "#FFFF99",
+            textColor: "#000000",
+            autoCopy: true,
+            lineCount: 5,
+        }));
+    }
+    chrome.runtime.onMessage.addListener((request, sender) => {
+        if (chrome.runtime.id == sender.id) {
+            if (request.selection) {
+                const { clipboard } = store.getState();
+                clipboard.push(request.selection);
+                store.dispatch(updateClipboard(clipboard));
+            }
+        }
+    });
+    const contextMenu = new ContextMenu(store);
+    contextMenu.initContextMenu();
+}
+
+chrome.runtime.onInstalled.addListener(() => {
+    startupScripts(true);
+    chrome.runtime.openOptionsPage();
+});
+
+// if chrome browser closes the state should be backed up from chrome storage, not defaults do a first install flag for startup scripts
+chrome.runtime.onStartup.addListener(() => {
+    startupScripts(false);
+});

src/pages/background/contextMenus.ts

@@ -0,0 +1,30 @@
+import { Store } from 'webext-redux';
+import { IReduxStore } from '../interfaces';
+import { updateClipboard } from '../redux/actions';
+
+class ContextMenu {
+    store: Store;
+
+    constructor (store) {
+        this.store = store;
+    }
+
+    public initContextMenu () {
+        chrome.contextMenus.create({
+            id: "easyCopy",
+            title: "Copy to Easy Clipboard",
+            contexts: ["selection"],
+        });
+        chrome.contextMenus.onClicked.addListener((clickData) => {
+            if (clickData.menuItemId == "easyCopy" && clickData.selectionText) {
+                const state: IReduxStore = this.store.getState();
+                const { clipboard } = state;
+                if (clickData.selectionText) clipboard.push(clickData.selectionText.replace(/</g, "&lt;").replace(/>/g, "&gt;"));
+                this.store.dispatch(updateClipboard(clipboard));
+            }
+        });
+    }
+
+}
+
+export default ContextMenu;

src/pages/contentScript/contentScript.ts

@@ -0,0 +1,22 @@
+import { IChromeStorage } from "../interfaces";
+
+class ContentScript {
+    public initContentScript () {
+        document.addEventListener('copy', (event: ClipboardEvent) => {
+            chrome.storage.sync.get(['autoCopy'], (result: IChromeStorage) => {
+                if (result.autoCopy) {
+                    const selection = window.getSelection();
+                    if (selection) {
+                        chrome.runtime.sendMessage({
+                            selection: selection.toString().replace(/</g, '&lt;').replace(/>/g, '&gt;'),
+                        });
+                    }
+                }
+            });
+        });
+    }
+
+}
+
+const contentScript = new ContentScript();
+contentScript.initContentScript();