Inject chrome.* to content scripts

lib/browser/chrome-extension.js

@@ -123,7 +123,10 @@ const injectContentScripts = function (manifest) {
   if (contentScripts[manifest.name] || !manifest.content_scripts) return
 
   const readArrayOfFiles = function (relativePath) {
-    return String(fs.readFileSync(path.join(manifest.srcDirectory, relativePath)))
+    return {
+      url: `chrome-extension://${manifest.hostname}/${relativePath}`,
+      code: String(fs.readFileSync(path.join(manifest.srcDirectory, relativePath)))
+    }
   }
 
   const contentScriptToEntry = function (script) {

lib/renderer/chrome-api.js

@@ -1,9 +1,6 @@
 const {ipcRenderer} = require('electron')
 const url = require('url')
 
-// TODO(zcbenz): Set it to correct value for content scripts.
-const currentExtensionId = window.location.hostname
-
 class Event {
   constructor () {
     this.listeners = []
@@ -13,6 +10,13 @@ class Event {
     this.listeners.push(callback)
   }
 
+  removeListener (callback) {
+    const index = this.listeners.indexOf(callback)
+    if (index !== -1) {
+      this.listeners.splice(index, 1)
+    }
+  }
+
   emit (...args) {
     for (const listener of this.listeners) {
       listener(...args)
@@ -67,41 +71,44 @@ class Port {
     ipcRenderer.send('CHROME_PORT_POSTMESSAGE', this.webContentsId, this.portId, message)
   }
 
-  _onDisconnect() {
+  _onDisconnect () {
     ipcRenderer.removeAllListeners(`CHROME_PORT_ONMESSAGE_${this.portId}`)
     this.onDisconnect.emit()
   }
 }
 
-const chrome = window.chrome = window.chrome || {}
+// Inject chrome API to the |context|
+exports.injectTo = function (extensionId, context) {
+  const chrome = context.chrome = context.chrome || {}
 
-chrome.extension = {
-  getURL: function (path) {
-    return url.format({
-      protocol: window.location.protocol,
-      slashes: true,
-      hostname: currentExtensionId,
-      pathname: path
-    })
-  }
-}
+  chrome.runtime = {
+    getURL: function (path) {
+      return url.format({
+        protocol: 'chrome-extension',
+        slashes: true,
+        hostname: extensionId,
+        pathname: path
+      })
+    },
 
-chrome.runtime = {
-  getURL: chrome.extension.getURL,
+    onConnect: new OnConnect(),
 
-  onConnect: new OnConnect(),
+    connect (...args) {
+      // Parse the optional args.
+      let targetExtensionId = extensionId
+      let connectInfo = {name: ''}
+      if (args.length === 1) {
+        connectInfo = args[0]
+      } else if (args.length === 2) {
+        [targetExtensionId, connectInfo] = args
+      }
 
-  connect (...args) {
-    // Parse the optional args.
-    let extensionId = currentExtensionId
-    let connectInfo = {name: ''}
-    if (args.length === 1) {
-      connectInfo = args[0]
-    } else if (args.length === 2) {
-      [extensionId, connectInfo] = args
+      const {webContentsId, portId} = ipcRenderer.sendSync('CHROME_RUNTIME_CONNECT', targetExtensionId, connectInfo)
+      return new Port(webContentsId, portId, connectInfo.name)
     }
+  }
 
-    const {webContentsId, portId} = ipcRenderer.sendSync('CHROME_RUNTIME_CONNECT', extensionId, connectInfo)
-    return new Port(webContentsId, portId, connectInfo.name)
+  chrome.extension = {
+    getURL: chrome.runtime.getURL
   }
 }

lib/renderer/content-scripts-injector.js

@@ -1,4 +1,4 @@
-const {webFrame} = require('electron')
+const {runInThisContext} = require('vm')
 
 // Check whether pattern matches.
 // https://developer.chrome.com/extensions/match_patterns
@@ -9,6 +9,19 @@ const matchesPattern = function (pattern) {
   return location.href.match(regexp)
 }
 
+// Run the code with chrome API integrated.
+const runContentScript = function (extensionId, url, code) {
+  const chrome = {}
+  require('./chrome-api').injectTo(extensionId, chrome)
+  const wrapper = `(function (chrome) {\n  ${code}\n  })`
+  const compiledWrapper = runInThisContext(wrapper, {
+    filename: url,
+    lineOffset: 1,
+    displayErrors: true
+  })
+  compiledWrapper.call(this, chrome)
+}
+
 // Run injected scripts.
 // https://developer.chrome.com/extensions/content_scripts
 const injectContentScript = function (script) {
@@ -16,8 +29,8 @@ const injectContentScript = function (script) {
     if (!matchesPattern(match)) return
   }
 
-  for (const js of script.js) {
-    const fire = () => webFrame.executeJavaScript(js)
+  for (const {url, code} of script.js) {
+    const fire = runContentScript.bind(window, script.extensionId, url, code)
     if (script.runAt === 'document_start') {
       process.once('document-start', fire)
     } else if (script.runAt === 'document_end') {

lib/renderer/init.js

@@ -63,7 +63,7 @@ if (window.location.protocol === 'chrome-devtools:') {
   nodeIntegration = 'true'
 } else if (window.location.protocol === 'chrome-extension:') {
   // Add implementations of chrome API.
-  require('./chrome-api')
+  require('./chrome-api').injectTo(window.location.hostname, window)
   nodeIntegration = 'true'
 } else {
   // Override default web functions.