From 700284b85280177d09b58f6d9f1ddfcc6b69793f Mon Sep 17 00:00:00 2001 From: Isabella Chen Date: Thu, 26 Oct 2017 12:57:00 +0200 Subject: [PATCH 1/3] Revert "added text to readme" This reverts commit b4f461fac2c94c741c33cd39a232e731ac055326. --- README.md | 22 ---------------------- package.json | 2 +- 2 files changed, 1 insertion(+), 23 deletions(-) diff --git a/README.md b/README.md index 76398fc..e69de29 100644 --- a/README.md +++ b/README.md @@ -1,22 +0,0 @@ -# Map Marklet - -## Synopsis -- Map Marklet is a Chrome extension that lets users save urls to markers on a personal instance of Google Maps. - -## App Screenshots -![popup](./images/map-marklet-popup.png "Popup") -![main-page](./images/map-marklet-main.png "Main") - -## Motivation -- While planning for road trips, I often save bookmarks to many websites which I then reference later. However, it's difficult to know the locations the websites refer to. This Chrome extension helps me locate the places the websites refer to on a map. - -## Installation -- Clone the repo and `npm i` -- `gulp watch` -- In Chrome, More tools > Extensions, select developer mode. -- Click button 'Load unpacked extension' and select the build folder. - -## Tech Stack -- React + Redux -- Google Maps Api -- Chrome Api diff --git a/package.json b/package.json index 59feb84..ca22ccf 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, - "author": "Isabella Chen", + "author": "Tyler Shaddix", "dependencies": { "google-maps-react": "^1.1.0", "prop-types": "^15.5.10", From 8400afc2fea09931fcc93cf2a8aac63097420571 Mon Sep 17 00:00:00 2001 From: Isabella Chen Date: Fri, 27 Oct 2017 11:33:04 +0200 Subject: [PATCH 2/3] updated gitignore --- .gitignore | 1 + build/event.js | 19 +++++++++++++++++++ build/main.html | 2 +- build/manifest.json | 21 ++++++++++++++------- build/popup.html | 2 +- build/popup.js | 8 ++++++++ event/src/index.js | 19 +++++++++++++++++++ main/src/index.html | 2 +- manifest.json | 21 ++++++++++++++------- package-lock.json | 5 +++++ package.json | 1 + popup/src/index.html | 2 +- popup/src/scripts/components/app/App.jsx | 8 +++++++- 13 files changed, 92 insertions(+), 19 deletions(-) diff --git a/.gitignore b/.gitignore index 651ef4e..3a18401 100644 --- a/.gitignore +++ b/.gitignore @@ -29,3 +29,4 @@ node_modules # Custom private dist +.pem diff --git a/build/event.js b/build/event.js index 018f6bf..3628316 100644 --- a/build/event.js +++ b/build/event.js @@ -1172,6 +1172,25 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de var store = (0, _redux.createStore)(_reducers2.default, (0, _redux.applyMiddleware)(_reduxLogger2.default)); +// chrome.identity.getAuthToken({ +// interactive: true, +// }, function (token) { +// if (chrome.runtime.lastError) { +// alert(chrome.runtime.lastError.message); +// return; +// } +// var x = new XMLHttpRequest(); +// x.open('GET', 'https://www.googleapis.com/oauth2/v2/userinfo?alt=json&access_token=' + token); +// x.onload = function () { +// alert(x.response); +// }; +// x.send(); +// }); + +// chrome.identity.getAuthToken({ 'interactive': true }, function (token) { +// console.log('token ',token); +// }); + (0, _reactChromeRedux.wrapStore)(store, { portName: 'RSC' }); diff --git a/build/main.html b/build/main.html index 763b4c0..f862a64 100644 --- a/build/main.html +++ b/build/main.html @@ -3,7 +3,7 @@ - RCR Example + Map Marklet diff --git a/build/manifest.json b/build/manifest.json index 31d0e2e..7fbab4a 100644 --- a/build/manifest.json +++ b/build/manifest.json @@ -1,8 +1,9 @@ { "manifest_version": 2, - "name": "RCR", - "description": "React, Chrome, and Redux example", + "name": "Map Marklet", + "description": "Bookmarklet for Google Maps", "version": "0.0.0.1", + "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvV6WbCyOCSKPbLYbbe6Qtp24z4iw2WXxBU1nbYJQPO22f0eizdeseIn2TRAE4q7d6N94YNMGXnHyXJXSUiubVZ79ePR5iLovBbgtwcxgaM4XSvKjz8jaP3JGLKPMaNPbmXZdWZAykFEEgighG2f6uZCht3IGNsg3GiTXQ8pCFhgDg5Iw4bRjQQGOV6q8vLL7/Q74yE97Ac4G9IYnYJFYH/OieDezKx68IQI0H/18Ovz3QPF8f/3FvRnuXwdjCl34hfbMvwKM1vwpoPJF2tTBchat2/83ja3r+AtnTvlzXyRDoD89J6cV4cJueZ9DqTQemCFKZgNNKS7mU1fpV4vZ9wIDAQAB", "background": { "scripts": [ "event.js" @@ -10,10 +11,11 @@ "persistent": true }, "browser_action": { - "default_title": "RCR Example", - "default_popup": "popup.html" + "default_title": "Map Marklet", + "default_popup": "popup.html", + "default_icon": "map-marklet-logo-128.png" }, - "content_security_policy": "script-src 'self' https://maps.googleapis.com; object-src 'self'", + "content_security_policy": "script-src 'self' https://maps.googleapis.com https://connect.facebook.net/en_US/all.js; object-src 'self'", "content_scripts": [ { "matches": ["*://*/*"], @@ -25,6 +27,11 @@ "./main.html" ], "permissions": [ - "tabs" - ] + "tabs", + "identity" + ], + "oauth2": { + "client_id": "658325221633-v2aurmcset7hj6ajq803cv438k7cf5ti.apps.googleusercontent.com", + "scopes": ["profile"] + } } diff --git a/build/popup.html b/build/popup.html index 87da08a..9fb1b2c 100644 --- a/build/popup.html +++ b/build/popup.html @@ -3,7 +3,7 @@ - RCR Example + Map Marklet diff --git a/build/popup.js b/build/popup.js index 9f5e428..ce3e0b3 100644 --- a/build/popup.js +++ b/build/popup.js @@ -12000,6 +12000,14 @@ var App = function (_Component) { } _createClass(App, [{ + key: 'componentWillMount', + value: function componentWillMount() { + chrome.identity.getAuthToken({ 'interactive': true }, function (token) { + console.log('token ', token); + }); + console.log('foobar'); + } + }, { key: 'componentWillReceiveProps', value: function componentWillReceiveProps(nextProps) { var _this2 = this; diff --git a/event/src/index.js b/event/src/index.js index ba4dd22..04a589f 100644 --- a/event/src/index.js +++ b/event/src/index.js @@ -11,6 +11,25 @@ const store = createStore( applyMiddleware(logger) ); +// chrome.identity.getAuthToken({ +// interactive: true, +// }, function (token) { +// if (chrome.runtime.lastError) { +// alert(chrome.runtime.lastError.message); +// return; +// } +// var x = new XMLHttpRequest(); +// x.open('GET', 'https://www.googleapis.com/oauth2/v2/userinfo?alt=json&access_token=' + token); +// x.onload = function () { +// alert(x.response); +// }; +// x.send(); +// }); + +// chrome.identity.getAuthToken({ 'interactive': true }, function (token) { +// console.log('token ',token); +// }); + wrapStore(store, { portName: 'RSC', }); diff --git a/main/src/index.html b/main/src/index.html index 763b4c0..f862a64 100644 --- a/main/src/index.html +++ b/main/src/index.html @@ -3,7 +3,7 @@ - RCR Example + Map Marklet diff --git a/manifest.json b/manifest.json index 31d0e2e..7fbab4a 100644 --- a/manifest.json +++ b/manifest.json @@ -1,8 +1,9 @@ { "manifest_version": 2, - "name": "RCR", - "description": "React, Chrome, and Redux example", + "name": "Map Marklet", + "description": "Bookmarklet for Google Maps", "version": "0.0.0.1", + "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvV6WbCyOCSKPbLYbbe6Qtp24z4iw2WXxBU1nbYJQPO22f0eizdeseIn2TRAE4q7d6N94YNMGXnHyXJXSUiubVZ79ePR5iLovBbgtwcxgaM4XSvKjz8jaP3JGLKPMaNPbmXZdWZAykFEEgighG2f6uZCht3IGNsg3GiTXQ8pCFhgDg5Iw4bRjQQGOV6q8vLL7/Q74yE97Ac4G9IYnYJFYH/OieDezKx68IQI0H/18Ovz3QPF8f/3FvRnuXwdjCl34hfbMvwKM1vwpoPJF2tTBchat2/83ja3r+AtnTvlzXyRDoD89J6cV4cJueZ9DqTQemCFKZgNNKS7mU1fpV4vZ9wIDAQAB", "background": { "scripts": [ "event.js" @@ -10,10 +11,11 @@ "persistent": true }, "browser_action": { - "default_title": "RCR Example", - "default_popup": "popup.html" + "default_title": "Map Marklet", + "default_popup": "popup.html", + "default_icon": "map-marklet-logo-128.png" }, - "content_security_policy": "script-src 'self' https://maps.googleapis.com; object-src 'self'", + "content_security_policy": "script-src 'self' https://maps.googleapis.com https://connect.facebook.net/en_US/all.js; object-src 'self'", "content_scripts": [ { "matches": ["*://*/*"], @@ -25,6 +27,11 @@ "./main.html" ], "permissions": [ - "tabs" - ] + "tabs", + "identity" + ], + "oauth2": { + "client_id": "658325221633-v2aurmcset7hj6ajq803cv438k7cf5ti.apps.googleusercontent.com", + "scopes": ["profile"] + } } diff --git a/package-lock.json b/package-lock.json index 6e87708..893b0e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7321,6 +7321,11 @@ "prop-types": "15.5.10" } }, + "react-facebook-login": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/react-facebook-login/-/react-facebook-login-3.6.2.tgz", + "integrity": "sha512-HOyC92hdvsk892OMulzMPDLjCTKRrgM1QQrVSZZuBS7w5TYgpLjO5E9/Q82rz8kPlKiOZbcu4wrnPwLFaG0neg==" + }, "react-redux": { "version": "4.4.8", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-4.4.8.tgz", diff --git a/package.json b/package.json index ca22ccf..9b9c311 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "react": "^15.6.1", "react-chrome-redux": "0.0.7", "react-dom": "^15.6.1", + "react-facebook-login": "^3.6.2", "react-redux": "^4.4.8", "redux": "^3.7.2", "redux-logger": "^3.0.6", diff --git a/popup/src/index.html b/popup/src/index.html index 87da08a..9fb1b2c 100644 --- a/popup/src/index.html +++ b/popup/src/index.html @@ -3,7 +3,7 @@ - RCR Example + Map Marklet diff --git a/popup/src/scripts/components/app/App.jsx b/popup/src/scripts/components/app/App.jsx index c1ad5eb..76cc821 100644 --- a/popup/src/scripts/components/app/App.jsx +++ b/popup/src/scripts/components/app/App.jsx @@ -17,6 +17,13 @@ class App extends Component { } + componentWillMount () { + chrome.identity.getAuthToken({ 'interactive': true }, function (token) { + console.log('token ',token); + }); + console.log('foobar'); + } + componentWillReceiveProps (nextProps) { //force googlemaps to update when component recieves props from redux store if (nextProps.markers !== this.props.markers) { @@ -81,7 +88,6 @@ class App extends Component { }); } - render () { if (!this.props.loaded) { From 5b76232e43a397bb4208485ab5909734df80efe2 Mon Sep 17 00:00:00 2001 From: Isabella Chen Date: Fri, 27 Oct 2017 22:45:21 +0200 Subject: [PATCH 3/3] added login button --- build/manifest.json | 7 ++-- build/popup.js | 44 +++++++++++++++++++----- manifest.json | 7 ++-- popup/src/scripts/components/app/App.jsx | 28 ++++++++++++--- 4 files changed, 67 insertions(+), 19 deletions(-) diff --git a/build/manifest.json b/build/manifest.json index 7fbab4a..65a76fe 100644 --- a/build/manifest.json +++ b/build/manifest.json @@ -12,8 +12,7 @@ }, "browser_action": { "default_title": "Map Marklet", - "default_popup": "popup.html", - "default_icon": "map-marklet-logo-128.png" + "default_popup": "popup.html" }, "content_security_policy": "script-src 'self' https://maps.googleapis.com https://connect.facebook.net/en_US/all.js; object-src 'self'", "content_scripts": [ @@ -28,7 +27,9 @@ ], "permissions": [ "tabs", - "identity" + "identity", + "*://*.google.com/*", + "storage" ], "oauth2": { "client_id": "658325221633-v2aurmcset7hj6ajq803cv438k7cf5ti.apps.googleusercontent.com", diff --git a/build/popup.js b/build/popup.js index ce3e0b3..e49023a 100644 --- a/build/popup.js +++ b/build/popup.js @@ -11945,6 +11945,30 @@ var App = function (_Component) { var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props)); + _this.renderUserButton = function () { + if (_this.state.authorization) { + return _react2.default.createElement( + 'button', + null, + 'My Trips' + ); + } else { + return _react2.default.createElement( + 'button', + { onClick: _this.signIn }, + 'Login' + ); + } + }; + + _this.signIn = function () { + chrome.identity.getAuthToken({ 'interactive': true }, function (token) { + _this.setState({ + authorization: token + }); + }); + }; + _this.placeMarker = function (latLng, date) { _this.setState({ place: null, @@ -11999,15 +12023,16 @@ var App = function (_Component) { return _this; } + // componentWillMount () { + // chrome.identity.getAuthToken({ 'interactive': true }, (token) => { + // this.setState({ + // authorization: token, + // }); + // console.log('token ',token); + // }); + // } + _createClass(App, [{ - key: 'componentWillMount', - value: function componentWillMount() { - chrome.identity.getAuthToken({ 'interactive': true }, function (token) { - console.log('token ', token); - }); - console.log('foobar'); - } - }, { key: 'componentWillReceiveProps', value: function componentWillReceiveProps(nextProps) { var _this2 = this; @@ -12066,7 +12091,8 @@ var App = function (_Component) { 'button', { onClick: this.addMarker }, 'Add Marker' - ) + ), + this.renderUserButton() ); } }]); diff --git a/manifest.json b/manifest.json index 7fbab4a..65a76fe 100644 --- a/manifest.json +++ b/manifest.json @@ -12,8 +12,7 @@ }, "browser_action": { "default_title": "Map Marklet", - "default_popup": "popup.html", - "default_icon": "map-marklet-logo-128.png" + "default_popup": "popup.html" }, "content_security_policy": "script-src 'self' https://maps.googleapis.com https://connect.facebook.net/en_US/all.js; object-src 'self'", "content_scripts": [ @@ -28,7 +27,9 @@ ], "permissions": [ "tabs", - "identity" + "identity", + "*://*.google.com/*", + "storage" ], "oauth2": { "client_id": "658325221633-v2aurmcset7hj6ajq803cv438k7cf5ti.apps.googleusercontent.com", diff --git a/popup/src/scripts/components/app/App.jsx b/popup/src/scripts/components/app/App.jsx index 76cc821..d782878 100644 --- a/popup/src/scripts/components/app/App.jsx +++ b/popup/src/scripts/components/app/App.jsx @@ -17,11 +17,29 @@ class App extends Component { } - componentWillMount () { - chrome.identity.getAuthToken({ 'interactive': true }, function (token) { - console.log('token ',token); + // componentWillMount () { + // chrome.identity.getAuthToken({ 'interactive': true }, (token) => { + // this.setState({ + // authorization: token, + // }); + // console.log('token ',token); + // }); + // } + + renderUserButton = () => { + if (this.state.authorization) { + return ; + } else { + return ; + } + } + + signIn = () => { + chrome.identity.getAuthToken({ 'interactive': true }, (token) => { + this.setState({ + authorization: token, + }); }); - console.log('foobar'); } componentWillReceiveProps (nextProps) { @@ -117,6 +135,8 @@ class App extends Component {