I have develeoped a Chrome Extension using manifest V3. I have one in Version 2 but it’s a bit different and now I am stuck because I cannot seem to understand where I’m having the issues at and why. I am attaching a photo of the 2 errors:
Here is my current running code for manifest.json file:
`{
"manifest_version": 3,
"name": "NGH Mods",
"version": "1.0",
"description": "Redirects requests and modifies cookie headers",
"permissions": ["declarativeNetRequest", "scripting"],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup/popup.html"
}
}`
Here is the code for Popup.js:
`document.getElementById("login-form").addEventListener("submit", function(event) {
event.preventDefault();
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
// Check if username and password match
if (username === "Admin" && password === "Password") {
// Redirect to the desired URL
chrome.tabs.update({ url: "YOU_URL_HERE" });
} else {
// Show error message or handle incorrect login
alert("Incorrect username or password!");
}
});`
Here is my code for background.js:
`chrome.runtime.onInstalled.addListener(() => {
const rules = [
{
id: 1,
priority: 1,
action: { type: "redirect", redirect: { regexSubstitution: "YOU_URL_HERE" } },
condition: {
regexFilter: "YOU_URL_HERE",
},
},
];
chrome.declarativeNetRequest.updateDynamicRules({
removeRuleIds: [1],
addRules: rules,
});
});
// Function to make POST requests with JSON data
function postJson(url, json) {
return new Promise(function(resolve, reject) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
resolve(this.responseText);
}
};
xhttp.onerror = function() {
reject();
};
xhttp.open("POST", url, true);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.send(JSON.stringify(json));
});
}
// Tulc class for handling login and user data
function Tulc(info) {
this.trainerId = info.trainerId;
this.url = {};
this.url.login = info.baseURL + "/login/signin";
this.user = null;
this.setUser = user => this.user = user;
this.getUser = () => this.user;
this.login = password => {
this.setUser(null);
var requestInfo = {};
requestInfo.trainerId = this.trainerId;
requestInfo.password = password;
return new Promise((resolve, reject) => {
postJson(this.url.login, requestInfo).then((response) => {
try {
response = JSON.parse(response);
if (response.status == "success") {
this.setUser({ name: response.name });
cookievalue = response.cookie;
resolve(this.getUser());
} else { reject(); }
} catch (e) { console.log(e); reject(); }
}, () => {
reject();
});
});
};
}
// Function to create redirects
function createRedirect(target, redirect) {
let rewriteCookieHeader = (e) => {
for (let header of e.requestHeaders) {
if (header.name.toLowerCase() === "cookie") {
header.value = "si=" + cookievalue;
}
}
return { requestHeaders: e.requestHeaders };
};
chrome.webRequest.onBeforeSendHeaders.addListener(
rewriteCookieHeader,
{ urls: [redirect] },
["blocking", "requestHeaders"]
);
chrome.webRequest.onBeforeRequest.addListener(
(details) => {
return { redirectUrl: redirect };
},
{ urls: [target] },
["blocking"]
);
}
// Initialize the extension
/*function initializeExtension() {
var tulc = new Tulc({ baseURL: "YOU_URL_HERE" });
chrome.browserAction.setPopup({popup: "popup/login.html"});
pocoyo(tulc.getUser());
}*/
// Listen for extension installation or update
//chrome.runtime.onInstalled.addListener(initializeExtension);
// Listen for extension startup
//chrome.runtime.onStartup.addListener(initializeExtension);
// Listen for messages from other parts of the extension
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.command == "LoginPassword" && request.message) {
tulc.login(request.message).then((user) => {
sendResponse(user);
pocoyo(tulc.getUser());
}, () => {
sendResponse();
});
return true;
}
return false;
});
// Function to handle extension setup after login
function pocoyo(user) {
chrome.browserAction.setPopup({ popup: "popup/options.html" });
createRedirect("YOU_URL_HERE", "YOU_URL_HERE");
}
var tulc = new Tulc({ baseURL: "YOU_URL_HERE" });
chrome.browserAction.setPopup({popup: "popup/login.html"});`
Here is my code for popup.html:
`<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
margin-bottom: 20px;
text-align: center;
}
form {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
input[type="text"],
input[type="password"] {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
padding: 10px;
border: none;
border-radius: 3px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Login</h1>
<form id="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username" value="Admin" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" value="Password" required><br>
<input type="submit" value="Login">
</form>
<script src="popup.js"></script>
</body>
</html>`
Lastly, there are a few more files that I wouldn’t post because I believe my two errors are somehow within the code(s) above.
I tried asking ChatAI to point it out; but didn’t help.
tried asking chatai to fix but has no resolve
