From 7bf91202f028cfe4b9446907d3b8cec57024f48b Mon Sep 17 00:00:00 2001 From: "Brian R. Bondy" Date: Thu, 2 Nov 2017 10:17:18 -0400 Subject: [PATCH 001/280] Initial commit --- .gitignore | 59 +++++++++ LICENSE | 373 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 432 insertions(+) create mode 100644 .gitignore create mode 100644 LICENSE diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000000..00cbbdf53f6c --- /dev/null +++ b/.gitignore @@ -0,0 +1,59 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Typescript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + diff --git a/LICENSE b/LICENSE new file mode 100644 index 000000000000..a612ad9813b0 --- /dev/null +++ b/LICENSE @@ -0,0 +1,373 @@ +Mozilla Public License Version 2.0 +================================== + +1. Definitions +-------------- + +1.1. "Contributor" + means each individual or legal entity that creates, contributes to + the creation of, or owns Covered Software. + +1.2. "Contributor Version" + means the combination of the Contributions of others (if any) used + by a Contributor and that particular Contributor's Contribution. + +1.3. "Contribution" + means Covered Software of a particular Contributor. + +1.4. "Covered Software" + means Source Code Form to which the initial Contributor has attached + the notice in Exhibit A, the Executable Form of such Source Code + Form, and Modifications of such Source Code Form, in each case + including portions thereof. + +1.5. "Incompatible With Secondary Licenses" + means + + (a) that the initial Contributor has attached the notice described + in Exhibit B to the Covered Software; or + + (b) that the Covered Software was made available under the terms of + version 1.1 or earlier of the License, but not also under the + terms of a Secondary License. + +1.6. "Executable Form" + means any form of the work other than Source Code Form. + +1.7. "Larger Work" + means a work that combines Covered Software with other material, in + a separate file or files, that is not Covered Software. + +1.8. "License" + means this document. + +1.9. "Licensable" + means having the right to grant, to the maximum extent possible, + whether at the time of the initial grant or subsequently, any and + all of the rights conveyed by this License. + +1.10. "Modifications" + means any of the following: + + (a) any file in Source Code Form that results from an addition to, + deletion from, or modification of the contents of Covered + Software; or + + (b) any new file in Source Code Form that contains any Covered + Software. + +1.11. "Patent Claims" of a Contributor + means any patent claim(s), including without limitation, method, + process, and apparatus claims, in any patent Licensable by such + Contributor that would be infringed, but for the grant of the + License, by the making, using, selling, offering for sale, having + made, import, or transfer of either its Contributions or its + Contributor Version. + +1.12. "Secondary License" + means either the GNU General Public License, Version 2.0, the GNU + Lesser General Public License, Version 2.1, the GNU Affero General + Public License, Version 3.0, or any later versions of those + licenses. + +1.13. "Source Code Form" + means the form of the work preferred for making modifications. + +1.14. "You" (or "Your") + means an individual or a legal entity exercising rights under this + License. For legal entities, "You" includes any entity that + controls, is controlled by, or is under common control with You. For + purposes of this definition, "control" means (a) the power, direct + or indirect, to cause the direction or management of such entity, + whether by contract or otherwise, or (b) ownership of more than + fifty percent (50%) of the outstanding shares or beneficial + ownership of such entity. + +2. License Grants and Conditions +-------------------------------- + +2.1. Grants + +Each Contributor hereby grants You a world-wide, royalty-free, +non-exclusive license: + +(a) under intellectual property rights (other than patent or trademark) + Licensable by such Contributor to use, reproduce, make available, + modify, display, perform, distribute, and otherwise exploit its + Contributions, either on an unmodified basis, with Modifications, or + as part of a Larger Work; and + +(b) under Patent Claims of such Contributor to make, use, sell, offer + for sale, have made, import, and otherwise transfer either its + Contributions or its Contributor Version. + +2.2. Effective Date + +The licenses granted in Section 2.1 with respect to any Contribution +become effective for each Contribution on the date the Contributor first +distributes such Contribution. + +2.3. Limitations on Grant Scope + +The licenses granted in this Section 2 are the only rights granted under +this License. No additional rights or licenses will be implied from the +distribution or licensing of Covered Software under this License. +Notwithstanding Section 2.1(b) above, no patent license is granted by a +Contributor: + +(a) for any code that a Contributor has removed from Covered Software; + or + +(b) for infringements caused by: (i) Your and any other third party's + modifications of Covered Software, or (ii) the combination of its + Contributions with other software (except as part of its Contributor + Version); or + +(c) under Patent Claims infringed by Covered Software in the absence of + its Contributions. + +This License does not grant any rights in the trademarks, service marks, +or logos of any Contributor (except as may be necessary to comply with +the notice requirements in Section 3.4). + +2.4. Subsequent Licenses + +No Contributor makes additional grants as a result of Your choice to +distribute the Covered Software under a subsequent version of this +License (see Section 10.2) or under the terms of a Secondary License (if +permitted under the terms of Section 3.3). + +2.5. Representation + +Each Contributor represents that the Contributor believes its +Contributions are its original creation(s) or it has sufficient rights +to grant the rights to its Contributions conveyed by this License. + +2.6. Fair Use + +This License is not intended to limit any rights You have under +applicable copyright doctrines of fair use, fair dealing, or other +equivalents. + +2.7. Conditions + +Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted +in Section 2.1. + +3. Responsibilities +------------------- + +3.1. Distribution of Source Form + +All distribution of Covered Software in Source Code Form, including any +Modifications that You create or to which You contribute, must be under +the terms of this License. You must inform recipients that the Source +Code Form of the Covered Software is governed by the terms of this +License, and how they can obtain a copy of this License. You may not +attempt to alter or restrict the recipients' rights in the Source Code +Form. + +3.2. Distribution of Executable Form + +If You distribute Covered Software in Executable Form then: + +(a) such Covered Software must also be made available in Source Code + Form, as described in Section 3.1, and You must inform recipients of + the Executable Form how they can obtain a copy of such Source Code + Form by reasonable means in a timely manner, at a charge no more + than the cost of distribution to the recipient; and + +(b) You may distribute such Executable Form under the terms of this + License, or sublicense it under different terms, provided that the + license for the Executable Form does not attempt to limit or alter + the recipients' rights in the Source Code Form under this License. + +3.3. Distribution of a Larger Work + +You may create and distribute a Larger Work under terms of Your choice, +provided that You also comply with the requirements of this License for +the Covered Software. If the Larger Work is a combination of Covered +Software with a work governed by one or more Secondary Licenses, and the +Covered Software is not Incompatible With Secondary Licenses, this +License permits You to additionally distribute such Covered Software +under the terms of such Secondary License(s), so that the recipient of +the Larger Work may, at their option, further distribute the Covered +Software under the terms of either this License or such Secondary +License(s). + +3.4. Notices + +You may not remove or alter the substance of any license notices +(including copyright notices, patent notices, disclaimers of warranty, +or limitations of liability) contained within the Source Code Form of +the Covered Software, except that You may alter any license notices to +the extent required to remedy known factual inaccuracies. + +3.5. Application of Additional Terms + +You may choose to offer, and to charge a fee for, warranty, support, +indemnity or liability obligations to one or more recipients of Covered +Software. However, You may do so only on Your own behalf, and not on +behalf of any Contributor. You must make it absolutely clear that any +such warranty, support, indemnity, or liability obligation is offered by +You alone, and You hereby agree to indemnify every Contributor for any +liability incurred by such Contributor as a result of warranty, support, +indemnity or liability terms You offer. You may include additional +disclaimers of warranty and limitations of liability specific to any +jurisdiction. + +4. Inability to Comply Due to Statute or Regulation +--------------------------------------------------- + +If it is impossible for You to comply with any of the terms of this +License with respect to some or all of the Covered Software due to +statute, judicial order, or regulation then You must: (a) comply with +the terms of this License to the maximum extent possible; and (b) +describe the limitations and the code they affect. Such description must +be placed in a text file included with all distributions of the Covered +Software under this License. Except to the extent prohibited by statute +or regulation, such description must be sufficiently detailed for a +recipient of ordinary skill to be able to understand it. + +5. Termination +-------------- + +5.1. The rights granted under this License will terminate automatically +if You fail to comply with any of its terms. However, if You become +compliant, then the rights granted under this License from a particular +Contributor are reinstated (a) provisionally, unless and until such +Contributor explicitly and finally terminates Your grants, and (b) on an +ongoing basis, if such Contributor fails to notify You of the +non-compliance by some reasonable means prior to 60 days after You have +come back into compliance. Moreover, Your grants from a particular +Contributor are reinstated on an ongoing basis if such Contributor +notifies You of the non-compliance by some reasonable means, this is the +first time You have received notice of non-compliance with this License +from such Contributor, and You become compliant prior to 30 days after +Your receipt of the notice. + +5.2. If You initiate litigation against any entity by asserting a patent +infringement claim (excluding declaratory judgment actions, +counter-claims, and cross-claims) alleging that a Contributor Version +directly or indirectly infringes any patent, then the rights granted to +You by any and all Contributors for the Covered Software under Section +2.1 of this License shall terminate. + +5.3. In the event of termination under Sections 5.1 or 5.2 above, all +end user license agreements (excluding distributors and resellers) which +have been validly granted by You or Your distributors under this License +prior to termination shall survive termination. + +************************************************************************ +* * +* 6. Disclaimer of Warranty * +* ------------------------- * +* * +* Covered Software is provided under this License on an "as is" * +* basis, without warranty of any kind, either expressed, implied, or * +* statutory, including, without limitation, warranties that the * +* Covered Software is free of defects, merchantable, fit for a * +* particular purpose or non-infringing. The entire risk as to the * +* quality and performance of the Covered Software is with You. * +* Should any Covered Software prove defective in any respect, You * +* (not any Contributor) assume the cost of any necessary servicing, * +* repair, or correction. This disclaimer of warranty constitutes an * +* essential part of this License. No use of any Covered Software is * +* authorized under this License except under this disclaimer. * +* * +************************************************************************ + +************************************************************************ +* * +* 7. Limitation of Liability * +* -------------------------- * +* * +* Under no circumstances and under no legal theory, whether tort * +* (including negligence), contract, or otherwise, shall any * +* Contributor, or anyone who distributes Covered Software as * +* permitted above, be liable to You for any direct, indirect, * +* special, incidental, or consequential damages of any character * +* including, without limitation, damages for lost profits, loss of * +* goodwill, work stoppage, computer failure or malfunction, or any * +* and all other commercial damages or losses, even if such party * +* shall have been informed of the possibility of such damages. This * +* limitation of liability shall not apply to liability for death or * +* personal injury resulting from such party's negligence to the * +* extent applicable law prohibits such limitation. Some * +* jurisdictions do not allow the exclusion or limitation of * +* incidental or consequential damages, so this exclusion and * +* limitation may not apply to You. * +* * +************************************************************************ + +8. Litigation +------------- + +Any litigation relating to this License may be brought only in the +courts of a jurisdiction where the defendant maintains its principal +place of business and such litigation shall be governed by laws of that +jurisdiction, without reference to its conflict-of-law provisions. +Nothing in this Section shall prevent a party's ability to bring +cross-claims or counter-claims. + +9. Miscellaneous +---------------- + +This License represents the complete agreement concerning the subject +matter hereof. If any provision of this License is held to be +unenforceable, such provision shall be reformed only to the extent +necessary to make it enforceable. Any law or regulation which provides +that the language of a contract shall be construed against the drafter +shall not be used to construe this License against a Contributor. + +10. Versions of the License +--------------------------- + +10.1. New Versions + +Mozilla Foundation is the license steward. Except as provided in Section +10.3, no one other than the license steward has the right to modify or +publish new versions of this License. Each version will be given a +distinguishing version number. + +10.2. Effect of New Versions + +You may distribute the Covered Software under the terms of the version +of the License under which You originally received the Covered Software, +or under the terms of any subsequent version published by the license +steward. + +10.3. Modified Versions + +If you create software not governed by this License, and you want to +create a new license for such software, you may create and use a +modified version of this License if you rename the license and remove +any references to the name of the license steward (except to note that +such modified license differs from this License). + +10.4. Distributing Source Code Form that is Incompatible With Secondary +Licenses + +If You choose to distribute Source Code Form that is Incompatible With +Secondary Licenses under the terms of this version of the License, the +notice described in Exhibit B of this License must be attached. + +Exhibit A - Source Code Form License Notice +------------------------------------------- + + This Source Code Form is subject to the terms of the Mozilla Public + License, v. 2.0. If a copy of the MPL was not distributed with this + file, You can obtain one at http://mozilla.org/MPL/2.0/. + +If it is not possible or desirable to put the notice in a particular +file, then You may include the notice in a location (such as a LICENSE +file in a relevant directory) where a recipient would be likely to look +for such a notice. + +You may add additional accurate notices of copyright ownership. + +Exhibit B - "Incompatible With Secondary Licenses" Notice +--------------------------------------------------------- + + This Source Code Form is "Incompatible With Secondary Licenses", as + defined by the Mozilla Public License, v. 2.0. From e121eb2bb8070e0c86faaa354462e84a2dd2ae90 Mon Sep 17 00:00:00 2001 From: "Brian R. Bondy" Date: Thu, 2 Nov 2017 10:51:42 -0400 Subject: [PATCH 002/280] React Chrome Extension Boilerplate Credit to: https://github.com/jhen0409/react-chrome-extension-boilerplate --- .babelrc | 4 + .eslintrc | 25 + .travis.yml | 36 + README.md | 113 + app/actions/todos.js | 25 + app/components/Footer.css | 85 + app/components/Footer.js | 91 + app/components/Header.js | 28 + app/components/MainSection.css | 151 + app/components/MainSection.js | 90 + app/components/TodoItem.css | 102 + app/components/TodoItem.js | 90 + app/components/TodoTextInput.css | 25 + app/components/TodoTextInput.js | 59 + app/constants/ActionTypes.js | 6 + app/constants/TodoFilters.js | 3 + app/containers/App.css | 39 + app/containers/App.js | 34 + app/containers/Root.js | 19 + app/reducers/index.js | 6 + app/reducers/todos.js | 51 + app/store/configureStore.dev.js | 31 + app/store/configureStore.js | 5 + app/store/configureStore.prod.js | 14 + app/utils/storage.js | 23 + appveyor.yml | 21 + chrome/assets/.DS_Store | Bin 0 -> 6148 bytes chrome/assets/img/.DS_Store | Bin 0 -> 6148 bytes chrome/assets/img/icon-128.png | Bin 0 -> 3851 bytes chrome/assets/img/icon-16.png | Bin 0 -> 590 bytes chrome/assets/img/icon-48.png | Bin 0 -> 1547 bytes chrome/extension/background.js | 33 + chrome/extension/background/badge.js | 13 + chrome/extension/background/contextMenus.js | 41 + chrome/extension/background/inject.js | 42 + chrome/extension/inject.js | 48 + chrome/extension/todoapp.css | 38 + chrome/extension/todoapp.js | 16 + chrome/manifest.dev.json | 23 + chrome/manifest.prod.json | 23 + chrome/views/background.pug | 5 + chrome/views/inject.pug | 15 + chrome/views/popup.pug | 14 + chrome/views/window.pug | 11 + package.json | 80 + scripts/.eslintrc | 9 + scripts/build.js | 10 + scripts/compress.js | 27 + scripts/dev.js | 18 + scripts/tasks.js | 22 + test/.eslintrc | 9 + test/app/actions/todos.spec.js | 46 + test/app/components/Footer.spec.js | 96 + test/app/components/Header.spec.js | 44 + test/app/components/MainSection.spec.js | 137 + test/app/components/TodoItem.spec.js | 114 + test/app/components/TodoTextInput.spec.js | 78 + test/app/reducers/todos.spec.js | 243 + test/e2e/injectpage.js | 52 + test/e2e/todoapp.js | 159 + test/func.js | 27 + test/mocha.opts | 2 + test/setup-app.js | 12 + webpack/.eslintrc | 5 + webpack/customPublicPath.js | 16 + webpack/dev.config.js | 86 + webpack/postcss.config.js | 4 + webpack/prod.config.js | 57 + webpack/replace/JsonpMainTemplate.runtime.js | 63 + webpack/replace/process-update.js | 139 + webpack/test.config.js | 11 + yarn.lock | 4960 ++++++++++++++++++ 72 files changed, 8024 insertions(+) create mode 100644 .babelrc create mode 100644 .eslintrc create mode 100644 .travis.yml create mode 100644 README.md create mode 100644 app/actions/todos.js create mode 100644 app/components/Footer.css create mode 100644 app/components/Footer.js create mode 100644 app/components/Header.js create mode 100644 app/components/MainSection.css create mode 100644 app/components/MainSection.js create mode 100644 app/components/TodoItem.css create mode 100644 app/components/TodoItem.js create mode 100644 app/components/TodoTextInput.css create mode 100644 app/components/TodoTextInput.js create mode 100644 app/constants/ActionTypes.js create mode 100644 app/constants/TodoFilters.js create mode 100644 app/containers/App.css create mode 100644 app/containers/App.js create mode 100644 app/containers/Root.js create mode 100644 app/reducers/index.js create mode 100644 app/reducers/todos.js create mode 100644 app/store/configureStore.dev.js create mode 100644 app/store/configureStore.js create mode 100644 app/store/configureStore.prod.js create mode 100644 app/utils/storage.js create mode 100644 appveyor.yml create mode 100644 chrome/assets/.DS_Store create mode 100644 chrome/assets/img/.DS_Store create mode 100644 chrome/assets/img/icon-128.png create mode 100644 chrome/assets/img/icon-16.png create mode 100644 chrome/assets/img/icon-48.png create mode 100644 chrome/extension/background.js create mode 100644 chrome/extension/background/badge.js create mode 100644 chrome/extension/background/contextMenus.js create mode 100644 chrome/extension/background/inject.js create mode 100644 chrome/extension/inject.js create mode 100644 chrome/extension/todoapp.css create mode 100644 chrome/extension/todoapp.js create mode 100644 chrome/manifest.dev.json create mode 100644 chrome/manifest.prod.json create mode 100644 chrome/views/background.pug create mode 100644 chrome/views/inject.pug create mode 100644 chrome/views/popup.pug create mode 100644 chrome/views/window.pug create mode 100644 package.json create mode 100644 scripts/.eslintrc create mode 100644 scripts/build.js create mode 100644 scripts/compress.js create mode 100644 scripts/dev.js create mode 100644 scripts/tasks.js create mode 100644 test/.eslintrc create mode 100644 test/app/actions/todos.spec.js create mode 100644 test/app/components/Footer.spec.js create mode 100644 test/app/components/Header.spec.js create mode 100644 test/app/components/MainSection.spec.js create mode 100644 test/app/components/TodoItem.spec.js create mode 100644 test/app/components/TodoTextInput.spec.js create mode 100644 test/app/reducers/todos.spec.js create mode 100644 test/e2e/injectpage.js create mode 100644 test/e2e/todoapp.js create mode 100644 test/func.js create mode 100644 test/mocha.opts create mode 100644 test/setup-app.js create mode 100644 webpack/.eslintrc create mode 100644 webpack/customPublicPath.js create mode 100644 webpack/dev.config.js create mode 100644 webpack/postcss.config.js create mode 100644 webpack/prod.config.js create mode 100644 webpack/replace/JsonpMainTemplate.runtime.js create mode 100644 webpack/replace/process-update.js create mode 100644 webpack/test.config.js create mode 100644 yarn.lock diff --git a/.babelrc b/.babelrc new file mode 100644 index 000000000000..6ce5f007db33 --- /dev/null +++ b/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["es2015", "stage-0", "react"], + "plugins": ["add-module-exports", "transform-decorators-legacy", "transform-runtime"] +} diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 000000000000..51051f722292 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,25 @@ +{ + "parser": "babel-eslint", + "extends": "airbnb", + "globals": { + "chrome": true + }, + "env": { + "browser": true, + "node": true + }, + "rules": { + "react/forbid-prop-types": 0, + "react/prefer-stateless-function": 0, + "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], + "jsx-a11y/no-static-element-interactions": 0, + "jsx-a11y/label-has-for": 0, + "consistent-return": 0, + "comma-dangle": 0, + "spaced-comment": 0, + "global-require": 0 + }, + "plugins": [ + "react" + ] +} diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 000000000000..212bb5d11e68 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,36 @@ +sudo: required +dist: trusty +language: node_js +node_js: + - "6" + - "7" +cache: + directories: + - $HOME/.yarn-cache + - node_modules +env: + - CXX=g++-4.8 +addons: + apt: + sources: + - google-chrome + - ubuntu-toolchain-r-test + packages: + - google-chrome-stable + - g++-4.8 + +install: + - "/sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen 0 1280x1024x16" + - npm install -g yarn + - yarn install + +before_script: + - export DISPLAY=:99.0 + - sh -e /etc/init.d/xvfb start & + - sleep 3 + +script: + - yarn run lint + - yarn test + - yarn run build + - yarn run test-e2e diff --git a/README.md b/README.md new file mode 100644 index 000000000000..9444eac1868e --- /dev/null +++ b/README.md @@ -0,0 +1,113 @@ +# React Chrome Extension Boilerplate + +[![Build Status](https://travis-ci.org/jhen0409/react-chrome-extension-boilerplate.svg?branch=master)](https://travis-ci.org/jhen0409/react-chrome-extension-boilerplate) +[![Build status: Windows](https://ci.appveyor.com/api/projects/status/b5xy6ev6oykth0d2/branch/master?svg=true)](https://ci.appveyor.com/project/jhen0409/react-chrome-extension-boilerplate/branch/master) +[![NPM version](http://img.shields.io/npm/v/react-chrome-extension-boilerplate.svg?style=flat)](https://www.npmjs.com/package/react-chrome-extension-boilerplate) +[![Dependency Status](https://david-dm.org/jhen0409/react-chrome-extension-boilerplate.svg)](https://david-dm.org/jhen0409/react-chrome-extension-boilerplate) +[![devDependency Status](https://david-dm.org/jhen0409/react-chrome-extension-boilerplate/dev-status.svg)](https://david-dm.org/jhen0409/react-chrome-extension-boilerplate#info=devDependencies) + +> Boilerplate for Chrome Extension React.js project. + +## Features + + - Simple [React](https://github.com/facebook/react)/[Redux](https://github.com/rackt/redux) examples of Chrome Extension Window & Popup & Inject pages + - Hot reloading React/Redux (Using [Webpack](https://github.com/webpack/webpack) and [React Transform](https://github.com/gaearon/react-transform)) + - Write code with ES2015+ syntax (Using [Babel](https://github.com/babel/babel)) + - E2E tests of Window & Popup & Inject pages (Using [Chrome Driver](https://www.npmjs.com/package/chromedriver), [Selenium Webdriver](https://www.npmjs.com/package/selenium-webdriver)) + +## Examples + +The example is edited from [Redux](https://github.com/rackt/redux) TodoMVC example. + +#### Popup + +![Popup](https://cloud.githubusercontent.com/assets/3001525/14128490/dc05e9f8-f653-11e5-9de6-82d1de01844a.gif) + +The `todos` state will be saved to `chrome.storage.local`. + +#### Window + +![Window](https://cloud.githubusercontent.com/assets/3001525/14128489/da176b62-f653-11e5-9bff-fefc35232358.gif) + +The context menu is created by [chrome/extension/background/contextMenus.js](chrome/extension/background/contextMenus.js). + +#### Inject page + +The inject script is being run by [chrome/extension/background/inject.js](chrome/extension/background/inject.js). A simple example will be inject bottom of page(`https://github.com/*`) if you visit. + +If you are receiving the error message `Failed to load resource: net::ERR_INSECURE_RESPONSE`, you need to allow invalid certificates for resources loaded from localhost. You can do this by visiting the following URL: `chrome://flags/#allow-insecure-localhost` and enabling **Allow invalid certificates for resources loaded from localhost**. + +## Installation + +```bash +# clone it +$ git clone https://github.com/jhen0409/react-chrome-extension-boilerplate.git + +# Install dependencies +$ npm install +``` + +## Development + +* Run script +```bash +# build files to './dev' +# start webpack development server +$ npm run dev +``` +* If you're developing Inject page, please allow `https://localhost:3000` connections. (Because `injectpage` injected GitHub (https) pages, so webpack server procotol must be https.) +* [Load unpacked extensions](https://developer.chrome.com/extensions/getstarted#unpacked) with `./dev` folder. + +#### React/Redux hot reload + +This boilerplate uses `Webpack` and `react-transform`, and use `Redux`. You can hot reload by editing related files of Popup & Window & Inject page. + +#### Using Redux DevTools Extension + +You can use [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension) on development mode. + +## Build + +```bash +# build files to './build' +$ npm run build +``` + +## Compress + +```bash +# compress build folder to {manifest.name}.zip and crx +$ npm run build +$ npm run compress -- [options] +``` + +#### Options + +If you want to build `crx` file (auto update), please provide options, and add `update.xml` file url in [manifest.json](https://developer.chrome.com/extensions/autoupdate#update_url manifest.json). + +* --app-id: your extension id (can be get it when you first release extension) +* --key: your private key path (default: './key.pem') + you can use `npm run compress-keygen` to generate private key `./key.pem` +* --codebase: your `crx` file url + +See [autoupdate guide](https://developer.chrome.com/extensions/autoupdate) for more information. + +## Test + +* `test/app`: React components, Redux actions & reducers tests +* `test/e2e`: E2E tests (use [chromedriver](https://www.npmjs.com/package/chromedriver), [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver)) + +```bash +# lint +$ npm run lint +# test/app +$ npm test +$ npm test -- --watch # watch files +# test/e2e +$ npm run build +$ npm run test-e2e +``` + +## LICENSE + +[MIT](LICENSE) diff --git a/app/actions/todos.js b/app/actions/todos.js new file mode 100644 index 000000000000..642472212986 --- /dev/null +++ b/app/actions/todos.js @@ -0,0 +1,25 @@ +import * as types from '../constants/ActionTypes'; + +export function addTodo(text) { + return { type: types.ADD_TODO, text }; +} + +export function deleteTodo(id) { + return { type: types.DELETE_TODO, id }; +} + +export function editTodo(id, text) { + return { type: types.EDIT_TODO, id, text }; +} + +export function completeTodo(id) { + return { type: types.COMPLETE_TODO, id }; +} + +export function completeAll() { + return { type: types.COMPLETE_ALL }; +} + +export function clearCompleted() { + return { type: types.CLEAR_COMPLETED }; +} diff --git a/app/components/Footer.css b/app/components/Footer.css new file mode 100644 index 000000000000..f59ac4aa0160 --- /dev/null +++ b/app/components/Footer.css @@ -0,0 +1,85 @@ +.footer { + color: #777; + padding: 10px 15px; + height: 20px; + text-align: center; + border-top: 1px solid #e6e6e6; +} + +.footer:before { + content: ''; + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 50px; + overflow: hidden; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), + 0 8px 0 -3px #f6f6f6, + 0 9px 1px -3px rgba(0, 0, 0, 0.2), + 0 16px 0 -6px #f6f6f6, + 0 17px 2px -6px rgba(0, 0, 0, 0.2); +} + +.filters { + margin: 0; + padding: 0; + list-style: none; + position: absolute; + right: 0; + left: 0; +} + +.filters li { + display: inline; +} + +.filters li a { + color: inherit; + margin: 3px; + padding: 3px 7px; + text-decoration: none; + border: 1px solid transparent; + border-radius: 3px; +} + +.filters li a.selected, +.filters li a:hover { + border-color: rgba(175, 47, 47, 0.1); +} + +.filters li a.selected { + border-color: rgba(175, 47, 47, 0.2); +} + +.todoCount { + float: left; + text-align: left; +} + +.todoCount strong { + font-weight: 300; +} + +.clearCompleted, +html .clearCompleted:active { + float: right; + position: relative; + line-height: 20px; + text-decoration: none; + cursor: pointer; +} + +.clearCompleted:hover { + text-decoration: underline; +} + +@media (max-width: 430px) { + .footer { + height: 50px; + } + + .filters { + bottom: 10px; + } +} diff --git a/app/components/Footer.js b/app/components/Footer.js new file mode 100644 index 000000000000..89c2c8ac5be5 --- /dev/null +++ b/app/components/Footer.js @@ -0,0 +1,91 @@ +import React, { PropTypes, Component } from 'react'; +import classnames from 'classnames'; +import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters'; +import style from './Footer.css'; + +const FILTERS = [SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED]; +const FILTER_TITLES = { + [SHOW_ALL]: 'All', + [SHOW_ACTIVE]: 'Active', + [SHOW_COMPLETED]: 'Completed' +}; + +export default class Footer extends Component { + + static propTypes = { + completedCount: PropTypes.number.isRequired, + activeCount: PropTypes.number.isRequired, + filter: PropTypes.string.isRequired, + onClearCompleted: PropTypes.func.isRequired, + onShow: PropTypes.func.isRequired + }; + + constructor(props, context) { + super(props, context); + if (props.onShow) { + this.filterHandlers = FILTERS.map(filter => () => props.onShow(filter)); + } + } + + componentWillReceiveProps(nextProps) { + if (nextProps.onShow) { + this.filterHandlers = FILTERS.map(filter => () => nextProps.onShow(filter)); + } + } + + renderTodoCount() { + const { activeCount } = this.props; + const itemWord = activeCount === 1 ? 'item' : 'items'; + + return ( + + {activeCount || 'No'} {itemWord} left + + ); + } + + renderFilterLink(filter, handler) { + const title = FILTER_TITLES[filter]; + const { filter: selectedFilter } = this.props; + + return ( + + {title} + + ); + } + + renderClearButton() { + const { completedCount, onClearCompleted } = this.props; + if (completedCount > 0) { + return ( + + ); + } + } + + render() { + return ( +
+ {this.renderTodoCount()} +
    + {FILTERS.map((filter, i) => +
  • + {this.renderFilterLink(filter, this.filterHandlers[i])} +
    • + )} +
+ {this.renderClearButton()} +
+ ); + } +} diff --git a/app/components/Header.js b/app/components/Header.js new file mode 100644 index 000000000000..669c408bc77f --- /dev/null +++ b/app/components/Header.js @@ -0,0 +1,28 @@ +import React, { PropTypes, Component } from 'react'; +import TodoTextInput from './TodoTextInput'; + +export default class Header extends Component { + + static propTypes = { + addTodo: PropTypes.func.isRequired + }; + + handleSave = (text) => { + if (text.length !== 0) { + this.props.addTodo(text); + } + }; + + render() { + return ( +
+

todos

+ +
+ ); + } +} diff --git a/app/components/MainSection.css b/app/components/MainSection.css new file mode 100644 index 000000000000..34c701d11301 --- /dev/null +++ b/app/components/MainSection.css @@ -0,0 +1,151 @@ +.main { + position: relative; + z-index: 2; + border-top: 1px solid #e6e6e6; +} + +.todoList { + margin: 0; + padding: 0; + list-style: none; +} + +.todoList li { + position: relative; + font-size: 24px; + border-bottom: 1px solid #ededed; +} + +.todoList li:last-child { + border-bottom: none; +} + +.todoList li.editing { + border-bottom: none; + padding: 0; +} + +.todoList li.editing .edit { + display: block; + width: 506px; + padding: 13px 17px 12px 17px; + margin: 0 0 0 43px; +} + +.todoList li.editing .view { + display: none; +} + +.todoList li .toggle { + text-align: center; + width: 40px; + /* auto, since non-WebKit browsers doesn't support input styling */ + height: auto; + position: absolute; + top: 0; + bottom: 0; + margin: auto 0; + border: none; /* Mobile Safari */ + -webkit-appearance: none; + -moz-appearance: none; +} + +.todoList li .toggle:after { + content: url('data:image/svg+xml;utf8,'); +} + +.todoList li .toggle:checked:after { + content: url('data:image/svg+xml;utf8,'); +} + +.todoList li label { + white-space: pre-line; + word-break: break-all; + padding: 15px 60px 15px 15px; + margin-left: 45px; + display: block; + line-height: 1.2; + transition: color 0.4s; +} + +.todoList li.completed label { + color: #d9d9d9; + text-decoration: line-through; +} + +.todoList li .destroy { + display: none; + position: absolute; + top: 0; + right: 10px; + bottom: 0; + width: 40px; + height: 40px; + margin: auto 0; + font-size: 30px; + color: #cc9a9a; + margin-bottom: 11px; + transition: color 0.2s ease-out; +} + +.todoList li .destroy:hover { + color: #af5b5e; +} + +.todoList li .destroy:after { + content: '×'; +} + +.todoList li:hover .destroy { + display: block; +} + +.todoList li .edit { + display: none; +} + +.todoList li.editing:last-child { + margin-bottom: -1px; +} + +.toggleAll { + position: absolute; + top: -55px; + left: -12px; + width: 60px; + height: 34px; + text-align: center; + border: none; /* Mobile Safari */ +} + +.toggleAll:before { + content: '❯'; + font-size: 22px; + color: #e6e6e6; + padding: 10px 27px 10px 27px; +} + +.toggleAll:checked:before { + color: #737373; +} + +/* + Hack to remove background from Mobile Safari. + Can't use it globally since it destroys checkboxes in Firefox +*/ +@media screen and (-webkit-min-device-pixel-ratio:0) { + .toggleAll, + .todoList li .toggle { + background: none; + } + + .todoList li .toggle { + height: 40px; + } + + .toggleAll { + transform: rotate(90deg); + -webkit-appearance: none; + -moz-appearance: none; + } +} diff --git a/app/components/MainSection.js b/app/components/MainSection.js new file mode 100644 index 000000000000..743c4e238704 --- /dev/null +++ b/app/components/MainSection.js @@ -0,0 +1,90 @@ +import React, { Component, PropTypes } from 'react'; +import TodoItem from './TodoItem'; +import Footer from './Footer'; +import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters'; +import style from './MainSection.css'; + +const TODO_FILTERS = { + [SHOW_ALL]: () => true, + [SHOW_ACTIVE]: todo => !todo.completed, + [SHOW_COMPLETED]: todo => todo.completed +}; + +export default class MainSection extends Component { + + static propTypes = { + todos: PropTypes.array.isRequired, + actions: PropTypes.object.isRequired + }; + + constructor(props, context) { + super(props, context); + this.state = { filter: SHOW_ALL }; + } + + handleClearCompleted = () => { + const atLeastOneCompleted = this.props.todos.some(todo => todo.completed); + if (atLeastOneCompleted) { + this.props.actions.clearCompleted(); + } + }; + + handleShow = (filter) => { + this.setState({ filter }); + }; + + renderToggleAll(completedCount) { + const { todos, actions } = this.props; + if (todos.length > 0) { + return ( + + ); + } + } + + renderFooter(completedCount) { + const { todos } = this.props; + const { filter } = this.state; + const activeCount = todos.length - completedCount; + + if (todos.length) { + return ( +