# Injecting custom javascript

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

{% 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. 

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="/files/VXB64M1CSaZcZebUMmpU" 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="/files/PiEBMfnu9qnG5Dh5QCzM" 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

![](/files/dc0Z8B4gXAZnLrCqVXuX)

* 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="/files/AdOs0nzKJ1G2i6WLkZlB" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cranford-tech.gitbook.io/charles/key-features/injecting-custom-javascript.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.