I am new to developing Google Chrome Extensions. After extensive research, I cannot find really any useful Tips. Basically, what I want is after successfully logging in; the user is presented with a popup box (at this moment, options.html); where a user can check a checkbox (which if checked), does this change on this file. I do not have the function for the checkbox yet but I am needing to do the redirect first I think to make sure my extension would work for what I need it for but..
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./CSS/selection.css">
<style>
body, html {
padding: 0;
margin: 0;
}
.container {
box-shadow: inset 0px 0px 8px 8px #181818;
width: 400px;
height: 300px;
background: url("./Images/ShadowGhosts.png");
background-repeat: no-repeat;
background-size: auto;
background-size: 400px 300px;
display: flex;
align-items: left;
justify-content: left;
flex-direction: column;
font-family: 'Source Sans Pro';
user-select: none;
color: goldenrod;
}
.black-input {
color: red
}
</style>
</head>
<body>
<div class="container">
<fieldset>
<legend>Select Which one you Want:</legend>
<div>
<input type="checkbox" class="black-input" id="scales" name="scales">
<!-- checked> -->
<label for="scales">Ears</label>
</div>
<div>
<input type="checkbox" id="horns" name="horns">
<label for="horns">Horns</label>
</div>
</fieldset>
</div>
</body>
and this is my manifest file:
{
"name": "Shadow Ghosts",
"description": "Some Cool Description",
"version": "1.1",
"manifest_version": 3,
"background": {
"service_worker": "./JS/background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "./Images/SG.png",
"32": "./Images/SG.png",
"48": "./Images/SG.png",
"128": "./Images/SG.png"
}
},
"icons": {
"16": "./Images/SG.png",
"32": "./Images/SG.png",
"48": "./Images/SG.png",
"128": "./Images/SG.png"
},
"content_scripts": [{
"all_frames": true,
"matches": ["<all_urls>"],
"js": ["JS/content-script.js"]
},
{
"run_at": "document_start",
"matches": ["*://localhost/tulc/public/exemple/wc*"],
"js": ["JS/cookie-fix.js"]
}
],
"permissions": ["storage", "activeTab", "scripting", "webRequest", "declarativeNetRequest"]
}
And lastly, this is my background script:
let color = "#3AA757";
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ color });
console.log('Default background color set to ,color');
});
// chrome.webRequest.onSendHeaders.addListener(function (e){
// chrome.tabs.query({
// active:true,
// currentWindow:true
// },
// function (tabs){
// });},
// {
// urls:["<all_urls>"],
// types: ["xmlhttprequest"]
// },["requestHeaders"]);
In my background script, I used an older example to try to create my own code but it did not work as I had to comment it out. Can someone please point me in the right direction on:
1.) How to do a URL Redirect (From: Yahoo.com To: Google.com)
2.) How to add data to each checkbox if checked
and Lastly:
3.) How to use the data from the checkbox to modify data on the redirected page?