chrome擴展在任何其他js之前在頭頂注入javascript

Question

我想做的事。

使用Chrome擴展程序我需要將一個腳本注入頁面上下文，使注入的腳本在頁面上的任何其他javascript之前運行。

我為什么需要這個？

我需要劫持特定頁面的所有console命令，以便我的擴展程序可以收聽消息。

我目前的問題

目前我正在捕捉頁面記錄的一些消息，但不是所有消息，特別是來自web-directory-132a3f16cf1ea31e167fdf5294387073.js所有消息都沒有被捕獲。 經過一番挖掘后，我發現web-directory-132a3f16cf1ea31e167fdf5294387073.js 也在劫持console但在我的腳本有機會之前這樣做了。

作為一個視覺，如果我在加載頁面后查看網絡選項卡，我看到：

我注入的腳本是consoleInterceptor.js 。 它正確捕獲了這里加載的js文件的輸出接受web-directory-132a3f16cf1ea31e167fdf5294387073.js

在web-directory-132a3f16cf1ea31e167fdf5294387073.js是一些像這樣的代碼：

   ....
    _originalLogger: t.default.Logger,
   ...
    // do stuff with logging ....
    this._originalLogger[e].apply(this._originalLogger, s),

我認為問題是什么

在我看來， web-directory-132a3f16cf1ea31e167fdf5294387073.js正在抓取標准console功能並在我的腳本有機會用我自己的版本替換之前將它們存儲在內部。 因此，即使我的腳本有效， web-directory-132a3f16cf1ea31e167fdf5294387073.js仍然使用它保存的原始標准控制台功能。

請注意， web-directory-132a3f16cf1ea31e167fdf5294387073.js是一個ember應用程序，我沒有看到任何簡單的方法來掛鈎代碼來覆蓋這些函數，但我作為一個解決方案對此開放。

我目前的代碼：

manifest.js

  ...
  "web_accessible_resources": [
    "js/ajaxInterceptor.js",
    "js/consoleInterceptor.js"
  ],
  "version" : "5.2",
  "manifest_version": 2,
  "permissions": [
    "<all_urls>",
    "tabs",
    "activeTab",
    "storage",
    "webNavigation",
    "unlimitedStorage",
    "notifications",
    "clipboardWrite",
    "downloads",
    "tabCapture",
    "cookies",
    "browsingData",
    "webRequest",
    "*://*/*",
    "gcm",
    "contextMenus",
    "management"
  ],
  "externally_connectable": {
    "matches": ["*://apps.mypurecloud.com/*","*://*.cloudfront.net/*"]
  },
  ...

background.js

var options = {url: [{hostContains: 'apps.mypurecloud.com'}]};
chrome.webNavigation.onCommitted.addListener(function(details) {
        // first inject the chrome extension's id
        chrome.tabs.executeScript(details.tabId, {
            code: "var chromeExtensionId = " + JSON.stringify(chrome.runtime.id)
        });
        // then inject the script which will use the dynamically added extension id
        // to talk to the extension
        chrome.tabs.executeScript(details.tabId, {
            file: 'js/injectConsoleInterceptor.js'
        });
    },
    options
);
chrome.runtime.onMessageExternal.addListener(
    function(msg, sender, sendResponse) {
        if(msg.action === 'console_intercepted'){
            _this.processConsoleMessage(sender, msg.details.method, msg.details.arguments);

        }
    });

injectConsoleInterceptor.js

var interceptorScript = document.createElement('script');
interceptorScript.src = chrome.extension.getURL('js/consoleInterceptor.js');
interceptorScript.onload = function(){this.remove();};
(document.head || document.documentElement).prepend(interceptorScript);

consoleInterceptor.js

if(!window.hasConsoleInterceptor){
    window.hasConsoleInterceptor = true;
    console.log('overriding console functions');
    var originals ={};
    var console = window.console;
    if (console){
        function interceptConsoleMethod(method){
            originals[method] = console[method];
            console[method] = function(){
                // send the data to the extension
                // chromeExtensionId should be injected into the page separately and before this script
                var data = {
                    action: 'console_intercepted',
                    details: {
                        method: method,
                        arguments: arguments
                    }
                };
                chrome.runtime.sendMessage(chromeExtensionId, data);
                originals[method].apply(console, arguments)
            }
        }
        // an array of the methods we want to observe 
        var methods = ['assert', 'count', 'debug', 'dir', 'dirxml', 'error', 'group','groupCollapsed','groupEnd','info','log', 'profile', 'profileEnd','time','timeEnd','timeStamp','trace','warn','table'];
        for (var i = 0; i < methods.length; i++){
            interceptConsoleMethod(methods[i])
        }
        console.log('Successfully overridden console functions: '+methods.join(','));
    }
}

我的問題

我能做些什么，使consoleInterceptor.js之前運行web-directory-132a3f16cf1ea31e167fdf5294387073.js負載，使web-directory-132a3f16cf1ea31e167fdf5294387073.js使用我修改控制台的功能，而不是默認的瀏覽器控制台funcitons？

Answer 1

你可以試試這個。

在manifest.json文件中：

"content_scripts": [
            {
              "matches": ["http://*/*", "https://*/*"],
              "js": ["script/inject.js"],
              "run_at":"document_start"
            }
        ]

在inject.js中：

 var ss = document.createElement("script"); ss.innerHTML= "xxx"; document.documentElement.appendChild(ss);