修改javascript以显示函数范围的变量

Question

I would like to be able to expose a function-scoped variable that is part of a website's (not mine) javascript.

Here's a simplified example:

function addHooks(e, t, n, i) {
    var props = {                    // Would like to expose this
        update: function() { ... },
        remove: function() { ... },
        find: function() { ... },
    };
    ...
}

In the above example, I would like to expose the props variable so that my webextension can then access this to modify the behavior of the website. Please note, that the website that serves this JS file isn't under my control and thus, I cannot simply modify the source file to export this variable. However, I'm fully open to modifying the final code that the browser runs (I just don't know how to). The javascript file containing the addHooks function appears to be added dynamically via XHR .

Although I have no idea on how to accomplish this programmatically, I have had some success setting a breakpoint and then issuing window.siteController = props in the browser's developer console. Unfortunately, manual user-intervention is not something I can package and distribute.

One method that I have been toying with is the idea of making an AJAX request for the JS file, modifying its script contents and appending it to the page.

Is there a canonical, programmatic way in which a function-scoped variable can be exposed?

Answer 1

EDIT: Thanks to Makyen who pointed out my error. Apparently you might be able to do it if you re-define the function in a page script and insert it as a script element. (See the comment for two references).

Just be sure that your <script> element is inserted after the original definition and then you can either return props at the end of the function, or use this.props and use the function either as a constructor or using the call function, passing an object that will get the props property added.

---

Old answer ( __ wrong__ apparently)

Short answer: you can't.

Full explanation: if you can't change the code of the function and you can only use the function (call it) you cannot alter its variable's scope (and good thing you can't, too. There's a reason why the variable was limited to its current scope).

And you can't change the website's JavaScript. As a Firefox or Chrome extension (and possibly the same fires to other browsers I'm not sure) you can't even access the function (let alone it's inner variables). I mean to say you can't even call it from the extension of it's in the website's code.

content scripts cannot see JavaScript variables defined by page scripts More info and source

Firefox/Chrome runs your JavaScript code in a parallel environment, isolated from the website's environment. This is of course for security reasons. It also helps for you to be able to develop without knowing the exact inner workings of each website your code might be injected into, as you don't need to bother regarding naming conflicts (which would be impossible if it weren't for the separation environments). The only thing you do have access to is the DOM, through which you can gather information, alter the website and even talk with the website in some cases (the website should follow a protocol you decide upon as well).

Answer 2

if it's the props object variable that you want exposed, you could return he entire object from the functin, like in closures. Or , you could, simple declare a the enclosing function as a constructor function, set props as this.props and then, invoke the same function elsewhere, using the new keyword. Let me know if this helps