Category: javascript

Im new to building Chrome extensions and cant figure out why this simple code isnt logging on to the site im trying to get. Essentially when you go to a website it console logs the sites meta tags in the console. heres what I have.

{
  "manifest_version": 3,
  "name": "Meta Tag Logger",
  "version": "1.0",
  "description": "Logs all meta tags on a webpage",
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

document.addEventListener("DOMContentLoaded", function() {
    const metaTags = document.getElementsByTagName("meta");
    
    Array.from(metaTags).forEach(tag => {
      console.log(tag);
    });
  });
  

I’m having a problem getting the response body of a local api. The api runs fine(it is a asp net web api), i tested in swagger and debugged the code to see if she was not returning the correct body, but she is.

{
  "epcs": [
    "E2806995000050084E48825E",
    "E2806995000040084E44E8A6",
    "E280699500004004CAA1F8E2",
    "E2806995000040084E48BC91",
    "E2806995000050084E418574",
    "E280699500004004CAA97D4E",
    "E2806995000050084E4459BA",
    ...

Here is the method that return the epcs

[HttpGet("stopAndGetData")]
public async Task<IActionResult> Stop()
{
    var epcs = await _reader.StopReading();

    if (epcs == null || epcs.Count == 0)
    {
        return Ok(new { message = "Nenhum EPC capturado." });
    }

    return Ok(new { epcs });
}

But, when I try doing the api call in JS or doing the by the URL in my browser, I get this reponse(see print)
The js code responsible to do the fetch is this function:

    async function stopRead(e) {
        e.preventDefault();
        const stopButton = e.target;
        stopButton.disabled = true;
        document.querySelector("#startRead").disabled = false;

        try {
            const response = await fetch(`${window.location.origin}/api/read-rfid/stopAndGetData`);

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

            const data = await response.json();
            console.log("EPCs recebidos:", data.epcs || data.message);
            console.log(data);
        } catch (error) {
            console.error("Erro ao parar leitura:", error);
            stopButton.disabled = false;
        }
    }

And here is the action that the js code is calling:

        [HttpGet("stopAndGetData")]
        public async Task<IActionResult> Stop()
        {
            try
            {
                using (HttpClient client = new HttpClient())
                {
                    var response = await client.GetAsync((string)HttpContext.Session.GetString("ServiceLocalUrl") + "/api/rfid/stopAndGetData");
                    return Ok(response);
                }
            }
            catch (Exception ex)
            {
                return BadRequest(ex);
            }
        }

enter image description here

I already tried using axios, changing the program file of the API to allow CORs.

If I understand correctly, I should be creating a Scripts folder in my Solutions Explorer folder, and then adding a javascript file that contains my program.

Then as I require my javascript file in a View, I call

<script type="text/javascript" src="@Url.Content("~/Scripts/name.js")"></script>

Followed by calling the function straight away.

However, this isn’t working out for me. If I go to Networks tab of my application, it says could not find name.js at https://localhost:7240/Scripts/name.js. Could someone please let me know what I am missing in my code?

I’m trying to figure out how to insert a user-created image into a googlesheets cell. I found this 7-year-old question that suggested using the =IMAGE function. But this doesn’t seem to work with a data uri. When I try the cell gives an error saying “Function IMAGE parameter 1 value is not a valid url.” I’m hoping that there’s some new answer that someone has come up with in the last 7 years that will work for data uris. Here is my code:

   function save() {
        var dataURI = canvas.toDataURI();
        dataURI=dataURI.toString();
        let data = "=IMAGE("" + dataURI + "")";
   
        gapi.client.sheets.spreadsheets.values.update({
            spreadsheetId: sheet,
            range: range,
            valueInputOption: "USER_ENTERED",
            resource: {"values":[[data]]},
        }).then((response) => {
            window.location.href=nextPage.html;
        });
    }

I’ve considered saving the image to a normal url but I’d rather the image not be publicly accessible. I’ve also considered having my code interact with Apps Script code using google.script.run. But I’m not really sure if SpreadsheetApp.newCellImage() will work with a data uri either so I didn’t go too far into that rabbit hole yet. I’m hoping there’s a more direct solution, anyways.

Promise.try recently became available in Baseline 2025.

I wanted to know how can I enable this in a TypeScript project.

I’m currently using TypeScript 5.7.3 and have the following tsconfig.json:

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "module": "ESNext",
    "noImplicitOverride": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noPropertyAccessFromIndexSignature": true,
    "jsx": "react-jsx"
  },
  "files": [],
  "include": ["src/types/**/*.ts", "src/**/*.ts", "src/**/*.tsx"],
  "references": [
    {
      "path": "./tsconfig.lib.json"
    }
  ]
}

tsconfig.base.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "esModuleInterop": true,
    "target": "ES2024",
    "module": "ESNext",
    "lib": ["ES2024", "DOM", "ESNext", "ES2024.Promise"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "strict": true,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
    "types": ["node"],
    "paths": {
      "@alertdown/auth": ["libs/auth/src/index.ts"],
      "@alertdown/common": ["libs/common/src/index.ts"],
      "@alertdown/core": ["libs/core/src/index.ts"],
      "@alertdown/db": ["libs/db/src/index.ts"],
      "@alertdown/email": ["libs/email/src/index.ts"],
      "@alertdown/google": ["libs/google/src/index.ts"],
      "@alertdown/infrastructure": ["libs/infrastructure/src/index.ts"],
      "@alertdown/llm": ["libs/llm/src/index.ts"],
      "@alertdown/notifications": ["libs/notifications/src/index.ts"],
      "@alertdown/payments": ["libs/payments/src/index.ts"],
      "@alertdown/playwright": ["libs/playwright/src/index.ts"],
      "@alertdown/prototyping": ["libs/prototyping/src/index.ts"],
      "@alertdown/site": ["libs/site/src/index.ts"],
      "@alertdown/site-domain": ["libs/site-domain/src/index.ts"],
      "@alertdown/storage": ["libs/storage/src/index.ts"],
      "@alertdown/stripe": ["libs/stripe/src/index.ts"],
      "@alertdown/temporal-client": ["libs/temporal-client/src/index.ts"],
      "@alertdown/ui": ["libs/ui/src/index.ts"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

I thought ESNext would cover all the cases or ES2024 would do.

I get:
Property 'try' does not exist on type 'PromiseConstructor'.ts(2339)

I could potentially augment Promise, but I’d like to avoid it as it’s part of the spec.

Any ideas?

I have a fabricImage and I want to allow resizing while keeping the aspect ratio intact.

By default, Fabric.js allows resizing from:

• Corners, which scales both x and y proportionally (this works as expected).
• Edges (left, right, top, bottom), which scales only x or y, breaking the aspect ratio.

I tried setting lockScalingX = true and lockScalingY = true, but this completely prevents scaling, including corner scaling.
Desired Behavior:

• Allow resizing from corners while maintaining the aspect ratio.
• Allow resizing from edges, but force uniform scaling so that dragging an edge scales both x and y equally. (or disable border scaling, both ok)
• Prevent aspect ratio from being broken when resizing from edges.

What I’ve tried:

• Setting lockScalingX = true and lockScalingY = true (prevents all scaling).
• Searching the documentation but haven’t found a clear way to enforce aspect ratio for all resize handles.

How can I achieve this? Any help would be greatly appreciated!

so i dont know how to delete an object under traverse function in three js

I know how to colour it, but i dont know how to delete it

here is my code:

const raycaster = new three.Raycaster()

document.addEventListener('mousedown', onMouseDown)

function onMouseDown(event){
  const coords = new three.Vector2(
    (event.clientX / renderer.domElement.clientWidth) * 2 -1,
    -((event.clientY / renderer.domElement.clientHeight) * 2 -1)
  )

  raycaster.setFromCamera(coords, camera)

  const intersects = raycaster.intersectObjects(scene.children, true)
  if(intersects.length > 0){
    const selectedObject = intersects[0].object
    
    const color = new three.Color(Math.random(), Math.random(), Math.random())

    selectedObject.parent.traverse(child => {
  if (child.isMesh) {
    child.material.color = color;
  }
});
  }
}

I have implemented the Zoho SalesIQ chatbot on my website using a script in my HTML. However, I am facing an issue with translation when switching between Arabic and English.

When I switch to the Arabic page, the text inside the chatbot conversation does not change to Arabic, and similarly, when switching back to English, the conversation text does not update to English.

Interestingly, the placeholder text inside the chatbot updates correctly according to the selected language, but the actual conversation text remains unchanged.

Here is the script I am using:

<script type="text/javascript" id="zsiqchat">
  var $zoho = $zoho || {};
  $zoho.salesiq = $zoho.salesiq || {
    widgetcode: "siq<code>",
    values: {},
    ready: function() {}
  };
  var d = document;
  s = d.createElement("script");
  s.type = "text/javascript";
  s.id = "zsiqscript";
  s.defer = true;
  s.src = "https://salesiq.zohopublic.com/widget?plugin_source=wordpress";
  t = d.getElementsByTagName("script")[0];
  t.parentNode.insertBefore(s, t);
</script>

I tried setting the language manually using:

$zoho.salesiq.language = 'ar';

Expected: The conversation text inside the chatbot should switch to Arabic when the language is set to Arabic and vice versa for English.
Actual Result: Only the placeholder text updates, but the conversation text remains in the original language.

i tried to run flutterfire configure after using flutter login to log into my account but i get this error message after after inputting my android app ID

PathNotFoundException: Cannot open file, path = ‘/Users/hgs/Desktop/Flutter/flutter_projects/todo_app2/android/build.gradle’ (OS Error: No such file or directory, errno = 2)

i don’t know why this is coming up, i checked my fie and the only build .gradle i can see is in build.gradle.kts i guess thats why my command is not executing.

i dont know how to solve this

Tried researching but couldn’t get any answers.

My English may be bad.
I am working on a small personal project using vite. I have a notification component for showing notifications to the user.
Currently I am calling the notification componentin every component where I have to give notifications like below.

  const [notification, setNotification] = useState(null);
return (
{notification && <Notification type={notification.type} message={notification.message} />}
  )

I know this not efficient as I am rendering the notification component, everytime I need in every component.

Is there any other approach to implement this so I don’t need to render notification everytime I need.
I am using zustand for state management. Is there any way we can use state management in a way that when I set a state of Notification store the component should be displayed or not.

        smartAxios.get("/smartPmo/kanban/" + sessione.profilo.id)
            .then((data) => {
                let newItem = $('<div class="col-md-12 single-note-item all-category"><div class="card card-body">' +
                            '<span class="side-stick"></span>' +
                            '<h5 class="note-title text-truncate w-75 mb-0" data-noteHeading="'+element.short_description+'">'+element.short_description+'<i class="point fa fa-circle ml-1 font-10"></i></h5>' +
                            '<p class="note-date font-12 text-muted">'+element.shortcode+' - '+element.id+' (TSRTODO - creation date here)</p>' +
                            '<div class="note-content">' +
                                '<p class="note-inner-content text-muted" data-noteContent="'+element.long_description+'">'+element.long_description+'</p>' +
                            '</div>' +
                            '<div class="d-flex align-items-center">' +
                                '<span class="mr-1"><i class="fa fa-star favourite-note"></i></span>' +
                                '<span class="mr-1"><i class="fa fa-trash remove-note"></i></span>' +
                                '<div class="ml-auto">' +
                                        '<span><i class="fa fa-search focus" data-href="'+element.id+'"></i></span>' +
                                '</div>' +
                            '</div>' +
                        '</div></div>');
                data.data.itemsOpen.forEach(element => {
                    newItem.find('.side-stick').addClass('background-'+element.color);
                    $('#sortable1').append(newItem);
                });
                data.data.itemsInProgress.forEach(element => {
                    newItem.find('.side-stick').addClass('background-'+element.color);
                    $('#sortable1').append(newItem);
                });

This code is throwing error because

element is not defined

in the let newItem part of the code. And this is expected. How can I fix my code so that I can define newItem outside of the foreach loop? So I can define it once and use it twice

I have AutoCompletion working in a rudimentary fashion in Ace Editor for JavaScript. I can type in a keyword, a period and have matches come up. I’d like to have actual “intellisense” functionality where I can feed my completer objects and such and have autocomplete work as I drill down into objects.

The tern extension seems like it would do what I want, but it appears to be a 3 year old fork of Ace, and that makes me a little uncomfortable running with it.

The “built-in” completer for Ace seems to pull in “everything” from the browser context it’s running in, and that isn’t going to work for me either. The code being edited will be running in an isolated V8 context, so browser (or NodeJS) globals won’t be available (on purpose).

Before I go down the rabbit hole of rolling my own JavaScript interpreter logic, is there any more recent solution on this that I’ve missed in my searches?

I have made a fillable form in Adobe Acrobat DC Pro with several field scripts to activate and deactivate related fields where applicable. One part is stumping me [total novice btw].

I created a button that runs a script to open the print menu, however, I want to set that same button to be deactivated (not hidden) until six specific required fields are filled in; five text fields and one date drop down. .

I have tried several ChatGPT generated options without luck. Scripts on the button, scripts on the required fields, scripts on both, document scripts…nada. Any insight would be greatly appreciated

function checkFields() {
    var fields = ["TextField1", "TextField2", "Dropdown1"]; // List of required fields
    var button = this.getField("SubmitButton"); // The button to enable/disable
    var allFilled = true; // Flag to track if all fields are filled
    // Loop through each required field
    for (var i = 0; i < fields.length; i++) {
        var field = this.getField(fields[i]);
        // Check if the field is empty or not filled
        if (!field.value || field.value.trim() === "") {
            allFilled = false; // Set to false if any field is empty
            break;
        }
    }
    // Enable or disable the button based on whether all fields are filled
    button.readonly = !allFilled; // Disable the button if fields are not filled
}
// Attach the checkFields function to required fields
var fieldsToMonitor = ["TextField1", "TextField2", "Dropdown1"];
for (var i = 0; i < fieldsToMonitor.length; i++) {
    this.getField(fieldsToMonitor[i]).setAction("OnBlur", "checkFields();");
}
// Run the check on form load to disable the button initially
checkFields();

Task: Implement 2 remote browser control commands: openTab – opening a new tab and executeScript – executing a script in a specific tab (and returning the result). I decided to try Chrome Native Messaging API but ran into a problem. One command executes successfully, the second does not. More precisely, the response from Native Host does not reach the service worker.

Service worker code:

const tabsObserver = new Map()

chrome.tabs.onUpdated.addListener(function (updatedTabId, changeInfo) {

    if (changeInfo.status === "complete" && tabsObserver.has(updatedTabId)) {
        resolveCallback = tabsObserver.get(updatedTabId);
        resolveCallback();
    }
});

var port = chrome.runtime.connectNative('com.example.native_messaging');
port.onMessage.addListener(async function (message) {

    if (message.command === "openTab") {

        const tab = await new Promise((resolve) => chrome.tabs.create({ url: message.url }, resolve));

        let resolveCallback;
        const promise = new Promise((resolve) => {
            resolveCallback = resolve;
        });
        tabsObserver.set(tab.id, resolveCallback);
        await promise;
        tabsObserver.delete(tab.id);
        port.postMessage({ tabId: tab.id });
    }
    else if (message.command === "executeScript") {

        let resolveCallback;
        const promise = new Promise((resolve) => {
            resolveCallback = resolve;
        });

        // port.postMessage({ command: "test" });

        chrome.tabs.sendMessage(message.tabId, message, (response) => {
            resolveCallback(response);
        });

        port.postMessage(await promise);
    }
});

Native Host code for testing (Python):

import sys
import json
import struct
import os
import ctypes

MessageBox = ctypes.windll.user32.MessageBoxW

if os.name == "nt":
    import msvcrt
    msvcrt.setmode(sys.stdin.fileno(), os.O_BINARY)
    msvcrt.setmode(sys.stdout.fileno(), os.O_BINARY)


def send_message(message):
    message_str = json.dumps(message)
    sys.stdout.buffer.write(struct.pack("I", len(message_str)))
    sys.stdout.buffer.write(message_str.encode("utf-8"))
    sys.stdout.flush()


def read_message():
    raw_length = sys.stdin.buffer.read(4)
    if not raw_length:
        return None
    message_length = struct.unpack("I", raw_length)[0]
    message_str = sys.stdin.buffer.read(message_length).decode("utf-8")
    return json.loads(message_str)


if __name__ == "__main__":
    send_message({ "command": "openTab", "url": "https://example.com" })
    response = read_message()

    send_message({ "command": "executeScript", "tabId": response["tabId"], "script": "document.title" })
    try:
        while True:
            response = read_message()
            if response is not None:
                MessageBox(None, 'Extension response: ' + str(response), 'Native host', 0)
    except:
        MessageBox(None, 'Error on read message', 'Native Host', 0)

As a result, the tab opens, the given code executes, the result correctly reaches the service worker, but at the moment of: port.postMessage(await promise); – an error occurs, stating that the port is closed. At the same time, if you call port.postMessage before await promise then the response from Native Host arrives (as shown in the commented line). One might assume that Native Host itself closes the connection/crashes due to some error at the right moment, but I made a loop at the end and wrapped it in a try-except block. Perhaps the service worker is unloaded by the browser due to inactivity while awaiting and the port closes. But I don’t quite understand how this works. If the service worker unloads, then the error should not occur because there would be no continuation of code execution.

In general, it is not essential for me to use Native Messaging. I just need to find a reliable way to organize interaction between an extension and a desktop application. I considered a WebSocket server but found information that it may be suspended by the browser despite using ping. Also, the manifest version is not critical for me (currently using V3).

This is an angular 10 project.

So I have a data tab and a music tab. The data tab will work fine when the page loads. If I try to navigate to the music tab and then back to the data tab a refresh is required to load the component correctly. It’s supposed show an array of data or a message if the array is empty. The data loads from the server. I have verified that the server responds with 10 elements. But the template is acting like it doesn’t have any array elements when there is.

I need to know how to fix it so that the user doesn’t have to refresh when they navigates away from the data tab and back to it.