Blancer.com Tutorials and projects

I’m developing a Chrome extension using Manifest V3.
My background script is a module (“type”: “module”), so it uses import { CONFIG } from ‘./config.js’;.
My content scripts, however, can’t use ES6 imports/exports and need to access the config via window.CONFIG.

Is there a way to use a single configuration file for both contexts without duplicating code?
If not, what’s the best practice for sharing config between background (module) and content scripts?

Thanks!

I tried creating a single config.js file that both attaches the config object to window (for content scripts) and exports it (for the background module).
However, using export in a script loaded as a content script causes a syntax error, and omitting export means I can’t import it in the background module.
I was expecting to be able to share the same config file between both contexts without errors or code duplication.

manifest.json

“content_scripts”: [ { “js”: [ “config.js”, “content.js” ], “run_at”: “document_end”, “matches”: [ … ], “exclude_matches”: [ … ] } ], … “background”: { “service_worker”: “background.js”, “type”: “module” },

config.js

const CONFIG = { // … }

if (typeof window !== ‘undefined’) { console.log(“Entering config.mjs in window”); window.CONFIG = CONFIG; }

export { CONFIG };

content.js

const CONFIG = window.CONFIG;

background.js

import { CONFIG } from ‘./config.js’;

Any advice or best practices would be appreciated!

I am using "@tanstack/react-query-devtools": "^5.69.0" in my react project. And i am passing one of the arguments conditionally by binding it to the this context object of the function. In simple words if i need to send the argument i bind it with the help of .bind() function.

Issue:
The issue is for some reason the function i provide cannot access the value even though in the chrome devtools while debugging i can see the object being attached as [[BoundThis]] to my function.

File1.js

export const bindContext = (fn, id) => {
    return id ? fn.bind({ id }) : fn;
};

File2.js

export const useFetchBlogs = ( id) => useQuery({
        queryKey: ['blogsList', id],
        queryFn: () => bindContext(fetchBlogsFn, id)(),
        enabled: true,
        refetchOnMount: true,
        refetchOnWindowFocus: false,
        staleTime: 10 * 60 * 1000, // 10 minutes
        retry: 1 // retry only once if query fails
    });

File3.js

export const fetchBlogsFn= ()=> {
    console.log('useFetchBlogs called', this); // getting this as undefined in the devtools
    
    const queryConfig = {
        ... this?.id ? { params: { blogId: this.id } } : {}
    }

    return new Promise((resolve, reject) => {
        httpService.load(URLS.PRIORITIES, queryConfig).then(
            res => {
                const transformedData = dropdownOptions(res);

                resolve(transformedData);
            },
            err => reject(err)
        );
    });
};

What’s happening ?
I can see while debugging that the object containing the id is attached as [[BoundThis]] to the returned function but as soon as the function call is invoked and the debugger goes inside the function, the this context object becomes undefined

I think that the way react query is calling the queryFn is manipulating the this context.

I tried using the function expression syntax in place of the arrow funcitons as well but it did not work… neither did the strategy to first bind the id and then pass the bound function as argument to the useFetchBlogs function work.

I’m trying to embed a Plotly graph in a pytest-html report. To do it, a plotly.Figure is generated during the test execution, and then inserted in the pytest report in the pytest_runtest_makereport (see API reference here).
Bellow, the code of this hook:

@pytest.mark.hookwrapper
def pytest_runtest_makereport(item, call):
    outcome = yield
    report = outcome.get_result()
    if call.when == 'call':
        extras = getattr(report, 'extras', [])
        c = item.user_properties[0].to_html(full_html=False, div_id='my_plot', include_plotlyjs='cdn', include_mathjax='cdn')
        extras.append(pytest_html.extras.html("<div>Additional HTML 1</div>"))
        extras.append(pytest_html.extras.html(c))
        extras.append(pytest_html.extras.html("<div>Additional HTML 2</div>"))
        report.extras = extras

Now, when opening the report in Chrome, the plot is not rendered, but seems to be present in the generated HTML report, as well as the Additional HTML 1 and Additional HTML 2 placeholders:

One way to get things working would be to generate an image of the plot and embedding it in the report, but since the plots are quite complex, I would really keep it interactive in order to be able to analyze specific portions of the dataset.

I’m not a specialist of web technologies, so any help would be highly appreciated! 🙂

redux-BkxX5gv2.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'useLayoutEffect')
at Be (redux-BkxX5gv2.js:1:2040)
at redux-BkxX5gv2.js:1:2071
Be @ redux-BkxX5gv2.js:1
(anonymous) @ redux-BkxX5gv2.js:1

• getting this error after take build and host in hostinger
• project was work fine before suddenly got this error
• how fix this problem loachost don’t showing any kind of error?s

I have nested alpine.js x-data tags, where the nested tag depends on the parent, like the following:

<div x-data="{foo: 1234}">
  <input x-model="foo" type="number">
  <div x-text="`foo = ${foo}`"></div>
  <div x-data="{bar: [foo*1, foo*2, foo*3]}">
    <template x-for="point in bar">
      <div x-text="point"></div>
    </template>
  </div>
</div>

At the moment, it starts okay, with the output showing:

foo = 1234
1234
2468
3702

However, upon changing the input, the bar values do not update:

foo = 1235
1234
2468
3702

Is it possible to have the nested x-data bar value update dynamically when foo is changed in the parent?

Here is a working example: https://codepen.io/manticorp/pen/RNPBrPK

I’ve been building a project of creating a webpage design from an image of that page. Most of the application for this purpose uses AI but I am not using them. I went for a complete raw approach with computer vision. I detected text from image using tesseract with its bboxes (bounding boxes – spatial data like {x0, y0, x1, y1} – Here {x0, y0} is top left pixel coodinate and {x1, y1} is the bottom right), I then inpainted the text from the image, used sobel algorithm to detect edges and found their bboxes. It’s not perfect but has worked till here, I then arranged these datas in the proper parent-child heirarchy as json data. Now I only need to arrange this data as html.

Here is an example of the JSON data – heirarchyTree:

[
  {
    "element": "div",
    "text": "",
    "bbox": { "x0": 0, "y0": 0, "x1": 1459, "y1": 1091 },
    "color": "",
    "bgColor": { "r": 0, "g": 0, "b": 0, "a": 0 },
    "children": [
      {
        "element": "div",
        "text": "",
        "bbox": { "x0": 13, "y0": 13, "x1": 1447, "y1": 869 },
        "color": "",
        "bgColor": { "r": 255, "g": 255, "b": 255, "a": 255 },
        "children": [
          {
            "element": "p",
            "text": "24" Infinora",
            "bbox": { "x0": 591, "y0": 29, "x1": 865, "y1": 72 },
            "color": { "r": 0, "g": 0, "b": 0, "a": 255 },
            "bgColor": "",
            "children": [
              {
                "element": "p",
                "text": "4",
                "bbox": { "x0": 739, "y0": 30, "x1": 749, "y1": 39 },
                "color": { "r": 255, "g": 255, "b": 255, "a": 255 },
                "bgColor": "",
                "children": []
              }
            ]
          },
          {
            "element": "div",
            "text": "",
            "bbox": { "x0": 598, "y0": 55, "x1": 632, "y1": 94 },
            "color": "",
            "bgColor": { "r": 107, "g": 107, "b": 107, "a": 255 },
            "children": []
          },
 ....

First I arranged them using position, which works but I can’t move forward with that. No one using an image to html convertor wants their html to be div’s and p tags in the same level arranged inside a single parent div using position absolute right. What I tried to do was first arrange these in an order by how we humans design a component. I tried to come up with an ordering method where the basic idea is we find the components with the smallest x0 and other with smallest y0 which are more smaller y and x respectively. Then I compare the y1 of the one with the smallest y0 and y0 of the one with the smallest x0 to see which has more priority and choose it. Based on this I arranged the children recursively. Then I used another function to give it a layout direction as, if a child has x0 greater than the previous child in order he is in a row else column (for flex based arrangement). Then I wrote a generateCode function. I will provide these functions below

function sortChildrenByDirection(contourTreeNode) {
  if (!contourTreeNode.children || contourTreeNode.children.length === 0) {
    return;
  }

  contourTreeNode.children.sort((a, b) => {
    const aBox = a.bbox;
    const bBox = b.bbox;

    const lowestY0 = Math.min(aBox.y0, bBox.y0);
    const isATopmost = aBox.y0 === lowestY0;
    const isBTopmost = bBox.y0 === lowestY0;

    const lowestX0 = Math.min(aBox.x0, bBox.x0);
    const isALeftmost = aBox.x0 === lowestX0;
    const isBLeftmost = bBox.x0 === lowestX0;

    if (aBox.y0 === bBox.y0 && aBox.x0 === bBox.x0) {
      return 0;
    }

    if (isATopmost && isALeftmost && !(isBTopmost && isBLeftmost)) {
      return -1;
    }
    if (isBTopmost && isBLeftmost && !(isATopmost && isALeftmost)) {
      return 1;
    }

    if (isATopmost && isBLeftmost) {
      if (aBox.y1 < bBox.y0) {
        return -1;
      }
      else if (bBox.x1 < aBox.x0) {
        return 1;
      }
      else {
        return aBox.y0 - bBox.y0;
      }
    }

    if (isBTopmost && isALeftmost) {
      if (bBox.y1 < aBox.y0) {
        return 1;
      }
      else if (aBox.x1 < bBox.x0) {
        return -1;
      }
      else {
        return aBox.y0 - bBox.y0;
      }
    }

    if (aBox.y0 === bBox.y0) {
      return aBox.x0 - bBox.x0;
    }

    if (aBox.x0 === bBox.x0) {
      return aBox.y0 - bBox.y0;
    }

    const yDiff = aBox.y0 - bBox.y0;
    if (Math.abs(yDiff) > 10) {
      return yDiff;
    } else {
      return aBox.x0 - bBox.x0;
    }
  });

  contourTreeNode.children.forEach(sortChildrenByDirection);
}

function determineAlignment(node) {
  let children = node.children;

  let primaryNode = children[0];
  if (primaryNode) primaryNode.layoutDirection = "column";
  for (let i = 1; i < children.length; ++i) {
    if (children[i].bbox.x0 >= primaryNode.bbox.x1) {
      children[i].layoutDirection = "row";
    } else {
      children[i].layoutDirection = "column";
    }
    primaryNode = children[i];
  }

  node.children.forEach(determineAlignment);
}

function generateCode(node, prevTop = 0, prevLeft = 0) {
  if (node.children.length < 1) return "";
  const children = node.children;
  let columns = ``;
  let maxPrevHeight = children[0].bbox.y1;
  
  let row = `${wrapper(
    children[0],
    generateCode(children[0], children[0].bbox.y1, children[0].bbox.x1),
    "element",
    prevLeft,
    prevTop
  )}`;
  
  for (let i = 1; i < children.length; ++i) {
    if (children[i].layoutDirection === "row") {
      maxPrevHeight = Math.max(maxPrevHeight, children[i].bbox.y1);
      row += wrapper(
        children[i],
        generateCode(children[i], children[i].bbox.y1, children[i].bbox.x1),
        "element",
        children[i - 1].bbox.x1,
        children[0].bbox.y0
      );
    } else {
      let rowEnd = wrapper(row, null, "flex", null, null);
      columns += rowEnd;
      row = `${wrapper(
        children[i],
        generateCode(children[i], children[i].bbox.y1, children[i].bbox.x1),
        "element",
        prevLeft,
        maxPrevHeight
      )}`;
    }
  }
  
  if (row) {
    columns += wrapper(row, null, "flex", null, null);
  }
  
  return wrapper(columns, null, "cover", null, null);
}

function wrapper(parent, child, type, prevX, topY) {
  if (type == "cover") {
    return `<div>${parent}</div>n`;
  } else if (type === "flex") {
    return `<div style="display: flex">${parent}</div>n`;
  } else if (type === "element") {
    return `<${parent.element} style="width: ${
      parent.bbox.x1 - parent.bbox.x0
    }px; height: ${parent.bbox.y1 - parent.bbox.y0}px; background-color: ${
      parent.bgColor
        ? `rgba(
            ${parent.bgColor.r},
            ${parent.bgColor.g},
            ${parent.bgColor.b},
            ${parent.bgColor.a}
          )`
        : `rgba(0, 0, 0, 0)`
    }; color: ${
      parent.color
        ? `rgba(${parent.color.r}, ${parent.color.g}, ${parent.color.b}, ${parent.color.a})`
        : `rgba(0, 0, 0, 0)`
    }; margin-left: ${parent.bbox.x0 - prevX}px; margin-top: ${
      parent.bbox.y0 - topY
    }px;">${child || parent.text || ''}</${parent.element}>
`;
  }
}

First of all the arrangement method I came up with was a failure and didn’t work on many cases. Even if it was successfull, the above generateCode function I came up with is not gonna work as intended as it will result in wrong margin arrangement. Sorry for being an amateur at this

I just want a way I can make arrange the data as a proper html which is about 70-80% accurate and easily configurable. There has to be a solution. You know those drag-and-drop page builder’s (like wix). They make a proper design from drag-and-drop creations. They must be using position data of each components a user places and then somehow makes a working page out of it.

Body
I’m building a kids’ poem and story website using React and Supabase. I have successfully implemented login/signup using Supabase auth.

What I’m trying to do:
I want to restrict access to certain pages (like /poems or /stories) only if the user is logged in. If they’re not logged in, they should be redirected to /login.
What I’ve done so far:
I have initialized Supabase client using the given keys.
I use supabase.auth.getSession() to check user status.
However, when I directly enter a protected route URL in the browser, it still shows the page before redirecting. Sometimes the session loads late or doesn’t work as expected.
Expected result:
Users should be redirected to the login page if they are not logged in — immediately, without showing the protected content for even a second.
What’s the best way to make route-level protection immediate and efficient using Supabase in a React app?

 const a1 = sheet["A1"] ? sheet["A1"].v : null;
 const b2 = sheet["B2"] ? sheet["B2"].v : null;
 const c3 = sheet["C3"] ? sheet["C3"].v : null;
 const a2 = sheet["A2"] ? sheet["A2"].v : null;
 if (isNaN(a1)) {
     return res.status(400).json({
         status: "error",
         message: "Cell A1 must contain a numeric value."
     });
 }
 if (typeof b2 !== "string") {
     return res.status(400).json({
         status: "error",
         message: "Cell B2 must contain a string value."
     });
 }
 if (isNaN(new Date(c3).getTime())) {
     return res.status(400).json({
         status: "error",
         message: "Cell C3 must contain a valid date."
     });
 }
 try {
     await sql.connect(dbConfig);
     await new sql.Request()
         .input('a1', sql.Float, Number(a1))
         .input('b2', sql.NVarChar, b2)
         .input('c3', sql.DateTime, Date(c3))
         .input('a2', sql.Float, Number(a2))
         .query('INSERT INTO PlantInputs (A1Value, B2Value, C3Value) VALUES (@a1, @b2, @c3)')
         .query('INSERT INTO PlantInputs (A1Value, B2Value, C3Value) VALUES (@a2, @b2, @c3)');

Body
I’m building a kids’ poem and story website using React and Supabase. I have successfully implemented login/signup using Supabase auth.

What I’m trying to do:
I want to restrict access to certain pages (like /poems or /stories) only if the user is logged in. If they’re not logged in, they should be redirected to /login.
What I’ve done so far:
I have initialized Supabase client using the given keys.
I use supabase.auth.getSession() to check user status.
However, when I directly enter a protected route URL in the browser, it still shows the page before redirecting. Sometimes the session loads late or doesn’t work as expected.
Expected result:
Users should be redirected to the login page if they are not logged in — immediately, without showing the protected content for even a second.
What’s the best way to make route-level protection immediate and efficient using Supabase in a React app?

I have multiple React/Vite apps, and one called App Shell which is the host of all of the module federated apps. Based on the route of the page I am loading a remote app using loadRemote function from @module-federation/runtime (the same thing happens when i use @module-federation/enhanced/runtime). This what my code looks like:

import { loadRemote } from '@module-federation/runtime';
import { ComponentType, useState, useEffect} from 'react';

import { RemoteModule } from 'types/federation';

export function useRemoteModule(name: string): ComponentType<any> | null {
  const [module, setModule] = useState<ComponentType<any> | null>(null);

  useEffect(() => {
    const loadModule = async () => {
      try {
        const module = await loadRemote<RemoteModule>(`${name}/App`);

        if (!module?.default) {
          throw new Error(`Module ${name} does not have a default export`);
        }
        setModule(() => module.default);
      } catch (e) {
        console.log(e, 'catch');
      }
    }

    loadModule();
  }, [name])

  return module;
}

export function RouteResolver({ routes }: RouteResolverProps) {
  const { '*': routeParams } = useParams();
  const configRoute = Object.keys(routes).find(
    (pathname: string) => matchPath(pathname, `/${routeParams}`)
  ) || '';

  const moduleName = getModuleName(routeParams, routes[configRoute]);

  const Module = useRemoteModule(moduleName || DEFAULT_MODULE);

  return (
    <Suspense>
      {Module ? <Module /> : null}
    </Suspense>
  );
} 

Everything works fine on Chrome/FF, but when I am using Safari I mostly get this error and the page crashes. For other times (rarely) the page loads successfully. Here is my error. I do not have much info about it.

ReferenceError: Cannot access uninitialized variable.
(anonymous function) — virtualExposes-Dh5dHcud.js:5

What can cause this issue, and is there a solution for this? I am using manifests.

If my component uses jsx: <div>Test</div>, it crashes, if I use React.createElemet('div', null, 'Test') it renders successfully.

I have tried writing a custom plugin that would change all the jsx into createElement. I have tried changing the both @module-federation/runtime and @module-federation/runtime/enhanced. Changed the config of federation, still no result

I want to pass a (HttpOnly) cookie to Google Apps Script doGet(e) endpoint (e.g. from fetch(...) on the client), but there doesn’t seem to be any way to retrieve incoming cookies/headers out of e.
I have tried logging all e properties using

function doGet(e) {
    return ContentService.createTextOutput(
        JSON.stringify(e)
    ).setMimeType(ContentService.MimeType.JSON);
}

and querying it with curl
curl -L --cookie "name=Jane" "$webapp_endpoint"
curl -L --header "Cookie: name=Jane" "$webapp_endpoint"

Responses had no cookie info at all.
Is it not possible to retrieve?