element.requestFullscreen() not working in electron 18.2

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• MarkLogic server-side JavaScript and XQuery

  I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

  I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
• Popover in chrome extension using js

  My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

  
• How can I get toast-ui editor content?

  I am a student studying. I think I'm doing it conceptually wrong.

  I'm trying to use vue3 and type script And I'm going to use toast-ui editor.

  I get some errors.

  1. refEditor.value.invoke is not a function

  How can I get toast-ui editor content?

  this is my code

  <template>
    <div class="markup-tables flex">
      <va-card :title="$t('tables.stripedHoverable')">
        <va-card-content>
          <div id="refEditor" ref="refEditor"></div>
          <br />
          <div class="row justify--end paginationButtons-left">
            <va-button class="mr-2 mb-2">List</va-button>
          </div>
          <div class="row justify--end paginationButtons-right">
            <va-button class="mr-2 mb-2" @click="getHTML">Save</va-button>
          </div>
        </va-card-content>
      </va-card>
    </div>
  </template>
  
  <script lang="ts">
  import '@toast-ui/editor/dist/toastui-editor.css'
  
  import Editor from '@toast-ui/editor'
  import { defineComponent, onMounted, ref } from 'vue'
  
  import data from '@/data/tables/markup-table/data.json'
  
  export default defineComponent({
    name: 'BoardWrite',
    setup() {
      const refEditor = ref(null)
  
      const getHTML = () => {
        console.log('getHTML test')
        let html = refEditor.value.invoke('getHtml')
        console.log(html)
        // ERROR 
      }
  
      onMounted(() => {
        const editor = new Editor({
          el: refEditor.value,
          height: '700px',
          initialEditType: 'markdown',
          previewStyle: 'vertical',
        })
        editor.getMarkdown()
      })
  
      return {
        getHTML,
        refEditor,
      }
    },
  })
  </script>
  
• Deploy VueJS + API app to Azure Static Web App with Gitlab doesn't create functions

  I've started creating a small application that will use VueJS as a frontend with Azure Functions as the backend. I was looking at using Azure Static Web Apps to host both components for the application and Gitlab to store / deploy the app.

  Everything but the creation of the Azure functions works. Following https://docs.microsoft.com/en-us/azure/static-web-apps/gitlab?tabs=vue

  The output from the deploy step, listed below is:

  App Directory Location: '/builds/*/valhalla/valhalla-client/dist/spa' was found.
  Api Directory Location: '/builds/*/valhalla/valhalla-api/dist' was found.
  Looking for event info
  Could not get event info. Proceeding
  Starting to build app with Oryx
  Azure Static Web Apps utilizes Oryx to build both static applications and Azure Functions. You can find more details on Oryx here: https://github.com/microsoft/Oryx
  ---Oryx build logs---
  Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
  You can report issues at https://github.com/Microsoft/Oryx/issues
  Oryx Version: 0.2.20220131.3, Commit: ec344c058843461525ff03b46031553b6e15a47a, ReleaseTagName: 20220131.3
  Build Operation ID: |qAffRWArEg8=.deee9498_
  Repository Commit : 7cdd5b61f956e6cb8459b13a42af363c4440a97b
  Detecting platforms...
  Could not detect any platform in the source directory.
  Error: Could not detect the language from repo.
  ---End of Oryx build logs---
  Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support.
  Finished building app with Oryx
  Starting to build function app with Oryx
  ---Oryx build logs---
  Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
  You can report issues at https://github.com/Microsoft/Oryx/issues
  Oryx Version: 0.2.20220131.3, Commit: ec344c058843461525ff03b46031553b6e15a47a, ReleaseTagName: 20220131.3
  Build Operation ID: |NGXLP5bVBRk=.705477f6_
  Repository Commit : 7cdd5b61f956e6cb8459b13a42af363c4440a97b
  Detecting platforms...
  Could not detect any platform in the source directory.
  Error: Could not detect the language from repo.
  ---End of Oryx build logs---
  Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support.
  [WARNING] The function language could not be detected. The language will be defaulted to node.
  Function Runtime Information. OS: linux, Functions Runtime: ~3, node version: 12
  Finished building function app with Oryx
  Zipping Api Artifacts
  Done Zipping Api Artifacts
  Zipping App Artifacts
  Done Zipping App Artifacts
  Uploading build artifacts.
  Finished Upload. Polling on deployment.
  Status: InProgress. Time: 0.1762737(s)
  Status: InProgress. Time: 15.3950401(s)
  Status: Succeeded. Time: 30.5043965(s)
  Deployment Complete :)
  Visit your site at: https://polite-pebble-0dc00000f.1.azurestaticapps.net
  Thanks for using Azure Static Web Apps!
  Exiting
  Cleaning up project directory and file based variables 00:00
  Job succeeded
  

  The deploy step appears to have succeeded, and the frontend is deployed, but there are no Azure Functions showing up in this Static Web App. Is something missed here? So far, the Azure Functions I have are the boiler-plate from instantiating a new Azure Function folder.

  image: node:latest
  
  variables:
    API_TOKEN: $DEPLOYMENT_TOKEN
    APP_PATH: '$CI_PROJECT_DIR/valhalla-client/dist/spa'
    API_PATH: '$CI_PROJECT_DIR/valhalla-api/dist'
  
  stages:
    - install_api
    - build_api
    - install_client
    - build_client
    - deploy
  
  install_api:
    stage: install_api
    script:
      - cd valhalla-api
      - npm ci
    artifacts:
      paths:
        - valhalla-api/node_modules/
    cache:
      key: node
      paths:
        - valhalla-api/node_modules/
    only:
      - master
      
  install_client:
    stage: install_client
    script:
      - cd valhalla-client
      - npm ci
    artifacts:
      paths:
        - valhalla-client/node_modules/
    cache:
      key: node
      paths:
        - valhalla-client/node_modules/
    only:
      - master
  
  build_api:
    stage: build_api
    dependencies:
      - install_api
    script:
      - cd valhalla-api
      - npm install -g azure-functions-core-tools@3 --unsafe-perm true
      - npm run build
    artifacts:
      paths:
        - valhalla-api/dist
    cache:
      key: build_api
      paths:
        - valhalla-api/dist
    only:
      - master
    needs:
      - job: install_api
        artifacts: true
        optional: true
  
  build_client:
    stage: build_client
    dependencies:
      - install_client
    script:
      - cd valhalla-client
      - npm i -g @quasar/cli
      - quasar build
    artifacts:
      paths:
        - valhalla-client/dist/spa
    cache:
      key: build_client
      paths:
        - valhalla-client/dist/spa
    only:
      - master
    needs:
      - job: install_client
        artifacts: true
        optional: true
  
  deploy:
    stage: deploy
    dependencies:
      - build_api
      - build_client
    image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
    script:
      - echo "App deployed successfully."
    only:
      - master
  
• How to global import a stylus file in vite

  Now I'm try use vite to create a vue app. But have trouble to global import a stylus file in vite.config.js.

  I try the code from vite docs.

  export default defineConfig({
    css: {
      preprocessorOptions: {
        styl: {
          additionalData: `@import "./src/assets/styles/common.styl"`
        }
      }
    }
  })
  

  But it's completely not work.

  I got a solution to set global style from github.

  export default defineConfig({
    css: {
      preprocessorOptions: {
        stylus: {
          globals: {
            '$highlight-color': 'red'
          }
        }
      }
    }
  })
  

  It's works fine, But how to import a styl file globaly? I tried to add 'additionalData' to the workable config. However I got bunch of errors: 'failed to locate file'. It seems like try to import the file in every .vue file, but has trouble to locate the file.

    css: {
      preprocessorOptions: {
        stylus: {
          additionalData: `@import "./src/assets/styles/common.styl";`,
          globals: {
            '$color-g1': '#F3F4FC',
            '$color-white': '#FFFFFF',
          }
        }
      }
    }
  

  Have any idea about this?
• Safe electron app that makes requests to another server web application

  I want to create an electron app that supports sns features(upload videos, photos, basically share some info (nothing personal). I know that electron only has access to local addresses so I was thinking I could have another web server in between clients of the electron app and electron app, via node.js/express, make requests to the webserver. But would this be safe?
• Typescript conditional return type based on props
  1. In electron application I have a component that renders a button and sends a message to an arbitrary channel to the main process.
  2. The main process does some work and returns back the result, its return type is depended on the channel name.
  3. Parent component also passes a callback along with channel name.

  const Button = ({ name, channel, callback }: ButtonProps) => {
    const [isDisabled, setDisabled] = useState<boolean>(false);
  
    const onClickHandler = () => {
      setDisabled(true);
      window.electron.ipcRenderer.sendMessage(channel);
    };
  
    useEffect(() => {
      // type definition for the function below:
      // on<T>(channel: string, func: (result: T) => void): () => void;
      window.electron.ipcRenderer.on<ReturnType>(channel, (result) => {
        setDisabled(false);
        callback(result);
      });
  
      return () => {
        window.electron.ipcRenderer.removeAllListeners(channel);
      };
    }, [channel, callback]);
  
    return <button 
             type="button" 
             onClick={onClickHandler} 
             disabled={isDisabled}
           >
             {name}
           </button>;
  };
  
  export default Button;
  

  How do I specify a type of a result that is being passed to a callback?

  I started with something like this:

  type ReturnType = OpenDialogReturnValue | SaveDialogReturnValue;
  
  type ButtonProps = {
    name: string;
  } & (
    | {
        channel: "OPEN_DIALOG";
        callback: (result: OpenDialogReturnValue) => void;
      }
    | {
        channel: "SAVE_EXAMPLE";
        callback: (result: SaveDialogReturnValue) => void;
      }
  );
  

  But it throws type error on the line with callback(result);

  Argument of type 'ReturnType' is not assignable to parameter of type 'OpenDialogReturnValue & SaveDialogReturnValue'.
  

  What is wrong here?
• Electron JS ReCaptcha Harvester

  I need to make a recaptcha V2 harvester in Electron JS. I tried the following code but all I get it "ERROR for site owner: Invalid domain for site key". I think I need to intercept requests. Someone suggested me to use "interceptBufferProtocol" method in JS but I don't know how to use that. Can someone help me ?

  <html>
  <head>
      <title>Captcha Harvester</title>
      <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
      <form action="/submit" method="POST">
          <div class="g-recaptcha" id="captchaFrame" data-sitekey="actual-site-key" data-callback="sub"></div>
      </form>
  
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  
  </body>
  </html>
  
• Disk usage is increasing with puppeteer - chromium installed using snap

  I have installed chromium using snap install chromium on my Ubuntu server with Arm cpu because when I wanted to install puppeteer using npm it throwed errors, I set PUPPETEER_EXECUTABLE_PATH to /snap/bin/chromium and it's working fine. But my problem is that disk space on the vps is getting full, when the usage is really high (more than 95%), I do snap remove chromium, snap install chromium and reboot. After reboot the disk usage is normal again (around 35%). The disk has 50 GB. What is causing that? Aren't browser data removed when I close it using browser.close()? Or what could be the reason that this cleans the disk space?
• Chrome data-URI; CSP-violation although nonce- and sha256- are set

  I have a complete html-page with inline js, inline-css and base46 encoded images, that I load as a base64 encoded data URI

  data:text/html;base64, .....
  

  The Chrome console states, I have a CSP violation, athough I have used all(?) possible mitigations:

  • I use the meta-tag option to set less strict CSP rules
  • I have implemented the nonce- mitigation
  • I also have implemented the sha256- hash mitigation Nevertheless: Chrome states, that I have CSP violations. Everything runs fine in Firefox, but Chromium based browsers don't work.

  html:

          <!doctype html>
      <html lang="en">
      <head><meta http-equiv="Content-Security-Policy" content="script-src *  'sha256-Rg49/Z/r5MViuVxsD4nXhpLpVMHbCB8N+Z0shdtNaHE=' 'sha256-OAIlw5RTg+TQhqHqIyHzfBfsq521OfIy5WK4hMd4F8c=' 'sha256-TPPz6zUeSHBWLcT8iTaj5ZhZC8qH8Szzx8qbeik9ca0=' 'unsafe-inline' 'nonce-ChuckLovesYouChrome' data data:; script-src-elem * 'unsafe-inline' 'nonce-ChuckLovesYouChrome' data data:; ">
        <meta charset="utf-8">
  

  Inline-script tags (three of them - all start like this):

  <script nonce="ChuckLovesYouChrome"
  

  The page is not being served by a webserver, so there is no http-header with CSP declarations in place/involved. Still I get those errors: console errors with CS declarations What am I missing?
• Elements coming on top with safari webkit fullscreen api

  Using native fullscreen API for toggling fullscreen on safari MacOS and facing this issue, where the element that is supposed to go to full screen has other elements on top. I have tried playing around with z-index with elements coming on top but didn't get any solution out of that. Here's a screenshot of the issue.

  

  The HTML of the code is too complex to put in here.

  Here's the function that is used to toggle fullscreen.

  enterFullScreen = (ele?: any): void => {
      let doc = document.documentElement;
      if (ele != null) {
        doc = ele;
      }
      
      const docElmWithBrowsersFullScreenFunctions = doc as HTMLElement &
      {
        mozRequestFullScreen(): Promise<void>;
        webkitRequestFullscreen(): Promise<void>;
        msRequestFullscreen(): Promise<void>;
      };
      if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {
        docElmWithBrowsersFullScreenFunctions.requestFullscreen();
      } else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
        docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();
      } else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();
      } else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
        docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();
      }
    }
  

  Tried finding if will-change CSS property is used anywhere in the project as mentioned here, but it's not there. Is anybody facing a similar issue?
• requestFullscreen() not working with modifier keys inside keyup event

  I want to toggle fullscreen on an element, but the requestFullscreen() function isn't working, despite the fact it is called while responding to user interaction (MDN). I can't find out why it doesn't work with Modifier Keys (MDN).

  Here's the snippet from my fiddle:

  document.addEventListener("keyup", (e) => {
    e.preventDefault();
    if (document.fullscreenElement)
      return document.exitFullscreen()
    document.body.firstElementChild.requestFullscreen();  // Fails on CTRL, SHIFT, ALT ...
  });
  

  I also don't understand how it does work if you press a mouse button or any other key press between each toggle with CTRL, SHIFT, or ALT keys. For example, this would work: Left Mouse Click, Shift, Shift, Left Mouse Click, Shift, Shift...

  I need this to work for my Chrome Extension, so maybe there is a workaround? Thanks.