I’m developing a Chrome extension that intercepts the text a user sends to ChatGPT before it’s sent to the model. My goal is to verify whether the text contains any sensitive data by sending it to a backend API. If the data is sensitive, I want the backend to filter it and return the masked version, which will then be sent to ChatGPT.
However, I’m facing an issue where the data is being sent directly to ChatGPT without being intercepted, and I can’t block the direct request to the API.
How can I properly intercept the text before it reaches ChatGPT and ensure it is filtered by my backend API before it is sent out?
Content.js
document.addEventListener("DOMContentLoaded", () => {
const sendButton = document.querySelector('[aria-label="Send prompt"]');
const inputField = document.querySelector("textarea");
console.log(sendButton);
if (sendButton && inputField) {
console.log("Send button and input field found.");
// Intercept the message when the send button is clicked
sendButton.addEventListener("click", (event) => {
event.preventDefault(); // Prevent sending the message immediately
const userMessage = inputField.value;
console.log("Intercepted message:", userMessage);
// Modify the message (for testing purposes)
const modifiedMessage = `${userMessage} (modified by extension)`;
// Show the modified message in a dialog
if (
confirm(
`Modified Message:nn${modifiedMessage}nnDo you want to send this message?`
)
) {
// Trigger API call to simulate data leak prevention action
chrome.runtime.sendMessage({ action: "triggerApiCall" }, (response) => {
if (response && response.success) {
console.log("API Call Successful, sending message to ChatGPT...");
inputField.value = modifiedMessage; // Set the modified message back to the input
sendButton.click(); // Trigger the send button click again to send the modified message
} else {
console.error(
"API Call Failed:",
response ? response.error : "No response"
);
alert("Error preventing data leak.");
}
});
}
});
} else {
console.log("Send button or input field not found.");
}
});
manifest.json
{
"manifest_version": 3,
"name": "ChatGPT Message Interceptor",
"version": "1.0",
"description": "Intercept and modify messages sent to ChatGPT",
"permissions": [
"activeTab",
"storage"
],
"content_scripts": [
{
"matches": ["https://chatgpt.com/*", "https://*.chat.openai.com/*"],
"js": ["content.js"]
}
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon-16.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
}
popup.html
<!DOCTYPE html>
<html>
<head>
<title>ChatGPT Message Interceptor</title>
<style>
body {
width: 200px;
padding: 10px;
}
button {
width: 100%;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Activate Interceptor</h3>
<button id="activateButton">Activate</button>
<script src="popup.js"></script>
</body>
</html>```