Add Firefox support (OctoLinker#100)

* Do request in background * Repleace innerHTML with textContent * Tweak build step * Produce production build * Extend eslint ignore * Use background loading for all requests * Enable sourcemaps for dev build * Add `open-firefox` npm script This opens Firefox with the extension installed from ./firefox, using https://github.com/mozilla/web-ext Usage: npm run build-firefox npm run open-firefox * Use flag to determine if event handler is already attached Firefox doesn't support hasEventListeners therefore I implemented the flag.
DevhanDod · Jun 20, 2016 · e033c45 · e033c45
1 parent 166abef
commit e033c45
Show file tree

Hide file tree

Showing 17 changed files with 142 additions and 156 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,3 @@
+./dist
 ./chrome
+./firefox
diff --git a/.eslintrc b/.eslintrc
@@ -11,5 +11,6 @@
   },
   "globals": {
     "fixture": true,
+    "chrome": true,
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,10 @@
 node_modules
 npm-debug.log
-chrome/app.js
+
+dist/
+
+chrome/*
+!chrome/manifest.json
+
+firefox/*
+!firefox/manifest.json
diff --git a/chrome/icon.png → assets/icon.png b/chrome/icon.png → assets/icon.png
diff --git a/chrome/style.css → assets/style.css b/chrome/style.css → assets/style.css
diff --git a/chrome/manifest.json b/chrome/manifest.json
@@ -8,6 +8,9 @@
   "icons": {
     "128": "icon.png"
   },
+  "background": {
+    "scripts": ["background.js"]
+  },
   "content_scripts": [
     {
       "matches": [

diff --git a/firefox/manifest.json b/firefox/manifest.json
@@ -0,0 +1,35 @@
+{
+  "name": "OctoLinker",
+  "version": "4.1.1",
+  "manifest_version": 2,
+  "author": "Stefan Buck",
+  "description": "",
+  "homepage_url": "https://github.com/OctoLinker/browser-extension/",
+  "icons": {
+    "128": "icon.png"
+  },
+  "applications": {
+    "gecko": {
+      "id": "[email protected]"
+    }
+  },
+  "background": {
+    "scripts": ["background.js"]
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "https://github.com/*",
+        "https://gist.github.com/*"
+      ],
+      "js": ["app.js"],
+      "css": ["style.css"],
+      "run_at": "document_idle",
+      "all_frames": false
+    }
+  ],
+  "permissions": [
+      "https://github.com/",
+      "https://githublinker.herokuapp.com/"
+  ]
+}
diff --git a/lib/background.js b/lib/background.js
@@ -0,0 +1,29 @@
+import $ from 'jquery';
+
+function loader(urls, cb) {
+  const req = urls.shift();
+  const url = req.url || req;
+
+  $.ajax({
+    method: req.method || 'HEAD',
+    url,
+  }).then(function (res) {
+    cb(null, url, res);
+  }).fail(function () {
+    if (urls.length === 0) {
+      return cb(new Error('Could not load any url'));
+    }
+
+    loader(urls, cb);
+  });
+}
+
+chrome.runtime.onMessage.addListener(({ urls }, sender) => {
+  loader(urls, (err, url, res) => {
+    chrome.tabs.sendMessage(sender.tab.id, {
+      err,
+      url,
+      res,
+    });
+  });
+});
diff --git a/lib/click-handler.js b/lib/click-handler.js
@@ -1,5 +1,4 @@
 import $ from 'jquery';
-import tryLoad from '../packages/try-load';
 import { showTooltip } from './gh-interface.js';
 import * as resolvers from './resolver/index.js';
 
@@ -11,6 +10,8 @@ const LINK_SELECTOR = '.octo-linker-link';
 const $body = $('body');
 const resolverHandlers = new Map();
 
+let hasEventListener = false;
+
 function openUrl(url, newWindow = false) {
   if (!url) {
     return;
@@ -19,6 +20,24 @@ function openUrl(url, newWindow = false) {
   window.open(url, newWindow ? '_blank' : '_self');
 }
 
+function tryLoad(urls, cb) {
+  if (!hasEventListener) {
+    chrome.runtime.onMessage.addListener((msg) => {
+      if (msg.err) {
+        return cb(new Error('Could not load any url'));
+      }
+
+      cb(null, msg.url, msg.res);
+    });
+
+    hasEventListener = true;
+  }
+
+  chrome.runtime.sendMessage({
+    urls,
+  });
+}
+
 function getResolverUrls(dataAttr) {
   const resolverStrings = dataAttr.resolver.replace(/\s/g, '').split('|');
 

diff --git a/lib/gh-interface.js b/lib/gh-interface.js
@@ -10,8 +10,8 @@ export function showTooltip($target, msg) {
 
 function getUserName() {
   const el = window.document.querySelector('.header .css-truncate-target');
-  if (el && el.innerHTML.length) {
-    return ' ' + el.innerHTML;
+  if (el && el.textContent.length) {
+    return ' ' + el.textContent;
   }
   return '';
 }

diff --git a/lib/insert-link.js b/lib/insert-link.js
@@ -7,7 +7,7 @@ function createLinkElement(text, dataAttr = {}) {
   const linkEl = document.createElement('span');
 
   // Set link text
-  linkEl.innerHTML = text;
+  linkEl.textContent = text;
 
   // Add css classes
   linkEl.classList.add(CLASS_NAME);

diff --git a/package.json b/package.json
@@ -12,7 +12,13 @@
     "test": "karma start",
     "test:watch": "karma start --no-single-run --auto-watch",
     "build": "webpack",
-    "build:watch": "webpack --watch"
+    "build:watch": "webpack --watch",
+    "build-chrome": "webpack --output-path chrome",
+    "build-firefox": "webpack --output-path firefox",
+    "open-firefox": "web-ext run --source-dir firefox",
+    "dist-chrome": "webpack -p --config webpack.dist.config.js --dist=chrome",
+    "dist-firefox": "webpack -p --config webpack.dist.config.js --dist=firefox",
+    "dist-all": "npm run dist-chrome && npm run dist-firefox"
   },
   "dependencies": {
     "JSONPath": "^0.11.2",
@@ -32,6 +38,7 @@
     "babel-eslint": "^4.1.3",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.9.0",
+    "copy-webpack-plugin": "^3.0.1",
     "eslint": "^1.10.3",
     "eslint-config-airbnb": "2.1.1",
     "json-loader": "^0.5.4",
@@ -46,7 +53,9 @@
     "mocha": "^2.3.4",
     "phantomjs": "^1.9.18",
     "sinon": "^2.0.0-pre",
-    "webpack": "^1.13.1"
+    "web-ext": "^1.0.1",
+    "webpack": "^1.13.1",
+    "yargs": "^4.7.1"
   },
   "private": true
 }
diff --git a/packages/try-load/README.md b/packages/try-load/README.md
diff --git a/packages/try-load/index.js b/packages/try-load/index.js
diff --git a/packages/try-load/test.js b/packages/try-load/test.js
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,11 +1,20 @@
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
 module.exports = {
   entry: {
     app: './lib/app',
+    background: './lib/background',
   },
+  devtool: 'source-map',
   output: {
     path: 'chrome',
     filename: '[name].js',
   },
+  plugins: [
+    new CopyWebpackPlugin([
+      { from: 'assets' },
+    ]),
+  ],
   module: {
     loaders: [
       {

diff --git a/webpack.dist.config.js b/webpack.dist.config.js
@@ -0,0 +1,21 @@
+const argv = require('yargs').argv;
+const webpackConfig = require('./webpack.config.js');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const dist = argv.dist;
+
+const config = Object.assign({}, webpackConfig, {
+  devtool: '',
+  output: {
+    path: `dist/${dist}`,
+    filename: '[name].js',
+  },
+});
+
+config.plugins.push(
+  new CopyWebpackPlugin([
+    { from: `${dist}/manifest.json` },
+  ])
+);
+
+module.exports = config;