Firefox extension

README.md

@@ -73,6 +73,14 @@ npm run build:extension
 npm run build:app
 ```
 
+## Build firefox extension
+
+```bash
+# build files to './build/firefox'
+npm run build:firefox
+````
+Note that it's [not possible for now to load Firefox extensions from local directories](https://bugzilla.mozilla.org/show_bug.cgi?id=1185460), so use `npm run compress:firefox` instead to generate an xpi file.
+
 ## Build & Compress ZIP file
 
 ```bash
@@ -81,12 +89,16 @@ npm run compress:extension
 
 # compress app's build folder to app.zip
 npm run compress:app
+
+# compress firefox extension's build folder to firefox.xpi
+npm run compress:firefox
 ```
 
-## Load to Chrome
+## Load
 
-- [Load the extension](https://developer.chrome.com/extensions/getstarted#unpacked)
-- [Launch your app](https://developer.chrome.com/apps/first_app#five)
+- [Load the extension to Chrome](https://developer.chrome.com/extensions/getstarted#unpacked).
+- [Launch your Chrome app](https://developer.chrome.com/apps/first_app#five).
+- Firefox: [Prerequisites](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Prerequisites), [Installing](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Packaging_and_installation#Installing_Your_Extension).
 
 ## Test
 
@@ -114,7 +126,7 @@ npm test
 
 - [x] Chrome app
 - [x] Chrome extension
-- [ ] Firefox extension (according to [wiki.mozilla.org/WebExtensions](https://wiki.mozilla.org/WebExtensions))
+- [x] Firefox extension (see [the current status](https://github.com/zalmoxisus/browser-redux/issues/12))
 - [ ] Safari extension (based on [Chrome to Safari port](https://code.google.com/p/adblockforchrome/source/browse/trunk/port.js))
 
 ## LICENSE

gulpfile.babel.js

@@ -123,24 +123,37 @@ gulp.task('copy:build:app', () => {
   gulp.src('./src/assets/**/*').pipe(gulp.dest('./build/app'));
 });
 
+gulp.task('copy:build:firefox', ['build:extension'], () => {
+  gulp.src('./build/extension/**').pipe(gulp.dest('./build/firefox'))
+    .on('finish', function() {
+      gulp.src('./src/browser/firefox/manifest.json')
+        .pipe(gulp.dest('./build/firefox'));
+    });
+});
+
 /*
  * compress task
  */
 
-gulp.task('zip:extension', () => {
+gulp.task('compress:extension', () => {
   gulp.src('build/extension/*')
     .pipe(zip('extension.zip'))
     .pipe(gulp.dest('./build'));
 });
 
-gulp.task('zip:app', () => {
+gulp.task('compress:app', () => {
   gulp.src('build/app/*')
     .pipe(zip('app.zip'))
     .pipe(gulp.dest('./build'));
 });
 
+gulp.task('compress:firefox', () => {
+  gulp.src('build/firefox/**')
+    .pipe(zip('firefox.xpi'))
+    .pipe(gulp.dest('./build'));
+});
+
 gulp.task('default', ['replace-webpack-code', 'webpack-dev-server', 'views:dev', 'copy:dev']);
 gulp.task('build:extension', ['replace-webpack-code', 'webpack:build:extension', 'views:build:extension', 'copy:build:extension']);
 gulp.task('build:app', ['replace-webpack-code', 'webpack:build:app', 'views:build:app', 'copy:build:app']);
-gulp.task('compress:extension', ['zip:extension']);
-gulp.task('compress:app', ['zip:app']);
+gulp.task('build:firefox', ['copy:build:firefox']);

package.json

@@ -6,8 +6,10 @@
     "start": "gulp",
     "build:extension": "BABEL_ENV=production gulp build:extension",
     "build:app": "BABEL_ENV=production gulp build:app",
+    "build:firefox": "BABEL_ENV=production gulp build:firefox",
     "compress:extension": "npm run build:extension && gulp compress:extension",
     "compress:app": "npm run build:app && gulp compress:app",
+    "compress:firefox": "npm run build:firefox && gulp compress:firefox",
     "clean": "rm -rf build/ && rm -rf dev/",
     "lint": "eslint .",
     "test:app": "BABEL_ENV=test mocha --recursive --compilers js:babel-core/register test/app",
@@ -74,8 +76,8 @@
     "webpack-dev-server": "^1.12.1"
   },
   "dependencies": {
-    "browser-redux-sync": "^0.3.1",
     "browser-redux-bg": "^0.1.1",
+    "browser-redux-sync": "^0.3.2",
     "react": "^0.13.3",
     "react-redux": "^3.0.1",
     "redux": "^3.0.2",

src/browser/extension/background/contextMenus.js

@@ -3,11 +3,12 @@ let windows = {app: 0, devtools: 0};
 const MENU_APP = 'MENU_APP';
 const MENU_DEVTOOLS = 'MENU_DEVTOOLS';
 
-function addToMenu(id, title, contexts) {
+function addToMenu(id, title, contexts, onClick) {
   chrome.contextMenus.create({
     id: id,
     title: title,
-    contexts: contexts
+    contexts: contexts,
+    onclick: onClick
   });
 }
 
@@ -27,23 +28,16 @@ function popWindow(action, url, type, customOptions, store) {
     ...customOptions
   };
   if (action === 'open') {
-    options.url = url;
+    options.url = chrome.extension.getURL(url);
     chrome.windows.create(options, (win) => {
       windows[type] = win.id;
     });
   }
 }
 
 function createMenu(store) {
-  addToMenu(MENU_APP, 'Redux Counter App', ['all']);
-  if (__DEVELOPMENT__) addToMenu(MENU_DEVTOOLS, 'Background Redux DevTools', ['all']);
-
-  chrome.contextMenus.onClicked.addListener((event) => {
-    if (event.menuItemId === MENU_APP) return popWindow('open', 'window.html', 'app', {left: 0, width: 1080});
-    if (__DEVELOPMENT__) {
-      if (event.menuItemId === MENU_DEVTOOLS) return popWindow('open', 'devtools.html', 'devtools', {left: 1100, width: 320}, store);
-    }
-  });
+  addToMenu(MENU_APP, 'Redux Counter App', ['all'], () => popWindow('open', 'window.html', 'app', {left: 0, width: 1080}));
+  if (__DEVELOPMENT__) addToMenu(MENU_DEVTOOLS, 'Background Redux DevTools', ['all'], () => popWindow('open', 'devtools.html', 'devtools', {left: 1100, width: 320}, store));
 }
 
 export default createMenu;

src/browser/extension/manifest.dev.json

@@ -4,6 +4,7 @@
   "manifest_version": 2,
   "description": "Redux counter example",
   "browser_action": {
+    "default_icon": "img/logo/48x48.png",
     "default_title": "Redux counter example",
     "default_popup": "popup.html"
   },

src/browser/extension/manifest.prod.json

@@ -4,6 +4,7 @@
   "manifest_version": 2,
   "description": "Redux counter example",
   "browser_action": {
+    "default_icon": "img/logo/48x48.png",
     "default_title": "Redux counter example",
     "default_popup": "popup.html"
   },
@@ -19,10 +20,10 @@
   "content_scripts": [
     {
       "matches": ["*://github.com/*"],
-      "js": ["/js/inject.bundle.js"],
+      "js": ["js/inject.bundle.js"],
       "run_at": "document_end"
     }
   ],
   "permissions": [ "contextMenus", "tabs", "storage", "https://github.com/*" ],
-  "content_security_policy": "default-src 'self'; script-src 'self' 'unsafe-eval'; style-src * 'unsafe-inline'; img-src 'self' data:;"
+  "content_security_policy": "script-src 'self'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;"
 }

src/browser/firefox/manifest.json

@@ -0,0 +1,34 @@
+{
+  "version": "0.0.0",
+  "name": "browser-extension",
+  "manifest_version": 2,
+  "description": "Redux counter example",
+  "applications": {
+    "gecko": {
+      "id": "browser-redux@test.com"
+    }
+  },
+  "browser_action": {
+    "default_icon": "img/logo/48x48.png",
+    "default_title": "Redux counter example",
+    "default_popup": "popup.html"
+  },
+  "icons": {
+    "16": "img/logo/16x16.png",
+    "48": "img/logo/48x48.png",
+    "128": "img/logo/128x128.png",
+    "scalable": "img/logo/scalable.ico"
+  },
+  "background": {
+    "page": "background.html"
+  },
+  "content_scripts": [
+    {
+      "matches": ["*://github.com/*"],
+      "js": ["js/inject.bundle.js"],
+      "run_at": "document_end"
+    }
+  ],
+  "permissions": [ "contextMenus", "tabs", "storage", "https://github.com/*" ],
+  "content_security_policy": "script-src 'self'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;"
+}