diff --git a/lib/renderer/content-scripts-injector.js b/lib/renderer/content-scripts-injector.js index d26802c8a8e7..5bc41780af94 100644 --- a/lib/renderer/content-scripts-injector.js +++ b/lib/renderer/content-scripts-injector.js @@ -5,7 +5,7 @@ const {runInThisContext} = require('vm') // https://developer.chrome.com/extensions/match_patterns const matchesPattern = function (pattern) { if (pattern === '') return true - const regexp = new RegExp('^' + pattern.replace(/\*/g, '.*') + '$') + const regexp = new RegExp(`^${pattern.replace(/\*/g, '.*')}$`) const url = `${location.protocol}//${location.host}${location.pathname}` return url.match(regexp) } @@ -14,7 +14,7 @@ const matchesPattern = function (pattern) { const runContentScript = function (extensionId, url, code) { const context = {} require('./chrome-api').injectTo(extensionId, false, context) - const wrapper = `(function (chrome) {\n ${code}\n })` + const wrapper = `((chrome) => {\n ${code}\n })` const compiledWrapper = runInThisContext(wrapper, { filename: url, lineOffset: 1, @@ -23,6 +23,23 @@ const runContentScript = function (extensionId, url, code) { return compiledWrapper.call(this, context.chrome) } +const runStylesheet = function (url, code) { + const wrapper = `((code) => { + function init() { + const styleElement = document.createElement('style'); + styleElement.textContent = code; + document.head.append(styleElement); + } + document.addEventListener('DOMContentLoaded', init); + })` + const compiledWrapper = runInThisContext(wrapper, { + filename: url, + lineOffset: 1, + displayErrors: true + }) + return compiledWrapper.call(this, code) +} + // Run injected scripts. // https://developer.chrome.com/extensions/content_scripts const injectContentScript = function (extensionId, script) { @@ -35,19 +52,22 @@ const injectContentScript = function (extensionId, script) { process.once('document-start', fire) } else if (script.runAt === 'document_end') { process.once('document-end', fire) - } else if (script.runAt === 'document_idle') { + } else { document.addEventListener('DOMContentLoaded', fire) } } } if (script.css) { - for (const {code} of script.css) { - process.once('document-end', () => { - var node = document.createElement('style') - node.innerHTML = code - window.document.body.appendChild(node) - }) + for (const {url, code} of script.css) { + const fire = runStylesheet.bind(window, url, code) + if (script.runAt === 'document_start') { + process.once('document-start', fire) + } else if (script.runAt === 'document_end') { + process.once('document-end', fire) + } else { + document.addEventListener('DOMContentLoaded', fire) + } } } }