# Injecting custom javascript

With Charles you can inject custom JavaScript files into a page.&#x20;

{% hint style="info" %}
Please make sure you use the Charles Chrome Extension v1.6 or later.
{% endhint %}

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

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.

<div align="left"><figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2F72U2AnB4Rnrx5KMkw0kP%2Fimage.png?alt=media&#x26;token=e381c02d-9403-45a7-958b-ddd41e8495d0" alt=""><figcaption></figcaption></figure></div>

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:

<div align="left"><figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FBHWohW7XRuYJOI2GEEf6%2Fimage.png?alt=media&#x26;token=19f02c2f-874e-450e-bbc5-d94c017a71d4" alt="" width="314"><figcaption></figcaption></figure></div>

* 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

![](https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FUWGKUBuoScppLNKYROni%2Fimage.png?alt=media\&token=cad8347c-23e1-4e46-8260-e8308cfcd885)

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

2. 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.

<div align="left"><figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FuwWKfxJ1hJKzwQKPpbHg%2Fimage.png?alt=media&#x26;token=c3326acc-1222-4aed-9edf-eaa570e451ff" alt=""><figcaption></figcaption></figure></div>
