fix: Don't break when CSP is on in Firefox (#616) (#621)

* Don't break when CSP is on in Firefox (#616)

* fix: eslint disable comments

* feat: $isFirefox

Author: chearon

Diff for: shells/chrome/src/detector.js

@@ -1,4 +1,5 @@
 import { installToast } from 'src/backend/toast'
+import { isFirefox } from 'src/devtools/env'
 
 window.addEventListener('message', e => {
   if (e.source === window && e.data.vueDetected) {
@@ -36,8 +37,15 @@ if (document instanceof HTMLDocument) {
 }
 
 function installScript (fn) {
-  const script = document.createElement('script')
-  script.textContent = ';(' + fn.toString() + ')(window)'
-  document.documentElement.appendChild(script)
-  script.parentNode.removeChild(script)
+  const source = ';(' + fn.toString() + ')(window)'
+
+  if (isFirefox) {
+    // eslint-disable-next-line no-eval
+    window.eval(source) // in Firefox, this evaluates on the content window
+  } else {
+    const script = document.createElement('script')
+    script.textContent = source
+    document.documentElement.appendChild(script)
+    script.parentNode.removeChild(script)
+  }
 }

Diff for: shells/chrome/src/hook.js

@@ -1,10 +1,18 @@
 // This script is injected into every page.
 import { installHook } from 'src/backend/hook'
+import { isFirefox } from 'src/devtools/env'
 
 // inject the hook
 if (document instanceof HTMLDocument) {
-  const script = document.createElement('script')
-  script.textContent = ';(' + installHook.toString() + ')(window)'
-  document.documentElement.appendChild(script)
-  script.parentNode.removeChild(script)
+  const source = ';(' + installHook.toString() + ')(window)'
+
+  if (isFirefox) {
+    // eslint-disable-next-line no-eval
+    window.eval(source) // in Firefox, this evaluates on the content window
+  } else {
+    const script = document.createElement('script')
+    script.textContent = source
+    document.documentElement.appendChild(script)
+    script.parentNode.removeChild(script)
+  }
 }

Diff for: src/devtools/env.js

@@ -1,4 +1,5 @@
 export const isChrome = typeof chrome !== 'undefined' && !!chrome.devtools
+export const isFirefox = navigator.userAgent.indexOf('Firefox') > -1
 export const isWindows = navigator.platform.indexOf('Win') === 0
 export const isMac = navigator.platform === 'MacIntel'
 export const isLinux = navigator.platform.indexOf('Linux') === 0
@@ -16,6 +17,7 @@ export function initEnv (Vue) {
 
   Object.defineProperties(Vue.prototype, {
     '$isChrome': { get: () => isChrome },
+    '$isFirefox': { get: () => isFirefox },
     '$isWindows': { get: () => isWindows },
     '$isMac': { get: () => isMac },
     '$isLinux': { get: () => isLinux },