Fix compatibility of extensions for firefox

Currently a bug with vue <transition> and firefox extensions which results in TypeError: 'requestAnimationFrame' called on an object that does not implement interface Window. Stack trace: zt@resource://gre/modules/ExtensionContent.jsm -> moz-extension://3b35a7b5-6bf4-744d-900b-04c8768fdd55/js/content_script.js:6:30523 Gt@resource://gre/modules/ExtensionContent.jsm -> moz-extension://3b35a7b5-6bf4-744d-900b-04c8768fdd55/js/content_script.js:7:551 tn@resource://gre/modules/ExtensionContent.jsm -> moz-extension://3b35a7b5-6bf4-744d-900b-04c8768fdd55/js/content_script.js:7:1640 d@resource://gre/modules/ExtensionContent.jsm -> moz-extension://3b35a7b5-6bf4-744d-900b-04c8768fdd55/js/content_script.js:6:23084 o@resource://gre/modules/ExtensionContent.jsm -> moz-extension://3b35a7b5-6bf4-744d-900b-04c8768fdd55/js/content_script.js:6:22291 xt/<@resource://gre/modules/ExtensionContent.jsm -> moz-extension://3b35a7b5-6bf4-744d-900b-04c8768fdd55/js/content_script.js:6:26311 we/e.prototype._update@resource://gre/modules/ExtensionContent.jsm -> moz-extension://3b35a7b5-6bf4-744d-900b-04c8768fdd55/js/content_script.js:6:10301 we/e.prototype._mount/n._watcher<@resource://gre/modules/ExtensionContent.jsm -> moz-extension://3b35a7b5-6bf4-744d-900b-04c8768fdd55/js/content_script.js:6:10082 Ji.prototype.get@resource://gre/modules/ExtensionContent.jsm -> moz-extension://3b35a7b5-6bf4-744d-900b-04c8768fdd55/js/content_script.js:7:26477 Ji.prototype.run@resource://gre/modules/ExtensionContent.jsm -> moz-extension://3b35a7b5-6bf4-744d-900b-04c8768fdd55/js/content_script.js:7:27130 z@resource://gre/modules/ExtensionContent.jsm -> moz-extension://3b35a7b5-6bf4-744d-900b-04c8768fdd55/js/content_script.js:6:4802 Ai</</<@resource://gre/modules/ExtensionContent.jsm -> moz-extension://3b35a7b5-6bf4-744d-900b-04c8768fdd55/js/content_script.js:7:23148 e@resource://gre/modules/ExtensionContent.jsm -> moz-extension://3b35a7b5-6bf4-744d-900b-04c8768fdd55/js/content_script.js:7:22607 see Semantic-Org/Semantic-UI#3855
getlinky · Jan 17, 2017 · e2c4f4b · e2c4f4b
1 parent e7d48a5
commit e2c4f4b
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 34 deletions.
diff --git a/browser-extensions/README.md b/browser-extensions/README.md
@@ -19,3 +19,11 @@ npm run build
 # or with watchexec installed
 cd src/ && watchexec -- npm run build
 ```
+
+Note: when debugging in
+
+- Chrome open the `background page` located in the extensions page
+- Firefox open [Tools > Web Developer > Browser Console][1] <kbd>shift + cmd + j</kbd>, also nav to `about:debugging#addons`
+
+
+[1]: http://stackoverflow.com/a/24104946
diff --git a/browser-extensions/src/Login.vue b/browser-extensions/src/Login.vue
@@ -46,7 +46,15 @@ import axios from 'axios'
 import { focus } from 'vue-focus'
 import config from './config.js'
 
-const baseURL = config.isDebug ? 'http:localhost:8000' : 'https://getlinky.com'
+const baseURL =
+  config.isDebug
+  ? 'http:localhost:8000'
+  : 'https://getlinky.com'
+
+const storage =
+  typeof chrome.storage.sync !== 'undefined'
+  ? chrome.storage.sync
+  : chrome.storage.local
 
 export default {
   directives: {
@@ -66,7 +74,7 @@ export default {
       axios.post(baseURL + '/rest-auth/login/', credentials)
         .then(response => {
           console.info('login successful')
-          chrome.storage.sync.set({'token': response.data.key})
+          storage.set({'token': response.data.key})
           this.inputErrors = false
           this.authenticated = true
           this.password = ''
@@ -80,7 +88,7 @@ export default {
     },
     logout () {
       // Note: empty data payload needed for axios to send the headers as headers
-      chrome.storage.sync.get('token', token => {
+      storage.get('token', token => {
         axios.post(baseURL + '/rest-auth/logout/', {}, {headers: {'Authorization': 'Token ' + token.token}})
           .then(response => {
             console.info('logged out')
@@ -94,8 +102,7 @@ export default {
   },
   mounted () {
     console.log('mounted')
-
-    chrome.storage.sync.get('token', token => {
+    storage.get('token', token => {
       axios.get(baseURL + '/api/users/me/',
         {headers: {'Authorization': 'Token ' + token.token}})
         .then(response => {

diff --git a/browser-extensions/src/Notification.vue b/browser-extensions/src/Notification.vue
@@ -1,11 +1,18 @@
 <template>
-  <transition name="fade">
-  <div v-if="show" class="linky-note linky-bottom" :class="'linky-'+level">
-    <span v-if="html" v-html="message"></span>
-    <span v-else >{{ message }}</span>
-    <a v-if="button" class="linky-close" @click="closed">✕</a>
-  </div>
+  <transition v-if="!isFirefox" name="fade">
+    <div v-if="show" class="linky-note linky-bottom" :class="'linky-'+level">
+      <span v-if="html" v-html="message"></span>
+      <span v-else >{{ message }}</span>
+      <a v-if="button" class="linky-close" @click="closed">✕</a>
+    </div>
   </transition>
+  <div v-else>
+    <div v-if="show" class="linky-note linky-bottom" :class="'linky-'+level">
+      <span v-if="html" v-html="message"></span>
+      <span v-else >{{ message }}</span>
+      <a v-if="button" class="linky-close" @click="closed">✕</a>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -82,6 +89,9 @@ export default {
         'show': this.show,
       }
     },
+    isFirefox () {
+      return navigator.userAgent.indexOf('Firefox') > 0
+    },
   },
 }
 </script>

diff --git a/browser-extensions/src/content_script.js b/browser-extensions/src/content_script.js
@@ -10,6 +10,11 @@ const div = document.createElement('div')
 div.id = 'linky-vue'
 document.querySelector('body').appendChild(div)
 
+const storage =
+  typeof chrome.storage.sync !== 'undefined'
+  ? chrome.storage.sync
+  : chrome.storage.local
+
 // eslint-disable-next-line no-new
 const v = new Vue({
   el: '#linky-vue',
@@ -28,7 +33,7 @@ const v = new Vue({
   },
   methods: {
     addURL (URL) {
-      chrome.storage.sync.get('token', token => {
+      storage.get('token', token => {
         axios.post(baseURL + '/api/links/', {'url': URL},
           {headers: {'Authorization': 'Token ' + token.token}})
           .then(response => {

diff --git a/browser-extensions/src/manifest.json b/browser-extensions/src/manifest.json
@@ -18,6 +18,9 @@
     "css": ["css/content_script.css"]
   }],
   "options_page": "index.html",
+  "options_ui": {
+    "page": "index.html"
+  },
   "browser_action": {
     "default_title": "Add URL to Linky"
   },

diff --git a/frontend/README.md b/frontend/README.md
@@ -1,24 +1,4 @@
 # frontend
+> the vue.js frontend for linky
 
-> A Vue.js project
-
-## Build Setup
-
-``` bash
-# install dependencies
-npm install
-
-# serve with hot reload at localhost:8080
-npm run dev
-
-# build for production with minification
-npm run build
-
-# lint all *.js and *.vue files
-npm run lint
-
-# run unit tests
-npm test
-```
-
-For more information see the [docs for vueify](https://github.com/vuejs/vueify).
+See base README.md for dev setup
diff --git a/frontend/config/index.js b/frontend/config/index.js
@@ -36,6 +36,14 @@ module.exports = {
         target: 'http://web:8000',
         changeOrigin: true,
       },
+      '/static/rest_framework': {
+        target: 'http://web:8000',
+        cahngeOrigin: true,
+      },
+      '/static/admin': {
+        target: 'http://web:8000',
+        cahngeOrigin: true,
+      },
     },
     // CSS Sourcemaps off by default because relative paths are "buggy"
     // with this option, according to the CSS-Loader README