Added Facebook Analytics for tracking

sidvishnoi · sidvishnoi · commit 4e8560087df9 · 2017-11-21T16:59:25.000+05:30
Fix: prevent getting out of localStorage
Add option to clear extension's browser storage
diff --git a/contentscript.js b/contentscript.js
@@ -107,6 +107,7 @@ asyncParallel({
     utils: cb => injectScriptFile('utils.js', cb),
     groups: cb => injectScriptFile('groups.js', cb),
     inject: cb => injectScriptFile('inject.js', cb),
+    analytics: cb => injectScriptFile('options/analytics.js', cb),
   }, (err, res) => {
     injectScriptText(`
       console.log('<<< fbDevInterest >>>');
diff --git a/dist/contentscript.js b/dist/contentscript.js
diff --git a/dist/inject.js b/dist/inject.js
diff --git a/dist/manifest.json b/dist/manifest.json
@@ -24,12 +24,13 @@
   "web_accessible_resources": [
     "utils.js",
     "groups.js",
+    "options/analytics.js",
     "inject.js"
   ],
   "permissions": [
     "declarativeContent",
     "activeTab",
     "storage"
   ],
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
+  "content_security_policy": "script-src 'self' https://connect.facebook.net/en_US/sdk.js; object-src 'self'"
 }
diff --git a/dist/options/analytics.js b/dist/options/analytics.js
@@ -0,0 +1,20 @@
+window.fbAsyncInit = function() {
+  FB.init({
+    appId: '148818419074509',
+    xfbml: true,
+    version: 'v2.11'
+  });
+
+  if (window.location.href.includes('facebook.com')) {
+    FB.AppEvents.logEvent('UsedExtension');
+  }
+};
+
+(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) { return; }
+  js = d.createElement(s);
+  js.id = id;
+  js.src = "https://connect.facebook.net/en_US/sdk.js";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));
diff --git a/dist/options/index.html b/dist/options/index.html
@@ -1,31 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
-  <title>Facebook Developer Interests | Options</title>
+  <title>Merge Facebook Dev Circles by Interests | Options</title>
   <meta name="viewport" content="width=device-width">
 </head>
+
 <body>
   <div id="root"></div>
-  <script>
-  window.fbAsyncInit = function() {
-    FB.init({
-      appId      : '148818419074509',
-      xfbml      : true,
-      version    : 'v2.11'
-    });
-  
-    FB.AppEvents.logPageView();
-  
-  };
-
-  (function(d, s, id){
-     var js, fjs = d.getElementsByTagName(s)[0];
-     if (d.getElementById(id)) {return;}
-     js = d.createElement(s); js.id = id;
-     js.src = "https://connect.facebook.net/en_US/sdk.js";
-     fjs.parentNode.insertBefore(js, fjs);
-   }(document, 'script', 'facebook-jssdk'));
-</script>
+  <script src="analytics.js"></script>
 <script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="options.js"></script></body>
+
 </html>
diff --git a/dist/options/options.js b/dist/options/options.js
diff --git a/inject.js b/inject.js
@@ -17,6 +17,19 @@ fbDevInterest.createElement = function(type, options) {
   return el;
 }
 
+// clears localStorage of extension in case of out of quota
+fbDevInterest.clearLocalStorage = function() {
+  const keys = Object.keys(localStorage);
+  let count = 0;
+  for (const key of keys) {
+    if (key.startsWith('https://graph.facebook.com/v2.11/')) {
+      localStorage.removeItem(key);
+      ++count;
+    }
+    if (count === 10) return; // let's delete just 10 items for now
+  }
+};
+
 fbDevInterest.BASE_API_URL = `https://graph.facebook.com/v2.11/GROUPID/?&access_token=${fbDevInterest._apiKey}&fields=name,id,feed{message,id,name,from,permalink_url,full_picture,link,created_time}`;
 fbDevInterest.COMMENTS_API_URL = `https://graph.facebook.com/v2.11/POSTID/?&access_token=${fbDevInterest._apiKey}&fields=comments{from,permalink_url,message,created_time,comments{from,permalink_url,message,created_time}},permalink_url`
 
@@ -237,7 +250,12 @@ fbDevInterest.getComments = function(postid, parent) {
     .then(res => res.json())
     .then((json) => {
       json.last_fetch_time = new Date();
-      localStorage.setItem(fetchUrl, JSON.stringify(json));
+      try {
+        localStorage.setItem(fetchUrl, JSON.stringify(json));
+      } catch (e) {
+        // out of storage? don't store and clear items for extension
+        self.clearLocalStorage();
+      }
       self.requestList.delete(fetchUrl);
       self.showComments(json, commentsArea);
     })
@@ -478,7 +496,12 @@ fbDevInterest.getGroupFeed = function(options) {
     .then((res) => res.json())
     .then((json) => {
       json.last_fetch_time = new Date();
-      localStorage.setItem(fetchUrl, JSON.stringify(json));
+      try {
+        localStorage.setItem(fetchUrl, JSON.stringify(json));
+      } catch(e) {
+        // out of storage? don't store and clear items for extension
+        self.clearLocalStorage();
+      }
       self.requestList.delete(fetchUrl);
       handleJsonResponse(json);
     })
diff --git a/manifest.json b/manifest.json
@@ -24,12 +24,13 @@
   "web_accessible_resources": [
     "utils.js",
     "groups.js",
+    "options/analytics.js",
     "inject.js"
   ],
   "permissions": [
     "declarativeContent",
     "activeTab",
     "storage"
   ],
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
+  "content_security_policy": "script-src 'self' https://connect.facebook.net/en_US/sdk.js; object-src 'self'"
 }
diff --git a/options.dev/ApiKeyForm.jsx b/options.dev/ApiKeyForm.jsx
@@ -1,10 +1,12 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
 
+const defaultAppToken = '148818419074509|CrToch6NqQe-mDJ8601f7HU_-3I';
+
 class ApiKeyForm extends React.Component {
   constructor() {
     super();
-    this.state = { value: '', status: 'Set API Key' };
+    this.state = { value: defaultAppToken, status: 'Set API Key' };
     chrome.storage.sync.get('apikey', (res) => {
       if (res.apikey)
         this.setState({ value: res.apikey, status: 'Modify API Key' });
@@ -26,6 +28,9 @@ class ApiKeyForm extends React.Component {
         self.setState({ status: 'Modify API Key' })
       }, 1500);
     });
+    if (self.state.value !== defaultAppToken) {
+      FB.AppEvents.logEvent('UsedCustomAppToken');
+    }
   }
 
   render() {
diff --git a/options.dev/BlacklistGroups.jsx b/options.dev/BlacklistGroups.jsx
@@ -50,10 +50,15 @@ class BlacklistGroups extends React.Component {
     chrome.storage.sync.set({ groups: blacklistedGroupIds });
   }
 
+  clearStorage() {
+    chrome.storage.sync.remove('keywords');
+    window.location.href = '';
+  }
+
   render () {
     return (
       <div>
-        <h3>Blacklist Groups</h3>
+        <h3>Blacklist Groups <small onClick={this.clearStorage} title="Clear Storage" style={{float: 'right', cursor: 'pointer', color: '#777'}}>✕</small></h3>
         <ReactTags
           tags={this.state.tags}
           suggestions={this.state.suggestions}
diff --git a/options.dev/KeywordsFilter.jsx b/options.dev/KeywordsFilter.jsx
@@ -48,12 +48,24 @@ class KeywordsFilter extends React.Component {
     this.setState({ suggestions: updatedSuggestions, tags });
 
     chrome.storage.sync.set({ keywords: tags });
+
+    // tracking
+    FB.AppEvents.logEvent('UsedKeyword', null, { keyword: tag.name });
+    const isNewKeyword = !(keywords.find(k => k.name === tag.name));
+    if (isNewKeyword) {
+      FB.AppEvents.logEvent('NewKeyword', null, { keyword: tag.name });
+    }
+  }
+
+  clearStorage() {
+    chrome.storage.sync.remove('keywords');
+    window.location.href = '';
   }
 
   render () {
     return (
       <div>
-        <h3>My Interests</h3>
+        <h3>My Interests <small onClick={this.clearStorage} title="Clear Storage" style={{float: 'right', cursor: 'pointer', color: '#777'}}>✕</small></h3>
         <ReactTags
           tags={this.state.tags}
           suggestions={this.state.suggestions}
diff --git a/options.dev/analytics.js b/options.dev/analytics.js
@@ -0,0 +1,20 @@
+window.fbAsyncInit = function() {
+  FB.init({
+    appId: '148818419074509',
+    xfbml: true,
+    version: 'v2.11'
+  });
+
+  if (window.location.href.includes('facebook.com')) {
+    FB.AppEvents.logEvent('UsedExtension');
+  }
+};
+
+(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) { return; }
+  js = d.createElement(s);
+  js.id = id;
+  js.src = "https://connect.facebook.net/en_US/sdk.js";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));
diff --git a/options.dev/index.html b/options.dev/index.html
@@ -1,11 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
-  <title>Facebook Developer Interests | Options</title>
+  <title>Merge Facebook Dev Circles by Interests | Options</title>
   <meta name="viewport" content="width=device-width">
 </head>
+
 <body>
   <div id="root"></div>
+  <script src="analytics.js"></script>
 </body>
+
 </html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -11,8 +11,8 @@ const APP_DIR = path.resolve(__dirname, 'options.dev');
 function minifyFilesBeforeCopy(content, $path) {
   const result = UglifyJS.minify(content.toString());
   if (result.error) {
-    console.error($path, result.error);
-    return content;
+    console.error($path);
+    throw result.error;
   }
   return result.code;
 }
@@ -48,6 +48,7 @@ const config = {
     new ExtractTextPlugin('[name].css'),
     new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }),
     new CopyWebpackPlugin([
+      { from: path.resolve('options.dev/analytics.js'), to: 'analytics.js'},
       { from: 'manifest.json', to: '..' },
       { from: 'icon*.png', to: '..' },
       { from: 'inject.js', to: '..', transform: minifyFilesBeforeCopy },
