Browser Native Injection

Question

Following this script: #content_script.js, It is a way to inject code for obtaining values which are passed in the parameters.

Or more clear (It can be any JavaScript's functions ):

(function() {
    var parse = JSON.parse;
    JSON.parse = function(){
        console.log('Getting params: ', arguments);
        return parse.apply(JSON, arguments)
    };
    JSON.parse.toString = function(){ return 'function parse() { [native code] }' };

    var wss = WebSocket.prototype.send;
    WebSocket.prototype.send = function(){
        console.log('Getting params', arguments);
        return wss.apply(this, arguments)
    }
    WebSocket.prototype.send.toString = function(){ return 'function send() { [native code] }' }
})();

But, in an online game I'm in a situation I should not use that method, instead I want to inject it into JavaScript engine (Native Code). Not exactly I want to know how to develop, if not, what should I do?. If I must use another programming language or some method for do it?

Answer 1

This is very easily done. All the code below is template code, which means common copy paste for all addons, with slight tweaks. Here is a small tutorial on how to write a firefox bootstrap addon. It is basically the same thing as here but personalized for your work: https://gist.github.com/Noitidart/9025999 (i didnt include details like icon and localization though)

1. Create an empty folder on your computer
2. In it make these blank new files: bootstrap.js and install.rdf and chrome.manifest and inject.js

3. Into install.rdf paste this template:

   <?xml version="1.0" encoding="utf-8"?>
       <!-- This Source Code Form is subject to the terms of the Mozilla Public
      - License, v. 2.0. If a copy of the MPL was not distributed with this
      - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
       <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
         <Description about="urn:mozilla:install-manifest">
           <em:id>Bootstrap-Skeleton@jetpack</em:id>
           <em:version>initial</em:version>
           <em:type>2</em:type>
           <em:bootstrap>true</em:bootstrap>
           <em:unpack>false</em:unpack>
   
           <!-- Firefox -->
           <em:targetApplication>
             <Description>
               <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
               <em:minVersion>7.0</em:minVersion>
               <em:maxVersion>27.0</em:maxVersion>
             </Description>
           </em:targetApplication>
   
           <!-- Front End MetaData -->
           <em:name>Bootstrap Skeleton</em:name>
           <em:description>How all bootstrap addons start.</em:description>
           <em:creator>Noitidart</em:creator>
           <em:contributor>Pat for Icon</em:contributor>
           <em:optionsType>2</em:optionsType>
         </Description>
       </RDF>
   

4. Now in what we pasted lets replace the contents of <em:id> with DragonboundCheater@wZVanG

5. Lets update <em:name> to the name of addon we want, lets name it Dragonbound Cheater
6. Now save that and go over to bootstrap.js

7. In bootstrap.js paste this template:

   function startup(aData, aReason) {}
   
   function shutdown(aData, aReason) {
       if (aReason == APP_SHUTDOWN) return;
   }
   
   function install() {}
   
   function uninstall() {}
   

8. Now update its contents with this:

   const {classes: Cc, interfaces: Ci, utils: Cu, results: Cr} = Components;
   Cu.import('resource://gre/modules/Services.jsm');
   var browserWinAddedTo;
   function startup(aData, aReason) {
       var recentBrowserWindow = Services.wm.getMostRecentWindow('navigator:browser');
       browserWinAddedTo = recentBrowserWindow;
       if (recentBrowserWindow.document.readyState == 'complete') { //on startup `aDOMWindow.document.readyState` is `uninitialized`
           recentBrowserWindow.messageManager.loadFrameScript('chrome://dragonboundcheater@wzvang/content/inject.js');
       } else {
           recentBrowserWindow.addEventListener('load', function () {
               recentBrowserWindow.removeEventListener('load', arguments.callee, false);
               recentBrowserWindow.messageManager.loadFrameScript('chrome://dragonboundcheater@wzvang/content/inject.js');
           }, false);
       }
   }
   
   function shutdown(aData, aReason) {
       if (aReason == APP_SHUTDOWN) return;
       browserWinAddedTo.messageManager.removeDelayedFrameScript('chrome://dragonboundcheater@wzvang/content/inject.js');
   }
   
   function install() {}
   
   function uninstall() {}
   

9. In chrome.manifest add this: content dragonboundcheater ./

10. In inject.js now we can do whatever js want, but lets first make sure the host matches, and also see https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox/Frame_script_environment this tells us that the window object is refered to by the global variable content so wherever we want to access that we use content and if you want to access the js environment we do so by content.wrappedJSObject. So lets make inject.js be this:

    (function() {
        var window = content;
        var js = window.wrappedJSObject;
    
    
        if (window.location.host.indexOf('dragonbound.net') == -1) {
           return;
        }
    
        var parse = js.JSON.parse;
        js.JSON.parse = function(){
            console.log('Getting params: ', arguments);
            return parse.apply(js.JSON, arguments)
        };
        js.JSON.parse.toString = function(){ return 'function parse() { [native code] }' };
    
        var wss = js.WebSocket.prototype.send;
        js.WebSocket.prototype.send = function(){
            console.log('Getting params', arguments);
            return wss.apply(this, arguments)
        }
        js.WebSocket.prototype.send.toString = function(){ return 'function send() { [native code] }' }
    })();
    

11. Then zip all the stuff in the folder up, rename it from .zip to .xpi and drag into firefox and voila :)