Category: javascript

I am new to building chrome extensions, this is the first one I am trying. I am trying to build a simple extension that can help a user in certain job sites filter jobs using certain keywords without going through the ‘unnecessary’ listings.
I have seen similar questions here but all the answers, none of them solve my problem. I am trying to get the active tab url so I can check whether it matches the sites I am trying to get jobs from. Here is an example:

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
      if (message.action === 'filter_jobs') {
        // check the tab url to ensure the script should be injected
        chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
          if (tabs.length > 0) {
            const activeTab = tabs[0];
            const url = activeTab.url;
            console.log(url);
            if (url.includes('linkedin.com') || url.includes('upwork.com') || url.includes('glassdoor.com')) 
            {
              // Relay the message to the content script of the active tab
              chrome.tabs.sendMessage(activeTab.id, message, (response) => {
                sendResponse(response); // Relay the response back to the popup
              });
            } 
           else 
           {
              // Notify the popup that the site is not supported
              sendResponse({
                error: 'This site is not supported. Please navigate to LinkedIn, Upwork, or Glassdoor.',
              });
           }
          };
          return true; // Keeps the message channel open for asynchronous response

        })
      }

When I run the above code with the debugger open, I keep getting the activeTab as ‘undefined.’I have “activeTab” as a permission in my manifest.json. Basically, I have a search button in my popup, where I type a keyword that should be sent to my background script shown below and in return the background script should communicate to the content script to get the jobs from the site. Here is how my content-script.js file looks like.

    if (message.action === 'filter_jobs') {
      const keyword = message.keyword.toLowerCase();
  
      // Scrape job data
      const jobs = Array.from(document.querySelectorAll('.job-listing')).map(job => ({
        title: job.querySelector('.job-title')?.innerText || '',
        company: job.querySelector('.company-name')?.innerText || '',
        link: job.querySelector('a')?.href || ''
      }));
  
      // Filter jobs
      const filteredJobs = jobs.filter(job => job.title.toLowerCase().includes(keyword));
  
      // Respond with filtered jobs
      sendResponse(filteredJobs);
    }
  });
Any help with this is much appreciated :)

The actual problem – at server side we need to distinguish REST requests from other browser HTTP requests like image request, page request and etc. By saying “REST request” I mean a request made by JS utilities like XMLHTTPRequest or fetch; by saying “other browser requests” I mean requests generated when you open a webpage, a webpage loads images, sounds, video and etc.

So, when I encountered this problem I first started to look for some criteria that can help me reliably distinguish these kinds of requests and of course the first idea that came to me was headers – there must be some headers that are present on REST requests and absent on others (or vice versa or something else). A little investigation led me to understanding of the fact that my fetch requests has “Sec-Fetch-Dest” header set to “empty” and other browser generated requests has “Sec-Fetch-Dest” with other values. And since I found no exceptions for this rule I thought the problem is solved – on server side we just check if a request has “sec-fetch-dest” header and it has explicit value of “empty”, and if yes then it is REST request; if not then some other automatically generated request. But then I googled sec-fetch-dest and found not so much mentionings of sec-fetch-dest and instantly thought that my solution is not that elegant or adequate as I thought, and maybe there is something else that people do to distinguish REST requests from generic requests.

Hence the question – is existence of “sec-fetch-dest: empty” header is a reliable criteria to tell REST requests from generic requests for a HTTPS web app? If not then what are the other options?

Thanks in advance!

PS: it may look like this old question is the same as mine – Sec-Fetch-Dest request header attribute to determine if it is a page, but it actually not the same

No idea which tags should this question have, edit please

In the adhan-js library, how do I put the coordinates of the height above the ground?

import { Coordinates, CalculationMethod, PrayerTimes } from 'adhan';

const coordinates = new Coordinates(24.71731140399468,  46.55574618993698);
const params = CalculationMethod.UmmAlQura();
const date = new Date();
const prayerTimes = new PrayerTimes(coordinates, date, params);
console.log(prayerTimes);

What is a workaround to list all thread IDs from the OpenAI developer platform (https://platform.openai.com/threads/) using JavaScript?

There is no official API to list all available threads.

I found answers about the v1 API. It’s also possible to list messages for a given thread, but that’s not what is needed.

Sources:

• https://community.openai.com/t/where-can-i-see-all-the-threads-ive-created-with-the-api/592963
• https://platform.openai.com/docs/api-reference/threads
• https://platform.openai.com/docs/api-reference/messages/listMessages

I am trying to send data to a PHP backend file using a jQuery AJAX request. After the data is successfully sent, I also want to update a specific part of the page (a .demands div) with the response. However, the request does not seem to work, and I am not sure why.

I do get a positive response in the js, the alert shows that the data was sent, but in the accept_demand_backend file, I get an empty array, showing that the data did not get there

Here is my code:

$(document).ready(function () {
  $(".accept_btn").click(function () {
    $.ajax({
      type: "POST",
      url: "../backend/accept_demand_backend.php",
      data: {
        name: "bogdan"
      },
      cache: false,`your text`
      success: function(data) {
        alert(data); // Expecting a success response from the backend
      },
      error: function(xhr, status, error) {
        console.error(xhr); // Logging error if the request fails
      }
    });

    // Optionally refresh the .demands div after a successful request
    $(".demands").load("../backend/accept_demand_backend.php");
  });
});

This is ‘accept_demand_backend.php’ :

<?php
// Check if the ID is set in the incoming data and print it
print_r($_POST);

?>

The backend should receive the name value via a POST request.
An alert should display the response from the backend.
The .demands div should reload with the updated content.

Title: Scroll-triggered animations not working with keyboard scrolling but work with scrollpad

Question:
I am facing an issue where scroll-triggered animations on my website work correctly when using the laptop’s scrollpad but do not trigger when using keyboard scrolling (e.g., arrow keys or Page Up/Down).

Here is the link to my website: https://itsmikhil.github.io/sidcup-family-golf/
The GitHub repo is available here: https://github.com/itsmikhil/sidcup-family-golf.

Description of the Issue:
When using the scrollpad, the animations fire as expected. However, when scrolling with the keyboard, the animations do not trigger. I have attached videos to demonstrate this behavior:

• Scrollpad scrolling (animations working): https://www.veed.io/view/1f913b2b-ae6a-4623-ad2e-e76cac33a750?panel=share

• Keyboard scrolling (animations not working): https://www.veed.io/view/ce42f498-d7bd-4774-bca3-5df1a578c4a8?panel=share

original website: https://sidcupfamilygolf.com/.

Steps I Tried to Fix the Issue:

1. I searched for solutions online but couldn’t find one.

2. I reviewed GSAP’s documentation and community forums. It seems ScrollTrigger might not be handling keyboard or programmatic scrolling properly in my setup.

Expected Behavior:
The animations should trigger when scrolling with both the scrollpad and the keyboard.

Reproducible Example:
Please see my GitHub repo (https://github.com/itsmikhil/sidcup-family-golf) for the full codebase. Below is a minimal reproducible example (MRE) of the issue:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Animation Issue</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
</head>
<body>
  <div style="height: 100vh; background: lightblue;">Scroll down</div>
  <div id="trigger" style="height: 100vh; background: lightcoral;">Trigger animations here</div>
  <div style="height: 100vh; background: lightgreen;">Keep scrolling</div>

  <script>
    gsap.registerPlugin(ScrollTrigger);

    gsap.to("#trigger", {
      scrollTrigger: {
        trigger: "#trigger",
        start: "top center",
        end: "bottom center",
        markers: true
      },
      backgroundColor: "yellow",
      duration: 1
    });
  </script>
</body>
</html>

Question:
How can I make ScrollTrigger animations work consistently regardless of whether scrolling is done using the scrollpad or keyboard? Any insights or suggestions would be greatly appreciated.

I have a code pattern like this. I need to test the underlying functions func1, and func2. In Func2, I am making call to func1, I need to spy or mock func1 and check if it has been called. However, my test cases seem to be calling the actual function instead of a spy or a mock. please help.

function init() {
    const func1 = () => {
        // Some implementation
    };

    const func2 = () => {
        // Call func1
        func1();
    };

    return { func1, func2 };
}

module.exports = { init };

This is the format of my test cases

const { init } = require('./path_to_your_module');

describe('func2', () => {
    it('should call func1 without invoking its implementation', () => {
        // Get the functions from init
        const { func1, func2 } = init();

        // Mock func1
        const mockFunc1 = jest.fn();
        func1 = mockFunc1; // Replace func1 with the mock in the scope of this test

        // Call func2
        func2();

        // Assert func1 was called
        expect(mockFunc1).toHaveBeenCalledTimes(1);
    });

    it('should spy on func1 without calling the actual implementation', () => {
        // Get the functions from init
        const { func1, func2 } = init();

        // Spy on func1
        const spyFunc1 = jest.spyOn({ func1 }, 'func1').mockImplementation(() => {});

        // Call func2
        func2();

        // Assert func1 was called
        expect(spyFunc1).toHaveBeenCalled();

        // Clean up the spy
        spyFunc1.mockRestore();
    });
});

I am working on a beach reservation system and I need a daterangepicker which allows users to select a date range. But, the problem is that if a user is interested in selecting only one date or just a single day, they need to double click which, as we know, is not a good user experience.

I’ve tried changing certain properties such as setting singleDatePicker: (true). However, after this change only a single calendar is shown instead of a range picker with two calendars. I want it to work for both date ranges and single days without double clicks.

This is the daterangepicker library I’m using: https://www.daterangepicker.com/#config

This is my example: https://jsfiddle.net/sjnyzv6h/2/

How can I make it so that users can choose a single day without double clicking?

I am working on a system beach reservation so I need daterangepicker which allows user to select date from one date to another date and so on. But problem is that if a user is interested to select only one date or just for a single day need to make double clicks after that button apply make it available as we know double clicks is not good user experience. I tried to change properties for instance singleDatePicker: (true) but after this changes works only for single day while I need both to allows user choose daterangepicker for some (days )and single day for one (day) but single day to work without double clicks. This is library data daterangepicker that I am using: https://www.daterangepicker.com/#config This is my example: https://jsfiddle.net/sjnyzv6h/2/ Way happened this? And how to make to choose single day without double clicks? How I can solve it?

As I sad I tried to use in the script: option singleDatePicker: true,
but this options allow me just to have a calendar as a read also in the documentation of the library: singleDatePicker: true Show only a single calendar to choose one date, instead of a range picker with two calendars. The start and end dates provided to your callback will be the same single date chosen.

I am expecting that when user choose also for a single day date to works properly as the same works for daterangepicker for some days without double clicks.`

I try to update react-router to v7. but get

 30:21  error  Promise-returning function provided to attribute where a void return was expected  @typescript-eslint/no-misused-promises

I get this on

import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import IconButton from "@mui/material/IconButton";
import { useNavigate } from "react-router-dom";

fonction foo() {
  const navigate = useNavigate();
return (
  <IconButton
     color="primary"
     aria-label="back to Home page"
     onClick={() => navigate("/")}
  >
    <ArrowBackIosIcon fontSize="large" />
  </IconButton>
);
}

I don’t know how to fix this eslint issue, navigate is not a promise

I am working on a Depthy viewer project, and I’m facing an issue with the stretching effect during animation. Currently, the stretched part looks wavy or radial, but I would like it to have a linear stretching effect.

The effect is controlled by GLSL code. Below are some reference links to help explain my setup:

• Current project
• Target effect
• Explanation image

The main GLSL code responsible for the effect is the PIXI.DepthPerspectiveFilter in the Depthyviewer.js file of this repository.

I have tried using GL_CLAMP_TO_EDGE, but the result is not quite what I need. I would appreciate it if anyone could guide me on how to modify the PIXI.DepthPerspectiveFilter to achieve the desired linear stretching effect.

Thank you!

I want to get information from a website the way I would an API.

Here’s the plan:

Step one: open a new tab in the browser using a pre-built query.

Step two: find a component in the just opened tab by its ID.

Step three: get the innerHTML.

Specifically, I want to get these kinds of information from this procedure:

• product names by upc
• distance between two addresses
• addresses by business name and city

Can anyone recommend how to code this solely by Javascript?

Or failing that… recommend some APIs for this info that won’t break the bank?

I am having a problem when I want to access a route which is protected by an auth0 AuthenticationGuard. Here is how it works.
If a user is not logged in and wants to access a protected route, the AuthenticationGuard redirects the user to auth0 authentication page. When the authentication is achieved, then the user gets redirected to /user path.
In my case, when the user logged in, he gets redirected to /user path for a couple of milliseconds, then for other milliseconds the user is redirected to root path with these parameters in the URL : /?code=[value]&state=[value]%3D%3D. Finally in the user is redirected to /user route.
Which means that in the browser history I have :
First : seeked path
Second : root path with code and value properties
Third : seeded path.

Does someone have an answer to my issue ?

index.js :

const Auth0ProviderWithRedirectCallback = ({ children, ...props }) => {
  const navigate = useNavigate();
  const onRedirectCallback = (appState) => {
    
    navigate((appState && appState.returnTo) || window.location.pathname);
  };
  return (
    <Auth0Provider onRedirectCallback={onRedirectCallback} {...props}>
      {children}
    </Auth0Provider>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Auth0ProviderWithRedirectCallback
        domain={domain}
        clientId={clientId}
        authorizationParams={{
          redirect_uri: window.location.origin
        }}
      >
        <App />
      </Auth0ProviderWithRedirectCallback>
    </BrowserRouter>
  </React.StrictMode>
);

routes :

<Routes>
    <Route path="/" element={<Home/>} exact/>
    <Route path="/user" element={ <AuthenticationGuard component={ UserAccount }/> }/>
</Routes>

AuthenticationGuard.js :

const AuthenticationGuard = ({component}) => {
    const AuthenticatedComponent = withAuthenticationRequired(component, {
        onRedirecting: () => <PageLoader/>,
    });
    return <AuthenticatedComponent/>;
};

I am using socket io for my project and I am getting error websocket connection failed.

I am using Express JS as backend and NEXT JS for frontend Below are the code for connections –

Express Server –

require("dotenv").config({ path: "config.env" });
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");
const app = express();
const PORT = process.env.PORT || 777;
app.use(express.json());
app.use(
  cors({
    origin: process.env.CLIENT_URL || "http://localhost:3000",
    methods: ["GET", "POST"],
    credentials: true,
  })
);
app.use(bodyParser.json());
app.use(cookieParser());
const connectToMongo = require("./middleware/db");
const { Server } = require("socket.io"); // Import Socket.IO
const http = require("http"); // Required to wrap Express app

connectToMongo();

// Handle uncaught Error
process.on("uncaughtException", (err) => {
  console.log(`Error ${err}`);
  console.log("Shutting down server due to uncaught exception error");
  process.exit(1);
});

app.get("/", async (req, res) => {
  console.log("API Working");
  res.send("API is working");
});

app.all("*", (req, res, next) => {
  res.header(
    "Access-Control-Allow-Origin",
    "https://kkp-badminton.netlify.app"
  );
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  next();
});

app.use("/api/match", require("./routes/match"));
app.use("/api/player", require("./routes/player"));
app.use("/api/round", require("./routes/round"));
app.use("/api/tournament", require("./routes/tournament"));

// Create the HTTP server
const server = http.createServer(app);

// Integrate Socket.IO with the HTTP server
const io = new Server(server, {
  cors: {
    origin: process.env.CLIENT_URL || "http://localhost:3000",
    methods: ["GET", "POST"],
  },
  transports: ["websocket", "polling"],
  path: "/socket",
});

// Define Socket.IO events
io.on("connection", (socket) => {
  console.log("New client connected:", socket.id);

  socket.on("error", (err) => {
    console.error("Socket.IO Error:", err);
  });

  // Example: Handle a custom event
  socket.on("getMatch", (payload) => {
    console.log("Received 'getMatch' event with payload:", payload);
    io.emit("getMatch", payload); // Broadcast the event to all connected clients
  });

  socket.on("disconnect", () => {
    console.log("Client disconnected:", socket.id);
  });
});

//Server Listening
server.listen(PORT, () => {
  console.log("Server listening on PORT = ", PORT);
});

//Unhandled Promise Rejection
process.on("unhandledRejection", (err) => {
  console.log(`Error : ${err}`);
  console.log("Shutting Down Server due to unhandle Promise Rejection");

  server.close(() => {
    process.exit(1);
  });
});

Next JS –

"use client";

import { io } from "socket.io-client";

let socket;
const isBrowser = typeof window !== "undefined";

export const getSocket = () => {
  if (socket) {
    return socket;
  }
  socket = isBrowser
    ? io(process.env.NEXT_PUBLIC_SERVER_URL, {
        path: "/socket",
        transports: ["websocket", "polling"],
        reconnection: true,
        reconnectionAttempts: 5,
      })
    : {};
  return socket;
};

I tried Next JS custom server also on Netlify but because Netlify doesn’t support custom server due to its serverless nature, I dropped that idea. I have made separate server on express and hosted on Vercel and then I got this connection error.

Note there is a very similar question here but that is asking about ESLint, which is a completely different thing.

I would like to be able to disable the built-in Javascript validation for only one line. This kind of thing:

I do not want to disable it globally, and I am not using ESLint.