Category: javascript

I’m building a Chrome Extension that needs to detect DOM events (click, mouseover, etc.) on any tab the user switches to or opens during a recording session. The way that seems most appropriate to do this is using the scripting API to inject a script that set’s the appropriate event listeners and can post messages back to the chrome.runtime API to collect data.

However, I’m unable to inject the content Script successfully. My project is a Vue3 + Vite + Manifest V3 Chrome Extension, and in my background.js on the appropriate chrome.tabs listeners I’m executing:

  chrome.scripting.executeScript({
    target: { tabId },
    files: ['src/content_scripts/events.js']
  });

The documentation clearly states that a relative path from the directory root is required. However, no matter how I structure that path, it says the file isn’t found.

The exact error I’m receiving is:

Uncaught (in promise) Error: Could not load file: 'src/content_scripts/events.js'.

Also, my manifest.js file is:

{
  "manifest_version": 3,
  "name": "walkthrough.ai capturer",
  "version": "1.0.0",
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128x128.png"
  },
  "permissions": [
    "desktopCapture",
    "tabCapture",
    "scripting",
    "activeTab",
    "tabs"
  ],
  "host_permissions": ["https://*/*", "http://*/*"],
  "action": {
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png"
    },
    "default_title": "Open Options"
  },
  "background": {
    "service_worker": "src/background/index.js",
    "type": "module"
  }
}

Any ideas on what could be happening?

Thank you

When clicking on a result from a Google SERP, sometimes a Scroll to Text Fragment is added to the URL request, e.g. https://example.com/#:~:text=Lorem%20Ipsum, and highlights the targeted text in purple. That’s pretty neat, but it break my CSS layout.

On one of my divs elsewhere on the page (not the one that gets highlighted), I’m using an absolutely-positioned :before element to add a rounded effect to the top of a 100%-wide div.

how it normally looks

The rounded pseudo-element is trimmed off of either side, since it is position: absolute, and not in the page flow. But, when there’s a Scroll-to-Text Fragment added, which highlights a paragraph further up the page, for some reason the pseudo element is allowed to push the screen wider and break page layout.

how it looks if there’s a scroll-to-text highlight on the page

Am I forgetting something about how CSS works, or is this a bug?

As a workaround I tried to detect this with JS window.location.hash so that I could dynamically remove my pretty rounded effect, but the Scroll to Text Fragment hash is not detected by JS (at least in Chrome). Thanks for any help.

I am tyring to use .keyCode in javascript to select a key that is pressed but each time a key is pressed the console prints null

Here’s the related css code

  <audio data-key="65" src="soundscrash.mp3"></audio>
  <audio data-key="83" src="soundskick-bass.mp3"></audio>
  <audio data-key="68" src="soundssnare.mp3"></audio>
  <audio data-key="70" src="soundstom-1.mp3"></audio>
  <audio data-key="71" src="soundstom-2.mp3"></audio>
  <audio data-key="72" src="soundstom-3.mp3"></audio>
  <audio data-key="74" src="soundssound-effect-thriller-1-108404.mp3"></audio>
  <audio data-key="75" src="soundstom-4.mp3"></audio>
  <audio data-key="76" src="soundsflautatravessera-46420.mp3"></audio>

Here’s the javascript code that I have tried

    window.addEventListener('keydown', function(e){
    const audio=this.document.querySelector('audio[data-key="${e.keyCode}"]')
    console.log(audio);
    audio.play();
   }
   )

It shows null at console.log(audio)

I am trying to get the latest version number of flex plugin in JavaScript. I could not find any documentation online and I was wondering if it’s possible to fetch plugin version number in react app.

I don’t really know hot to explain it but basically I have .hbs files which the mail resource needs. Normally they don’t get copied into the dist folder when I run npm start run:dev. So I modified the nest-cli.json like this.

But now I have the problem that the patch which they are getting copied to are not correct.

This is how I have it in my root folder:

And this is where it gets copied to:

I´ve tried playing around with the assets path and searched for answers but I didn’t find any other way of coping those files

<button id="clearAllLists" class="btn btn-primary del" onclick="clearAL()">Delete All Lists</button>

js-

function clearAL(){
    if(confirm("Do you really want to delete all entries?")){
    console.log("Deleting all Lists");
    localStorage.clear();
    update();
   }
}

in console, “Deleting all Lists” is displayed when button is clicked, but, this isn’t clearing local storage.

I want to get localStorage.clear() work in function clearAL.

When I deploy my Angular app to the Google Cloud, I am getting this error in the Cloud Build section after trying to compile: ‘Error: callback(): The callback was already called’. I am using Angular 9 on my project. I have tried to npm install my node-modules again but with no success though.

Any advice to solve this will be very helpfull.

Here is an image of the GCP console with more details about the compilation issue:

Also I tried to add this line of code to my tsconfig.json but with no success either: “disableTypeScriptVersionCheck”: true,

I think the question is very clear and I might not need to add more details about it, since the error seemed to appear from nowhere.

I’ve reinstalled Code runner for several times and I’ve test with many languages like python and c++ they are all work well (the run button on the top right corner was appear) but only for my js file the button disappear (I’ve tried to save the file for many times already)

Previously it was appear but I’ve accidentally right click on it and click on some option and it disappear ==”

what should I do to recover that button again?

I am using Apollo Client without React, just plain ol JS. I have a classic table and modal that adds things to the backend. Once I add the thing using client.mutate() I’d like to update the table. If the table is not on the last page, it doesn’t really matter, the user will eventually click there to get to the new row. But if the user is on the last page or has visited the last page at any point, going back to that page will not display the new row.

In React I was able to do something like

useMyMutation({
  variables: {},
  refetchQueries: [getOperationName(SomeDocument)]
})

And what this did was refetch the provided query name with its last used variables. I’d like to do something similar and I’ve been reading the docs and trying this and that but can’t even get a query to trigger on the network.

client.mutate(
  mutation: MyMutation,
  variables: {a:1},
  refetchQueries: (e: any) => "all", // nothing I put here ever does anything
)

I have three functions, handleSubmit handleCancel, and solve. HandleSubmit triggers a compute-heavy process, solve. handleCancel should stop that process early.

My simplified code looks like this:

function handleSubmit() {
  computeHeavyProcess();
}

function handleCancel() {
  // not sure what to put here, or how to design this
}

function solve() {
  while (computationNotDone) {
    // do computations
    setSolutionState(resultOfCurrentComputations); // update React state every iteration
    await sleep(0); // unblock UI by chunking compute
  }
}

I would like for the following interaction:

1. When a user clicks triggers handleSubmit, the computation starts.
2. The computation runs, updating state every so often, chunking the compute and allowing the UI to be responsive
3. If the user clicks triggers handleCancel, the computation process is killed.

One way to do this is to have a global variable, allowedToRun, and invoking handleCancel will set this to false. Then, inside solve, I can check for while (computationNotDone && allowedToRun).

However, I would like to not use global variables, as I believe it suggests my code is designed poorly.

I would appreciate any advice on how to design this system better, thanks.

I started to make a simple 2d js game without a canvas.
For now, you can enter your name, and move the character with the arrow keys inside a “map” div. The player moves fine, since i update it’s coordinates on the map. But if i make the map bigger, the map remains static and you can’t see the edges.

My problem is that i have no idea how to move the camera with the player in the screen.

Here is the game on github: https://github.com/zekageri/JS_Game

How the game works:

• Open map.html in a browser
• Enter nickname
• Move with the arrow keys

Can’t make a snippet since i’m using modules.

I’m in studying with Vuejs and I tried to use bootstrap/vue-boostrap component like Card or b-table but when I use them

[Vue warn]: Failed to resolve component: b-table
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at

then I tried to import component in javascript and this what I got:

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

So, I import @vitejs/plugin-vue according above, but it still got same.
App.vue

  <header>toDoList</header>
  <b-table striped hover :items="list"></b-table>
  <input v-model="newTask">
  <input v-model="newTaskDate">
  <button @click="addnewTask()">add new Task</button>
</template>

<script>
import { BTable } from bootstrap-vue;
export default {
  data() {
    return {
      list: [{name:"Doing somwthing",date:"1"}],
      newTask: '',
      newTaskDate: ''
    }
  },
  methods: {
    addnewTask() {
      this.list.push({name:this.newTask, date:this.newTaskDate})
    }
  }
}
</script>

main.js

import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import './assets/main.css'

createApp(App).mount('#app')

i create a to do app, and for this i want to know how change an input tag in JS ?

My code now :

let createList = function() {
     const p = document.querySelector('p');
     const button = document.querySelector('button');
     const ul = document.querySelector('ul');
     const li = document.createElement("li");
     const input = document.createElement("input");
     const buttonDelet = document.createElement('button');

     const delet = () => {
          li.insertAdjacentElement('beforeend', buttonDelet);
     }

     buttonDelet.setAttribute("onclick", "delet()");

     input.innerHTML = "Créer une list";

     li.innerHTML = input;
     ul.appendChild(li);


     button.innerHTML = "Créer une nouvel list";
     p.remove();
}

I am working on a react app where I am running a query that requires two query variables. Initially, I fixed my query variables, but they are  changing in response to checkbox clicks. The issue is that if checkboxes are clicked quickly, query variables will likewise change quickly, preventing me from receiving the data.
Can somebody offer a solution to this issue?

Im using filestack to upload files. I’ve OnUploadDone action as follows:

            onUploadDone: (res) => {
                const response = res.filesUploaded
                response.forEach((file, index) => {

                    let img = document.createElement('img');
                    img.name = file.url;
                    img.src = file.url;
                    img.className = "checkable_uploaded_" + file.uploadId;
                    img.style = "margin: 10px;"

                    let input = document.createElement('input');
                    input.value = file.url;
                    input.style = "visibility: hidden;";
                    input.type = "checkbox";
                    input.name = "selected_pictures[]";

                    document.querySelector(".form-group").append(img);
                    document.querySelector(".form-group").append(input);

And it works as expected – it adds a new image with input checkbox.
But it’s not visible in form request after submitting.

<form name="post" method="POST" enctype="multipart/form-data">
<button class="btn notifications btn-primary" name="publish_post_submit">Publikuj</button>
<input id="inputid" style="visibility: hidden;" type="checkbox" value="{{ link }}" name="selected_pictures[]">
...
</form>

I’m checking request via @gvaish method posted here

And got only ‘static’ fields I’ve added like inputid field from above.

I would like to have all dynamic inputs in the request form.