4

I have a library of JavaScript functions that I want to be able to access from the developer console of a web browser. I want to be able to run my functions side-by-side with the functions and variables defined by the webpage.

One solution I see is simply copy/paste'ing the code directly into the browser console and then using it, but it would be better if there were a more elegant solution, especially because my codebase could grow a lot and I don't want to have to copy/paste every time I load.

Another solution I looked into was using Chrome Extensions. Chrome Extension Content Scripts (https://developer.chrome.com/extensions/content_scripts.html#host-page-communication) allow JavaScript code to automatically run on visits to webpages, however the above webpage states that

"[Content scripts cannot] use variables or functions defined by web pages or by other content scripts."

Is there any other way of accomplishing this?

Thanks for the help!

crouleau
  • 156
  • 1
  • 1
  • 6
  • 1
    Maybe something like [Tampermonkey](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=de) – xen Jul 06 '13 at 22:40
  • 2
    tampermonkey or greasemonkey work well. i would make a simple userscript that injects a remote script tag, and edit the code in that remote url for easy maintenance. – dandavis Jul 06 '13 at 23:30
  • I'm looking into this right now, and I think it's what I want. I may end up using the source (https://code.google.com/p/tampermonkey/source/browse/trunk/build_sys/manifest.json.google.com) to figure out how it works and replicate it instead. – crouleau Jul 06 '13 at 23:30
  • You could make a chrome favourite that executes the javascript: https://stackoverflow.com/questions/18872679/function-as-google-chrome-bookmark – Nicicalu Jun 10 '20 at 13:47

2 Answers2

3

UPDATE (7/7/2013):
I was updating to Firefox v22 and found out that on this latest version (or the last few versions as well... I'm not sure) the built-in Web Developer tool has a Javascript Scratchpad (press Shift + F4 to pull it up) that will let you type in some code or, in your case, load a JS file and run it on a loaded page.

I haven't tested it extensively but I added a couple of variables to an existing page and they were both accessible via the built-in console as well as Firebug's console. Just do File > Open File to open your JS file and then do Execute > Run.

One option is to create a bookmarklet (reusable and can be injected into any page) but it works only for the simplest script. See: here

Adi H
  • 668
  • 7
  • 9
-4

Once your page is loaded in a browser, all the javascript functions would be under the "window" object. Like if you have,

function mytestfunciton() {
  console.log('This is a test');
}

On your console window just try these

window.mytestfunciton();
//and get the response below
This is a test

You can also wrap them in a global variable something like

var myapp = {};
myapp.add = function(a,b) {
            myapp.sumvalue = a + b;
                            console.log('Sum Value:'+myapp.sumvalue);
        };
myapp.substract = function (a,b) {
            myapp.differencevalue = a - b; 
                            console.log('Difference Value:'+myapp.differencevalue);
          };

All your functions are now wrapped under the global variable myapp and you can now invoke them from the console using something like

myapp.add(5,4);

or as before using the global "window" object

window.myapp.add(5,4);
PJR
  • 443
  • 4
  • 9
  • This answer doesn't take into account the isolation between content scripts and the page's `window` object that the question quotes. – Xan May 30 '16 at 09:03