Adding custom features to the chrome console

Is it possible to have custom functions in google-chrome that will always be available in the console (no matter which page is loaded)? For example, I would like to have a function called echo, which will be just a wrapper around console.log. This just saves a bit of input, but later I might want to create some useful debugging features.

+13
javascript google-chrome console customization
Jan 29 '12 at 5:40
source share
1 answer

Well, this is pretty easy to do. You need to create a content script . This script will be entered on any page and create the necessary global functions that you will use in your console. The hardest part is how to make these custom content functions complex to be part of your actual window object, since usually you cannot access the functions or variables that you define in your script content from the rest of the javascript code, which not in content script. Content scripts are run in a so-called sandbox.

Content scripts are executed in a special environment called an isolated world. They have access to the DOM of the page to which they are inserted, but not to any JavaScript variables or functions created on this page. It looks for each script content as if there is no other JavaScript executable on the page on which it is running. The same is true in the opposite: JavaScript running on a page cannot call any functions or access any variables defined by content scripts.

But there is a fancy workaround.
You define the manifest file as follows:

manifest.json

 { "name": "Content script", "version": "0.1", "manifest_version": 2, "content_scripts": [{ "matches": ["http://*/*"], "js": ["console.js"] }] } 

And your content script:

console.js

 function customConsole() { window.myNewFunction = function() { console.log("Hello I'm available from console."); }; } var script = document.createElement('script'), code = document.createTextNode('(' + customConsole + ')();'); script.appendChild(code); (document.body || document.head || document.documentElement).appendChild(script); 

So, you specify your new functions as global functions so that they can be used in console .
Also look at the message

+15
Jan 29 '12 at 7:01
source share



All Articles