Injecting custom javascript

With Charles you can inject custom JavaScript files into a page.

Please make sure you use the Charles Chrome Extension v1.6 or later.

Unfortunately, in Chrome Manifest v3 it is no longer possible to inject remote JavaScript into a page.

However, we have built in 3 empty files into Charles (in the folder CustomJavaScript), where you can add your own JavaScript. If you like, you can also add more .js files into the folder.

There are two ways to inject a file into a page.

1. Most common: Inject a file every time a certain page is loaded (EG every time the user visits cranfordtech.com). The extension does not have to be open (i.e. the user does not have to click the extension icon.). A common use case for this is to inject a button to a page. This can be configured in manifest.json → content_scripts

For this to work, you need to adjust the following code:

• matches: match pattern on which pages the script should be injected. See https://developer.chrome.com/docs/extensions/mv3/content_scripts/#matchAndGlob for more information
• exclude_matches: match pattern on which pages the script should NOT be injected. See https://developer.chrome.com/docs/extensions/mv3/content_scripts/#matchAndGlob for more information
• js: Script file(s) to be injected. Make sure the File Name corresponds to a file in the CustomJavaScript folder of the extension. Also make sure to add the folder name in front of the file name, e.g. "CustomJavaScript/customScript1.js”. You can include multiple files, adding them using comma-separation

• The example above will inject the custom script customScript1.js in https://bubblehacks.io/ and all it’s subpages, except https://bubblehacks.io/charles.

1. Less common: Using the Bubble Plugin to inject a file when the extension popup is visible and an action is triggered in your Bubble file. Make sure the File Name corresponds to a file in the CustomJavaScript folder of the extension.