Feature firefox

.gitignore

@@ -5,6 +5,8 @@ npm-debug.log
 
 build/
 dev/
+buildFirefox/
+devFirefox/
 
 *.zip
 *.crx

README.md

@@ -22,12 +22,22 @@ npm install
 
 Then run the developer build:
 
+#### For Chrome
+
 ```
 npm run dev
 ```
 
 Load the extension via [Chrome Apps & Extensions Developer Tool](https://chrome.google.com/webstore/detail/chrome-apps-extensions-de/ohmmkhmmmpcnpikjeljgnaoabkaalbgc?hl=en). Be sure to select the `dev` folder from the "Load unpacked..." step. 
 
+#### For Firefox
+
+```
+npm run devFirefox
+```
+
+Load the extension [doing these steps](https://github.com/ChessCom/browser-extension/pull/48#issuecomment-264218199). 
+
 ### Contribute
 If you would like to contribute code, please submit a pull request. Meaningful contributors will get a free Diamond membership. 
 
@@ -52,3 +62,4 @@ Huge thanks to all of these people and all of this software:
 [Rish](https://github.com/rish)  
 [Martyn Chamberlin](https://github.com/martynchamberlin)  
 [Jhen-Jie Hong](https://github.com/jhen0409/react-chrome-extension-boilerplate)
+[Winner Crespo](https://github.com/wistcc)

app/components/ColorPicker.js

@@ -27,7 +27,7 @@ export default class ColorPicker extends Component {
   }
 
   setDefaultState = () => {
-    chrome.storage.sync.set({ style: {} });
+    chrome.storage.local.set({ style: {} });
     this.setState({ color: {
       r: '255',
       g: '255',
@@ -37,7 +37,7 @@ export default class ColorPicker extends Component {
   }
 
   checkIfStorageAlreadyExists = (name) => {
-    chrome.storage.sync.get(result => {
+    chrome.storage.local.get(result => {
       if (!{}.hasOwnProperty.call(result, 'style')) {
         this.setDefaultState();
         return;
@@ -96,15 +96,15 @@ export default class ColorPicker extends Component {
     const state = JSON.parse(JSON.stringify(this.state));
     const name = this.props.name;
 
-    chrome.storage.sync.get('style', result => {
+    chrome.storage.local.get('style', result => {
       const obj = result;
       if (Object.keys(result).length === 0 && obj.constructor === Object) {
-        chrome.storage.sync.set({ style: {} });
+        chrome.storage.local.set({ style: {} });
         obj.style = {};
       }
       obj.style[name] = state;
       delete obj.style[name].displayColorPicker;
-      chrome.storage.sync.set(obj);
+      chrome.storage.local.set(obj);
     });
   }
 

app/components/Header.js

@@ -16,7 +16,7 @@ export default class Header extends Component {
           <Link slug={`member/${this.props.user.username}`}>
             <div className={style.userInfo}>
               <span className={style.username}>{this.props.user.username}</span>
-              <img role="presentation" width="25" src={`http:${this.props.user.avatarUrl}`} />
+              <img role="presentation" width="25" src={`https:${this.props.user.avatarUrl}`} />
             </div>
           </Link>
         );

app/components/Reset.js

@@ -10,7 +10,7 @@ export default class Reset extends Component {
 
   handleClick = () => {
     if (this.props.type === 'all') {
-      chrome.storage.sync.set({
+      chrome.storage.local.set({
         style: {},
         display: {}
       });

app/components/ToggleDisplay.js

@@ -36,21 +36,21 @@ export default class ToggleDisplay extends Component {
   }
 
   save = (name, state) => {
-    chrome.storage.sync.get('display', result => {
+    chrome.storage.local.get('display', result => {
       const obj = result;
       if (Object.keys(result).length === 0 && obj.constructor === Object) {
-        chrome.storage.sync.set({ display: {} });
+        chrome.storage.local.set({ display: {} });
         obj.display = {};
       }
       obj.display[name] = state;
-      chrome.storage.sync.set(obj);
+      chrome.storage.local.set(obj);
     });
   }
 
   checkIfStorageAlreadyExists(name) {
-    chrome.storage.sync.get(result => {
+    chrome.storage.local.get(result => {
       if (!{}.hasOwnProperty.call(result, 'display')) {
-        chrome.storage.sync.set({ display: {} });
+        chrome.storage.local.set({ display: {} });
         return;
       }
 
@@ -83,7 +83,7 @@ export default class ToggleDisplay extends Component {
       let shouldHide = false;
       let obj = {};
 
-      chrome.storage.sync.get('display', result => {
+      chrome.storage.local.get('display', result => {
         this.state.helpers.map(helper => {
           if (helper.type === 'hide') {
             if (!{}.hasOwnProperty.call(result.display, helper.relation)) {

app/containers/Root.js

@@ -25,7 +25,7 @@ export default class Root extends Component {
           this.setAvatar(user1).then((user2) => {
             this.resolveUser(user2);
             // Save the avatar to localStorage so we can cache it
-            chrome.storage.sync.set({ user: user2 });
+            chrome.storage.local.set({ user: user2 });
           });
         } else {
           this.resolveUser(user1);
@@ -68,7 +68,7 @@ export default class Root extends Component {
    */
   calcLoggedIn(user) {
     return new Promise(resolve =>
-      chrome.storage.sync.get('user', (result) => {
+      chrome.storage.local.get('user', (result) => {
         if (result.user) {
           // Add payload and loggedIn property to user
           resolve(Object.assign({}, user, result.user, { loggedIn: true }));

chrome/extension/background/inject.js

@@ -1,5 +1,5 @@
 function isInjected(tabId) {
-  return chrome.tabs.executeScriptAsync(tabId, {
+  return chrome.tabs.executeScript(tabId, {
     code: `var injected = window.chessBrowserExtension;
       window.chessBrowserExtension = true;
       injected;`,
@@ -16,7 +16,7 @@ function loadScript(name, tabId, cb) {
     cb);
   } else {
     // dev: async fetch bundle
-    fetch(`http://localhost:3000/js/${name}.bundle.js`)
+    fetch(`https://localhost:3000/js/${name}.bundle.js`)
     .then(res => res.text())
     .then(fetchRes => {
       chrome.tabs.executeScript(tabId, { code: fetchRes, runAt: 'document_end' }, cb);
@@ -74,7 +74,7 @@ const arrowURLs = ['^https://www.chess\\.com'];
 chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
   if (changeInfo.status === 'loading' && tab.url.match(arrowURLs.join('|'))) {
     // Get cached styles to inject before the DOM loads on each page load
-    chrome.storage.sync.get(storage => {
+    chrome.storage.local.get(storage => {
       injectCSS(tabId, storage.style);
       injectDisplay(tabId, storage.display);
     });
@@ -84,8 +84,8 @@ chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
 
   if (changeInfo.status !== 'loading' || !tab.url.match(arrowURLs.join('|'))) return;
 
-  const result = await isInjected(tabId);
-  if (chrome.runtime.lastError || result[0]) return;
+  isInjected(tabId);
+  if (chrome.runtime.lastError) return;
 
   // Loads content script to manipulate the dom in real time
   loadScript('inject', tabId);

chrome/extension/inject.js

@@ -104,6 +104,6 @@ window.addEventListener('message', (event) => {
   }
 
   if (event.data.username) {
-    chrome.storage.sync.set({ user: event.data });
+    chrome.storage.local.set({ user: event.data });
   }
 }, false);

chrome/extension/options.css

@@ -24,8 +24,7 @@ body {
   line-height: 1.4em;
   background: #f5f5f5;
   color: #4d4d4d;
-  min-width: 230px;
-  max-width: 550px;
+  width: 300px;
   margin: 0 auto;
 }
 

chrome/manifest.dev.json

@@ -18,14 +18,24 @@
   ],
   "content_scripts": [
     {
-      "matches": ["https://www.chess.com/*"],
-      "js": ["inject.js"],
+      "matches": [
+        "https://www.chess.com/*"
+      ],
+      "js": [
+        "inject.js"
+      ],
       "all_frames": true
     }
   ],
   "background": {
     "page": "background.html"
   },
-  "permissions": [ "contextMenus", "management", "tabs", "storage", "https://www.chess.com/*" ],
-  "content_security_policy": "default-src 'self'; script-src 'self' http://localhost:3000 https://localhost:3000 'unsafe-eval'; connect-src http://localhost:3000 https://localhost:3000 https://www.chess.com; style-src * 'unsafe-inline' 'self' blob:; img-src 'self' http://images.chesscomfiles.com data:; font-src 'self' data:;"
+  "permissions": [
+    "contextMenus",
+    "management",
+    "tabs",
+    "storage",
+    "https://www.chess.com/*"
+  ],
+  "content_security_policy": "default-src 'self'; script-src 'self' https://localhost:3000 'unsafe-eval'; connect-src https://localhost:3000 https://www.chess.com; style-src * 'unsafe-inline' 'self' blob:; img-src 'self' https://images.chesscomfiles.com data:; font-src 'self' data:;"
 }

chrome/manifest.devFirefox.json

@@ -0,0 +1,49 @@
+{
+  "version": "0.0.8",
+  "name": "Chess Browser Extension",
+  "manifest_version": 2,
+  "description": "Customize your Chess.com Experience",
+  "browser_action": {
+    "default_title": "Chess.com Browser Extension",
+    "default_popup": "popup.html",
+    "default_icon": {
+      "48": "img/icon-48.png"
+    }
+  },
+  "icons": {
+    "128": "img/icon-128.png"
+  },
+  "applications": {
+    "gecko": {
+      "id": "[email protected]"
+    }
+  },
+  "web_accessible_resources": [
+    "inject.html",
+    "img/*",
+    "fonts/*",
+    "content.js"
+  ],
+  "content_scripts": [
+    {
+      "matches": [
+        "https://www.chess.com/*"
+      ],
+      "js": [
+        "inject.js"
+      ],
+      "all_frames": true
+    }
+  ],
+  "background": {
+    "page": "background.html"
+  },
+  "permissions": [
+    "contextMenus",
+    "management",
+    "tabs",
+    "storage",
+    "https://www.chess.com/*"
+  ],
+  "content_security_policy": "default-src 'self'; script-src 'self' https://localhost:3000 'unsafe-eval'; object-src 'self'; connect-src https://localhost:3000 https://www.chess.com; style-src 'self' blob:; img-src 'self' https://images.chesscomfiles.com data:; font-src 'self' data:;"
+}

chrome/manifest.prod.json

@@ -27,5 +27,5 @@
     "page": "background.html"
   },
   "permissions": [ "contextMenus", "tabs", "storage", "https://www.chess.com/*" ],
-  "content_security_policy": "default-src 'self'; script-src 'self'; connect-src https://www.chess.com; style-src * 'unsafe-inline'; img-src 'self' http://images.chesscomfiles.com data:; font-src 'self' data:;"
+  "content_security_policy": "default-src 'self'; script-src 'self'; connect-src https://www.chess.com; style-src * 'unsafe-inline'; img-src 'self' https://images.chesscomfiles.com data:; font-src 'self' data:;"
 }

chrome/manifest.prodFirefox.json

@@ -0,0 +1,39 @@
+{
+  "version": "0.0.8",
+  "name": "Chess Browser Extension",
+  "manifest_version": 2,
+  "description": "Customize your Chess.com Experience",
+  "browser_action": {
+    "default_title": "Chess.com Browser Extension",
+    "default_popup": "popup.html",
+    "default_icon": {
+      "48": "img/icon-48.png"
+    }
+  },
+  "icons": {
+    "16": "img/icon-16.png",
+    "48": "img/icon-48.png",
+    "128": "img/icon-128.png"
+  },
+  "applications": {
+    "gecko": {
+      "id": "[email protected]"
+    }
+  },
+  "web_accessible_resources": [
+    "inject.html",
+    "content.js"
+  ],
+  "content_scripts": [
+    {
+      "matches": ["https://www.chess.com/*"],
+      "js": ["inject.js"],
+      "all_frames": true
+    }
+  ],
+  "background": {
+    "page": "background.html"
+  },
+  "permissions": [ "contextMenus", "tabs", "storage", "https://www.chess.com/*" ],
+  "content_security_policy": "default-src 'self'; script-src 'self'; connect-src https://www.chess.com; style-src * 'unsafe-inline'; img-src 'self' https://images.chesscomfiles.com data:; font-src 'self' data:;"
+}

chrome/views/popup.jade

@@ -10,4 +10,4 @@ html
 
   body
     #root
-    script(src=env == 'prod' ? '/js/options.bundle.js' : 'http://localhost:3000/js/options.bundle.js')
+    script(src=env == 'prod' ? '/js/options.bundle.js' : 'https://localhost:3000/js/options.bundle.js')

chrome/views/window.jade

@@ -8,4 +8,4 @@ html
     #root
     if env !== 'prod'
       script(src='chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/inject.bundle.js')
-    script(src=env == 'prod' ? '/js/options.bundle.js' : 'http://localhost:3000/js/options.bundle.js')
+    script(src=env == 'prod' ? '/js/options.bundle.js' : 'https://localhost:3000/js/options.bundle.js')

package.json

@@ -5,6 +5,8 @@
   "scripts": {
     "dev": "node scripts/dev",
     "build": "node scripts/build",
+    "devFirefox": "node scripts/devFirefox",
+    "buildFirefox": "node scripts/buildFirefox",
     "compress": "node scripts/compress",
     "compress-keygen": "crx keygen",
     "clean": "rimraf build/ dev/ *.zip *.crx",

scripts/buildFirefox.js

@@ -0,0 +1,10 @@
+const tasks = require('./tasks');
+
+tasks.replaceWebpack();
+console.log('[Copy assets]');
+console.log('-'.repeat(80));
+tasks.copyAssets('buildFirefox');
+
+console.log('[Webpack Build]');
+console.log('-'.repeat(80));
+exec('webpack --config webpack/prodFirefox.config.js --progress --profile --colors');

scripts/dev.js

@@ -15,5 +15,6 @@ console.log('please allow `https://localhost:3000` connections in Google Chrome,
 console.log('and load unpacked extensions with `./dev` folder. (see https://developer.chrome.com/extensions/getstarted#unpacked)\n');
 createWebpackServer(devConfig, {
   host: 'localhost',
-  port: 3000
+  port: 3000,
+  protocol: 'https'
 });

scripts/devFirefox.js

@@ -0,0 +1,20 @@
+/* eslint import/no-extraneous-dependencies: 0 */
+const tasks = require('./tasks');
+const createWebpackServer = require('webpack-httpolyglot-server');
+const devConfigFirefox = require('../webpack/devFirefox.config');
+
+tasks.replaceWebpack();
+console.log('[Copy assets]');
+console.log('-'.repeat(80));
+tasks.copyAssets('devFirefox');
+
+console.log('[Webpack Dev]');
+console.log('-'.repeat(80));
+console.log('If you\'re developing Inject page,');
+console.log('please allow `https://localhost:3000` connections in Firefox,');
+console.log('and load unpacked extensions with `./devFirefox` folder. (see https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_first_WebExtension)\n');
+createWebpackServer(devConfigFirefox, {
+  host: 'localhost',
+  port: 3000,
+  protocol: 'https'
+});