Merge pull request #5711 from electron/extension-code-cleanup

Implement partial chrome.* API for devtools extension

lib/renderer/api/ipc-renderer.js

@@ -18,4 +18,20 @@ ipcRenderer.sendToHost = function (...args) {
   return binding.send('ipc-message-host', args)
 }
 
+ipcRenderer.sendTo = function (webContentsId, channel, ...args) {
+  if (typeof webContentsId !== 'number') {
+    throw new TypeError('First argument has to be webContentsId')
+  }
+
+  ipcRenderer.send('ELECTRON_BROWSER_SEND_TO', false, webContentsId, channel, ...args)
+}
+
+ipcRenderer.sendToAll = function (webContentsId, channel, ...args) {
+  if (typeof webContentsId !== 'number') {
+    throw new TypeError('First argument has to be webContentsId')
+  }
+
+  ipcRenderer.send('ELECTRON_BROWSER_SEND_TO', true, webContentsId, channel, ...args)
+}
+
 module.exports = ipcRenderer

lib/renderer/chrome-api.js

@@ -1,13 +1,200 @@
+const {ipcRenderer} = require('electron')
 const url = require('url')
-const chrome = window.chrome = window.chrome || {}
 
-chrome.extension = {
-  getURL: function (path) {
-    return url.format({
-      protocol: window.location.protocol,
-      slashes: true,
-      hostname: window.location.hostname,
-      pathname: path
-    })
+let nextId = 0
+
+class Event {
+  constructor () {
+    this.listeners = []
+  }
+
+  addListener (callback) {
+    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)
+    }
+  }
+}
+
+class Tab {
+  constructor (tabId) {
+    this.id = tabId
+  }
+}
+
+class MessageSender {
+  constructor (tabId, extensionId) {
+    this.tab = tabId ? new Tab(tabId) : null
+    this.id = extensionId
+    this.url = `chrome-extension://${extensionId}`
+  }
+}
+
+class Port {
+  constructor (tabId, portId, extensionId, name) {
+    this.tabId = tabId
+    this.portId = portId
+    this.disconnected = false
+
+    this.name = name
+    this.onDisconnect = new Event()
+    this.onMessage = new Event()
+    this.sender = new MessageSender(tabId, extensionId)
+
+    ipcRenderer.once(`CHROME_PORT_DISCONNECT_${portId}`, () => {
+      this._onDisconnect()
+    })
+    ipcRenderer.on(`CHROME_PORT_POSTMESSAGE_${portId}`, (event, message) => {
+      const sendResponse = function () { console.error('sendResponse is not implemented') }
+      this.onMessage.emit(message, this.sender, sendResponse)
+    })
+  }
+
+  disconnect () {
+    if (this.disconnected) return
+
+    ipcRenderer.sendToAll(this.tabId, `CHROME_PORT_DISCONNECT_${this.portId}`)
+    this._onDisconnect()
+  }
+
+  postMessage (message) {
+    ipcRenderer.sendToAll(this.tabId, `CHROME_PORT_POSTMESSAGE_${this.portId}`, message)
+  }
+
+  _onDisconnect () {
+    this.disconnected = true
+    ipcRenderer.removeAllListeners(`CHROME_PORT_POSTMESSAGE_${this.portId}`)
+    this.onDisconnect.emit()
+  }
+}
+
+// Inject chrome API to the |context|
+exports.injectTo = function (extensionId, isBackgroundPage, context) {
+  const chrome = context.chrome = context.chrome || {}
+
+  ipcRenderer.on(`CHROME_RUNTIME_ONCONNECT_${extensionId}`, (event, tabId, portId, connectInfo) => {
+    chrome.runtime.onConnect.emit(new Port(tabId, portId, extensionId, connectInfo.name))
+  })
+
+  ipcRenderer.on(`CHROME_RUNTIME_ONMESSAGE_${extensionId}`, (event, tabId, message) => {
+    chrome.runtime.onMessage.emit(message, new MessageSender(tabId, extensionId))
+  })
+
+  ipcRenderer.on('CHROME_TABS_ONCREATED', (event, tabId) => {
+    chrome.tabs.onCreated.emit(new Tab(tabId))
+  })
+
+  ipcRenderer.on('CHROME_TABS_ONREMOVED', (event, tabId) => {
+    chrome.tabs.onRemoved.emit(tabId)
+  })
+
+  chrome.runtime = {
+    getURL: function (path) {
+      return url.format({
+        protocol: 'chrome-extension',
+        slashes: true,
+        hostname: extensionId,
+        pathname: path
+      })
+    },
+
+    connect (...args) {
+      if (isBackgroundPage) {
+        console.error('chrome.runtime.connect is not supported in background page')
+        return
+      }
+
+      // 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
+      }
+
+      const {tabId, portId} = ipcRenderer.sendSync('CHROME_RUNTIME_CONNECT', targetExtensionId, connectInfo)
+      return new Port(tabId, portId, extensionId, connectInfo.name)
+    },
+
+    sendMessage (...args) {
+      if (isBackgroundPage) {
+        console.error('chrome.runtime.sendMessage is not supported in background page')
+        return
+      }
+
+      // Parse the optional args.
+      let targetExtensionId = extensionId
+      let message
+      if (args.length === 1) {
+        message = args[0]
+      } else if (args.length === 2) {
+        [targetExtensionId, message] = args
+      } else {
+        console.error('options and responseCallback are not supported')
+      }
+
+      ipcRenderer.send('CHROME_RUNTIME_SENDMESSAGE', targetExtensionId, message)
+    },
+
+    onConnect: new Event(),
+    onMessage: new Event(),
+    onInstalled: new Event()
+  }
+
+  chrome.tabs = {
+    executeScript (tabId, details, callback) {
+      const requestId = ++nextId
+      ipcRenderer.once(`CHROME_TABS_EXECUTESCRIPT_RESULT_${requestId}`, (event, result) => {
+        callback([event.result])
+      })
+      ipcRenderer.send('CHROME_TABS_EXECUTESCRIPT', requestId, tabId, extensionId, details)
+    },
+
+    sendMessage (tabId, message, options, responseCallback) {
+      if (responseCallback) {
+        console.error('responseCallback is not supported')
+      }
+      ipcRenderer.send('CHROME_TABS_SEND_MESSAGE', tabId, extensionId, isBackgroundPage, message)
+    },
+
+    onUpdated: new Event(),
+    onCreated: new Event(),
+    onRemoved: new Event()
+  }
+
+  chrome.extension = {
+    getURL: chrome.runtime.getURL,
+    connect: chrome.runtime.connect,
+    onConnect: chrome.runtime.onConnect,
+    sendMessage: chrome.runtime.sendMessage,
+    onMessage: chrome.runtime.onMessage
+  }
+
+  chrome.storage = {
+    sync: {
+      get () {},
+      set () {}
+    }
+  }
+
+  chrome.pageAction = {
+    show () {},
+    hide () {},
+    setTitle () {},
+    getTitle () {},
+    setIcon () {},
+    setPopup () {},
+    getPopup () {}
   }
 }

lib/renderer/content-scripts-injector.js

@@ -0,0 +1,61 @@
+const {ipcRenderer} = require('electron')
+const {runInThisContext} = require('vm')
+
+// Check whether pattern matches.
+// https://developer.chrome.com/extensions/match_patterns
+const matchesPattern = function (pattern) {
+  if (pattern === '<all_urls>') return true
+
+  const regexp = new RegExp('^' + pattern.replace(/\*/g, '.*') + '$')
+  return location.href.match(regexp)
+}
+
+// Run the code with chrome API integrated.
+const runContentScript = function (extensionId, url, code) {
+  const context = {}
+  require('./chrome-api').injectTo(extensionId, false, context)
+  const wrapper = `(function (chrome) {\n  ${code}\n  })`
+  const compiledWrapper = runInThisContext(wrapper, {
+    filename: url,
+    lineOffset: 1,
+    displayErrors: true
+  })
+  return compiledWrapper.call(this, context.chrome)
+}
+
+// Run injected scripts.
+// https://developer.chrome.com/extensions/content_scripts
+const injectContentScript = function (extensionId, script) {
+  for (const match of script.matches) {
+    if (!matchesPattern(match)) return
+  }
+
+  for (const {url, code} of script.js) {
+    const fire = runContentScript.bind(window, extensionId, url, code)
+    if (script.runAt === 'document_start') {
+      process.once('document-start', fire)
+    } else if (script.runAt === 'document_end') {
+      process.once('document-end', fire)
+    } else if (script.runAt === 'document_idle') {
+      document.addEventListener('DOMContentLoaded', fire)
+    }
+  }
+}
+
+// Handle the request of chrome.tabs.executeJavaScript.
+ipcRenderer.on('CHROME_TABS_EXECUTESCRIPT', function (event, senderWebContentsId, requestId, extensionId, url, code) {
+  const result = runContentScript.call(window, extensionId, url, code)
+  ipcRenderer.sendToAll(senderWebContentsId, `CHROME_TABS_EXECUTESCRIPT_RESULT_${requestId}`, result)
+})
+
+// Read the renderer process preferences.
+const preferences = process.getRenderProcessPreferences()
+if (preferences) {
+  for (const pref of preferences) {
+    if (pref.contentScripts) {
+      for (const script of pref.contentScripts) {
+        injectContentScript(pref.extensionId, script)
+      }
+    }
+  }
+}

lib/renderer/init.js

@@ -41,8 +41,9 @@ electron.ipcRenderer.on('ELECTRON_INTERNAL_RENDERER_ASYNC_WEB_FRAME_METHOD', (ev
 })
 
 // Process command line arguments.
-var nodeIntegration = 'false'
-var preloadScript = null
+let nodeIntegration = 'false'
+let preloadScript = null
+let isBackgroundPage = false
 for (let arg of process.argv) {
   if (arg.indexOf('--guest-instance-id=') === 0) {
     // This is a guest web view.
@@ -54,6 +55,8 @@ for (let arg of process.argv) {
     nodeIntegration = arg.substr(arg.indexOf('=') + 1)
   } else if (arg.indexOf('--preload=') === 0) {
     preloadScript = arg.substr(arg.indexOf('=') + 1)
+  } else if (arg === '--background-page') {
+    isBackgroundPage = true
   }
 }
 
@@ -63,12 +66,15 @@ if (window.location.protocol === 'chrome-devtools:') {
   nodeIntegration = 'true'
 } else if (window.location.protocol === 'chrome-extension:') {
   // Add implementations of chrome API.
-  require('./chrome-api')
-  nodeIntegration = 'true'
+  require('./chrome-api').injectTo(window.location.hostname, isBackgroundPage, window)
+  nodeIntegration = 'false'
 } else {
   // Override default web functions.
   require('./override')
 
+  // Inject content scripts.
+  require('./content-scripts-injector')
+
   // Load webview tag implementation.
   if (nodeIntegration === 'true' && process.guestInstanceId == null) {
     require('./web-view/web-view')

lib/renderer/inspector.js

@@ -1,7 +1,4 @@
 window.onload = function () {
-  // Make sure |window.chrome| is defined for devtools extensions.
-  hijackSetInjectedScript(window.InspectorFrontendHost)
-
   // Use menu API to show context menu.
   window.InspectorFrontendHost.showContextMenuAtPoint = createMenu
 
@@ -9,18 +6,6 @@ window.onload = function () {
   window.WebInspector.createFileSelectorElement = createFileSelectorElement
 }
 
-const hijackSetInjectedScript = function (InspectorFrontendHost) {
-  const {setInjectedScriptForOrigin} = InspectorFrontendHost
-  InspectorFrontendHost.setInjectedScriptForOrigin = function (origin, source) {
-    const wrapped = `(function (...args) {
-      window.chrome = {}
-      const original = ${source}
-      original(...args)
-    })`
-    setInjectedScriptForOrigin(origin, wrapped)
-  }
-}
-
 var convertToMenuTemplate = function (items) {
   var fn, i, item, len, template
   template = []