Provide custom methods/functions and variables to Chrome Dev Tools for development debugging. (Other functionality is possible to implement as well: e.g., DOM injection.)
Google's Install Documentation
1. enter chrome://extensions in Chrome browser address bar
2. enable 'Developer mode' by turning on toggle switch in top right of page
3. click LOAD UNPACKED and select this directory on local machine
Chrome browser will automatically inject script module with src ./imports/main.js into the current page.
To modify when/if Chrome injects code go to background.js (instructions are there).
To modify what pages this extension applies to modify manifest.json's URL glob patterns: syntax similar to RegEx. Read Google's Documentation on glob patterns as it is much more limited than RegEx.
In main.js import code that is desired to run to customize one's dev tools experience.
Note that to import code into main.js: ensure the file to be imported is listed in the web_accessible_resources array in manifest.json.
Most changes made within directory auto load into the extension. If changes do not seem to be implemented go to chrome://extensions in Chrome browser and click the reload button for the extension.
Code will only inject when a match with the current URL occurs. These matches are defined as glob patterns in the permissions array in manifest.json: see Google's Documentation for proper syntax.
1. this extension does not work with Google's main site (i.e., www.google.com): Google does not support it.
2. this extension does not work in headless browswer mode: Google does not support it.
3. extension usually does not load on a page redirect or clicking a link with target=_blank (new tab). In this case, reload the page.
Aside from known limitations above, reloading the page should make the extension work. Otherwise put in an issue.
- Dan Harper wrote the skeleton for background.js and manifest.json. His home page is here.
- Aliaksandr Astashenkau (aka dfsq) provided most of the code for console.js.
- Tan Li Hau provided idea to use textContent for script tag: article here.
- Ross Jacobs' and Ragnar' StackOverflow answer led to the idea for module implementation: here