javascript – Page 6554 – Blancer.com Tutorials and projects

this is only working on local host. Is my code bad?

I used live server on vs code and it works but when i use 000webhost, the key doesnt work. it fails EVERY TIME. Does anyone know why this is happening?

UseSelector in react-native return undefined but variable in redux get updated

i have trying to using UseSelector to get data in a redux, but it’s alwas returned undefined, but when i try log console.log teh variable that i wanted to get in redux it’s get updated, but when i try console log the useSelector it’s returned undefined

code Redux :

export const EXCHAHNGETOSECOND = 'EXCHANGETOSECOND'

export const exchangetosecwork = (hour,minute,second) =>({
    type:EXCHAHNGETOSECOND,
    payloadhourwork : hour,
    payloadminutework : minute,
    payloadsecondwork : second
})

let initialState ={
    resultWorkinSecond : 0
}

export const mainReducer = (state=initialState, action) =>{
    switch (action.type) {
        case EXCHAHNGETOSECOND:
            const hourTosecond = action.payloadhourwork * 3600
            const minuteTosecond = action.payloadminutework * 60
            const res = hourTosecond+minuteTosecond+action.payloadsecondwork
            state.resultWorkinSecond = res
            console.log(state.resultWorkinSecond);
            return state.resultWorkinSecond
        default:
            return state
    }
}

export default mainReducer

store redux :

import { createStore } from "redux";
import mainReducer from "./redux";
import AsyncStorage from '@react-native-async-storage/async-storage';
import { persistStore, persistReducer } from 'redux-persist'


const persistConfig={
    key:'root',
    storage:AsyncStorage,
};

const persistedReducer = persistReducer(persistConfig,mainReducer)

export default() => {
    let store = createStore(persistedReducer)
    let persistor = persistStore(store)
    return{ store, persistor }
}

myConsole log test:

 const resWorkinSec = useSelector((state)=>state.resultWorkinSecond)
    
    <Pressable onPress={()=>{
                            dispatch(exchangetosecwork(hour,minute,second))
                            console.log(resWorkinSec)
                        }}>

[console log result 1

function prop as dependency for useCallback

I am not really sure when we should avoid using useCallback, if there is any harm (memory reallocation). For example lets say I have a component with two props, {onSave, onClose} and one sate viewName. is bellow handler function will be optimized with these dependencies?

  const handleSaveView = useCallback(() => {
    onSaveView(viewName, selectedViewList);
    onClose();
  }, [onSaveView, onClose, viewName]);

Add a npm_package in dependencies & peerDependencies at the same time?

Is there a case doing that?

I’m creating a js lib that uses that package and requires the lib user to match that package.

So, is it true to specify the package both in dependencies & peerDependencies? Or just place in peerDependencies is enough?

React JS File/Video compressor

Is there any library available for File or Video compressor in react JS or javascript?
If unavailable, suggest an alternative way to resize file size or video size before upload.

use fieldname instead of index to get the values from an array of objects

Currently I am saving an array of objects to a local storage which is the settings and then I get or query or get it from local storage and I use index to assign the values like .

Currently I am assigning values using index like this.userSettings.jobSearchFilter.jobs[0].values; , is there other way to change the setting structure or access the values from the array of object using fieldname instead of index.

so this.market should be equal to jobs.market.values , something like that

Thanks.

#ts code

this.userSettings = JSON.parse(localStorage.getItem('settings'));

    if(this.userSettings.jobSearchFilter && this.userSettings.jobSearchFilter.jobs.length > 0){
      this.market= this.userSettings.jobSearchFilter.jobs[0].values;    
      this.fund= this.userSettings.jobSearchFilter.jobs[1]?.values;
      this.developmentlead= this.userSettings.jobSearchFilter.jobs[2]?.values;
      this.developmentaccountant = this.userSettings.jobSearchFilter.jobs[3]?.values;   
    }

#array of objects that is being saved to local storage

 this.userSettings = {
      jobSearchFilter:{   
        ...this.userSettings.jobSearchFilter,
        jobs: [
          {
            type:'market',
            values:settings.filter
          },
          {
            type:'fund',
            values:settings.fundFilter
          },
          {
            type:'developmentLead',
            values:settings.developmentLeadFilter
          }
        ],
      }
    }

#sample query settings from local storage

[
    {
        "type": "market",
        "values": [
            {
                "id": 503,
                "description": "Atlanta",
            }
        ]
    },
    {
        "type": "fund",
        "values": [
            {
                "id": 53,
                "description": "11Atlanta",
            }
        ]
    },
    {
        "type": "developmentLead",
        "values": [
            {
                "id": 533,
                "description": "Atlant1",
            }
        ]
    },
    {
        "type": "developmentAccountant",
        "values": null
    },
]

I want to compress using bzip2 and javascript. Any one knows any that’s MIT? [closed]

There are many bzip2 decompress, but is there one that compresses in javascript and is MIT?

How to return function-generated variable

I have created a function that does this:

var getMostRecent = function (dir: string, cb: any) {
    var dir = homedir
    var files = fs.readdir(dir, function (err, files) {
        var sorted = files.map(function(v) {
            var filepath = path.resolve(dir, v);
            return {
                name:v,
                time:fs.statSync(filepath).mtime.getTime()
            }; 
        })
        .sort(function(a, b) { return b.time - a.time; })
        .map(function(v) { return v.name; });

        if (sorted.length > 0) {
            cb(null, sorted[0]);
        } else {
            cb('Roblox appears to not be installed. Why do you plan to restore the old Roblox cursor, when Roblox doesn't even exist?', null);
        }
    })
}

Then I call the function like this:

var recent = getMostRecent('./', function (err: any, recent: any) {
    if (err) console.error(err);
    return {
        recent: recent
    }
});

console.log(recent);

But then I get undefined. When I run this:

getMostRecent('./', function (err: any, recent: any) {
    if (err) console.error(err);
    console.log(recent);
});

It gives the folder. I can’t figure out a way to return this value.

Maybe I’m too used to Lua.

Shuffle multiple option value with one click generate button #2

How if i’ve 8 dropdown list when clicked only 1 button the shuffle values will pick random value , but in every dropdown value won’t be the same and the choices of value will be spread over each dropdown?

cshtml option value code :

<div class="col-xs-8">
<div class="form-group">
    <select id="txtCupA" class="form-control">
        <option value="SWEET">SWEET</option>
        <option value="SOUR">SOUR</option>
        <option value="SALTY">SALTY</option>
        <option value="BITTER">BITTER</option>
        <option value="UMAMI">UMAMI</option>
        <option value="WATER">WATER</option>
        <option value="WATER">WATER</option>
        <option value="WATER">WATER</option>
    </select>
</div>
<div class="form-group">
    <select id="txtCupB" class="form-control">
        <option value="SWEET">SWEET</option>
        <option value="SOUR">SOUR</option>
        <option value="SALTY">SALTY</option>
        <option value="BITTER">BITTER</option>
        <option value="UMAMI">UMAMI</option>
        <option value="WATER">WATER</option>
        <option value="WATER">WATER</option>
        <option value="WATER">WATER</option>
    </select>
</div>
<div class="form-group">
    <select id="txtCupC" class="form-control">
        <option value="SWEET">SWEET</option>
        <option value="SOUR">SOUR</option>
        <option value="SALTY">SALTY</option>
        <option value="BITTER">BITTER</option>
        <option value="UMAMI">UMAMI</option>
        <option value="WATER">WATER</option>
        <option value="WATER">WATER</option>
        <option value="WATER">WATER</option>
    </select>
</div>
<div class="form-group">
    <select id="txtCupD" class="form-control">
        <option value="SWEET">SWEET</option>
        <option value="SOUR">SOUR</option>
        <option value="SALTY">SALTY</option>
        <option value="BITTER">BITTER</option>
        <option value="UMAMI">UMAMI</option>
        <option value="WATER">WATER</option>
        <option value="WATER">WATER</option>
        <option value="WATER">WATER</option>
    </select>
</div>
<div class="form-group">
    <select id="txtCupE" class="form-control">
        <option value="SWEET">SWEET</option>
        <option value="SOUR">SOUR</option>
        <option value="SALTY">SALTY</option>
        <option value="BITTER">BITTER</option>
        <option value="UMAMI">UMAMI</option>
        <option value="WATER">WATER</option>
        <option value="WATER">WATER</option>
        <option value="WATER">WATER</option>
    </select>
</div>
<div class="form-group">
    <select id="txtCupF" class="form-control">
        <option value="SWEET">SWEET</option>
        <option value="SOUR">SOUR</option>
        <option value="SALTY">SALTY</option>
        <option value="BITTER">BITTER</option>
        <option value="UMAMI">UMAMI</option>
        <option value="WATER">WATER</option>
        <option value="WATER">WATER</option>
        <option value="WATER">WATER</option>
    </select>
</div>
<div class="form-group">
    <select id="txtCupG" class="form-control">
        <option value="SWEET">SWEET</option>
        <option value="SOUR">SOUR</option>
        <option value="SALTY">SALTY</option>
        <option value="BITTER">BITTER</option>
        <option value="UMAMI">UMAMI</option>
        <option value="WATER">WATER</option>
        <option value="WATER">WATER</option>
        <option value="WATER">WATER</option>
    </select>
</div>
<div class="form-group">
    <select id="txtCupH" class="form-control">
        <option value="SWEET">SWEET</option>
        <option value="SOUR">SOUR</option>
        <option value="SALTY">SALTY</option>
        <option value="BITTER">BITTER</option>
        <option value="UMAMI">UMAMI</option>
        <option value="WATER">WATER</option>
        <option value="WATER">WATER</option>
        <option value="WATER">WATER</option>
    </select>
</div>

<input type="submit" id="shuffleDropDown" value="Suffle Value" class="btn btn-primary" />

Script :

function funcArrayShuffle(array) {

var currentIndex = array.length,
    temporaryValue, randomIndex;
while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
}
return array;}

$("#shuffleDropDown").click(function () {

//Getting the current dropdown List
var options = $('#txtCupA option');
var values = $.map(options, e => $(e).val())

//Make It random
var shuffleddItemList = funcArrayShuffle(values);

//Made the older drowdownList empty
var dropdown = $('#txtCupA');
dropdown.empty();
var dropdown1 = $('#txtCupB');
dropdown1.empty();
var dropdown2 = $('#txtCupC');
dropdown2.empty();
var dropdown3 = $('#txtCupD');
dropdown3.empty();
var dropdown4 = $('#txtCupE');
dropdown4.empty();
var dropdown5 = $('#txtCupF');
dropdown5.empty();
var dropdown6 = $('#txtCupG');
dropdown6.empty();
var dropdown7 = $('#txtCupH');
dropdown7.empty();

//Loop through the Shaffle array item and made the New Random Dropdown List
$.each(shuffleddItemList, function (index, item) {
    console.log(index, item);
    dropdown.append(
        $('<option>', {
            value: item,
            text: item
        }, '</option>'))
    dropdown1.append(
        $('<option>', {
            value: item,
            text: item
        }, '</option>'))
    dropdown2.append(
        $('<option>', {
            value: item,
            text: item
        }, '</option>'))
    dropdown3.append(
        $('<option>', {
            value: item,
            text: item
        }, '</option>'))
    dropdown4.append(
        $('<option>', {
            value: item,
            text: item
        }, '</option>'))
    dropdown5.append(
        $('<option>', {
            value: item,
            text: item
        }, '</option>'))
    dropdown6.append(
        $('<option>', {
            value: item,
            text: item
        }, '</option>'))
    dropdown7.append(
        $('<option>', {
            value: item,
            text: item
        }, '</option>'))
});

});

my current issue :
the choices of value won’t spread over each dropdown

my expectation :
when i click generate button, every option value will shuffled value and every dropdown value won’t be the same then the choices of value will be spread over each dropdown looks like this

Linked list with javascript shows [Object] as value instead of serialized object [duplicate]

I am trying to construct a linked list using a Class with JS. Inside my Class I have a function called checkForEmptyNext() which traverses the list and searches for the node with a next: property of null The function should recursively call itself until it finds the correct node

LinkedList

// 10 --> 15 --> 16


class LinkedList {
  constructor(value){
    
    this.head = {
      value: value,
      next: null
    }
    this.tail = this.head;
    this.length = 1;
  }
  append(value){
    if(this.head.next === null){
      this.head.next = {
        value,
        next: null
      }
      this.tail = this.head.next;
      this.length++
    }else{
      this.checkForEmptyNext(value, this.head.next)
    }
  }
  checkForEmptyNext(value, node){

    if(node.next === null){
        node.next = {
        value,
        next: null
      }
      this.tail = node.next;
      this.length++
    }else{
      this.checkForEmptyNext(value, node.next)
    }
  }
}

const linked = new LinkedList(10);
linked.append(5)
linked.append(16)

console.log(linked)

The console.log is showing:

LinkedList {
  head: { value: 10, next: { value: 5, next: [Object] } },
  tail: { value: 16, next: null },
  length: 3 }

Why am I seeing [Object] instead of the actual serialized value?

Can’t deploy firestore cloud functions

I am trying to integrate Elastic Search in my Flutter app. I am trying to deploy a few functions but nothing seems to work.

here is my index.js code:

const functions = require('firebase-functions');
const admin = require('firebase-admin');
const { Client } = require('@elastic/elasticsearch')

admin.initializeApp(functions.config().firebase);

const env = functions.config();
const auth = {
  username: env.elasticsearch.username,
  password: env.elasticsearch.password,
};

const client = new Client({
    node: env.elasticsearch.url,
    auth: auth
})

exports.createPost = functions.firestore
    .document('bookings/{BookingId}')
    .onCreate( async (snap, context) => {
        await client.index({
            index: 'bookings',
            type: '_doc',
            id: snap.id,
            body: snap.data()
        })
    });

exports.updatePost = functions.firestore
    .document('bookings/{BookingId}')
    .onUpdate( async (snap, context) => {
        await client.update({
            index: 'bookings',
            type: '_doc',
            id: context.params.BookingId,
            body: snap.after.data()
        })
    });

exports.deletePost = functions.firestore
    .document('bookings/{BookingId}')
    .onDelete( snap => {
        client.delete({
            index: 'bookings',
            type: '_doc',
            id: snap.id,
        })
    });

Here is the packages.json:

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint",
    "serve": "firebase emulators:start --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "16"
  },
  "main": "index.js",
  "dependencies": {
    "firebase-admin": "^10.0.2",
    "firebase-functions": "^3.18.0"
    },
  "devDependencies": {
    "eslint": "^8.9.0",
    "eslint-config-google": "^0.14.0",
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

I installed elasticsearch using npm:

npm install @elastic/elasticsearch

Everytime I deploy, I get the following output:

 deploying functions
Running command: npm --prefix "$RESOURCE_DIR" run lint

> lint
> eslint

+  functions: Finished running predeploy script.
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
+  functions: required API cloudfunctions.googleapis.com is enabled
+  functions: required API cloudbuild.googleapis.com is enabled
i  functions: preparing codebase default for deployment
i  functions: preparing functions directory for uploading...
i  functions: packaged C:UsersDanisDesktopspace-shuttle-functionsfunctions (68.46 KB) for uploading
+  functions: functions folder uploaded successfully
i  functions: updating Node.js 16 function createPost(us-central1)...
i  functions: updating Node.js 16 function updatePost(us-central1)...
i  functions: updating Node.js 16 function deletePost(us-central1)...
Function failed on loading user code. This is likely due to a bug in the user code. Error message: Error: please examine your function logs to see the error cause: https://cloud.google.com/functions/docs/monitoring/logging#viewing_logs. Additional troubleshooting documentation can be found at https://cloud.google.com/functions/docs/troubleshooting#logging. Please visit https://cloud.google.com/functions/docs/troubleshooting for in-depth troubleshooting documentation.
Function failed on loading user code. This is likely due to a bug in the user code. Error message: Error: please examine your function logs to see the error cause: https://cloud.google.com/functions/docs/monitoring/logging#viewing_logs. Additional troubleshooting documentation can be found at https://cloud.google.com/functions/docs/troubleshooting#logging. Please visit https://cloud.google.com/functions/docs/troubleshooting for in-depth troubleshooting documentation.
Function failed on loading user code. This is likely due to a bug in the user code. Error message: Error: please examine your function logs to see the error cause: https://cloud.google.com/functions/docs/monitoring/logging#viewing_logs. Additional troubleshooting documentation can be found at https://cloud.google.com/functions/docs/troubleshooting#logging. Please visit https://cloud.google.com/functions/docs/troubleshooting for in-depth troubleshooting documentation.

Functions deploy had errors with the following functions:
        createPost(us-central1)
        deletePost(us-central1)
        updatePost(us-central1)
i  functions: cleaning up build files...
Error: There was an error deploying functions:
- Error Failed to update function createPost in region us-central1
- Error Failed to update function deletePost in region us-central1
- Error Failed to update function updatePost in region us-central1

functions:log shows me the following:

PS C:UsersDanisDesktopspace-shuttle-functions> firebase functions:log
2022-05-25T02:35:40.303705Z ? deletePost: - /layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/loader.js
2022-05-25T02:35:40.303713Z ? deletePost: - /layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/main.js
2022-05-25T02:35:40.303723Z ? deletePost:     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
2022-05-25T02:35:40.303730Z ? deletePost:     at Function.Module._load (node:internal/modules/cjs/loader:778:27)
2022-05-25T02:35:40.303737Z ? deletePost:     at Module.require (node:internal/modules/cjs/loader:1005:19)
2022-05-25T02:35:40.303744Z ? deletePost:     at require (node:internal/modules/cjs/helpers:102:18)
2022-05-25T02:35:40.303751Z ? deletePost:     at Object.<anonymous> (/workspace/index.js:3:20)
2022-05-25T02:35:40.303757Z ? deletePost:     at Module._compile (node:internal/modules/cjs/loader:1101:14)
2022-05-25T02:35:40.303764Z ? deletePost:     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
2022-05-25T02:35:40.303771Z ? deletePost:     at Module.load (node:internal/modules/cjs/loader:981:32)
2022-05-25T02:35:40.303777Z ? deletePost:     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
2022-05-25T02:35:40.303784Z ? deletePost:     at Module.require (node:internal/modules/cjs/loader:1005:19)
2022-05-25T02:35:40.304148Z ? deletePost: Could not load the function, shutting down.
2022-05-25T02:35:40.720348431Z E deletePost: Function cannot be initialized. Error: function terminated. Recommended action: inspect logs for termination reason. Additional troubleshooting documentation can be found at https://cloud.google.com/functions/docs/troubleshooting#logging

2022-05-25T02:35:40.921043Z E deletePost: {"@type":"type.googleapis.com/google.cloud.audit.AuditLog","status":{"code":3,"message":"Function failed on loading user code. This is likely due to a bug in the user code. Error message: Error: please examine your function logs to see the error cause: https://cloud.google.com/functions/docs/monitoring/logging#viewing_logs. Additional troubleshooting documentation can be found at https://cloud.google.com/functions/docs/troubleshooting#logging. Please visit https://cloud.google.com/functions/docs/troubleshooting for in-depth troubleshooting documentation."},"authenticationInfo":{"principalEmail":"[email protected]"},"serviceName":"cloudfunctions.googleapis.com","methodName":"google.cloud.functions.v1.CloudFunctionsService.UpdateFunction","resourceName":"projects/space-shuttle-b0738/locations/us-central1/functions/deletePost"}
2022-05-25T02:35:41.776Z ? updatePost: Provided module can't be loaded.
2022-05-25T02:35:41.776039Z ? updatePost: Did you list all required modules in the package.json dependencies?
2022-05-25T02:35:41.776055Z ? updatePost: Detailed stack trace: Error: Cannot find module '@elastic/elasticsearch'
2022-05-25T02:35:41.776063Z ? updatePost: Require stack:
2022-05-25T02:35:41.776077Z ? updatePost: - /workspace/index.js
2022-05-25T02:35:41.776089Z ? updatePost: - /layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/loader.js
2022-05-25T02:35:41.776098Z ? updatePost: - /layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/main.js
2022-05-25T02:35:41.776109Z ? updatePost:     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
2022-05-25T02:35:41.776116Z ? updatePost:     at Function.Module._load (node:internal/modules/cjs/loader:778:27)
2022-05-25T02:35:41.776124Z ? updatePost:     at Module.require (node:internal/modules/cjs/loader:1005:19)
2022-05-25T02:35:41.776132Z ? updatePost:     at require (node:internal/modules/cjs/helpers:102:18)
2022-05-25T02:35:41.776139Z ? updatePost:     at Object.<anonymous> (/workspace/index.js:3:20)
2022-05-25T02:35:41.776147Z ? updatePost:     at Module._compile (node:internal/modules/cjs/loader:1101:14)
2022-05-25T02:35:41.776155Z ? updatePost:     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
2022-05-25T02:35:41.776162Z ? updatePost:     at Module.load (node:internal/modules/cjs/loader:981:32)
2022-05-25T02:35:41.776170Z ? updatePost:     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
2022-05-25T02:35:41.776178Z ? updatePost:     at Module.require (node:internal/modules/cjs/loader:1005:19)
2022-05-25T02:35:41.776649Z ? updatePost: Could not load the function, shutting down.
2022-05-25T02:35:42.152840030Z E updatePost: Function cannot be initialized. Error: function terminated. Recommended action: inspect logs for termination reason. Additional troubleshooting documentation can be found at https://cloud.google.com/functions/docs/troubleshooting#logging

2022-05-25T02:35:42.370105Z E updatePost: {"@type":"type.googleapis.com/google.cloud.audit.AuditLog","status":{"code":3,"message":"Function failed on loading user code. This is likely due to a bug in the user code. Error message: Error: please examine your function logs to see the error cause: https://cloud.google.com/functions/docs/monitoring/logging#viewing_logs. Additional troubleshooting documentation can be found at https://cloud.google.com/functions/docs/troubleshooting#logging. Please visit https://cloud.google.com/functions/docs/troubleshooting for in-depth troubleshooting documentation."},"authenticationInfo":{"principalEmail":"[email protected]"},"serviceName":"cloudfunctions.googleapis.com","methodName":"google.cloud.functions.v1.CloudFunctionsService.UpdateFunction","resourceName":"projects/space-shuttle-b0738/locations/us-central1/functions/updatePost"}

The error seems to indicate that the elasticsearch module cannot be found which I do not know why.
P.S : I am super new to Javascript, Firebase Cloud Functions and Elastic Search.

How to get value from async function in javascript [duplicate]

I am trying to get response status from an async function after fetching from a url, but I can’t. The responseStatus always 0 in the console log

    let responseStatus = 0;
    const makeRequest = async () => {
      const response = await fetch(url);
      responseStatus = response.status;
      // console.log(response);
    }

    makeRequest();
    console.log("responseStatus: " + responseStatus)

Expected result:
responseStatus: 200

Actual result:
responseStatus: 0

how to give yeoman all argument at one go?

i wanted to give all argument of yeoman at one go in CI, i am using this yoeman

https://github.com/microsoft/generator-azuresfguest

something like this :

yeoman cmd : yo azuresfguest --serviceName "x".......

https://github.com/yeoman/yo/issues/480?

idea is, i will run the yeoman in CI/CD tool where user wont write anything or input anything in cmd – it’s just hardcoded values as argument.

argument details as per this document :

https://github.com/microsoft/generator-azuresfguest/blob/master/generators/guestbinary/index.js

How to use URL redirect in Google Chrome Extension in Manfest V3

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?

Displaying warning message if user is not on chrome

I am currently building a website, and I do not have the skills to make the website work on all on all browsers. So I have written a quick bit of JavaScript to detect the browser. I do not know JavaScript very well so the code does not work.

Here is the code


if(userAgent.not(/chrome/i)){
    alert("Warning.n " +
        "You are not on a recomended browser, n ciertain features might not work " +
        "try using chrome");
}

can you please just make the warning only appear if you are not using chrome.

thank you very much