Why can’t I download media from Telegram API (GramJS) passing only the mandatory attributes?

I am using GramJS, it works fine when I pass the whole media object to downloadMedia, where I guess GramJS itself picks the necessary values and formats the actual query to Telegram’s API.

But if I extract the four values that I believe are mandatory (id, accesHash, fileReference and dcId) and pass just those the response is empty:

Downloading file with the following properties: {
  id: Integer { value: 5935164553170105629n },
  accessHash: Integer { value: 2808544...7639434n },
  fileReference: <Buffer 02 79 47 88 7b 00 00 12 ca 66 cc 95 68 49 1f 19 33 5f b3 a5 29 e6 15 8a 24 f9 8f 17 4e>,
  dcId: 4
}
Error fetching messages: Error: Invalid image response from Telegram

I am trying to do it this way because first I fetch all the messages, each with these four attributes, then I download the images of only some of them (and I don’t want to store the whole media object).

Is this impossible in GramJS?

I tried using directly the MTProto API instead, but oh boy it is hard, I don’t even manage to find that server salt value…

HTML page that allows users to input a URL of an image file and view the image using Ajax to fetch it. The image should be displayed on the webpage

i want to create an HTML page that allows users to input a URL of an image file and view the image using Ajax to fetch it. The image should be displayed on the webpage, and users should be able to click on the image to download it.

I tried but my code cannot display the image nor download the image

eazy method to store a minimal amount of data in javascript

hi im a beginner and wanted to make a little game in js for me to learn it as i found that its much easier to learn a language when i make an interesting project. what would be the best method to store data for it so i can edit and read them from my js program without spending too much time on other languages or programs than js? i dont need much more than just base that will store few key-number pairs that is readable and editable after i turn my computer off and on.

i tried making object but obviously when i refresh a page the numbers stay always the same.

Create a system to translate the whole website

I have a WordPress website I want to translate manually. I have tried all the different translation plugins but they all suck, either they translate wrong or they destroy the design.

The first problem:

enter image description here

I have this header and can’t edit it using WordPress, so I need to edit it manually using JavaScript. The problem here is I need to change the href address to the page of the selected language and the span below to the text of the chosen language, this is a problem because even if I know what language the user has selected I can’t know what words to type in the span below the href. Second, if we say that the span media production has submenus how can I make the system take care of them also?

The second problem:
I need the whole website to be connected, for example, if I choose to translate from English to Swedish then I need to go to another page I need the other page to be the translated version, not the main version, plus the manual translation of the Header. this is problematic for many reasons one of them is, what will happen if they open Google and find the translated version of the page instead of the main one, then I will not be able to translate the header because I can’t have any global variables when they first go in the website, so if they directly press on to another page from the translated one then they will go back to English, and I want them to stay on Swedish if they are in Swedish.

I don’t know where to start on this, appreciate all ideas.

Note! The translated page will be manually changed with the WordPress editor the problem is in the header because my theme won’t allow me to edit this but it allows me to edit the nav, and the other problem is the connection between the translated pages.

In outlook add-ins try to add the ItemSend Event handling trigger in the manifest file


    <Requirements>
      <bt:Sets DefaultMinVersion="1.3">
        <bt:Set Name="Mailbox"/>
      </bt:Sets>
    </Requirements>
    <Hosts>
      <Host xsi:type="MailHost">
        <DesktopFormFactor>

          <!-- Message Compose -->
          <ExtensionPoint xsi:type="MessageComposeCommandSurface">
            <OfficeTab id="TabDefault">
              <Group id="msgComposeCmdGroup">
                <Label resid="CommandsGroup.Label"/>
                <Control xsi:type="Button" id="msgComposeInsertGist">
                  <Label resid="TaskpaneButton.Label"/>
                  <Supertip>
                    <Title resid="TaskpaneButton.SupertipTitle"/>
                    <Description resid="TaskpaneButton.SupertipText"/>
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="Icon.16x16"/>
                    <bt:Image size="32" resid="Icon.32x32"/>
                    <bt:Image size="80" resid="Icon.80x80"/>
                  </Icon>
                  <Action xsi:type="ShowTaskpane">
                    <SourceLocation resid="Taskpane.Url"/>
                  </Action>
                </Control>
              </Group>
            </OfficeTab>
          </ExtensionPoint>

          <!-- Appointment Organizer Command Surface -->
          <ExtensionPoint xsi:type="AppointmentOrganizerCommandSurface">
            <OfficeTab id="TabDefault">
              <Group id="apptOrganizerCmdGroup">
                <Label resid="CommandsGroup.Label"/>
                <Control xsi:type="Button" id="apptOrganizerInsertGist">
                  <Label resid="TaskpaneButton.Label"/>
                  <Supertip>
                    <Title resid="TaskpaneButton.SupertipTitle"/>
                    <Description resid="TaskpaneButton.SupertipText"/>
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="Icon.16x16"/>
                    <bt:Image size="32" resid="Icon.32x32"/>
                    <bt:Image size="80" resid="Icon.80x80"/>
                  </Icon>
                  <Action xsi:type="ShowTaskpane">
                    <SourceLocation resid="Taskpane.Url"/>
                  </Action>
                </Control>
              </Group>
            </OfficeTab>
          </ExtensionPoint>
          
          <!-- ItemSend Event -->
          <ExtensionPoint xsi:type="Events">
            <Event Type="ItemSend" FunctionExecution="synchronous" FunctionName="itemSendHandler" />
          </ExtensionPoint>

        </DesktopFormFactor>
      </Host>
    </Hosts>
    <Resources>
      <bt:Images>
        <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
        <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
        <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
      </bt:Images>
      <bt:Urls>
        <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="CommandsGroup.Label" DefaultValue="Contoso Add-in"/>
        <bt:String id="TaskpaneButton.Label" DefaultValue="Hello world"/>
        <bt:String id="TaskpaneButton.SupertipTitle" DefaultValue="Hello world"/>
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="TaskpaneButton.SupertipText" DefaultValue="Open the Hello world add-in"/>
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</OfficeApp>

In outlook add-ins try to add the ItemSend Event handling trigger in the manifest file ,but when i try to install manifest.xml not installing some error thrown

How to add the item send Event handler on my outlook add-ins

How to trigger this when click the save button , how to trigger the event on my commands.js file

Note : my add-ins developed by using javascript

How to extract data in a specific website using python?

im a really newbie python programmer here,
in short i want to scrape data from this website (example link 1, link 2). I want to create a python code that could fetch me the data preferably in below format:

                Category              Value
              Bid Price   101.413 (add 0.191)
  Bid Yield to Maturity              4.596%
              Ask Price   101.571 (add 0.192)
  Ask Yield to Maturity              4.510%

any solution?

I already tried to use chatgpt and my limited knowledge to understand and write the proper command, something like below

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# Set up Chrome options (optional)
chrome_options = Options()
chrome_options.add_argument("--headless")  # Run in headless mode

# Path to your ChromeDriver (adjust the path accordingly)
driver_path = 'C:/Users/Admin/Desktop/python course/chromedriver-win64/chromedriver.exe'
service = Service(driver_path)

# Initialize the WebDriver
driver = webdriver.Chrome(service=service, options=chrome_options)

try:
    # Open the website
    url = 'https://www.bondsupermart.com/bsm/bond-factsheet/USY4907LAG78'
    driver.get(url)

    # Wait for the element to be present using a CSS selector derived from the JS path
    wait = WebDriverWait(driver, 10)  # Wait for up to 10 seconds

    # Using a CSS Selector derived from the provided JS path
    ask_yield_element = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, "body > app-root > app-pre-login-layout > main > app-bond-factsheet > div.ng-star-inserted > div > div.container.ng-star-inserted > div > div > div.bg-indicative-tpl.rounded-lg.lg\:flex.lg\:h-full > div > div.col-span-12.lg\:col-span-8.\32 xl\:col-span-9 > div > div:nth-child(2) > div > span")))

    # Extract and print the Ask Yield to Maturity value
    ask_yield = ask_yield_element.text
    print(f'Ask Yield to Maturity: {ask_yield}')

finally:
    # Close the WebDriver
    driver.quit()

while it could give me the right answer of
Ask Yield to Maturity: 4.510%
i only managed to do that when i put the JS path, which is not same for every link, already tried a hackyway such as search for another JS path, but it isnt accurate enough, most likely will show a wrong data.

Custom dialog opens on page load, instead of click

I’m trying to develop a modal window for the first time using dialog. The problem is that the dialog window appears as soon as the page is loaded, instead of appearing when I click the selected button. When I click the button, it resizes the one that appears when the page loads.

"use strict";

const openBtn = document.querySelector(".open_btn");
const dialog = document.querySelector(".nav_open-account-dialog");
const closeBtn = dialog.querySelector(".close_btn");

openBtn.addEventListener("click", () => {
  dialog.showModal();
});

closeBtn.addEventListener("click", () => {
  dialog.close();
});
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-family: "Roboto", sans-serif;
  background-color: #17152a;
  position: relative;
}

.circle-container {
  position: relative;
  margin-bottom: 22rem;
}

@keyframes moveCircle {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  100% {
    transform: translateX(-50%) translateY(2vw);
  }
}

.circle {
  width: 35vw;
  height: 35vw;
  background-color: #f8f9fa;
  border-radius: 50%;
  position: absolute;
  top: 4vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  animation: moveCircle 3s infinite ease-in-out alternate;
}

.circle.two {
  width: 3vw;
  height: 3vw;
  background-color: #f8f9fa;
  border-radius: 50%;
  position: absolute;
  top: 10vw;
  left: 30%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.circle.three {
  width: 3vw;
  height: 3vw;
  background-color: #f8f9fa;
  border-radius: 50%;
  position: absolute;
  top: 18vw;
  left: 25%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.circle.four {
  width: 3vw;
  height: 3vw;
  background-color: #f8f9fa;
  border-radius: 50%;
  position: absolute;
  top: 28vw;
  left: 74%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.circle.five {
  width: 3vw;
  height: 3vw;
  background-color: #f8f9fa;
  border-radius: 50%;
  position: absolute;
  top: 35vw;
  left: 70%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3.2rem;
  flex-wrap: wrap;
  margin-left: 9.6rem;
  margin-right: 9.6rem;
}

.nav_logo .first-letter {
  font-size: 4.4rem;
  font-weight: 800;
  color: #0595ec;
}

.nav_logo .rest-letter {
  font-size: 4.4rem;
  color: #f8f9fa;
}

.nav_btns a {
  margin-right: 4.8rem;
  text-decoration: none;
  color: #f8f9fa;
  font-size: 1.6rem;
}

.nav_btns a:hover {
  border-bottom: 0.2rem solid #0595ec;
  color: #0595ec;
}

.nav_open-account button {
  font-size: 1.6rem;
  width: 12.8rem;
  color: #f8f9fa;
  background-color: #ff7f50;
  padding: 1.6rem;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  font-weight: 600;
}

.nav_open-account button:hover {
  letter-spacing: 0.1rem;
  box-shadow: 0 0 2.4rem;
  /* transform: scale(1.05); */
  background-color: #0595ec;
}

.nav_btns a {
  margin-right: 4.8rem;
  text-decoration: none;
  color: #f8f9fa;
  font-size: 1.6rem;
  font-weight: 600;
  text-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.5);
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12.8rem;
  margin-left: 9.6rem;
  margin-right: 9.6rem;
  gap: 8rem;
}

.header_description {
  flex: 1;
}

.header_form {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 0.3rem solid #f8f9fa;
  padding: 8rem;
  border-radius: 1.2rem;
  gap: 2.4rem;
}

.header_one {
  color: #0595ec;
  font-size: 5.2rem;
  font-weight: 500;
}

.header_two {
  color: #f8f9fa;
  font-size: 5.2rem;
  font-weight: 500;
  padding-left: 4.8rem;
}

.header_three {
  color: #0595ec;
  font-size: 5.2rem;
  font-weight: 500;
  margin-bottom: 2.4rem;
  padding-left: 9.6rem;
}

.header_description p {
  font-size: 2.2rem;
  color: #f8f9fa;
  font-weight: 400;
}

.login_header {
  text-align: center;
  font-size: 1.6rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0595ec;
  width: 9.6rem;
  height: 4.8rem;
  border-radius: 0 0 1.2rem 1.2rem;
}

.login_header span {
  color: #f8f9fa;
}

.input_box {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 3.2rem;
}

.login_label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f8f9fa;
  font-size: 1.4rem;
  position: absolute;
  background-color: #0595ec;
  border: 0.2rem solid white;
  border-radius: 0.3rem 0.3rem 0 0;
  height: 2.4rem;
  width: 9.8rem;
  top: -57%;
  left: 10%;
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.5);
}

.input_field {
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
  height: 4rem;
  font-size: 1.8rem;
  color: #0595ec;
  padding-inline: 1.2rem 2.4rem;
  border: 0.2rem solid #f8f9fa;
  border-radius: 0.8rem;
  outline: none;
}

.input_field:focus {
  border-color: #0595ec;
  background: rgba(255, 255, 255, 0.2);
}

.input_field:focus,
.input_btn button:focus {
  box-shadow: 0 0 0.6rem #0595ec;
  border-color: #0595ec;
}

.input_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4.8rem;
}

.input_btn button {
  padding: 1.4rem 2.6rem;
  background-color: #0595ec;
  border-radius: 1.2rem;
  border: 0.2rem solid #f8f9fa;
  color: #f8f9fa;
  font-size: 1.6rem;
  cursor: pointer;
}

.input_btn button:hover {
  background-color: #007bb5;
  transform: translateY(-0.2rem);
}


/* Modal window */

.nav_open-account-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 600px;
  height: auto;
  max-height: 90vh;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 0.8rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 10;
}

.nav_open-account-dialog h2 {
  font-size: 2.4rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1.5rem;
  text-align: center;
}

.nav_open-account-dialog p {
  font-size: 1.2rem;
  padding-bottom: 2.4rem 0;
}

.nav_open-account-dialog form {
  width: 100%;
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

.nav_open-account-dialog label {
  display: block;
  font-size: 1.4rem;
  color: #333;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.nav_open-account-dialog input[type="text"],
.nav_open-account-dialog input[type="tel"],
.nav_open-account-dialog input[type="email"] {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1.4rem;
  color: #333;
  background-color: #f9f9f9;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  outline: none;
}

.nav_open-account-dialog input[type="text"]:focus,
.nav_open-account-dialog input[type="tel"]:focus,
.nav_open-account-dialog input[type="email"]:focus {
  border-color: #007bff;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
}

.modal_btn {
  display: block;
  width: 100%;
  padding: 1rem;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1.6rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-bottom: 1.2rem;
}

.modal_btn:hover {
  background-color: #0056b3;
  transform: translateY(-0.2rem);
}

.close_btn {
  display: block;
  width: 100%;
  padding: 1rem;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1.6rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.close_btn:hover {
  background-color: #0056b3;
  transform: translateY(-0.2rem);
}
<div class="circle-container">
  <div class="circle"></div>
  <div class="circle two"></div>
  <div class="circle three"></div>
  <div class="circle four"></div>
  <div class="circle five"></div>
  <header>
    <nav class="navbar">
      <div class="nav_logo">
        <span class="nav_logo first-letter">B</span
            ><span class="nav_logo rest-letter">ank!fy</span
            ><span class="nav_logo first-letter">.</span>
      </div>
      <div class="nav_btns">
        <a href="#about_us">About Us</a>
        <a href="#our_app">Our App</a>
        <a href="#our_team">Team</a>
        <a href="#contact_us">Contact Us</a>
      </div>
      <div class="nav_open-account">
        <button class="open_btn">Join Us</button>
      </div>
    </nav>
  </header>

  <main>
    <div class="header_description">
      <h1 class="header_one">Secure.</h1>
      <h2 class="header_two">Simple.</h2>
      <h3 class="header_three">Smart.</h3>
    </div>

    <div class="header_form">
      <div class="login_header">
        <span>Login</span>
      </div>
      <div class="input_box">
        <input type="text" id="user" class="input_field" required />
        <label for="user" class="login_label">Username</label>
      </div>
      <div class="input_box">
        <input type="password" id="pass" class="input_field" required />
        <label for="pass" class="login_label">Password</label>
      </div>
      <div class="input_btn">
        <button type="submit">Submit</button>
      </div>
    </div>
  </main>

  <dialog class="nav_open-account-dialog">
    <h2>Join Us</h2>
    <p>Welcome! Please sign up to become a member.</p>

    <form action="#" method="post">
      <div class="form-group">
        <label for="first-name">First Name:</label>
        <input type="text" id="first-name" name="first-name" required />
      </div>

      <div class="form-group">
        <label for="last-name">Last Name:</label>
        <input type="text" id="last-name" name="last-name" required />
      </div>

      <div class="form-group">
        <label for="address">Address:</label>
        <input type="text" id="address" name="address" required />
      </div>

      <div class="form-group">
        <label for="phone">Phone Number:</label>
        <input type="tel" id="phone" name="phone" required />
      </div>

      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required />
      </div>

      <button class="modal_btn" type="submit">Submit</button>

      <button class="close_btn" type="close">Close</button>
    </form>
  </dialog>
</div>

HTML canvas: additional stroke after restore

Consider the following piece of code (test it yourself):

function draw() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  ctx.beginPath();
  ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
  ctx.stroke();
  ctx.moveTo(75, 75);

  ctx.save();
  ctx.setLineDash([3, 3]);
  ctx.lineTo(90, 90);
  ctx.stroke();
  ctx.restore();
  
  //ctx.stroke();
}

draw();

It plots this:
enter image description here

However, if I uncomment the last ctx.stroke(), it draws a line on top of the dashed one, not sure if from (75, 75) to (90, 90) or the other way around:

enter image description here

I thought saving and restoring didn’t affect the “path cursor”, and there’s either any “pending draw command”, and so I expected the extra (and accidental) stroke after restore didn’t have any effect whatsoever.

What is going on exactly and how does save()/restore() relate to this?

Getting an error when trying to use Preloader component in react framework7 with dark theme

I am using react framework7, and when I am trying to use Preloader component in dark theme but I am getting a runtime error:
Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’. TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.

It works fine with light theme(for both md and ios).

I tried the same thing using vite, but the error persists. I also tried wrapping my preloader with div, nothing helped. I double checked how I initialized the project and everything seems correct.

My component (where the error occurs):

import React, {useState} from 'react';
import {
    Page,
     Preloader
} from "framework7-react";

const Splash = () => {
    return (
        <Page>
            <Preloader/>
        </Page>
    );
};

export default Splash;

App.js component:


import './App.css';
import {
    App, f7ready, View
} from "framework7-react";
import Splash from "./Screens/Splash";


function MyApp() {
    f7ready(() => {
    });
    const f7params = {
        name: 'My App',
        routes: [
            {
                path: '/splash',
                component: Splash,
            },
        ],
    };
  return (
      <App theme="ios dark" name="My App" {...f7params}>
          <View main url="/splash" />
      </App>
  );
}

export default MyApp;

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import Framework7 from 'framework7/lite-bundle';
import  Framework7React  from 'framework7-react';
import 'framework7/css/bundle';


Framework7.use(Framework7React);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
   );

Firefox Extention onMessage sendResponse

I’m having a pretty frustrating problem with these firefox extensions. Specifically, the problem is that I cannot obtain and then use the data following the sendResponse of onMessage.addListener. Here is a short description:

  1. Here I manage the actions that must occur when starting “call_LLM_Api”. Path background.js
browser.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
    console.log("Message recived form background script:", message);
    
    if (message.type === "call_LLM_Api") {
        try {
            console.log("Async logic...");

            sendResponse({ result: "testtt", angelolo: "ok done" });
        } catch (error) {
            console.error("Error in back script", error);
            sendResponse({ error: error.message });
        }

        return true;
    }
});
  1. Here the function that makes the call, which in turn is called by other functions which are then handled by popup.js on the click of buttons. Path popup/training.js
async function ApiCall(data) {
    try {
        // cover browser.runtime.sendMessage in Promise
        const response = await new Promise((resolve, reject) => {
            browser.runtime.sendMessage(
                {
                    type: "call_LLM_Api",
                    data: data,
                },
                (response) => {
                    if (browser.runtime.lastError) {
                        reject(new Error(browser.runtime.lastError.message));
                    } else if (!response) {
                        // Gestisce il caso in cui la risposta è undefined
                        reject(new Error("Response is undefined"));
                    } else if (response.error) {
                        reject(new Error(response.error));
                    } else {
                        resolve(response);
                    }
                }
            );
        });

        console.log("background response script:", response);
        return response.result; // Ritorna il risultato
    } catch (error) {
        console.error("Error in message send:", error);
        throw error; // Propaga l'errore
    }
}
  1. Here is the manifest.json to define the working context a bit:
{
    "manifest_version": 2,
    "name": "Policy Analyzer",
    "version": "1.0",
    "background": {
      "scripts": ["background.js"]
    },

    "description": "Analyze the Privacy policy you are accepting by accessing a web page.",
    "icons":{
      "16": "icons/icon-16.png",
      "48": "icons/icon-48.png",
      "128": "icons/icon-128.png"
    },

    "browser_action":
    {
      "default_icon":{
        "16": "icons/icon-16.png",
        "48": "icons/icon-48.png",
        "128": "icons/icon-128.png"
      },
      "default_title": "De Compile Privacy",
      "default_popup": "popup/popup.html"
    },
    "permissions": [
      "geolocation",
      "tabs",
      "activeTab",
      "http://*/*",
      "https://*/*",
      "storage",
      "webNavigation"
    ],
    
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"]
      }
    ]
  }

So the problem seems to be that I can never get correct output from the calling function, it is always either undefined…

Error in message send: Error: Response is undefined

this problem seems quite serious and for this reason I ask you for support…
Thanks to anyone who wants to contribute!!

iOS QR Code Scan Results in Timeout Error, Works Fine on Android

I am working on a web application where users can scan a QR code to proceed with a transaction. The following JavaScript functions handle the QR code scan status and redirect the user based on the status:

postScanStatusAndRedirect() is called after a QR code is scanned.
checkQRStatus() periodically checks the status of the QR code.
The problem I’m encountering is that when scanning a QR code on iOS devices (Safari browser), I get a timeout error, and the following SweetAlert message is shown: “Your transaction time has expired. Please scan the QR code again”. However, the same code works perfectly fine on Android devices and other browsers.

async function postScanStatusAndRedirect() {
try {
const cacheBuster = new Date().getTime(); // Prevent caching with a unique query parameter

    const response = await fetch(`https://stg-api.goldatm.in/api/qrcode-status?cb=${cacheBuster}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Cache-Control': 'no-store' // More aggressive cache prevention
        },
        body: JSON.stringify({ status: 1 }),
        credentials: 'same-origin' // Include credentials if needed
    });

    if (!response.ok) {
        throw new Error(`Network response was not ok: ${response.statusText}`);
    }

    const data = await response.json();
    console.log('Scan status posted', data);

    setTimeout(() => {
        console.log('Redirecting to:', "{% url 'login' %}");
        window.location.href = "{% url 'login' %}";
    }, 100); // Adjust delay if needed
} catch (error) {
    console.error('Error posting scan status:', error);
    alert('An error occurred: ' + error.message);
}

}

async function checkQRStatus() {
console.log(‘Checking QR status…’);
const cacheBuster = new Date().getTime(); // Prevent caching with a unique query parameter

// Clear existing caches for the URL
if ('caches' in window) {
    const cacheNames = await caches.keys();
    for (const name of cacheNames) {
        await caches.delete(name);
    }
}

fetch(`https://stg-api.goldatm.in/api/qrcode-status?cb=${cacheBuster}`, {
    method: 'GET',
    headers: {
        'Cache-Control': 'no-store', // Prevent caching entirely
        'Pragma': 'no-cache'
    }
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
})
.then(data => {
    console.log('QR Status Data:', data);
    if (data.QRstatus.qrStatus === 2 && !alertShown) {
        console.log('QR status is false and alert has not been shown.');
        Swal.fire({
            icon: "error",
            title: "Oops...",
            text: "Your transaction time has expired. Please scan the QR code again",
            allowOutsideClick: false,
        }).then((result) => {
            console.log('Alert confirmed:', result.isConfirmed);
            if (result.isConfirmed) {
                window.location.href = "https://www.google.com/";
            }
        });
        alertShown = true;
    } else {
        console.log('QR status is not false or alert has already been shown.');
    }
})
.catch(error => console.error('Error checking QR status:', error));

}

What I’ve tried:

Added cache-busting parameters to the URL.
Used aggressive cache prevention headers (Cache-Control: no-store).
Cleared caches manually using the Cache API before each request.
Despite these efforts, the issue persists on iOS devices. Could someone please help me understand why this issue is happening only on iOS and suggest a solution to fix it?

Environment:

iOS devices (Safari browser)
Android devices (Chrome browser)
Any help or insights would be greatly appreciated!

Terminating Bubble Sort Algorithm when the dataset has been sorted

This function goes through the dataset and then sorts it in ascending order.

What its meant to do is stop when the list has been sorted. However, the !changed control flow statement terminates it early, resulting in only 1 iteration being done. How can i change the code so that the sorting ends when the whole dataset has been sorted?

// Sort the elements using Bubble Sort
function bubble_sort() {
    sort.addEventListener("click", function() {
        const dataList = document.querySelectorAll(".data");
        let delay = 0;

        for (let i = 0; i < dataList.length - 1; i++) {
            let changed  = false
            for (let j = 0; j < dataList.length - 1 - i; j++) {
                setTimeout(() => {
                    let value1 = parseInt(dataList[j].getAttribute("value"));
                    let value2 = parseInt(dataList[j + 1].getAttribute("value"));

                    // Highlight the current pair being compared
                    dataList[j].style.backgroundColor = "blue";
                    dataList[j + 1].style.backgroundColor = "blue";

                    if (value1 > value2) {
                        // Swap the heights and values
                        let tempHeight = dataList[j].style.height;
                        let tempValue = dataList[j].getAttribute("value");

                        dataList[j].style.height = dataList[j + 1].style.height;
                        dataList[j].setAttribute("value", dataList[j + 1].getAttribute("value"));

                        dataList[j + 1].style.height = tempHeight;
                        dataList[j + 1].setAttribute("value", tempValue);
                        changed = true
                    }

                    // Reset the color after comparison
                    setTimeout(() => {
                        dataList[j].style.backgroundColor = "black";
                        dataList[j + 1].style.backgroundColor = "black";
                    }, speed/2);

                }, delay);
                
                delay += speed;
            }
            if (!changed) {
                return;
            }
        }
    });
}

I tried to add a variable to keep track of whether the order has been changed. However, it is checking it early due to the changed variable being executed later as it has a delay.

I did try to add the setTimeout method:

setTimeout(() => {
    console.log(changed)
    if (!changed) {
        return;
    }
}, (dataList.length - i - 1) * delay);

but to no avail (maybe cause my maths was wrong)?

How do I access an element in STF using SELENIUM

I am trying to write a selenium script to automate some things on STF (website to manage devices).

When trying to access a button that enables to click edit something, selenium fails (tried using XPATH and Class, wait for element).

The element appears when you hover over the row in a certain region so I am suspecting maybe it’s hidden?

the element is this (attached in photo and in red arrow). I am suspecting that it happens because the element is nested inside elements maybe? but I don’t know how to reach it, help would be much apprciated! tnx.

Tried using Selenium to wait for element and to reach it by XPATH and by Class,

Tried to hover the mouse to the region where the button appears and then wait for it, still no luck.

Image of the code for the edit button

webRTC video streaming – Chrome chooses wrong candidates with ubuntu 20

I am streaming video over webRTC in AWS environments, all ports are open, no firewall.

Server 1: Ubuntu 18.04.5 LTS

Server 2: Ubuntu 20.04.6 LTS

With Server 1 after at most 2-3 retries, webRTC chooses the correct candidate pair that has my pc public IP and the remote public IP:

enter image description here

With Server 2 – no matter how many retries, webRTC always chooses the host candidate with my local IP with the remote public IP, thus the connection fails. my PC public IP does appear in the ice candidate list:

enter image description here

enter image description here

All peers on all sides and servers use the same Google stun server stun:stun.l.google.com:19302. I only stream video data from server to client, so there is no need for TURN.

Also, if all peers over the same network and not AWS, i.e locally, it all works well.

I’ve debugged with wireshark it and also saw that there are responses to the STUN requests but once there is a binding request to the server there are no responses (74.125.250.129 is the google stun IP) marked packets have no response.

enter image description here

Stack: client-side written with javascript and native browser API. backend uses python and aiortc lib. latest chrome.

How can you force a React component to re-render without updating its state or props?

how to re-render the component without changing the react state or props

I’ve attempted the following in a functional component:

1.Using the useState hook and updating state with the same value

2.Creating a new object as a prop to try to trigger a re-render

3.Using useReducer with a dummy state update

None of these methods feel like the right approach, and some seem to go against React’s principles.