build: gha

* chore: bump chromium in DEPS to 121.0.6101.0

* chore: update patches

* Explictly use python3 to check patch diff

* chore: bump chromium in DEPS to 121.0.6102.0

* chore: update patches

* 4995136: [extensions] Enable Extension Mojo messaging

https://chromium-review.googlesource.com/c/chromium/src/+/4995136

* Bind the components interfaces to a RenderFrame

https://chromium-review.googlesource.com/c/chromium/src/+/4985961
Also:
3986427: Create RendererHost mojom interface for Extensions | https://chromium-review.googlesource.com/c/chromium/src/+/3986427

* 4997024: Enum modernisation for resources_private.idl

https://chromium-review.googlesource.com/c/chromium/src/+/4997024

* 4997025: Enum modernisation for scripting.idl

https://chromium-review.googlesource.com/c/chromium/src/+/4997025

* chore: bump chromium in DEPS to 121.0.6103.0

* chore: update patches

* chore: bump chromium in DEPS to 121.0.6104.0

* chore: update patches

---------

Co-authored-by: electron-roller[bot] <84116207+electron-roller[bot]@users.noreply.github.com>
Co-authored-by: John Kleinschmidt <jkleinsc@electronjs.org>
Co-authored-by: PatchUp <73610968+patchup[bot]@users.noreply.github.com>

.circleci/config.yml

@@ -53,8 +53,8 @@ jobs:
       - path-filtering/set-parameters:
           base-revision: main
           mapping: |
-            ^((?!docs/).)*$ run-build-mac true
-            ^((?!docs/).)*$ run-build-linux true
+            ^((?!docs/).)*$ run-build-mac false
+            ^((?!docs/).)*$ run-build-linux false
             docs/.* run-docs-only true
             ^((?!docs/).)*$ run-docs-only false
       - run:

.circleci/config/base.yml

@@ -75,15 +75,17 @@ executors:
     resource_class: << parameters.size >>
 
   # Electron Runners
+  apple-silicon:
+    resource_class: electronjs/macos-arm64
+    machine: true
+
   linux-arm:
-    resource_class: electronjs/aks-linux-arm-test
-    docker:
-      - image: ghcr.io/electron/test:arm32v7-8e0f85b708fa58e28e4824954d6fd55adfda5e9e
+    resource_class: electronjs/linux-arm
+    machine: true
 
   linux-arm64:
-    resource_class: electronjs/aks-linux-arm-test
-    docker:
-      - image: ghcr.io/electron/test:arm64v8-76d5d29e247972da3855a01c2d8cf72c5998233a
+    resource_class: electronjs/linux-arm64
+    machine: true
 
 # The config expects the following environment variables to be set:
 #  - "SLACK_WEBHOOK" Slack hook URL to send notifications.
@@ -248,10 +250,6 @@ step-depot-tools-get: &step-depot-tools-get
     name: Get depot tools
     command: |
       git clone --depth=1 https://chromium.googlesource.com/chromium/tools/depot_tools.git
-      cd depot_tools
-      git fetch --depth 1 origin f76550541c751f956ef9287f2695a6c8a74bf709
-      git checkout f76550541c751f956ef9287f2695a6c8a74bf709
-      cd ..
       if [ "`uname`" == "Darwin" ]; then
         # remove ninjalog_uploader_wrapper.py from autoninja since we don't use it and it causes problems
         sed -i '' '/ninjalog_uploader_wrapper.py/d' ./depot_tools/autoninja
@@ -1213,7 +1211,7 @@ commands:
           build-type: << parameters.build-type >>
       - *step-maybe-electron-dist-strip
       - step-electron-dist-build:
-          additional-targets: shell_browser_ui_unittests electron:node_headers third_party/electron_node:overlapped-checker electron:hunspell_dictionaries_zip
+          additional-targets: electron:node_headers third_party/electron_node:overlapped-checker electron:hunspell_dictionaries_zip
 
       - *step-show-goma-stats
 
@@ -1659,15 +1657,17 @@ commands:
               export LLVM_SYMBOLIZER_PATH=$PWD/third_party/llvm-build/Release+Asserts/bin/llvm-symbolizer
               export MOCHA_TIMEOUT=180000
               echo "Piping output to ASAN_SYMBOLIZE ($ASAN_SYMBOLIZE)"
-              (cd electron && (circleci tests glob "spec/*-spec.ts" | xargs -I@ -P4 bash -c "echo $(pwd)/@" | circleci tests run --command="xargs node script/yarn test --runners=main --trace-uncaught --enable-logging --files" --split-by=timings 2>&1)) | $ASAN_SYMBOLIZE
+              (cd electron && (circleci tests glob "spec/*-spec.ts" | circleci tests run --command="xargs node script/yarn test --runners=main --trace-uncaught --enable-logging --files" --split-by=timings 2>&1)) | $ASAN_SYMBOLIZE
             else
               if [ "$TARGET_ARCH" == "arm" ] || [ "$TARGET_ARCH" == "arm64" ]; then
                 export ELECTRON_SKIP_NATIVE_MODULE_TESTS=true
+                (cd electron && node script/yarn test --runners=main --trace-uncaught --enable-logging)
+              else
+                if [ "$TARGET_ARCH" == "ia32" ]; then
+                  npm_config_arch=x64 node electron/node_modules/dugite/script/download-git.js
+                fi
+                (cd electron && (circleci tests glob "spec/*-spec.ts" | circleci tests run --command="xargs node script/yarn test --runners=main --trace-uncaught --enable-logging --files" --split-by=timings))
               fi
-              if [ "$TARGET_ARCH" == "ia32" ]; then
-                npm_config_arch=x64 node electron/node_modules/dugite/script/download-git.js
-              fi
-              (cd electron && (circleci tests glob "spec/*-spec.ts" | xargs -I@ -P4 bash -c "echo $(pwd)/@" | circleci tests run --command="xargs node script/yarn test --runners=main --trace-uncaught --enable-logging --files" --split-by=timings))
             fi
       - store_test_results:
           path: src/junit
@@ -2297,7 +2297,6 @@ jobs:
       <<: *env-global
       <<: *env-headless-testing
       <<: *env-stack-dumping
-    parallelism: 3
     steps:
       - electron-tests:
           artifact-key: linux-arm
@@ -2309,7 +2308,6 @@ jobs:
       <<: *env-global
       <<: *env-headless-testing
       <<: *env-stack-dumping
-    parallelism: 3
     steps:
       - electron-tests:
           artifact-key: linux-arm64
@@ -2327,11 +2325,8 @@ jobs:
       - electron-tests:
           artifact-key: darwin-x64
 
-  darwin-testing-arm64-tests:    
-    executor:
-      name: macos
-      size: macos.m1.medium.gen1
-      version: 14.0.0
+  darwin-testing-arm64-tests:
+    executor: apple-silicon
     environment:
       <<: *env-mac-large
       <<: *env-stack-dumping
@@ -2355,10 +2350,7 @@ jobs:
           artifact-key: mas-x64
 
   mas-testing-arm64-tests:
-    executor:
-      name: macos
-      size: macos.m1.medium.gen1
-      version: 14.0.0
+    executor: apple-silicon
     environment:
       <<: *env-mac-large
       <<: *env-stack-dumping

.github/workflows/mac-build.yml

@@ -0,0 +1,14 @@
+name: Build macOS
+
+on:
+  push
+
+jobs:
+  build:
+    runs-on: macos-13-xlarge
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: get disk info
+      run: df -h
+

BUILD.gn

@@ -165,6 +165,15 @@ npm_action("build_electron_definitions") {
   outputs = [ "$target_gen_dir/tsc/typings/electron.d.ts" ]
 }
 
+webpack_build("electron_asar_bundle") {
+  deps = [ ":build_electron_definitions" ]
+
+  inputs = auto_filenames.asar_bundle_deps
+
+  config_file = "//electron/build/webpack/webpack.config.asar.js"
+  out_file = "$target_gen_dir/js2c/asar_bundle.js"
+}
+
 webpack_build("electron_browser_bundle") {
   deps = [ ":build_electron_definitions" ]
 
@@ -210,15 +219,6 @@ webpack_build("electron_isolated_renderer_bundle") {
   out_file = "$target_gen_dir/js2c/isolated_bundle.js"
 }
 
-webpack_build("electron_node_bundle") {
-  deps = [ ":build_electron_definitions" ]
-
-  inputs = auto_filenames.node_bundle_deps
-
-  config_file = "//electron/build/webpack/webpack.config.node.js"
-  out_file = "$target_gen_dir/js2c/node_init.js"
-}
-
 webpack_build("electron_utility_bundle") {
   deps = [ ":build_electron_definitions" ]
 
@@ -230,9 +230,9 @@ webpack_build("electron_utility_bundle") {
 
 action("electron_js2c") {
   deps = [
+    ":electron_asar_bundle",
     ":electron_browser_bundle",
     ":electron_isolated_renderer_bundle",
-    ":electron_node_bundle",
     ":electron_renderer_bundle",
     ":electron_sandboxed_renderer_bundle",
     ":electron_utility_bundle",
@@ -240,9 +240,9 @@ action("electron_js2c") {
   ]
 
   sources = [
+    "$target_gen_dir/js2c/asar_bundle.js",
     "$target_gen_dir/js2c/browser_init.js",
     "$target_gen_dir/js2c/isolated_bundle.js",
-    "$target_gen_dir/js2c/node_init.js",
     "$target_gen_dir/js2c/renderer_init.js",
     "$target_gen_dir/js2c/sandbox_bundle.js",
     "$target_gen_dir/js2c/utility_init.js",
@@ -716,6 +716,7 @@ source_set("electron_lib") {
       "shell/common/extensions/api",
       "shell/common/extensions/api:extensions_features",
       "//chrome/browser/resources:component_extension_resources",
+      "//components/guest_view/common:mojom",
       "//components/update_client:update_client",
       "//components/zoom",
       "//extensions/browser",
@@ -1331,25 +1332,6 @@ if (is_mac) {
   }
 }
 
-test("shell_browser_ui_unittests") {
-  sources = [
-    "//electron/shell/browser/ui/accelerator_util_unittests.cc",
-    "//electron/shell/browser/ui/run_all_unittests.cc",
-  ]
-
-  configs += [ ":electron_lib_config" ]
-
-  deps = [
-    ":electron_lib",
-    "//base",
-    "//base/test:test_support",
-    "//testing/gmock",
-    "//testing/gtest",
-    "//ui/base",
-    "//ui/strings",
-  ]
-}
-
 template("dist_zip") {
   _runtime_deps_target = "${target_name}__deps"
   _runtime_deps_file =

DEPS

@@ -2,7 +2,7 @@ gclient_gn_args_from = 'src'
 
 vars = {
   'chromium_version':
-    '120.0.6099.291',
+    '121.0.6104.0',
   'node_version':
     'v18.18.2',
   'nan_version':

README.md

@@ -9,8 +9,8 @@ View these docs in other languages on our [Crowdin](https://crowdin.com/project/
 
 The Electron framework lets you write cross-platform desktop applications
 using JavaScript, HTML and CSS. It is based on [Node.js](https://nodejs.org/) and
-[Chromium](https://www.chromium.org) and is used by the [Atom
-editor](https://github.com/atom/atom) and many other [apps](https://electronjs.org/apps).
+[Chromium](https://www.chromium.org) and is used by the [Visual Studio
+Code](https://github.com/Microsoft/vscode/) and many other [apps](https://electronjs.org/apps).
 
 Follow [@electronjs](https://twitter.com/electronjs) on Twitter for important
 announcements.
@@ -41,9 +41,9 @@ Each Electron release provides binaries for macOS, Windows, and Linux.
 * macOS (Catalina and up): Electron provides 64-bit Intel and ARM binaries for macOS. Apple Silicon support was added in Electron 11.
 * Windows (Windows 10 and up): Electron provides `ia32` (`x86`), `x64` (`amd64`), and `arm64` binaries for Windows. Windows on ARM support was added in Electron 5.0.8. Support for Windows 7, 8 and 8.1 was [removed in Electron 23, in line with Chromium's Windows deprecation policy](https://www.electronjs.org/blog/windows-7-to-8-1-deprecation-notice).
 * Linux: The prebuilt binaries of Electron are built on Ubuntu 20.04. They have also been verified to work on:
-  * Ubuntu 14.04 and newer
-  * Fedora 24 and newer
-  * Debian 8 and newer
+  * Ubuntu 18.04 and newer
+  * Fedora 32 and newer
+  * Debian 10 and newer
 
 ## Quick start & Electron Fiddle
 
@@ -112,4 +112,4 @@ and more can be found on the [Community page](https://www.electronjs.org/communi
 
 [MIT](https://github.com/electron/electron/blob/main/LICENSE)
 
-When using Electron logos, make sure to follow [OpenJS Foundation Trademark Policy](https://trademark-policy.openjsf.org/).
+When using Electron logos, make sure to follow [OpenJS Foundation Trademark Policy](https://openjsf.org/wp-content/uploads/sites/84/2021/01/OpenJS-Foundation-Trademark-Policy-2021-01-12.docx.pdf).

appveyor-woa.yml

@@ -29,7 +29,7 @@
 
 version: 1.0.{build}
 build_cloud: electronhq-16-core
-image: e-120.0.6099.0
+image: e-121.0.6100.0
 environment:
   GIT_CACHE_PATH: C:\Users\appveyor\libcc_cache
   ELECTRON_OUT_DIR: Default
@@ -94,11 +94,6 @@ for:
             Remove-Item -Recurse -Force $pwd\build-tools
           }
       - git clone --depth=1 https://chromium.googlesource.com/chromium/tools/depot_tools.git
-      - ps: |
-          cd depot_tools
-          git fetch --depth 1 origin f76550541c751f956ef9287f2695a6c8a74bf709
-          git checkout f76550541c751f956ef9287f2695a6c8a74bf709
-          cd ..
       - ps: New-Item -Name depot_tools\.disable_auto_update -ItemType File
       - depot_tools\bootstrap\win_tools.bat
       - ps: $env:PATH="$pwd\depot_tools;$env:PATH"
@@ -161,7 +156,6 @@ for:
       - gn gen out/ffmpeg "--args=import(\"//electron/build/args/ffmpeg.gn\") %GN_EXTRA_ARGS%"
       - ninja -C out/ffmpeg electron:electron_ffmpeg_zip
       - ninja -C out/Default electron:electron_dist_zip
-      - ninja -C out/Default shell_browser_ui_unittests
       - gn desc out/Default v8:run_mksnapshot_default args > out/Default/default_mksnapshot_args
       # Remove unused args from mksnapshot_args
       - ps: >-
@@ -193,19 +187,14 @@ for:
             # built on CI.
             7z a pdb.zip out\Default\*.pdb
           }
-      - ps: |
-          $manifest_file = "electron/script/zip_manifests/dist_zip.win.$env:TARGET_ARCH.manifest"
-          python3 electron/script/zip_manifests/check-zip-manifest.py out/Default/dist.zip $manifest_file
-          if ($LASTEXITCODE -ne 0) {
-            throw "Zip contains files not listed in the manifest $manifest_file"
-          }
+      - python3 electron/script/zip_manifests/check-zip-manifest.py out/Default/dist.zip electron/script/zip_manifests/dist_zip.win.%TARGET_ARCH%.manifest
       - ps: |
           cd C:\projects\src
           $missing_artifacts = $false
           if ($env:SHOULD_SKIP_ARTIFACT_VALIDATION -eq 'true') {
             Write-warning "Skipping artifact validation for doc-only $env:APPVEYOR_PROJECT_NAME"
           } else {
-            $artifacts_to_validate = 'dist.zip','windows_toolchain_profile.json','shell_browser_ui_unittests.exe','chromedriver.zip','ffmpeg.zip','node_headers.zip','mksnapshot.zip','electron.lib','hunspell_dictionaries.zip'
+            $artifacts_to_validate = 'dist.zip','windows_toolchain_profile.json','chromedriver.zip','ffmpeg.zip','node_headers.zip','mksnapshot.zip','electron.lib','hunspell_dictionaries.zip'
             foreach($artifact_name in $artifacts_to_validate) {
               if ($artifact_name -eq 'ffmpeg.zip') {
                 $artifact_file = "out\ffmpeg\ffmpeg.zip"
@@ -243,7 +232,6 @@ for:
       - cd C:\projects\src
       - if exist out\Default\windows_toolchain_profile.json ( appveyor-retry appveyor PushArtifact out\Default\windows_toolchain_profile.json )
       - if exist out\Default\dist.zip (appveyor-retry appveyor PushArtifact out\Default\dist.zip)
-      - if exist out\Default\shell_browser_ui_unittests.exe (appveyor-retry appveyor PushArtifact out\Default\shell_browser_ui_unittests.exe)
       - if exist out\Default\chromedriver.zip (appveyor-retry appveyor PushArtifact out\Default\chromedriver.zip)
       - if exist out\ffmpeg\ffmpeg.zip (appveyor-retry appveyor PushArtifact out\ffmpeg\ffmpeg.zip)
       - if exist node_headers.zip (appveyor-retry appveyor PushArtifact node_headers.zip)
@@ -287,7 +275,7 @@ for:
             if ($job.name -eq "Build Arm on X64 Windows") {
               $jobId = $job.jobId
               foreach($artifact_name in $artifacts_to_download) {
-                if ($artifact_name -eq 'shell_browser_ui_unittests.exe' -Or $artifact_name -eq 'electron.lib') {
+                if ($artifact_name -eq 'electron.lib') {
                   $outfile = "src\out\Default\$artifact_name"
                 } else {
                   $outfile = $artifact_name

appveyor.yml

@@ -29,7 +29,7 @@
 
 version: 1.0.{build}
 build_cloud: electronhq-16-core
-image: e-120.0.6099.0
+image: e-121.0.6100.0
 environment:
   GIT_CACHE_PATH: C:\Users\appveyor\libcc_cache
   ELECTRON_OUT_DIR: Default
@@ -92,11 +92,6 @@ for:
             Remove-Item -Recurse -Force $pwd\build-tools
           }
       - git clone --depth=1 https://chromium.googlesource.com/chromium/tools/depot_tools.git
-      - ps: |
-          cd depot_tools
-          git fetch --depth 1 origin f76550541c751f956ef9287f2695a6c8a74bf709
-          git checkout f76550541c751f956ef9287f2695a6c8a74bf709
-          cd ..
       - ps: New-Item -Name depot_tools\.disable_auto_update -ItemType File
       - depot_tools\bootstrap\win_tools.bat
       - ps: $env:PATH="$pwd\depot_tools;$env:PATH"
@@ -159,7 +154,6 @@ for:
       - gn gen out/ffmpeg "--args=import(\"//electron/build/args/ffmpeg.gn\") %GN_EXTRA_ARGS%"
       - ninja -C out/ffmpeg electron:electron_ffmpeg_zip
       - ninja -C out/Default electron:electron_dist_zip
-      - ninja -C out/Default shell_browser_ui_unittests
       - gn desc out/Default v8:run_mksnapshot_default args > out/Default/default_mksnapshot_args
       # Remove unused args from mksnapshot_args
       - ps: >-
@@ -191,19 +185,14 @@ for:
             # built on CI.
             7z a pdb.zip out\Default\*.pdb
           }
-      - ps: |
-          $manifest_file = "electron/script/zip_manifests/dist_zip.win.$env:TARGET_ARCH.manifest"
-          python3 electron/script/zip_manifests/check-zip-manifest.py out/Default/dist.zip $manifest_file
-          if ($LASTEXITCODE -ne 0) {
-            throw "Zip contains files not listed in the manifest $manifest_file"
-          }
+      - python3 electron/script/zip_manifests/check-zip-manifest.py out/Default/dist.zip electron/script/zip_manifests/dist_zip.win.%TARGET_ARCH%.manifest
       - ps: |
           cd C:\projects\src
           $missing_artifacts = $false
           if ($env:SHOULD_SKIP_ARTIFACT_VALIDATION -eq 'true') {
             Write-warning "Skipping artifact validation for doc-only $env:APPVEYOR_PROJECT_NAME"
           } else {
-            $artifacts_to_validate = 'dist.zip','windows_toolchain_profile.json','shell_browser_ui_unittests.exe','chromedriver.zip','ffmpeg.zip','node_headers.zip','mksnapshot.zip','electron.lib','hunspell_dictionaries.zip'
+            $artifacts_to_validate = 'dist.zip','windows_toolchain_profile.json','chromedriver.zip','ffmpeg.zip','node_headers.zip','mksnapshot.zip','electron.lib','hunspell_dictionaries.zip'
             foreach($artifact_name in $artifacts_to_validate) {
               if ($artifact_name -eq 'ffmpeg.zip') {
                 $artifact_file = "out\ffmpeg\ffmpeg.zip"
@@ -241,7 +230,6 @@ for:
       - cd C:\projects\src
       - if exist out\Default\windows_toolchain_profile.json ( appveyor-retry appveyor PushArtifact out\Default\windows_toolchain_profile.json )
       - if exist out\Default\dist.zip (appveyor-retry appveyor PushArtifact out\Default\dist.zip)
-      - if exist out\Default\shell_browser_ui_unittests.exe (appveyor-retry appveyor PushArtifact out\Default\shell_browser_ui_unittests.exe)
       - if exist out\Default\chromedriver.zip (appveyor-retry appveyor PushArtifact out\Default\chromedriver.zip)
       - if exist out\ffmpeg\ffmpeg.zip (appveyor-retry appveyor PushArtifact out\ffmpeg\ffmpeg.zip)
       - if exist node_headers.zip (appveyor-retry appveyor PushArtifact node_headers.zip)
@@ -278,12 +266,12 @@ for:
           # Download build artifacts
           $apiUrl = 'https://ci.appveyor.com/api'
           $build_info = Invoke-RestMethod -Method Get -Uri "$apiUrl/projects/$env:APPVEYOR_ACCOUNT_NAME/$env:APPVEYOR_PROJECT_SLUG/builds/$env:APPVEYOR_BUILD_ID"
-          $artifacts_to_download = @('dist.zip','shell_browser_ui_unittests.exe','chromedriver.zip','ffmpeg.zip','node_headers.zip','mksnapshot.zip','electron.lib')
+          $artifacts_to_download = @('dist.zip','chromedriver.zip','ffmpeg.zip','node_headers.zip','mksnapshot.zip','electron.lib')
           foreach ($job in $build_info.build.jobs) {
             if ($job.name -eq "Build") {
               $jobId = $job.jobId
               foreach($artifact_name in $artifacts_to_download) {
-                if ($artifact_name -eq 'shell_browser_ui_unittests.exe' -Or $artifact_name -eq 'electron.lib') {
+                if ($artifact_name -eq 'electron.lib') {
                   $outfile = "src\out\Default\$artifact_name"
                 } else {
                   $outfile = $artifact_name
@@ -317,7 +305,6 @@ for:
             $env:npm_config_arch = "ia32"
           }
       - echo Running main test suite & node script/yarn test -- --trace-uncaught --runners=main --enable-logging=file --log-file=%cd%\electron.log
-      - echo Running native test suite & node script/yarn test -- --trace-uncaught --runners=native --enable-logging=file --log-file=%cd%\electron.log
       - cd ..
       - echo Verifying non proprietary ffmpeg & python electron\script\verify-ffmpeg.py --build-dir out\Default --source-root %cd% --ffmpeg-path out\ffmpeg
       - echo "About to verify mksnapshot"

build/args/all.gn

@@ -24,10 +24,6 @@ enable_printing = true
 angle_enable_vulkan_validation_layers = false
 dawn_enable_vulkan_validation_layers = false
 
-# Removes dxc dll's that are only used experimentally.
-# See https://bugs.chromium.org/p/chromium/issues/detail?id=1474897
-dawn_use_built_dxc = false
-
 # These are disabled because they cause the zip manifest to differ between
 # testing and release builds.
 # See https://chromium-review.googlesource.com/c/chromium/src/+/2774898.
@@ -64,3 +60,8 @@ enable_dangling_raw_ptr_checks = false
 # This flag speeds up the performance of fork/execve on linux systems.
 # Ref: https://chromium-review.googlesource.com/c/v8/v8/+/4602858
 v8_enable_private_mapping_fork_optimization = true
+
+# https://chromium-review.googlesource.com/c/chromium/src/+/4995136
+# TODO(jkleinsc): convert legacy IPC calls in extensions to use mojo
+# https://github.com/electron/electron/issues/40439
+enable_extensions_legacy_ipc = true

build/dump_syms.py

@@ -1,4 +1,4 @@
-from __future__ import print_function
+#!/usr/bin/env python3
 
 import collections
 import os

build/npm-run.py

@@ -1,5 +1,5 @@
 #!/usr/bin/env python3
-from __future__ import print_function
+
 import os
 import subprocess
 import sys

build/profile_toolchain.py

@@ -1,4 +1,4 @@
-from __future__ import unicode_literals
+#!/usr/bin/env python3
 
 import contextlib
 import sys

build/webpack/webpack.config.asar.js

@@ -0,0 +1,5 @@
+module.exports = require('./webpack.config.base')({
+  target: 'asar',
+  alwaysHasNode: true,
+  targetDeletesNodeGlobals: true
+});

build/webpack/webpack.config.node.js

@@ -1,4 +0,0 @@
-module.exports = require('./webpack.config.base')({
-  target: 'node',
-  alwaysHasNode: true
-});

build/zip.py

@@ -1,5 +1,5 @@
 #!/usr/bin/env python3
-from __future__ import print_function
+
 import os
 import subprocess
 import sys

build/zip_libcxx.py

@@ -1,5 +1,5 @@
 #!/usr/bin/env python3
-from __future__ import print_function
+
 import os
 import subprocess
 import sys

buildflags/BUILD.gn

@@ -15,15 +15,4 @@ buildflag_header("buildflags") {
     "ENABLE_BUILTIN_SPELLCHECKER=$enable_builtin_spellchecker",
     "OVERRIDE_LOCATION_PROVIDER=$enable_fake_location_provider",
   ]
-
-  if (electron_vendor_version != "") {
-    result = string_split(electron_vendor_version, ":")
-    flags += [
-      "HAS_VENDOR_VERSION=true",
-      "VENDOR_VERSION_NAME=\"${result[0]}\"",
-      "VENDOR_VERSION_VALUE=\"${result[1]}\"",
-    ]
-  } else {
-    flags += [ "HAS_VENDOR_VERSION=false" ]
-  }
 }

buildflags/buildflags.gni

@@ -23,10 +23,4 @@ declare_args() {
   # Packagers and vendor builders should set this in gn args to avoid running
   # the script that reads git tag.
   override_electron_version = ""
-
-  # Define an extra item that will show in process.versions, the value must
-  # be in the format of "key:value".
-  # Packagers and vendor builders can set this in gn args to attach extra info
-  # about the build in the binary.
-  electron_vendor_version = ""
 }

chromium_src/BUILD.gn

@@ -256,8 +256,6 @@ static_library("chrome") {
     sources += [
       "//chrome/browser/bad_message.cc",
       "//chrome/browser/bad_message.h",
-      "//chrome/browser/printing/prefs_util.cc",
-      "//chrome/browser/printing/prefs_util.h",
       "//chrome/browser/printing/print_job.cc",
       "//chrome/browser/printing/print_job.h",
       "//chrome/browser/printing/print_job_manager.cc",

docs/api/accelerator.md

@@ -15,7 +15,7 @@ Shortcuts are registered with the [`globalShortcut`](global-shortcut.md) module
 using the [`register`](global-shortcut.md#globalshortcutregisteraccelerator-callback)
 method, i.e.
 
-```js
+```javascript
 const { app, globalShortcut } = require('electron')
 
 app.whenReady().then(() => {

docs/api/app.md

@@ -377,35 +377,6 @@ page.
 
 Emitted whenever there is a GPU info update.
 
-### Event: 'gpu-process-crashed' _Deprecated_
-
-Returns:
-
-* `event` Event
-* `killed` boolean
-
-Emitted when the GPU process crashes or is killed.
-
-**Deprecated:** This event is superceded by the `child-process-gone` event
-which contains more information about why the child process disappeared. It
-isn't always because it crashed. The `killed` boolean can be replaced by
-checking `reason === 'killed'` when you switch to that event.
-
-### Event: 'renderer-process-crashed' _Deprecated_
-
-Returns:
-
-* `event` Event
-* `webContents` [WebContents](web-contents.md)
-* `killed` boolean
-
-Emitted when the renderer process of `webContents` crashes or is killed.
-
-**Deprecated:** This event is superceded by the `render-process-gone` event
-which contains more information about why the render process disappeared. It
-isn't always because it crashed.  The `killed` boolean can be replaced by
-checking `reason === 'killed'` when you switch to that event.
-
 ### Event: 'render-process-gone'
 
 Returns:
@@ -1278,10 +1249,10 @@ Returns `boolean` - Whether the current desktop environment is Unity launcher.
 ### `app.getLoginItemSettings([options])` _macOS_ _Windows_
 
 * `options` Object (optional)
-  * `path` string (optional) _Windows_ - The executable path to compare against.
-    Defaults to `process.execPath`.
-  * `args` string[] (optional) _Windows_ - The command-line arguments to compare
-    against. Defaults to an empty array.
+  * `type` string (optional) _macOS_ - Can be one of `mainAppService`, `agentService`, `daemonService`, or `loginItemService`. Defaults to `mainAppService`. Only available on macOS 13 and up. See [app.setLoginItemSettings](app.md#appsetloginitemsettingssettings-macos-windows) for more information about each type.
+  * `serviceName` string (optional) _macOS_ - The name of the service. Required if `type` is non-default. Only available on macOS 13 and up.
+  * `path` string (optional) _Windows_ - The executable path to compare against. Defaults to `process.execPath`.
+  * `args` string[] (optional) _Windows_ - The command-line arguments to compare against. Defaults to an empty array.
 
 If you provided `path` and `args` options to `app.setLoginItemSettings`, then you
 need to pass the same arguments here for `openAtLogin` to be set correctly.
@@ -1289,17 +1260,11 @@ need to pass the same arguments here for `openAtLogin` to be set correctly.
 Returns `Object`:
 
 * `openAtLogin` boolean - `true` if the app is set to open at login.
-* `openAsHidden` boolean _macOS_ - `true` if the app is set to open as hidden at login.
-  This setting is not available on [MAS builds][mas-builds].
-* `wasOpenedAtLogin` boolean _macOS_ - `true` if the app was opened at login
-  automatically. This setting is not available on [MAS builds][mas-builds].
-* `wasOpenedAsHidden` boolean _macOS_ - `true` if the app was opened as a hidden login
-  item. This indicates that the app should not open any windows at startup.
-  This setting is not available on [MAS builds][mas-builds].
-* `restoreState` boolean _macOS_ - `true` if the app was opened as a login item that
-  should restore the state from the previous session. This indicates that the
-  app should restore the windows that were open the last time the app was
-  closed. This setting is not available on [MAS builds][mas-builds].
+* `openAsHidden` boolean _macOS_ _Deprecated_ - `true` if the app is set to open as hidden at login. This does not work on macOS 13 and up.
+* `wasOpenedAtLogin` boolean _macOS_ _Deprecated_ - `true` if the app was opened at login automatically. This setting is not available on [MAS builds][mas-builds] or on macOS 13 and up.
+* `wasOpenedAsHidden` boolean _macOS_ _Deprecated_ - `true` if the app was opened as a hidden login item. This indicates that the app should not open any windows at startup. This setting is not available on [MAS builds][mas-builds] or on macOS 13 and up.
+* `restoreState` boolean _macOS_ _Deprecated_ - `true` if the app was opened as a login item that should restore the state from the previous session. This indicates that the app should restore the windows that were open the last time the app was closed. This setting is not available on [MAS builds][mas-builds] or on macOS 13 and up.
+* `status` string _macOS_ - can be one of `not-registered`, `enabled`, `requires-approval`, or `not-found`.
 * `executableWillLaunchAtLogin` boolean _Windows_ - `true` if app is set to open at login and its run key is not deactivated. This differs from `openAtLogin` as it ignores the `args` option, this property will be true if the given executable would be launched at login with **any** arguments.
 * `launchItems` Object[] _Windows_
   * `name` string _Windows_ - name value of a registry entry.
@@ -1313,10 +1278,14 @@ Returns `Object`:
 * `settings` Object
   * `openAtLogin` boolean (optional) - `true` to open the app at login, `false` to remove
     the app as a login item. Defaults to `false`.
-  * `openAsHidden` boolean (optional) _macOS_ - `true` to open the app as hidden. Defaults to
-    `false`. The user can edit this setting from the System Preferences so
-    `app.getLoginItemSettings().wasOpenedAsHidden` should be checked when the app
-    is opened to know the current value. This setting is not available on [MAS builds][mas-builds].
+  * `openAsHidden` boolean (optional) _macOS_ _Deprecated_ - `true` to open the app as hidden. Defaults to `false`. The user can edit this setting from the System Preferences so `app.getLoginItemSettings().wasOpenedAsHidden` should be checked when the app is opened to know the current value. This setting is not available on [MAS build
+s][mas-builds] or on macOS 13 and up.
+  * `type` string (optional) _macOS_ - The type of service to add as a login item. Defaults to `mainAppService`. Only available on macOS 13 and up.
+    * `mainAppService` - The primary application.
+    * `agentService` - The property list name for a launch agent. The property list name must correspond to a property list in the app’s `Contents/Library/LaunchAgents` directory.
+    * `daemonService` string (optional) _macOS_ - The property list name for a launch agent. The property list name must correspond to a property list in the app’s `Contents/Library/LaunchDaemons` directory.
+    * `loginItemService` string (optional) _macOS_ - The property list name for a login item service. The property list name must correspond to a property list in the app’s `Contents/Library/LoginItems` directory.
+  * `serviceName` string (optional) _macOS_ - The name of the service. Required if `type` is non-default. Only available on macOS 13 and up.
   * `path` string (optional) _Windows_ - The executable to launch at login.
     Defaults to `process.execPath`.
   * `args` string[] (optional) _Windows_ - The command-line arguments to pass to
@@ -1325,6 +1294,7 @@ Returns `Object`:
   * `enabled` boolean (optional) _Windows_ - `true` will change the startup approved registry key and `enable / disable` the App in Task Manager and Windows Settings.
     Defaults to `true`.
   * `name` string (optional) _Windows_ - value name to write into registry. Defaults to the app's AppUserModelId().
+
 Set the app's login item settings.
 
 To work with Electron's `autoUpdater` on Windows, which uses [Squirrel][Squirrel-Windows],
@@ -1349,6 +1319,8 @@ app.setLoginItemSettings({
 })
 ```
 
+For more information about setting different services as login items on macOS 13 and up, see [`SMAppService`](https://developer.apple.com/documentation/servicemanagement/smappservice?language=objc).
+
 ### `app.isAccessibilitySupportEnabled()` _macOS_ _Windows_
 
 Returns `boolean` - `true` if Chrome's accessibility support is enabled,
@@ -1542,7 +1514,7 @@ A `boolean` property that returns  `true` if the app is packaged, `false` otherw
 [tasks]:https://learn.microsoft.com/en-us/windows/win32/shell/taskbar-extensions#tasks
 [app-user-model-id]: https://learn.microsoft.com/en-us/windows/win32/shell/appids
 [electron-forge]: https://www.electronforge.io/
-[electron-packager]: https://github.com/electron/packager
+[electron-packager]: https://github.com/electron/electron-packager
 [CFBundleURLTypes]: https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html#//apple_ref/doc/uid/TP40009249-102207-TPXREF115
 [LSCopyDefaultHandlerForURLScheme]: https://developer.apple.com/documentation/coreservices/1441725-lscopydefaulthandlerforurlscheme?language=objc
 [handoff]: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/Handoff/HandoffFundamentals/HandoffFundamentals.html

docs/api/browser-view.md

@@ -16,7 +16,7 @@ module is emitted.
 
 ### Example
 
-```js
+```javascript
 // In the main process.
 const { app, BrowserView, BrowserWindow } = require('electron')
 

docs/api/browser-window.md

@@ -7,7 +7,7 @@ Process: [Main](../glossary.md#main-process)
 This module cannot be used until the `ready` event of the `app`
 module is emitted.
 
-```js
+```javascript
 // In the main process.
 const { BrowserWindow } = require('electron')
 
@@ -38,7 +38,7 @@ While loading the page, the `ready-to-show` event will be emitted when the rende
 process has rendered the page for the first time if the window has not been shown yet. Showing
 the window after this event will have no visual flash:
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({ show: false })
 win.once('ready-to-show', () => {
@@ -59,7 +59,7 @@ For a complex app, the `ready-to-show` event could be emitted too late, making
 the app feel slow. In this case, it is recommended to show the window
 immediately, and use a `backgroundColor` close to your app's background:
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 
 const win = new BrowserWindow({ backgroundColor: '#2e2c29' })
@@ -85,7 +85,7 @@ For more information about these color types see valid options in [win.setBackgr
 
 By using `parent` option, you can create child windows:
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 
 const top = new BrowserWindow()
@@ -101,7 +101,7 @@ The `child` window will always show on top of the `top` window.
 A modal window is a child window that disables parent window, to create a modal
 window, you have to set both `parent` and `modal` options:
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 
 const top = new BrowserWindow()
@@ -188,7 +188,7 @@ window should be closed, which will also be called when the window is
 reloaded. In Electron, returning any value other than `undefined` would cancel the
 close. For example:
 
-```js
+```javascript
 window.onbeforeunload = (e) => {
   console.log('I do not want to be closed')
 
@@ -351,7 +351,7 @@ Commands are lowercased, underscores are replaced with hyphens, and the
 `APPCOMMAND_` prefix is stripped off.
 e.g. `APPCOMMAND_BROWSER_BACKWARD` is emitted as `browser-backward`.
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 win.on('app-command', (e, cmd) => {
@@ -456,7 +456,7 @@ Returns `BrowserWindow | null` - The window with the given `id`.
 
 Objects created with `new BrowserWindow` have the following properties:
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 // In this example `win` is our instance
 const win = new BrowserWindow({ width: 800, height: 600 })
@@ -780,7 +780,7 @@ Closes the currently open [Quick Look][quick-look] panel.
 
 Resizes and moves the window to the supplied bounds. Any properties that are not supplied will default to their current values.
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 
@@ -1035,7 +1035,7 @@ Changes the attachment point for sheets on macOS. By default, sheets are
 attached just below the window frame, but you may want to display them beneath
 a HTML-rendered toolbar. For example:
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 
@@ -1178,7 +1178,7 @@ To ensure that file URLs are properly formatted, it is recommended to use
 Node's [`url.format`](https://nodejs.org/api/url.html#url_url_format_urlobject)
 method:
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 
@@ -1194,7 +1194,7 @@ win.loadURL(url)
 You can load a URL using a `POST` request with URL-encoded data by doing
 the following:
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 

docs/api/client-request.md

@@ -2,7 +2,7 @@
 
 > Make HTTP/HTTPS requests.
 
-Process: [Main](../glossary.md#main-process), [Utility](../glossary.md#utility-process)<br />
+Process: [Main](../glossary.md#main-process)<br />
 _This class is not exported from the `'electron'` module. It is only available as a return value of other methods in the Electron API._
 
 `ClientRequest` implements the [Writable Stream](https://nodejs.org/api/stream.html#stream_writable_streams)
@@ -65,7 +65,7 @@ strictly follow the Node.js model as described in the
 
 For instance, we could have created the same request to 'github.com' as follows:
 
-```js
+```javascript
 const request = net.request({
   method: 'GET',
   protocol: 'https:',
@@ -104,7 +104,7 @@ The `callback` function is expected to be called back with user credentials:
 * `username` string
 * `password` string
 
-```js @ts-type={request:Electron.ClientRequest}
+```javascript @ts-type={request:Electron.ClientRequest}
 request.on('login', (authInfo, callback) => {
   callback('username', 'password')
 })
@@ -113,7 +113,7 @@ request.on('login', (authInfo, callback) => {
 Providing empty credentials will cancel the request and report an authentication
 error on the response object:
 
-```js @ts-type={request:Electron.ClientRequest}
+```javascript @ts-type={request:Electron.ClientRequest}
 request.on('response', (response) => {
   console.log(`STATUS: ${response.statusCode}`)
   response.on('error', (error) => {

docs/api/clipboard.md

@@ -7,7 +7,7 @@ Process: [Main](../glossary.md#main-process), [Renderer](../glossary.md#renderer
 On Linux, there is also a `selection` clipboard. To manipulate it
 you need to pass `selection` to each method:
 
-```js
+```javascript
 const { clipboard } = require('electron')
 
 clipboard.writeText('Example string', 'selection')

docs/api/command-line-switches.md

@@ -6,7 +6,7 @@ You can use [app.commandLine.appendSwitch][append-switch] to append them in
 your app's main script before the [ready][ready] event of the [app][app] module
 is emitted:
 
-```js
+```javascript
 const { app } = require('electron')
 app.commandLine.appendSwitch('remote-debugging-port', '8315')
 app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1')
@@ -185,7 +185,7 @@ list of hosts. This flag has an effect only if used in tandem with
 
 For example:
 
-```js
+```javascript
 const { app } = require('electron')
 app.commandLine.appendSwitch('proxy-bypass-list', '<local>;*.google.com;*foo.com;1.2.3.4:5678')
 ```

docs/api/command-line.md

@@ -7,7 +7,7 @@ _This class is not exported from the `'electron'` module. It is only available a
 
 The following example shows how to check if the `--disable-gpu` flag is set.
 
-```js
+```javascript
 const { app } = require('electron')
 app.commandLine.hasSwitch('disable-gpu')
 ```

docs/api/content-tracing.md

@@ -10,7 +10,7 @@ This module does not include a web interface. To view recorded traces, use
 **Note:** You should not use this module until the `ready` event of the app
 module is emitted.
 
-```js
+```javascript
 const { app, contentTracing } = require('electron')
 
 app.whenReady().then(() => {

docs/api/context-bridge.md

@@ -6,7 +6,7 @@ Process: [Renderer](../glossary.md#renderer-process)
 
 An example of exposing an API to a renderer from an isolated preload script is given below:
 
-```js
+```javascript
 // Preload (Isolated World)
 const { contextBridge, ipcRenderer } = require('electron')
 
@@ -18,7 +18,7 @@ contextBridge.exposeInMainWorld(
 )
 ```
 
-```js @ts-nocheck
+```javascript @ts-nocheck
 // Renderer (Main World)
 
 window.electron.doThing()
@@ -64,7 +64,7 @@ the API become immutable and updates on either side of the bridge do not result
 
 An example of a complex API is shown below:
 
-```js
+```javascript
 const { contextBridge, ipcRenderer } = require('electron')
 
 contextBridge.exposeInMainWorld(
@@ -92,7 +92,7 @@ contextBridge.exposeInMainWorld(
 
 An example of `exposeInIsolatedWorld` is shown below:
 
-```js
+```javascript
 const { contextBridge, ipcRenderer } = require('electron')
 
 contextBridge.exposeInIsolatedWorld(
@@ -104,7 +104,7 @@ contextBridge.exposeInIsolatedWorld(
 )
 ```
 
-```js @ts-nocheck
+```javascript @ts-nocheck
 // Renderer (In isolated world id1004)
 
 window.electron.doThing()
@@ -145,7 +145,7 @@ The table of supported types described above also applies to Node APIs that you
 Please note that many Node APIs grant access to local system resources.
 Be very cautious about which globals and APIs you expose to untrusted remote content.
 
-```js
+```javascript
 const { contextBridge } = require('electron')
 const crypto = require('node:crypto')
 contextBridge.exposeInMainWorld('nodeCrypto', {

docs/api/cookies.md

@@ -10,7 +10,7 @@ a `Session`.
 
 For example:
 
-```js
+```javascript
 const { session } = require('electron')
 
 // Query all cookies.

docs/api/crash-reporter.md

@@ -7,7 +7,7 @@ Process: [Main](../glossary.md#main-process), [Renderer](../glossary.md#renderer
 The following is an example of setting up Electron to automatically submit
 crash reports to a remote server:
 
-```js
+```javascript
 const { crashReporter } = require('electron')
 
 crashReporter.start({ submitURL: 'https://your-domain.com/url-to-submit' })
@@ -100,7 +100,7 @@ longer than the maximum length will be truncated.
 
 ### `crashReporter.getLastCrashReport()`
 
-Returns [`CrashReport`](structures/crash-report.md) - The date and ID of the
+Returns [`CrashReport | null`](structures/crash-report.md) - The date and ID of the
 last crash report. Only crash reports that have been uploaded will be returned;
 even if a crash report is present on disk it will not be returned until it is
 uploaded. In the case that there are no uploaded reports, `null` is returned.

docs/api/debugger.md

@@ -8,7 +8,7 @@ _This class is not exported from the `'electron'` module. It is only available a
 Chrome Developer Tools has a [special binding][rdp] available at JavaScript
 runtime that allows interacting with pages and instrumenting them.
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 

docs/api/desktop-capturer.md

@@ -8,7 +8,7 @@ Process: [Main](../glossary.md#main-process)
 The following example shows how to capture video from a desktop window whose
 title is `Electron`:
 
-```js
+```javascript
 // In the main process.
 const { BrowserWindow, desktopCapturer } = require('electron')
 
@@ -24,7 +24,7 @@ desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources =
 })
 ```
 
-```js @ts-nocheck
+```javascript @ts-nocheck
 // In the preload script.
 const { ipcRenderer } = require('electron')
 
@@ -68,7 +68,7 @@ To capture both audio and video from the entire desktop the constraints passed
 to [`navigator.mediaDevices.getUserMedia`][] must include `chromeMediaSource: 'desktop'`,
 for both `audio` and `video`, but should not include a `chromeMediaSourceId` constraint.
 
-```js
+```javascript
 const constraints = {
   audio: {
     mandatory: {

docs/api/dialog.md

@@ -6,7 +6,7 @@ Process: [Main](../glossary.md#main-process)
 
 An example of showing a dialog to select multiple files:
 
-```js
+```javascript
 const { dialog } = require('electron')
 console.log(dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] }))
 ```
@@ -52,7 +52,7 @@ The `browserWindow` argument allows the dialog to attach itself to a parent wind
 The `filters` specifies an array of file types that can be displayed or
 selected when you want to limit the user to a specific type. For example:
 
-```js
+```javascript
 {
   filters: [
     { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
@@ -119,7 +119,7 @@ The `browserWindow` argument allows the dialog to attach itself to a parent wind
 The `filters` specifies an array of file types that can be displayed or
 selected when you want to limit the user to a specific type. For example:
 
-```js
+```javascript
 {
   filters: [
     { name: 'Images', extensions: ['jpg', 'png', 'gif'] },

docs/api/dock.md

@@ -7,7 +7,7 @@ _This class is not exported from the `'electron'` module. It is only available a
 
 The following example shows how to bounce your icon on the dock.
 
-```js
+```javascript
 const { app } = require('electron')
 app.dock.bounce()
 ```

docs/api/download-item.md

@@ -9,7 +9,7 @@ _This class is not exported from the `'electron'` module. It is only available a
 It is used in `will-download` event of `Session` class, and allows users to
 control the download item.
 
-```js
+```javascript
 // In the main process.
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()

docs/api/environment-variables.md

@@ -59,7 +59,7 @@ geolocation webservice. To enable this feature, acquire a
 and place the following code in your main process file, before opening any
 browser windows that will make geolocation requests:
 
-```js
+```javascript
 process.env.GOOGLE_API_KEY = 'YOUR_KEY_HERE'
 ```
 

docs/api/global-shortcut.md

@@ -12,7 +12,7 @@ shortcuts.
 not have the keyboard focus. This module cannot be used before the `ready`
 event of the app module is emitted.
 
-```js
+```javascript
 const { app, globalShortcut } = require('electron')
 
 app.whenReady().then(() => {

docs/api/incoming-message.md

@@ -2,7 +2,7 @@
 
 > Handle responses to HTTP/HTTPS requests.
 
-Process: [Main](../glossary.md#main-process), [Utility](../glossary.md#utility-process)<br />
+Process: [Main](../glossary.md#main-process)<br />
 _This class is not exported from the `'electron'` module. It is only available as a return value of other methods in the Electron API._
 
 `IncomingMessage` implements the [Readable Stream](https://nodejs.org/api/stream.html#stream_readable_streams)
@@ -89,7 +89,7 @@ tuples. So, the even-numbered offsets are key values, and the odd-numbered
 offsets are the associated values. Header names are not lowercased, and
 duplicates are not merged.
 
-```js @ts-type={response:Electron.IncomingMessage}
+```javascript @ts-type={response:Electron.IncomingMessage}
 // Prints something like:
 //
 // [ 'user-agent',

docs/api/ipc-renderer.md

@@ -120,7 +120,7 @@ The main process should listen for `channel` with
 
 For example:
 
-```js @ts-type={someArgument:unknown} @ts-type={doSomeWork:(arg:unknown)=>Promise<unknown>}
+```javascript @ts-type={someArgument:unknown} @ts-type={doSomeWork:(arg:unknown)=>Promise<unknown>}
 // Renderer process
 ipcRenderer.invoke('some-name', someArgument).then((result) => {
   // ...

docs/api/menu.md

@@ -151,7 +151,7 @@ can have a submenu.
 
 An example of creating the application menu with the simple template API:
 
-```js @ts-expect-error=[107]
+```javascript @ts-expect-error=[107]
 const { app, Menu } = require('electron')
 
 const isMac = process.platform === 'darwin'
@@ -353,7 +353,7 @@ By default, items will be inserted in the order they exist in the template unles
 
 Template:
 
-```js
+```javascript
 [
   { id: '1', label: 'one' },
   { id: '2', label: 'two' },
@@ -373,7 +373,7 @@ Menu:
 
 Template:
 
-```js
+```javascript
 [
   { id: '1', label: 'one' },
   { type: 'separator' },
@@ -397,7 +397,7 @@ Menu:
 
 Template:
 
-```js
+```javascript
 [
   { id: '1', label: 'one', after: ['3'] },
   { id: '2', label: 'two', before: ['1'] },

docs/api/native-image.md

@@ -10,7 +10,7 @@ In Electron, for the APIs that take images, you can pass either file paths or
 For example, when creating a tray or setting a window's icon, you can pass an
 image file path as a `string`:
 
-```js
+```javascript
 const { BrowserWindow, Tray } = require('electron')
 
 const appIcon = new Tray('/Users/somebody/images/icon.png')
@@ -20,7 +20,7 @@ console.log(appIcon, win)
 
 Or read the image from the clipboard, which returns a `NativeImage`:
 
-```js
+```javascript
 const { clipboard, Tray } = require('electron')
 const image = clipboard.readImage()
 const appIcon = new Tray(image)
@@ -51,13 +51,6 @@ Check the _Size requirements_ section in [this article][icons].
 
 [icons]: https://learn.microsoft.com/en-us/windows/win32/uxguide/vis-icons
 
-:::note
-
-EXIF metadata is currently not supported and will not be taken into account during
-image encoding and decoding.
-
-:::
-
 ## High Resolution Image
 
 On platforms that have high-DPI support such as Apple Retina displays, you can
@@ -78,7 +71,7 @@ images/
 └── icon@3x.png
 ```
 
-```js
+```javascript
 const { Tray } = require('electron')
 const appIcon = new Tray('/Users/somebody/images/icon.png')
 console.log(appIcon)
@@ -145,7 +138,7 @@ Creates a new `NativeImage` instance from a file located at `path`. This method
 returns an empty image if the `path` does not exist, cannot be read, or is not
 a valid image.
 
-```js
+```javascript
 const nativeImage = require('electron').nativeImage
 
 const image = nativeImage.createFromPath('/Users/somebody/images/icon.png')

docs/api/net-log.md

@@ -4,7 +4,7 @@
 
 Process: [Main](../glossary.md#main-process)
 
-```js
+```javascript
 const { app, netLog } = require('electron')
 
 app.whenReady().then(async () => {

docs/api/net.md

@@ -2,7 +2,7 @@
 
 > Issue HTTP/HTTPS requests using Chromium's native networking library
 
-Process: [Main](../glossary.md#main-process), [Utility](../glossary.md#utility-process)
+Process: [Main](../glossary.md#main-process)
 
 The `net` module is a client-side API for issuing HTTP(S) requests. It is
 similar to the [HTTP](https://nodejs.org/api/http.html) and
@@ -26,7 +26,7 @@ Node.js.
 
 Example usage:
 
-```js
+```javascript
 const { app } = require('electron')
 app.whenReady().then(() => {
   const { net } = require('electron')
@@ -119,9 +119,6 @@ protocol.handle('https', (req) => {
 })
 ```
 
-Note: in the [utility process](../glossary.md#utility-process) custom protocols
-are not supported.
-
 ### `net.isOnline()`
 
 Returns `boolean` - Whether there is currently internet connection.

docs/api/power-save-blocker.md

@@ -6,7 +6,7 @@ Process: [Main](../glossary.md#main-process)
 
 For example:
 
-```js
+```javascript
 const { powerSaveBlocker } = require('electron')
 
 const id = powerSaveBlocker.start('prevent-display-sleep')

docs/api/protocol.md

@@ -7,7 +7,7 @@ Process: [Main](../glossary.md#main-process)
 An example of implementing a protocol that has the same effect as the
 `file://` protocol:
 
-```js
+```javascript
 const { app, protocol, net } = require('electron')
 
 app.whenReady().then(() => {
@@ -31,7 +31,7 @@ a different session and your custom protocol will not work if you just use
 To have your custom protocol work in combination with a custom session, you need
 to register it to that session explicitly.
 
-```js
+```javascript
 const { app, BrowserWindow, net, protocol, session } = require('electron')
 const path = require('node:path')
 const url = require('url')
@@ -61,14 +61,13 @@ The `protocol` module has the following methods:
 module gets emitted and can be called only once.
 
 Registers the `scheme` as standard, secure, bypasses content security policy for
-resources, allows registering ServiceWorker, supports fetch API, streaming
-video/audio, and V8 code cache. Specify a privilege with the value of `true` to
-enable the capability.
+resources, allows registering ServiceWorker, supports fetch API, and streaming
+video/audio. Specify a privilege with the value of `true` to enable the capability.
 
 An example of registering a privileged scheme, that bypasses Content Security
 Policy:
 
-```js
+```javascript
 const { protocol } = require('electron')
 protocol.registerSchemesAsPrivileged([
   { scheme: 'foo', privileges: { bypassCSP: true } }
@@ -213,7 +212,7 @@ property.
 
 Example:
 
-```js
+```javascript
 protocol.registerBufferProtocol('atom', (request, callback) => {
   callback({ mimeType: 'text/html', data: Buffer.from('<h5>Response</h5>') })
 })
@@ -268,7 +267,7 @@ has the `data` property.
 
 Example:
 
-```js
+```javascript
 const { protocol } = require('electron')
 const { PassThrough } = require('stream')
 
@@ -293,7 +292,7 @@ protocol.registerStreamProtocol('atom', (request, callback) => {
 It is possible to pass any object that implements the readable stream API (emits
 `data`/`end`/`error` events). For example, here's how a file could be returned:
 
-```js
+```javascript
 protocol.registerStreamProtocol('atom', (request, callback) => {
   callback(fs.createReadStream('index.html'))
 })

docs/api/push-notifications.md

@@ -6,7 +6,7 @@ Process: [Main](../glossary.md#main-process)
 
 For example, when registering for push notifications via Apple push notification services (APNS):
 
-```js
+```javascript
 const { pushNotifications, Notification } = require('electron')
 
 pushNotifications.registerForAPNSNotifications().then((token) => {

docs/api/screen.md

@@ -14,29 +14,20 @@ property, so writing `let { screen } = require('electron')` will not work.
 
 An example of creating a window that fills the whole screen:
 
-```fiddle docs/fiddles/screen/fit-screen
-// Retrieve information about screen size, displays, cursor position, etc.
-//
-// For more info, see:
-// https://www.electronjs.org/docs/latest/api/screen
-
-const { app, BrowserWindow, screen } = require('electron/main')
-
-let mainWindow = null
+```javascript fiddle='docs/fiddles/screen/fit-screen'
+const { app, BrowserWindow, screen } = require('electron')
 
+let win
 app.whenReady().then(() => {
-  // Create a window that fills the screen's available work area.
-  const primaryDisplay = screen.getPrimaryDisplay()
-  const { width, height } = primaryDisplay.workAreaSize
-
-  mainWindow = new BrowserWindow({ width, height })
-  mainWindow.loadURL('https://electronjs.org')
+  const { width, height } = screen.getPrimaryDisplay().workAreaSize
+  win = new BrowserWindow({ width, height })
+  win.loadURL('https://github.com')
 })
 ```
 
 Another example of creating a window in the external display:
 
-```js
+```javascript
 const { app, BrowserWindow, screen } = require('electron')
 
 let win

docs/api/service-workers.md

@@ -10,7 +10,7 @@ a `Session`.
 
 For example:
 
-```js
+```javascript
 const { session } = require('electron')
 
 // Get all service workers.

docs/api/session.md

@@ -9,7 +9,7 @@ The `session` module can be used to create new `Session` objects.
 You can also access the `session` of existing pages by using the `session`
 property of [`WebContents`](web-contents.md), or from the `session` module.
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 
 const win = new BrowserWindow({ width: 800, height: 600 })
@@ -75,7 +75,7 @@ _This class is not exported from the `'electron'` module. It is only available a
 
 You can create a `Session` object in the `session` module:
 
-```js
+```javascript
 const { session } = require('electron')
 const ses = session.fromPartition('persist:name')
 console.log(ses.getUserAgent())
@@ -98,7 +98,7 @@ Emitted when Electron is about to download `item` in `webContents`.
 Calling `event.preventDefault()` will cancel the download and `item` will not be
 available from next tick of the process.
 
-```js @ts-expect-error=[4]
+```javascript @ts-expect-error=[4]
 const { session } = require('electron')
 session.defaultSession.on('will-download', (event, item, webContents) => {
   event.preventDefault()
@@ -214,7 +214,7 @@ cancel the request.  Additionally, permissioning on `navigator.hid` can
 be further managed by using [`ses.setPermissionCheckHandler(handler)`](#sessetpermissioncheckhandlerhandler)
 and [`ses.setDevicePermissionHandler(handler)`](#sessetdevicepermissionhandlerhandler).
 
-```js @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)}
+```javascript @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)}
 const { app, BrowserWindow } = require('electron')
 
 let win = null
@@ -266,7 +266,7 @@ Returns:
 
 * `event` Event
 * `details` Object
-  * `device` [HIDDevice](structures/hid-device.md)
+  * `device` [HIDDevice[]](structures/hid-device.md)
   * `frame` [WebFrameMain](web-frame-main.md)
 
 Emitted after `navigator.hid.requestDevice` has been called and
@@ -281,7 +281,7 @@ Returns:
 
 * `event` Event
 * `details` Object
-  * `device` [HIDDevice](structures/hid-device.md)
+  * `device` [HIDDevice[]](structures/hid-device.md)
   * `frame` [WebFrameMain](web-frame-main.md)
 
 Emitted after `navigator.hid.requestDevice` has been called and
@@ -296,7 +296,7 @@ Returns:
 
 * `event` Event
 * `details` Object
-  * `device` [HIDDevice](structures/hid-device.md)
+  * `device` [HIDDevice[]](structures/hid-device.md)
   * `origin` string (optional) - The origin that the device has been revoked from.
 
 Emitted after `HIDDevice.forget()` has been called.  This event can be used
@@ -320,7 +320,7 @@ cancel the request.  Additionally, permissioning on `navigator.serial` can
 be managed by using [ses.setPermissionCheckHandler(handler)](#sessetpermissioncheckhandlerhandler)
 with the `serial` permission.
 
-```js @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)}
+```javascript @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)}
 const { app, BrowserWindow } = require('electron')
 
 let win = null
@@ -463,7 +463,7 @@ cancel the request.  Additionally, permissioning on `navigator.usb` can
 be further managed by using [`ses.setPermissionCheckHandler(handler)`](#sessetpermissioncheckhandlerhandler)
 and [`ses.setDevicePermissionHandler(handler)`](#sessetdevicepermissionhandlerhandler).
 
-```js @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)} @ts-type={updateGrantedDevices:(devices:Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)=>void}
+```javascript @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)} @ts-type={updateGrantedDevices:(devices:Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)=>void}
 const { app, BrowserWindow } = require('electron')
 
 let win = null
@@ -754,7 +754,7 @@ Sets download saving directory. By default, the download directory will be the
 
 Emulates network with the given configuration for the `session`.
 
-```js
+```javascript
 const win = new BrowserWindow()
 
 // To emulate a GPRS connection with 50kbps throughput and 500 ms latency.
@@ -868,7 +868,7 @@ calling `callback(-2)` rejects it.
 Calling `setCertificateVerifyProc(null)` will revert back to default certificate
 verify proc.
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 
@@ -901,7 +901,6 @@ win.webContents.session.setCertificateVerifyProc((request, callback) => {
     * `midiSysex` - Request the use of system exclusive messages in the [Web MIDI API](https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API).
     * `notifications` - Request notification creation and the ability to display them in the user's system tray using the [Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/notification)
     * `pointerLock` - Request to directly interpret mouse movements as an input method via the [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API). These requests always appear to originate from the main frame.
-    * `keyboardLock` - Request capture of keypresses for any or all of the keys on the physical keyboard via the [Keyboard Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Keyboard/lock). These requests always appear to originate from the main frame.
     * `openExternal` - Request to open links in external applications.
     * `window-management` - Request access to enumerate screens using the [`getScreenDetails`](https://developer.chrome.com/en/articles/multi-screen-window-placement/) API.
     * `unknown` - An unrecognized permission request.
@@ -921,7 +920,7 @@ To clear the handler, call `setPermissionRequestHandler(null)`.  Please note tha
 you must also implement `setPermissionCheckHandler` to get complete permission handling.
 Most web APIs do a permission check and then make a permission request if the check is denied.
 
-```js
+```javascript
 const { session } = require('electron')
 session.fromPartition('some-partition').setPermissionRequestHandler((webContents, permission, callback) => {
   if (webContents.getURL() === 'some-host' && permission === 'notifications') {
@@ -967,7 +966,7 @@ you must also implement `setPermissionRequestHandler` to get complete permission
 Most web APIs do a permission check and then make a permission request if the check is denied.
 To clear the handler, call `setPermissionCheckHandler(null)`.
 
-```js
+```javascript
 const { session } = require('electron')
 const url = require('url')
 session.fromPartition('some-partition').setPermissionCheckHandler((webContents, permission, requestingOrigin) => {
@@ -1012,7 +1011,7 @@ via the `navigator.mediaDevices.getDisplayMedia` API. Use the
 [desktopCapturer](desktop-capturer.md) API to choose which stream(s) to grant
 access to.
 
-```js
+```javascript
 const { session, desktopCapturer } = require('electron')
 
 session.defaultSession.setDisplayMediaRequestHandler((request, callback) => {
@@ -1026,7 +1025,7 @@ session.defaultSession.setDisplayMediaRequestHandler((request, callback) => {
 Passing a [WebFrameMain](web-frame-main.md) object as a video or audio stream
 will capture the video or audio stream from that frame.
 
-```js
+```javascript
 const { session } = require('electron')
 
 session.defaultSession.setDisplayMediaRequestHandler((request, callback) => {
@@ -1055,7 +1054,7 @@ Additionally, the default behavior of Electron is to store granted device permis
 If longer term storage is needed, a developer can store granted device
 permissions (eg when handling the `select-hid-device` event) and then read from that storage with `setDevicePermissionHandler`.
 
-```js @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)}
+```javascript @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)}
 const { app, BrowserWindow } = require('electron')
 
 let win = null
@@ -1137,7 +1136,7 @@ The return value for the handler is a string array of USB classes which should b
 Returning an empty string array from the handler will allow all USB classes; returning the passed in array will maintain the default list of protected USB classes (this is also the default behavior if a handler is not defined).
 To clear the handler, call `setUSBProtectedClassesHandler(null)`.
 
-```js
+```javascript
 const { app, BrowserWindow } = require('electron')
 
 let win = null
@@ -1192,7 +1191,7 @@ that requires additional validation will be automatically cancelled.
 macOS does not require a handler because macOS handles the pairing
 automatically.  To clear the handler, call `setBluetoothPairingHandler(null)`.
 
-```js
+```javascript
 const { app, BrowserWindow, session } = require('electron')
 const path = require('node:path')
 
@@ -1238,7 +1237,7 @@ Clears the host resolver cache.
 Dynamically sets whether to always send credentials for HTTP NTLM or Negotiate
 authentication.
 
-```js
+```javascript
 const { session } = require('electron')
 // consider any url ending with `example.com`, `foobar.com`, `baz`
 // for integrated authentication.
@@ -1356,10 +1355,6 @@ registered.
 Sets the directory to store the generated JS [code cache](https://v8.dev/blog/code-caching-for-devs) for this session. The directory is not required to be created by the user before this call, the runtime will create if it does not exist otherwise will use the existing directory. If directory cannot be created, then code cache will not be used and all operations related to code cache will fail silently inside the runtime. By default, the directory will be `Code Cache` under the
 respective user data folder.
 
-Note that by default code cache is only enabled for http(s) URLs, to enable code
-cache for custom protocols, `codeCache: true` and `standard: true` must be
-specified when registering the protocol.
-
 #### `ses.clearCodeCaches(options)`
 
 * `options` Object
@@ -1547,7 +1542,7 @@ A [`WebRequest`](web-request.md) object for this session.
 
 A [`Protocol`](protocol.md) object for this session.
 
-```js
+```javascript
 const { app, session } = require('electron')
 const path = require('node:path')
 
@@ -1566,7 +1561,7 @@ app.whenReady().then(() => {
 
 A [`NetLog`](net-log.md) object for this session.
 
-```js
+```javascript
 const { app, session } = require('electron')
 
 app.whenReady().then(async () => {

docs/api/shell.md

@@ -8,7 +8,7 @@ The `shell` module provides functions related to desktop integration.
 
 An example of opening a URL in the user's default browser:
 
-```js
+```javascript
 const { shell } = require('electron')
 
 shell.openExternal('https://github.com')

docs/api/structures/custom-scheme.md

@@ -9,5 +9,3 @@
   * `supportFetchAPI` boolean (optional) - Default false.
   * `corsEnabled` boolean (optional) - Default false.
   * `stream` boolean (optional) - Default false.
-  * `codeCache` boolean (optional) - Enable V8 code cache for the scheme, only
-    works when `standard` is also set to true. Default false.

docs/api/structures/display.md

@@ -1,25 +1,22 @@
 # Display Object
 
-* `accelerometerSupport` string - Can be `available`, `unavailable`, `unknown`.
-* `bounds` [Rectangle](rectangle.md) - the bounds of the display in DIP points.
-* `colorDepth` number - The number of bits per pixel.
-* `colorSpace` string -  represent a color space (three-dimensional object which contains all realizable color combinations) for the purpose of color conversions.
-* `depthPerComponent` number - The number of bits per color component.
-* `detected` boolean - `true`` if the display is detected by the system.
-* `displayFrequency` number - The display refresh rate.
-* `id` number - Unique identifier associated with the display. A value of of -1 means the display is invalid or the correct `id` is not yet known, and a value of -10 means the display is a virtual display assigned to a unified desktop.
-* `internal` boolean - `true` for an internal display and `false` for an external display.
+* `id` number - Unique identifier associated with the display.
 * `label` string - User-friendly label, determined by the platform.
-* `maximumCursorSize` [Size](size.md) - Maximum cursor size in native pixels.
-* `nativeOrigin` [Point](point.md) - Returns the display's origin in pixel coordinates. Only available on windowing systems like X11 that position displays in pixel coordinates.
 * `rotation` number - Can be 0, 90, 180, 270, represents screen rotation in
   clock-wise degrees.
 * `scaleFactor` number - Output device's pixel scale factor.
 * `touchSupport` string - Can be `available`, `unavailable`, `unknown`.
 * `monochrome` boolean - Whether or not the display is a monochrome display.
+* `accelerometerSupport` string - Can be `available`, `unavailable`, `unknown`.
+* `colorSpace` string -  represent a color space (three-dimensional object which contains all realizable color combinations) for the purpose of color conversions
+* `colorDepth` number - The number of bits per pixel.
+* `depthPerComponent` number - The number of bits per color component.
+* `displayFrequency` number - The display refresh rate.
+* `bounds` [Rectangle](rectangle.md) - the bounds of the display in DIP points.
 * `size` [Size](size.md)
 * `workArea` [Rectangle](rectangle.md) - the work area of the display in DIP points.
-* `workAreaSize` [Size](size.md) - The size of the work area.
+* `workAreaSize` [Size](size.md)
+* `internal` boolean - `true` for an internal display and `false` for an external display
 
 The `Display` object represents a physical display connected to the system. A
 fake `Display` may exist on a headless system, or a `Display` may correspond to

docs/api/structures/printer-info.md

@@ -14,7 +14,7 @@ The number represented by `status` means different things on different platforms
 Below is an example of some of the additional options that may be set which
 may be different on each platform.
 
-```js
+```javascript
 {
   name: 'Austin_4th_Floor_Printer___C02XK13BJHD4',
   displayName: 'Austin 4th Floor Printer @ C02XK13BJHD4',

docs/api/system-preferences.md

@@ -4,7 +4,7 @@
 
 Process: [Main](../glossary.md#main-process)
 
-```js
+```javascript
 const { systemPreferences } = require('electron')
 console.log(systemPreferences.isAeroGlassEnabled())
 ```
@@ -189,7 +189,7 @@ enabled, and `false` otherwise.
 An example of using it to determine if you should create a transparent window or
 not (transparent windows won't work correctly when DWM composition is disabled):
 
-```js
+```javascript
 const { BrowserWindow, systemPreferences } = require('electron')
 const browserOptions = { width: 1000, height: 800 }
 
@@ -348,7 +348,7 @@ Returns `boolean` - whether or not this device has the ability to use Touch ID.
 
 Returns `Promise<void>` - resolves if the user has successfully authenticated with Touch ID.
 
-```js
+```javascript
 const { systemPreferences } = require('electron')
 
 systemPreferences.promptTouchID('To get consent for a Security-Gated Thing').then(success => {

docs/api/touch-bar.md

@@ -79,7 +79,7 @@ immediately updates the escape item in the touch bar.
 Below is an example of a simple slot machine touch bar game with a button
 and some labels.
 
-```js
+```javascript
 const { app, BrowserWindow, TouchBar } = require('electron')
 
 const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar

docs/api/tray.md

@@ -8,7 +8,7 @@ Process: [Main](../glossary.md#main-process)
 
 `Tray` is an [EventEmitter][event-emitter].
 
-```js
+```javascript
 const { app, Menu, Tray } = require('electron')
 
 let tray = null
@@ -39,7 +39,7 @@ app.whenReady().then(() => {
 * In order for changes made to individual `MenuItem`s to take effect,
   you have to call `setContextMenu` again. For example:
 
-```js
+```javascript
 const { app, Menu, Tray } = require('electron')
 
 let appIcon = null

docs/api/web-contents.md

@@ -9,7 +9,7 @@ It is responsible for rendering and controlling a web page and is a property of
 the [`BrowserWindow`](browser-window.md) object. An example of accessing the
 `webContents` object:
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 
 const win = new BrowserWindow({ width: 800, height: 1500 })
@@ -53,7 +53,7 @@ If you want to also observe navigations in `<iframe>`s, use [`will-frame-navigat
 
 These methods can be accessed from the `webContents` module:
 
-```js
+```javascript
 const { webContents } = require('electron')
 console.log(webContents)
 ```
@@ -439,7 +439,7 @@ Emitted when a `beforeunload` event handler is attempting to cancel a page unloa
 Calling `event.preventDefault()` will ignore the `beforeunload` event handler
 and allow the page to be unloaded.
 
-```js
+```javascript
 const { BrowserWindow, dialog } = require('electron')
 const win = new BrowserWindow({ width: 800, height: 600 })
 win.webContents.on('will-prevent-unload', (event) => {
@@ -460,20 +460,6 @@ win.webContents.on('will-prevent-unload', (event) => {
 
 **Note:** This will be emitted for `BrowserViews` but will _not_ be respected - this is because we have chosen not to tie the `BrowserView` lifecycle to its owning BrowserWindow should one exist per the [specification](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event).
 
-#### Event: 'crashed' _Deprecated_
-
-Returns:
-
-* `event` Event
-* `killed` boolean
-
-Emitted when the renderer process crashes or is killed.
-
-**Deprecated:** This event is superceded by the `render-process-gone` event
-which contains more information about why the render process disappeared. It
-isn't always because it crashed.  The `killed` boolean can be replaced by
-checking `reason === 'killed'` when you switch to that event.
-
 #### Event: 'render-process-gone'
 
 Returns:
@@ -541,7 +527,7 @@ and the menu shortcuts.
 To only prevent the menu shortcuts, use
 [`setIgnoreMenuShortcuts`](#contentssetignoremenushortcutsignore):
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 
 const win = new BrowserWindow({ width: 800, height: 600 })
@@ -851,7 +837,7 @@ Due to the nature of bluetooth, scanning for devices when
 `select-bluetooth-device` to fire multiple times until `callback` is called
 with either a device id or an empty string to cancel the request.
 
-```js title='main.js'
+```javascript title='main.js'
 const { app, BrowserWindow } = require('electron')
 
 let win = null
@@ -886,7 +872,7 @@ Returns:
 Emitted when a new frame is generated. Only the dirty area is passed in the
 buffer.
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 
 const win = new BrowserWindow({ webPreferences: { offscreen: true } })
@@ -1018,7 +1004,7 @@ Loads the `url` in the window. The `url` must contain the protocol prefix,
 e.g. the `http://` or `file://`. If the load should bypass http cache then
 use the `pragma` header to achieve it.
 
-```js
+```javascript
 const win = new BrowserWindow()
 const options = { extraHeaders: 'pragma: no-cache\n' }
 win.webContents.loadURL('https://github.com', options)
@@ -1068,7 +1054,7 @@ Initiates a download of the resource at `url` without navigating. The
 
 Returns `string` - The URL of the current web page.
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({ width: 800, height: 600 })
 win.loadURL('https://github.com').then(() => {
@@ -1517,7 +1503,7 @@ can be obtained by subscribing to [`found-in-page`](web-contents.md#event-found-
 
 Stops any `findInPage` request for the `webContents` with the provided `action`.
 
-```js
+```javascript
 const win = new BrowserWindow()
 win.webContents.on('found-in-page', (event, result) => {
   if (result.finalUpdate) win.webContents.stopFindInPage('clearSelection')
@@ -1637,7 +1623,7 @@ The `landscape` will be ignored if `@page` CSS at-rule is used in the web page.
 
 An example of `webContents.printToPDF`:
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 const fs = require('node:fs')
 const path = require('node:path')
@@ -1669,7 +1655,7 @@ See [Page.printToPdf](https://chromedevtools.github.io/devtools-protocol/tot/Pag
 Adds the specified path to DevTools workspace. Must be used after DevTools
 creation:
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 win.webContents.on('devtools-opened', () => {
@@ -1992,7 +1978,7 @@ the cursor when dragging.
 
 Returns `Promise<void>` - resolves if the page is saved.
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 

docs/api/web-frame-main.md

@@ -8,7 +8,7 @@ The `webFrameMain` module can be used to lookup frames across existing
 [`WebContents`](web-contents.md) instances. Navigation events are the common
 use case.
 
-```js
+```javascript
 const { BrowserWindow, webFrameMain } = require('electron')
 
 const win = new BrowserWindow({ width: 800, height: 1500 })
@@ -29,7 +29,7 @@ win.webContents.on(
 You can also access frames of existing pages by using the `mainFrame` property
 of [`WebContents`](web-contents.md).
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 
 async function main () {

docs/api/web-frame.md

@@ -10,7 +10,7 @@ certain properties and methods (e.g. `webFrame.firstChild`).
 
 An example of zooming current page to 200%.
 
-```js
+```javascript
 const { webFrame } = require('electron')
 
 webFrame.setZoomFactor(2)
@@ -96,7 +96,7 @@ with an array of misspelt words when complete.
 
 An example of using [node-spellchecker][spellchecker] as provider:
 
-```js @ts-expect-error=[2,6]
+```javascript @ts-expect-error=[2,6]
 const { webFrame } = require('electron')
 const spellChecker = require('spellchecker')
 webFrame.setSpellCheckProvider('en-US', {
@@ -205,14 +205,14 @@ Returns `Object`:
 Returns an object describing usage information of Blink's internal memory
 caches.
 
-```js
+```javascript
 const { webFrame } = require('electron')
 console.log(webFrame.getResourceUsage())
 ```
 
 This will generate:
 
-```js
+```javascript
 {
   images: {
     count: 22,

docs/api/web-request.md

@@ -23,7 +23,7 @@ called with a `response` object when `listener` has done its work.
 
 An example of adding `User-Agent` header for requests:
 
-```js
+```javascript
 const { session } = require('electron')
 
 // Modify the user agent for all requests to the following urls.

docs/api/webview-tag.md

@@ -255,7 +255,7 @@ The `webview` tag has the following methods:
 
 **Example**
 
-```js @ts-expect-error=[3]
+```javascript @ts-expect-error=[3]
 const webview = document.querySelector('webview')
 webview.addEventListener('dom-ready', () => {
   webview.openDevTools()
@@ -802,7 +802,7 @@ Fired when the guest window logs a console message.
 The following example code forwards all log messages to the embedder's console
 without regard for log level or other properties.
 
-```js @ts-expect-error=[3]
+```javascript @ts-expect-error=[3]
 const webview = document.querySelector('webview')
 webview.addEventListener('console-message', (e) => {
   console.log('Guest page logged a message:', e.message)
@@ -823,7 +823,7 @@ Returns:
 Fired when a result is available for
 [`webview.findInPage`](#webviewfindinpagetext-options) request.
 
-```js @ts-expect-error=[3,6]
+```javascript @ts-expect-error=[3,6]
 const webview = document.querySelector('webview')
 webview.addEventListener('found-in-page', (e) => {
   webview.stopFindInPage('keepSelection')
@@ -948,7 +948,7 @@ Fired when the guest page attempts to close itself.
 The following example code navigates the `webview` to `about:blank` when the
 guest attempts to close itself.
 
-```js @ts-expect-error=[3]
+```javascript @ts-expect-error=[3]
 const webview = document.querySelector('webview')
 webview.addEventListener('close', () => {
   webview.src = 'about:blank'
@@ -968,7 +968,7 @@ Fired when the guest page has sent an asynchronous message to embedder page.
 With `sendToHost` method and `ipc-message` event you can communicate
 between guest page and embedder page:
 
-```js @ts-expect-error=[4,7]
+```javascript @ts-expect-error=[4,7]
 // In embedder page.
 const webview = document.querySelector('webview')
 webview.addEventListener('ipc-message', (event) => {
@@ -978,7 +978,7 @@ webview.addEventListener('ipc-message', (event) => {
 webview.send('ping')
 ```
 
-```js
+```javascript
 // In guest page.
 const { ipcRenderer } = require('electron')
 ipcRenderer.on('ping', () => {
@@ -986,14 +986,6 @@ ipcRenderer.on('ping', () => {
 })
 ```
 
-### Event: 'crashed' _Deprecated_
-
-Fired when the renderer process crashes or is killed.
-
-**Deprecated:** This event is superceded by the `render-process-gone` event
-which contains more information about why the render process disappeared. It
-isn't always because it crashed.
-
 ### Event: 'render-process-gone'
 
 Returns:

docs/api/window-open.md

@@ -80,7 +80,7 @@ window will not close when the opener window closes. The default value is `false
 
 ### Native `Window` example
 
-```js
+```javascript
 // main.js
 const mainWindow = new BrowserWindow()
 
@@ -104,7 +104,7 @@ mainWindow.webContents.setWindowOpenHandler(({ url }) => {
 })
 ```
 
-```js
+```javascript
 // renderer process (mainWindow)
 const childWindow = window.open('', 'modal')
 childWindow.document.write('<h1>Hello</h1>')

docs/breaking-changes.md

@@ -12,6 +12,62 @@ This document uses the following convention to categorize breaking changes:
 * **Deprecated:** An API was marked as deprecated. The API will continue to function, but will emit a deprecation warning, and will be removed in a future release.
 * **Removed:** An API or feature was removed, and is no longer supported by Electron.
 
+## Planned Breaking API Changes (29.0)
+
+### Behavior Changed: `ipcRenderer` can no longer be sent over the `contextBridge`
+
+Attempting to send `ipcRenderer` as an object over the `contextBridge` will now result in
+an empty object on the receiving side of the bridge. This change was made to remove / mitigate
+a security footgun, you should not directly expose ipcRenderer or it's methods over the bridge.
+Instead provide a safe wrapper like below:
+
+```js
+contextBridge.exposeInMainWorld('app', {
+  onEvent: (cb) => ipcRenderer.on('foo', (e, ...args) => cb(args))
+})
+```
+
+### Removed: `renderer-process-crashed` event on `app`
+
+The `renderer-process-crashed` event on `app` has been removed.
+Use the new `render-process-gone` event instead.
+
+```js
+// Removed
+app.on('renderer-process-crashed', (event, webContents, killed) => { /* ... */ })
+
+// Replace with
+app.on('render-process-gone', (event, webContents, details) => { /* ... */ })
+```
+
+### Removed: `crashed` event on `WebContents` and `<webview>`
+
+The `crashed` events on `WebContents` and `<webview>` have been removed.
+Use the new `render-process-gone` event instead.
+
+```js
+// Removed
+win.webContents.on('crashed', (event, killed) => { /* ... */ })
+webview.addEventListener('crashed', (event) => { /* ... */ })
+
+// Replace with
+win.webContents.on('render-process-gone', (event, details) => { /* ... */ })
+webview.addEventListener('render-process-gone', (event) => { /* ... */ })
+```
+
+### Removed: `gpu-process-crashed` event on `app`
+
+The `gpu-process-crashed` event on `app` has been removed.
+Use the new `child-process-gone` event instead.
+
+```js
+// Removed
+app.on('gpu-process-crashed', (event, killed) => { /* ... */ })
+
+// Replace with
+app.on('child-process-gone', (event, details) => { /* ... */ })
+```
+
 ## Planned Breaking API Changes (28.0)
 
 ### Behavior Changed: `WebContents.backgroundThrottling` set to false affects all `WebContents` in the host `BrowserWindow`
@@ -155,18 +211,6 @@ systemPreferences.on('high-contrast-color-scheme-changed', () => { /* ... */ })
 nativeTheme.on('updated', () => { /* ... */ })
 ```
 
-### Removed: Some `window.setVibrancy` options on macOS
-
-The following vibrancy options have been removed:
-
-* 'light'
-* 'medium-light'
-* 'dark'
-* 'ultra-dark'
-* 'appearance-based'
-
-These were previously deprecated and have been removed by Apple in 10.15.
-
 ### Removed: `webContents.getPrinters`
 
 The `webContents.getPrinters` method has been removed. Use
@@ -546,7 +590,7 @@ The `new-window` event of `<webview>` has been removed. There is no direct repla
 webview.addEventListener('new-window', (event) => {})
 ```
 
-```js
+```javascript fiddle='docs/fiddles/ipc/webview-new-window'
 // Replace with
 
 // main.js
@@ -1211,7 +1255,7 @@ module](https://medium.com/@nornagon/electrons-remote-module-considered-harmful-
 
 The APIs are now synchronous and the optional callback is no longer needed.
 
-```js
+```javascript
 // Deprecated
 protocol.unregisterProtocol(scheme, () => { /* ... */ })
 // Replace with
@@ -1240,7 +1284,7 @@ protocol.unregisterProtocol(scheme)
 
 The APIs are now synchronous and the optional callback is no longer needed.
 
-```js
+```javascript
 // Deprecated
 protocol.registerFileProtocol(scheme, handler, () => { /* ... */ })
 // Replace with
@@ -1255,7 +1299,7 @@ until navigation happens.
 This API is deprecated and users should use `protocol.isProtocolRegistered`
 and `protocol.isProtocolIntercepted` instead.
 
-```js
+```javascript
 // Deprecated
 protocol.isProtocolHandled(scheme).then(() => { /* ... */ })
 // Replace with

docs/development/creating-api.md

@@ -164,7 +164,7 @@ An example of the contents of this file can be found [here](https://github.com/e
 
 Add your module to the module list found at `"lib/browser/api/module-list.ts"` like so:
 
-```ts title='lib/browser/api/module-list.ts' @ts-nocheck
+```typescript title='lib/browser/api/module-list.ts' @ts-nocheck
 export const browserModuleList: ElectronInternal.ModuleEntry[] = [
   { name: 'apiName', loader: () => require('./api-name') },
 ];

docs/faq.md

@@ -65,7 +65,7 @@ If you encounter this problem, the following articles may prove helpful:
 If you want a quick fix, you can make the variables global by changing your
 code from this:
 
-```js
+```javascript
 const { app, Tray } = require('electron')
 app.whenReady().then(() => {
   const tray = new Tray('/path/to/icon.png')
@@ -75,7 +75,7 @@ app.whenReady().then(() => {
 
 to this:
 
-```js
+```javascript
 const { app, Tray } = require('electron')
 let tray = null
 app.whenReady().then(() => {
@@ -92,7 +92,7 @@ for some libraries since they want to insert the symbols with the same names.
 
 To solve this, you can turn off node integration in Electron:
 
-```js
+```javascript
 // In the main process.
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({
@@ -141,7 +141,7 @@ Sub-pixel anti-aliasing needs a non-transparent background of the layer containi
 
 To achieve this goal, set the background in the constructor for [BrowserWindow][browser-window]:
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({
   backgroundColor: '#fff'

docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/index.html

@@ -44,7 +44,7 @@
   <h3>Packaging</h3>
   <p>This feature will only work on macOS when your app is packaged. It will not work when you're launching it in
     development from the command-line. When you package your app you'll need to make sure the macOS <code>plist</code>
-    for the app is updated to include the new protocol handler. If you're using <code>@electron/packager</code> then you
+    for the app is updated to include the new protocol handler. If you're using <code>electron-packager</code> then you
     can add the flag <code>--extend-info</code> with a path to the <code>plist</code> you've created. The one for this
     app is below:</p>
 

docs/tutorial/application-debugging.md

@@ -12,7 +12,7 @@ including instances of `BrowserWindow`, `BrowserView`, and `WebView`. You
 can open them programmatically by calling the `openDevTools()` API on the
 `webContents` of the instance:
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 
 const win = new BrowserWindow()

docs/tutorial/asar-archives.md

@@ -41,27 +41,27 @@ $ asar list /path/to/example.asar
 
 Read a file in the ASAR archive:
 
-```js
+```javascript
 const fs = require('node:fs')
 fs.readFileSync('/path/to/example.asar/file.txt')
 ```
 
 List all files under the root of the archive:
 
-```js
+```javascript
 const fs = require('node:fs')
 fs.readdirSync('/path/to/example.asar')
 ```
 
 Use a module from the archive:
 
-```js @ts-nocheck
+```javascript @ts-nocheck
 require('./path/to/example.asar/dir/module.js')
 ```
 
 You can also display a web page in an ASAR archive with `BrowserWindow`:
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 
@@ -90,7 +90,7 @@ For some cases like verifying the ASAR archive's checksum, we need to read the
 content of an ASAR archive as a file. For this purpose you can use the built-in
 `original-fs` module which provides original `fs` APIs without `asar` support:
 
-```js
+```javascript
 const originalFs = require('original-fs')
 originalFs.readFileSync('/path/to/example.asar')
 ```
@@ -98,7 +98,7 @@ originalFs.readFileSync('/path/to/example.asar')
 You can also set `process.noAsar` to `true` to disable the support for `asar` in
 the `fs` module:
 
-```js
+```javascript
 const fs = require('node:fs')
 process.noAsar = true
 fs.readFileSync('/path/to/example.asar')

docs/tutorial/asar-integrity.md

@@ -13,7 +13,7 @@ Currently ASAR integrity checking is only supported on macOS.
 
 ### Electron Forge / Electron Packager
 
-If you are using `>= @electron/packager`, `>= electron-packager@15.4.0` or `>= @electron-forge/core@6.0.0-beta.61` then all these requirements are met for you automatically and you can skip to [Toggling the Fuse](#toggling-the-fuse).
+If you are using `>= electron-packager@15.4.0` or `>= @electron-forge/core@6.0.0-beta.61` then all these requirements are met for you automatically and you can skip to [Toggling the Fuse](#toggling-the-fuse).
 
 ### Other build systems
 

docs/tutorial/automated-testing.md

@@ -196,19 +196,32 @@ support via Electron's support for the [Chrome DevTools Protocol][] (CDP).
 
 ### Install dependencies
 
-You can install Playwright through your preferred Node.js package manager. It comes with its
-own [test runner][playwright-intro], which is built for end-to-end testing:
+You can install Playwright through your preferred Node.js package manager. The Playwright team
+recommends using the `PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD` environment variable to avoid
+unnecessary browser downloads when testing an Electron app.
+
+```sh npm2yarn
+PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm install --save-dev playwright
+```
+
+Playwright also comes with its own test runner, Playwright Test, which is built for end-to-end
+testing. You can also install it as a dev dependency in your project:
 
 ```sh npm2yarn
 npm install --save-dev @playwright/test
 ```
 
 :::caution Dependencies
-This tutorial was written with `@playwright/test@1.41.1`. Check out
+This tutorial was written `playwright@1.16.3` and `@playwright/test@1.16.3`. Check out
 [Playwright's releases][playwright-releases] page to learn about
 changes that might affect the code below.
 :::
 
+:::info Using third-party test runners
+If you're interested in using an alternative test runner (e.g. Jest or Mocha), check out
+Playwright's [Third-Party Test Runner][playwright-test-runners] guide.
+:::
+
 ### Write your tests
 
 Playwright launches your app in development mode through the `_electron.launch` API.
@@ -216,7 +229,8 @@ To point this API to your Electron app, you can pass the path to your main proce
 entry point (here, it is `main.js`).
 
 ```js {5} @ts-nocheck
-const { test, _electron: electron } = require('@playwright/test')
+const { _electron: electron } = require('playwright')
+const { test } = require('@playwright/test')
 
 test('launch app', async () => {
   const electronApp = await electron.launch({ args: ['main.js'] })
@@ -228,8 +242,9 @@ test('launch app', async () => {
 After that, you will access to an instance of Playwright's `ElectronApp` class. This
 is a powerful class that has access to main process modules for example:
 
-```js {5-10} @ts-nocheck
-const { test, _electron: electron } = require('@playwright/test')
+```js {6-11} @ts-nocheck
+const { _electron: electron } = require('playwright')
+const { test } = require('@playwright/test')
 
 test('get isPackaged', async () => {
   const electronApp = await electron.launch({ args: ['main.js'] })
@@ -248,7 +263,8 @@ It can also create individual [Page][playwright-page] objects from Electron Brow
 For example, to grab the first BrowserWindow and save a screenshot:
 
 ```js {6-7} @ts-nocheck
-const { test, _electron: electron } = require('@playwright/test')
+const { _electron: electron } = require('playwright')
+const { test } = require('@playwright/test')
 
 test('save screenshot', async () => {
   const electronApp = await electron.launch({ args: ['main.js'] })
@@ -259,11 +275,12 @@ test('save screenshot', async () => {
 })
 ```
 
-Putting all this together using the Playwright test-runner, let's create a `example.spec.js`
+Putting all this together using the PlayWright Test runner, let's create a `example.spec.js`
 test file with a single test and assertion:
 
 ```js title='example.spec.js' @ts-nocheck
-const { test, expect, _electron: electron } = require('@playwright/test')
+const { _electron: electron } = require('playwright')
+const { test, expect } = require('@playwright/test')
 
 test('example test', async () => {
   const electronApp = await electron.launch({ args: ['.'] })
@@ -299,7 +316,6 @@ Running 1 test using 1 worker
 :::info
 Playwright Test will automatically run any files matching the `.*(test|spec)\.(js|ts|mjs)` regex.
 You can customize this match in the [Playwright Test configuration options][playwright-test-config].
-It also works with TypeScript out of the box.
 :::
 
 :::tip Further reading
@@ -457,10 +473,10 @@ test.after.always('cleanup', async t => {
 
 [chrome-driver]: https://sites.google.com/chromium.org/driver/
 [Puppeteer]: https://github.com/puppeteer/puppeteer
-[playwright-intro]: https://playwright.dev/docs/intro
 [playwright-electron]: https://playwright.dev/docs/api/class-electron/
 [playwright-electronapplication]: https://playwright.dev/docs/api/class-electronapplication
 [playwright-page]: https://playwright.dev/docs/api/class-page
-[playwright-releases]: https://playwright.dev/docs/release-notes
+[playwright-releases]: https://github.com/microsoft/playwright/releases
 [playwright-test-config]: https://playwright.dev/docs/api/class-testconfig#test-config-test-match
+[playwright-test-runners]: https://playwright.dev/docs/test-runners/
 [Chrome DevTools Protocol]: https://chromedevtools.github.io/devtools-protocol/

docs/tutorial/boilerplates-and-clis.md

@@ -30,7 +30,7 @@ Electron Forge is a tool for packaging and publishing Electron applications. It
 into a single extensible interface so that anyone can jump right into making Electron apps.
 
 Forge comes with [a ready-to-use template](https://electronforge.io/templates) using Webpack as a bundler. It includes an example typescript configuration and provides two configuration files to enable easy customization. It uses the same core modules used by the
-greater Electron community (like [`@electron/packager`](https://github.com/electron/packager)) –
+greater Electron community (like [`electron-packager`](https://github.com/electron/electron-packager)) –
 changes made by Electron maintainers (like Slack) benefit Forge's users, too.
 
 You can find more information and documentation on [electronforge.io](https://electronforge.io/).

docs/tutorial/code-signing.md

@@ -51,7 +51,7 @@ ways to get your application signed and notarized.
 
 If you're using Electron's favorite build tool, getting your application signed
 and notarized requires a few additions to your configuration. [Forge](https://electronforge.io) is a
-collection of the official Electron tools, using [`@electron/packager`][],
+collection of the official Electron tools, using [`electron-packager`][],
 [`@electron/osx-sign`][], and [`@electron/notarize`][] under the hood.
 
 Detailed instructions on how to configure your application can be found in the
@@ -61,14 +61,14 @@ the Electron Forge docs.
 ### Using Electron Packager
 
 If you're not using an integrated build pipeline like Forge, you
-are likely using [`@electron/packager`][], which includes [`@electron/osx-sign`][] and
+are likely using [`electron-packager`][], which includes [`@electron/osx-sign`][] and
 [`@electron/notarize`][].
 
 If you're using Packager's API, you can pass [in configuration that both signs
-and notarizes your application](https://electron.github.io/packager/main/interfaces/electronpackager.options.html).
+and notarizes your application](https://electron.github.io/electron-packager/main/interfaces/electronpackager.options.html).
 
 ```js @ts-nocheck
-const packager = require('@electron/packager')
+const packager = require('electron-packager')
 
 packager({
   dir: '/path/to/my/app',
@@ -190,7 +190,7 @@ See the [Windows Store Guide][].
 
 [apple developer program]: https://developer.apple.com/programs/
 [`@electron/osx-sign`]: https://github.com/electron/osx-sign
-[`@electron/packager`]: https://github.com/electron/packager
+[`electron-packager`]: https://github.com/electron/electron-packager
 [`@electron/notarize`]: https://github.com/electron/notarize
 [`electron-winstaller`]: https://github.com/electron/windows-installer
 [`electron-wix-msi`]: https://github.com/electron-userland/electron-wix-msi

docs/tutorial/context-isolation.md

@@ -16,7 +16,7 @@ Context isolation has been enabled by default since Electron 12, and it is a rec
 
 Exposing APIs from your preload script to a loaded website in the renderer process is a common use-case. With context isolation disabled, your preload script would share a common global `window` object with the renderer. You could then attach arbitrary properties to a preload script:
 
-```js title='preload.js' @ts-nocheck
+```javascript title='preload.js' @ts-nocheck
 // preload with contextIsolation disabled
 window.myAPI = {
   doAThing: () => {}
@@ -25,7 +25,7 @@ window.myAPI = {
 
 The `doAThing()` function could then be used directly in the renderer process:
 
-```js title='renderer.js' @ts-nocheck
+```javascript title='renderer.js' @ts-nocheck
 // use the exposed API in the renderer
 window.myAPI.doAThing()
 ```
@@ -34,7 +34,7 @@ window.myAPI.doAThing()
 
 There is a dedicated module in Electron to help you do this in a painless way. The [`contextBridge`](../api/context-bridge.md) module can be used to **safely** expose APIs from your preload script's isolated context to the context the website is running in. The API will also be accessible from the website on `window.myAPI` just like it was before.
 
-```js title='preload.js'
+```javascript title='preload.js'
 // preload with contextIsolation enabled
 const { contextBridge } = require('electron')
 
@@ -43,7 +43,7 @@ contextBridge.exposeInMainWorld('myAPI', {
 })
 ```
 
-```js title='renderer.js' @ts-nocheck
+```javascript title='renderer.js' @ts-nocheck
 // use the exposed API in the renderer
 window.myAPI.doAThing()
 ```
@@ -54,7 +54,7 @@ Please read the `contextBridge` documentation linked above to fully understand i
 
 Just enabling `contextIsolation` and using `contextBridge` does not automatically mean that everything you do is safe. For instance, this code is **unsafe**.
 
-```js title='preload.js'
+```javascript title='preload.js'
 // ❌ Bad code
 contextBridge.exposeInMainWorld('myAPI', {
   send: ipcRenderer.send
@@ -63,7 +63,7 @@ contextBridge.exposeInMainWorld('myAPI', {
 
 It directly exposes a powerful API without any kind of argument filtering. This would allow any website to send arbitrary IPC messages, which you do not want to be possible. The correct way to expose IPC-based APIs would instead be to provide one method per IPC message.
 
-```js title='preload.js'
+```javascript title='preload.js'
 // ✅ Good code
 contextBridge.exposeInMainWorld('myAPI', {
   loadPreferences: () => ipcRenderer.invoke('load-prefs')
@@ -76,15 +76,15 @@ If you're building your Electron app with TypeScript, you'll want to add types t
 
 For example, given this `preload.ts` script:
 
-```ts title='preload.ts'
+```typescript title='preload.ts'
 contextBridge.exposeInMainWorld('electronAPI', {
   loadPreferences: () => ipcRenderer.invoke('load-prefs')
 })
 ```
 
-You can create a `renderer.d.ts` declaration file and globally augment the `Window` interface:
+You can create a `interface.d.ts` declaration file and globally augment the `Window` interface:
 
-```ts title='renderer.d.ts' @ts-noisolate
+```typescript title='interface.d.ts' @ts-noisolate
 export interface IElectronAPI {
   loadPreferences: () => Promise<void>,
 }
@@ -98,7 +98,7 @@ declare global {
 
 Doing so will ensure that the TypeScript compiler will know about the `electronAPI` property on your global `window` object when writing scripts in your renderer process:
 
-```ts title='renderer.ts'
+```typescript title='renderer.ts'
 window.electronAPI.loadPreferences()
 ```
 

docs/tutorial/dark-mode.md

@@ -50,7 +50,7 @@ of this theming, due to the use of the macOS 10.14 SDK.
 This example demonstrates an Electron application that derives its theme colors from the
 `nativeTheme`. Additionally, it provides theme toggle and reset controls using IPC channels.
 
-```fiddle docs/fiddles/features/dark-mode
+```javascript fiddle='docs/fiddles/features/dark-mode'
 
 ```
 
@@ -199,7 +199,7 @@ Run the example using Electron Fiddle and then click the "Toggle Dark Mode" butt
 
 [system-wide-dark-mode]: https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/
 [electron-forge]: https://www.electronforge.io/
-[electron-packager]: https://github.com/electron/packager
-[packager-darwindarkmode-api]: https://electron.github.io/packager/main/interfaces/electronpackager.options.html#darwindarkmodesupport
+[electron-packager]: https://github.com/electron/electron-packager
+[packager-darwindarkmode-api]: https://electron.github.io/electron-packager/main/interfaces/electronpackager.options.html#darwindarkmodesupport
 [prefers-color-scheme]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
 [event-listeners]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

docs/tutorial/debugging-main-process.md

@@ -14,10 +14,10 @@ process:
 
 Electron will listen for V8 inspector protocol messages on the specified `port`,
 an external debugger will need to connect on this port. The default `port` is
-`9229`.
+`5858`.
 
 ```shell
-electron --inspect=9229 your/app
+electron --inspect=5858 your/app
 ```
 
 ### `--inspect-brk=[port]`

docs/tutorial/devices.md

@@ -26,7 +26,7 @@ This example demonstrates an Electron application that automatically selects
 the first available bluetooth device when the `Test Bluetooth` button is
 clicked.
 
-```fiddle docs/fiddles/features/web-bluetooth
+```javascript fiddle='docs/fiddles/features/web-bluetooth'
 
 ```
 
@@ -61,7 +61,7 @@ By default Electron employs the same [blocklist](https://github.com/WICG/webhid/
 used by Chromium.  If you wish to override this behavior, you can do so by
 setting the `disable-hid-blocklist` flag:
 
-```js
+```javascript
 app.commandLine.appendSwitch('disable-hid-blocklist')
 ```
 
@@ -72,7 +72,7 @@ HID devices through [`ses.setDevicePermissionHandler(handler)`](../api/session.m
 and through [`select-hid-device` event on the Session](../api/session.md#event-select-hid-device)
 when the `Test WebHID` button is clicked.
 
-```fiddle docs/fiddles/features/web-hid
+```javascript fiddle='docs/fiddles/features/web-hid'
 
 ```
 
@@ -112,7 +112,7 @@ as well as demonstrating selecting the first available Arduino Uno serial device
 [`select-serial-port` event on the Session](../api/session.md#event-select-serial-port)
 when the `Test Web Serial` button is clicked.
 
-```fiddle docs/fiddles/features/web-serial
+```javascript fiddle='docs/fiddles/features/web-serial'
 
 ```
 
@@ -152,6 +152,6 @@ USB devices (if they are attached) through [`ses.setDevicePermissionHandler(hand
 and through [`select-usb-device` event on the Session](../api/session.md#event-select-usb-device)
 when the `Test WebUSB` button is clicked.
 
-```fiddle docs/fiddles/features/web-usb
+```javascript fiddle='docs/fiddles/features/web-usb'
 
 ```

docs/tutorial/devtools-extension.md

@@ -33,7 +33,7 @@ Using the [React Developer Tools][react-devtools] as an example:
 1. Pass the location of the extension to the [`ses.loadExtension`][load-extension]
    API. For React Developer Tools `v4.9.0`, it looks something like:
 
-   ```js
+   ```javascript
    const { app, session } = require('electron')
    const path = require('node:path')
    const os = require('node:os')

docs/tutorial/electron-timelines.md

@@ -9,11 +9,10 @@ check out our [Electron Versioning](./electron-versioning.md) doc.
 
 | Electron | Alpha | Beta | Stable | EOL | Chrome | Node | Supported |
 | ------- | ----- | ------- | ------ | ------ | ---- | ---- | ---- |
-| 29.0.0 |  2023-Dec-07 | 2024-Jan-24 | 2024-Feb-20 | 2024-Aug-20 | M122 | v18.19 | ✅ |
-| 28.0.0 |  2023-Oct-11 | 2023-Nov-06 | 2023-Dec-05 | 2024-Jun-11 | M120 | v18.18 | ✅ |
+| 28.0.0 |  2023-Oct-11 | 2023-Nov-6 | 2023-Dec-5 | TBD | M120 | TBD | ✅ |
 | 27.0.0 |  2023-Aug-17 | 2023-Sep-13 | 2023-Oct-10 | 2024-Apr-16 | M118 | v18.17 | ✅ |
-| 26.0.0 | 2023-Jun-01 | 2023-Jun-27 | 2023-Aug-15 | 2024-Feb-20 | M116 | v18.16 | ✅ |
-| 25.0.0 | 2023-Apr-10 | 2023-May-02 | 2023-May-30 | 2023-Dec-05 | M114 | v18.15 | 🚫 |
+| 26.0.0 | 2023-Jun-01 | 2023-Jun-27 | 2023-Aug-15 | 2024-Feb-27 | M116 | v18.16 | ✅ |
+| 25.0.0 | 2023-Apr-10 | 2023-May-02 | 2023-May-30 | 2024-Jan-02 | M114 | v18.15 | ✅ |
 | 24.0.0 | 2023-Feb-09 | 2023-Mar-07 | 2023-Apr-04 | 2023-Oct-10 | M112 | v18.14 | 🚫 |
 | 23.0.0 | 2022-Dec-01 | 2023-Jan-10 | 2023-Feb-07 | 2023-Aug-15 | M110 | v18.12 | 🚫 |
 | 22.0.0 | 2022-Sep-29 | 2022-Oct-25 | 2022-Nov-29 | 2023-Oct-10 | M108 | v16.17 | 🚫 |
@@ -38,19 +37,6 @@ check out our [Electron Versioning](./electron-versioning.md) doc.
 | 3.0.0 | -- | 2018-Jun-21 | 2018-Sep-18 | 2019-Jul-30 | M66 | v10.2 | 🚫 |
 | 2.0.0 | -- | 2018-Feb-21 | 2018-May-01 | 2019-Apr-23 | M61 | v8.9 | 🚫 |
 
-:::info Official support dates may change
-
-Electron's official support policy is the latest 3 stable releases. Our stable
-release and end-of-life dates are determined by Chromium, and may be subject to
-change. While we try to keep our planned release and end-of-life dates frequently
-updated here, future dates may change if affected by upstream scheduling changes,
-and may not always be accurately reflected.
-
- See [Chromium's public release schedule](https://chromiumdash.appspot.com/schedule) for
- definitive information about Chromium's scheduled release dates.
-
- :::
-
 **Notes:**
 
 * The `-alpha.1`, `-beta.1`, and `stable` dates are our solid release dates.
@@ -62,10 +48,20 @@ and may not always be accurately reflected.
 * Since Electron 5, Electron has been publicizing its release dates ([see blog post](https://www.electronjs.org/blog/electron-5-0-timeline)).
 * Since Electron 6, Electron major versions have been targeting every other Chromium major version. Each Electron stable should happen on the same day as Chrome stable ([see blog post](https://www.electronjs.org/blog/12-week-cadence)).
 * Since Electron 16, Electron has been releasing major versions on an 8-week cadence in accordance to Chrome's change to a 4-week release cadence ([see blog post](https://www.electronjs.org/blog/8-week-cadence)).
-* Electron temporarily extended support for Electron 22 until October 10, 2023, to support an extended end-of-life for Windows 7/8/8.1
 
 ## Version support policy
 
+:::info
+
+The Electron team will temporarily support Electron 22 until October 10, 2023.
+This extended support is intended to help Electron developers who still need
+support for Windows 7/8/8.1, which ended support in Electron 23. The October
+support date follows the extended support dates from both Chromium and Microsoft.
+On October 11, the Electron team will drop support back to the latest three
+stable major versions.
+
+:::
+
 The latest three _stable_ major versions are supported by the Electron team.
 For example, if the latest release is 6.1.x, then the 5.0.x as well
 as the 4.2.x series are supported. We only support the latest minor release

docs/tutorial/examples.md

@@ -16,7 +16,16 @@ Once Fiddle is installed, you can press on the "Open in Fiddle" button that you
 will find below code samples like the following one:
 
 ```fiddle docs/fiddles/quick-start
+window.addEventListener('DOMContentLoaded', () => {
+  const replaceText = (selector, text) => {
+    const element = document.getElementById(selector)
+    if (element) element.innerText = text
+  }
 
+  for (const type of ['chrome', 'node', 'electron']) {
+    replaceText(`${type}-version`, process.versions[type])
+  }
+})
 ```
 
 If there is still something that you do not know how to do, please take a look at the [API][app]

docs/tutorial/in-app-purchases.md

@@ -34,7 +34,7 @@ To test In-App Purchase in development with Electron you'll have to change the `
 
 Here is an example that shows how to use In-App Purchases in Electron. You'll have to replace the product ids by the identifiers of the products created with iTunes Connect (the identifier of `com.example.app.product1` is `product1`). Note that you have to listen to the `transactions-updated` event as soon as possible in your app.
 
-```js
+```javascript
 // Main process
 const { inAppPurchase } = require('electron')
 const PRODUCT_IDS = ['id1', 'id2']

docs/tutorial/installation.md

@@ -66,7 +66,7 @@ You can use environment variables to override the base URL, the path at which to
 look for Electron binaries, and the binary filename. The URL used by `@electron/get`
 is composed as follows:
 
-```js @ts-nocheck
+```javascript @ts-nocheck
 url = ELECTRON_MIRROR + ELECTRON_CUSTOM_DIR + '/' + ELECTRON_CUSTOM_FILENAME
 ```
 
@@ -91,9 +91,9 @@ The above configuration will download from URLs such as
 `https://npmmirror.com/mirrors/electron/8.0.0/electron-v8.0.0-linux-x64.zip`.
 
 If your mirror serves artifacts with different checksums to the official
-Electron release you may have to set `electron_use_remote_checksums=1` to
-force Electron to use the remote `SHASUMS256.txt` file to verify the checksum
-instead of the embedded checksums.
+Electron release you may have to set `electron_use_remote_checksums=1` directly,
+or configure it in a `.npmrc` file, to force Electron to use the remote `SHASUMS256.txt`
+file to verify the checksum instead of the embedded checksums.
 
 #### Cache
 

docs/tutorial/ipc.md

@@ -50,7 +50,7 @@ sections.
 
 In the main process, set an IPC listener on the `set-title` channel with the `ipcMain.on` API:
 
-```js {6-10,22} title='main.js (Main Process)'
+```javascript {6-10,22} title='main.js (Main Process)'
 const { app, BrowserWindow, ipcMain } = require('electron')
 const path = require('node:path')
 
@@ -96,7 +96,7 @@ you need to choose which APIs to expose from your preload script using the `cont
 In your preload script, add the following code, which will expose a global `window.electronAPI`
 variable to your renderer process.
 
-```js title='preload.js (Preload Script)'
+```javascript title='preload.js (Preload Script)'
 const { contextBridge, ipcRenderer } = require('electron')
 
 contextBridge.exposeInMainWorld('electronAPI', {
@@ -138,7 +138,7 @@ To make these elements interactive, we'll be adding a few lines of code in the i
 `renderer.js` file that leverages the `window.electronAPI` functionality exposed from the preload
 script:
 
-```js title='renderer.js (Renderer Process)' @ts-expect-error=[4,5]
+```javascript title='renderer.js (Renderer Process)' @ts-expect-error=[4,5]
 const setButton = document.getElementById('btn')
 const titleInput = document.getElementById('title')
 setButton.addEventListener('click', () => {
@@ -181,7 +181,7 @@ provided to the renderer process. Please refer to
 [#24427](https://github.com/electron/electron/issues/24427) for details.
 :::
 
-```js {6-13,25} title='main.js (Main Process)'
+```javascript {6-13,25} title='main.js (Main Process)'
 const { app, BrowserWindow, dialog, ipcMain } = require('electron')
 const path = require('node:path')
 
@@ -225,7 +225,7 @@ In the preload script, we expose a one-line `openFile` function that calls and r
 `ipcRenderer.invoke('dialog:openFile')`. We'll be using this API in the next step to call the
 native dialog from our renderer's user interface.
 
-```js title='preload.js (Preload Script)'
+```javascript title='preload.js (Preload Script)'
 const { contextBridge, ipcRenderer } = require('electron')
 
 contextBridge.exposeInMainWorld('electronAPI', {
@@ -263,7 +263,7 @@ The UI consists of a single `#btn` button element that will be used to trigger o
 a `#filePath` element that will be used to display the path of the selected file. Making these
 pieces work will take a few lines of code in the renderer process script:
 
-```js title='renderer.js (Renderer Process)' @ts-expect-error=[5]
+```javascript title='renderer.js (Renderer Process)' @ts-expect-error=[5]
 const btn = document.getElementById('btn')
 const filePathElement = document.getElementById('filePath')
 
@@ -299,7 +299,7 @@ The `ipcRenderer.send` API that we used for single-way communication can also be
 perform two-way communication. This was the recommended way for asynchronous two-way communication
 via IPC prior to Electron 7.
 
-```js title='preload.js (Preload Script)'
+```javascript title='preload.js (Preload Script)'
 // You can also put expose this code to the renderer
 // process with the `contextBridge` API
 const { ipcRenderer } = require('electron')
@@ -310,7 +310,7 @@ ipcRenderer.on('asynchronous-reply', (_event, arg) => {
 ipcRenderer.send('asynchronous-message', 'ping')
 ```
 
-```js title='main.js (Main Process)'
+```javascript title='main.js (Main Process)'
 ipcMain.on('asynchronous-message', (event, arg) => {
   console.log(arg) // prints "ping" in the Node console
   // works like `send`, but returning a message back
@@ -332,7 +332,7 @@ channels, you would need to add additional app code to track each call and respo
 The `ipcRenderer.sendSync` API sends a message to the main process and waits _synchronously_ for a
 response.
 
-```js title='main.js (Main Process)'
+```javascript title='main.js (Main Process)'
 const { ipcMain } = require('electron')
 ipcMain.on('synchronous-message', (event, arg) => {
   console.log(arg) // prints "ping" in the Node console
@@ -340,7 +340,7 @@ ipcMain.on('synchronous-message', (event, arg) => {
 })
 ```
 
-```js title='preload.js (Preload Script)'
+```javascript title='preload.js (Preload Script)'
 // You can also put expose this code to the renderer
 // process with the `contextBridge` API
 const { ipcRenderer } = require('electron')
@@ -376,7 +376,7 @@ For this demo, we'll need to first build a custom menu in the main process using
 module that uses the `webContents.send` API to send an IPC message from the main process to the
 target renderer.
 
-```js {11-26} title='main.js (Main Process)'
+```javascript {11-26} title='main.js (Main Process)'
 const { app, BrowserWindow, Menu, ipcMain } = require('electron')
 const path = require('node:path')
 
@@ -412,7 +412,7 @@ function createWindow () {
 For the purposes of the tutorial, it's important to note that the `click` handler
 sends a message (either `1` or `-1`) to the renderer process through the `update-counter` channel.
 
-```js @ts-type={mainWindow:Electron.BrowserWindow}
+```javascript @ts-type={mainWindow:Electron.BrowserWindow}
 click: () => mainWindow.webContents.send('update-counter', -1)
 ```
 
@@ -425,7 +425,7 @@ Make sure you're loading the `index.html` and `preload.js` entry points for the
 Like in the previous renderer-to-main example, we use the `contextBridge` and `ipcRenderer`
 modules in the preload script to expose IPC functionality to the renderer process:
 
-```js title='preload.js (Preload Script)'
+```javascript title='preload.js (Preload Script)'
 const { contextBridge, ipcRenderer } = require('electron')
 
 contextBridge.exposeInMainWorld('electronAPI', {
@@ -447,7 +447,7 @@ Use a custom handler that invoke the `callback` only with the desired arguments.
 In the case of this minimal example, you can call `ipcRenderer.on` directly in the preload script
 rather than exposing it over the context bridge.
 
-```js title='preload.js (Preload Script)'
+```javascript title='preload.js (Preload Script)'
 const { ipcRenderer } = require('electron')
 
 window.addEventListener('DOMContentLoaded', () => {
@@ -488,7 +488,7 @@ To tie it all together, we'll create an interface in the loaded HTML file that c
 Finally, to make the values update in the HTML document, we'll add a few lines of DOM manipulation
 so that the value of the `#counter` element is updated whenever we fire an `update-counter` event.
 
-```js title='renderer.js (Renderer Process)' @ts-window-type={electronAPI:{onUpdateCounter:(callback:(value:number)=>void)=>void}}
+```javascript title='renderer.js (Renderer Process)' @ts-window-type={electronAPI:{onUpdateCounter:(callback:(value:number)=>void)=>void}}
 const counter = document.getElementById('counter')
 
 window.electronAPI.onUpdateCounter((value) => {
@@ -511,7 +511,7 @@ We can demonstrate this with slight modifications to the code from the previous
 renderer process, expose another API to send a reply back to the main process through the
 `counter-value` channel.
 
-```js title='preload.js (Preload Script)'
+```javascript title='preload.js (Preload Script)'
 const { contextBridge, ipcRenderer } = require('electron')
 
 contextBridge.exposeInMainWorld('electronAPI', {
@@ -520,7 +520,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
 })
 ```
 
-```js title='renderer.js (Renderer Process)' @ts-window-type={electronAPI:{onUpdateCounter:(callback:(value:number)=>void)=>void,counterValue:(value:number)=>void}}
+```javascript title='renderer.js (Renderer Process)' @ts-window-type={electronAPI:{onUpdateCounter:(callback:(value:number)=>void)=>void,counterValue:(value:number)=>void}}
 const counter = document.getElementById('counter')
 
 window.electronAPI.onUpdateCounter((value) => {
@@ -533,7 +533,7 @@ window.electronAPI.onUpdateCounter((value) => {
 
 In the main process, listen for `counter-value` events and handle them appropriately.
 
-```js title='main.js (Main Process)'
+```javascript title='main.js (Main Process)'
 // ...
 ipcMain.on('counter-value', (_event, value) => {
   console.log(value) // will print value to Node console

docs/tutorial/keyboard-shortcuts.md

@@ -14,19 +14,11 @@ To configure a local keyboard shortcut, you need to specify an [`accelerator`][]
 property when creating a [MenuItem][] within the [Menu][] module.
 
 Starting with a working application from the
-[Quick Start Guide](quick-start.md), update the `main.js` to be:
+[Quick Start Guide](quick-start.md), update the `main.js` file with the
+following lines:
 
-```fiddle docs/fiddles/features/keyboard-shortcuts/local
-const { app, BrowserWindow, Menu, MenuItem } = require('electron/main')
-
-function createWindow () {
-  const win = new BrowserWindow({
-    width: 800,
-    height: 600
-  })
-
-  win.loadFile('index.html')
-}
+```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/local'
+const { Menu, MenuItem } = require('electron')
 
 const menu = new Menu()
 menu.append(new MenuItem({
@@ -39,20 +31,6 @@ menu.append(new MenuItem({
 }))
 
 Menu.setApplicationMenu(menu)
-
-app.whenReady().then(createWindow)
-
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
-})
-
-app.on('activate', () => {
-  if (BrowserWindow.getAllWindows().length === 0) {
-    createWindow()
-  }
-})
 ```
 
 > NOTE: In the code above, you can see that the accelerator differs based on the
@@ -75,37 +53,17 @@ module to detect keyboard events even when the application does not have
 keyboard focus.
 
 Starting with a working application from the
-[Quick Start Guide](quick-start.md), update the `main.js` to be:
+[Quick Start Guide](quick-start.md), update the `main.js` file with the
+following lines:
 
-```fiddle docs/fiddles/features/keyboard-shortcuts/global
-const { app, BrowserWindow, globalShortcut } = require('electron/main')
-
-function createWindow () {
-  const win = new BrowserWindow({
-    width: 800,
-    height: 600
-  })
-
-  win.loadFile('index.html')
-}
+```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/global' @ts-type={createWindow:()=>void}
+const { app, globalShortcut } = require('electron')
 
 app.whenReady().then(() => {
   globalShortcut.register('Alt+CommandOrControl+I', () => {
     console.log('Electron loves global shortcuts!')
   })
 }).then(createWindow)
-
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
-})
-
-app.on('activate', () => {
-  if (BrowserWindow.getAllWindows().length === 0) {
-    createWindow()
-  }
-})
 ```
 
 > NOTE: In the code above, the `CommandOrControl` combination uses `Command`
@@ -123,8 +81,8 @@ If you want to handle keyboard shortcuts within a [BrowserWindow][], you can
 listen for the `keyup` and `keydown` [DOM events][dom-events] inside the
 renderer process using the [addEventListener() API][addEventListener-api].
 
-```fiddle docs/fiddles/features/keyboard-shortcuts/web-apis|focus=renderer.js
-function handleKeyPress (event) {
+```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/web-apis|focus=renderer.js'
+const handleKeyPress = (event) => {
   // You can put code here to handle the keypress.
   document.getElementById('last-keypress').innerText = event.key
   console.log(`You pressed ${event.key}`)
@@ -147,8 +105,8 @@ Starting with a working application from the
 [Quick Start Guide](quick-start.md), update the `main.js` file with the
 following lines:
 
-```fiddle docs/fiddles/features/keyboard-shortcuts/interception-from-main
-const { app, BrowserWindow } = require('electron/main')
+```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/interception-from-main'
+const { app, BrowserWindow } = require('electron')
 
 app.whenReady().then(() => {
   const win = new BrowserWindow({ width: 800, height: 600 })

docs/tutorial/launch-app-from-url-in-another-app.md

@@ -25,14 +25,14 @@ we will use will be "`electron-fiddle://`".
 First, we will import the required modules from `electron`. These modules help
 control our application lifecycle and create a native browser window.
 
-```js
+```javascript
 const { app, BrowserWindow, shell } = require('electron')
 const path = require('node:path')
 ```
 
 Next, we will proceed to register our application to handle all "`electron-fiddle://`" protocols.
 
-```js
+```javascript
 if (process.defaultApp) {
   if (process.argv.length >= 2) {
     app.setAsDefaultProtocolClient('electron-fiddle', process.execPath, [path.resolve(process.argv[1])])
@@ -44,7 +44,7 @@ if (process.defaultApp) {
 
 We will now define the function in charge of creating our browser window and load our application's `index.html` file.
 
-```js
+```javascript
 let mainWindow
 
 const createWindow = () => {
@@ -67,7 +67,7 @@ This code will be different in Windows and Linux compared to MacOS. This is due
 
 #### Windows and Linux code:
 
-```js @ts-type={mainWindow:Electron.BrowserWindow} @ts-type={createWindow:()=>void}
+```javascript @ts-type={mainWindow:Electron.BrowserWindow} @ts-type={createWindow:()=>void}
 const gotTheLock = app.requestSingleInstanceLock()
 
 if (!gotTheLock) {
@@ -92,7 +92,7 @@ if (!gotTheLock) {
 
 #### MacOS code:
 
-```js @ts-type={createWindow:()=>void}
+```javascript @ts-type={createWindow:()=>void}
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
@@ -108,7 +108,7 @@ app.on('open-url', (event, url) => {
 
 Finally, we will add some additional code to handle when someone closes our application.
 
-```js
+```javascript
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
@@ -159,7 +159,7 @@ shows the bare minimum needed to add the configuration changes)_:
 }
 ```
 
-#### [Electron Packager](https://github.com/electron/packager)
+#### [Electron Packager](https://github.com/electron/electron-packager)
 
 For macOS support:
 
@@ -167,8 +167,8 @@ If you're using Electron Packager's API, adding support for protocol handlers is
 Electron Forge is handled, except
 `protocols` is part of the Packager options passed to the `packager` function.
 
-```js @ts-nocheck
-const packager = require('@electron/packager')
+```javascript @ts-nocheck
+const packager = require('electron-packager')
 
 packager({
   // ...other options...

docs/tutorial/macos-dock.md

@@ -23,10 +23,10 @@ To set your custom dock menu, you need to use the
 [`app.dock.setMenu`](../api/dock.md#docksetmenumenu-macos) API,
 which is only available on macOS.
 
-```fiddle docs/fiddles/features/macos-dock-menu
-const { app, BrowserWindow, Menu } = require('electron/main')
+```javascript fiddle='docs/fiddles/features/macos-dock-menu'
+const { app, BrowserWindow, Menu } = require('electron')
 
-function createWindow () {
+const createWindow = () => {
   const win = new BrowserWindow({
     width: 800,
     height: 600

docs/tutorial/multithreading.md

@@ -9,7 +9,7 @@ It is possible to use Node.js features in Electron's Web Workers, to do
 so the `nodeIntegrationInWorker` option should be set to `true` in
 `webPreferences`.
 
-```js
+```javascript
 const win = new BrowserWindow({
   webPreferences: {
     nodeIntegrationInWorker: true
@@ -42,7 +42,7 @@ safe.
 The only way to load a native module safely for now, is to make sure the app
 loads no native modules after the Web Workers get started.
 
-```js @ts-expect-error=[1]
+```javascript @ts-expect-error=[1]
 process.dlopen = () => {
   throw new Error('Load native module is not safe')
 }

docs/tutorial/native-file-drag-drop.md

@@ -44,7 +44,7 @@ Add a draggable element to `index.html`, and reference your renderer script:
 
 In `renderer.js` set up the renderer process to handle drag events by calling the method you added via the [`contextBridge`][] above.
 
-```js @ts-expect-error=[3]
+```javascript @ts-expect-error=[3]
 document.getElementById('drag').ondragstart = (event) => {
   event.preventDefault()
   window.electron.startDrag('drag-and-drop.md')
@@ -56,55 +56,15 @@ document.getElementById('drag').ondragstart = (event) => {
 In the Main process (`main.js` file), expand the received event with a path to the file that is
 being dragged and an icon:
 
-```fiddle docs/fiddles/features/drag-and-drop
-const { app, BrowserWindow, ipcMain } = require('electron/main')
-const path = require('node:path')
-const fs = require('node:fs')
-const https = require('node:https')
-
-function createWindow () {
-  const win = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      preload: path.join(__dirname, 'preload.js')
-    }
-  })
-
-  win.loadFile('index.html')
-}
-
-const iconName = path.join(__dirname, 'iconForDragAndDrop.png')
-const icon = fs.createWriteStream(iconName)
-
-// Create a new file to copy - you can also copy existing files.
-fs.writeFileSync(path.join(__dirname, 'drag-and-drop-1.md'), '# First file to test drag and drop')
-fs.writeFileSync(path.join(__dirname, 'drag-and-drop-2.md'), '# Second file to test drag and drop')
-
-https.get('https://img.icons8.com/ios/452/drag-and-drop.png', (response) => {
-  response.pipe(icon)
-})
-
-app.whenReady().then(createWindow)
+```javascript fiddle='docs/fiddles/features/drag-and-drop'
+const { ipcMain } = require('electron')
 
 ipcMain.on('ondragstart', (event, filePath) => {
   event.sender.startDrag({
-    file: path.join(__dirname, filePath),
-    icon: iconName
+    file: filePath,
+    icon: '/path/to/icon.png'
   })
 })
-
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
-})
-
-app.on('activate', () => {
-  if (BrowserWindow.getAllWindows().length === 0) {
-    createWindow()
-  }
-})
 ```
 
 After launching the Electron application, try dragging and dropping

docs/tutorial/notifications.md

@@ -30,38 +30,16 @@ new Notification({
 
 Here's a full example that you can open with Electron Fiddle:
 
-```fiddle docs/fiddles/features/notifications/main
-const { app, BrowserWindow, Notification } = require('electron/main')
-
-function createWindow () {
-  const win = new BrowserWindow({
-    width: 800,
-    height: 600
-  })
-
-  win.loadFile('index.html')
-}
+```javascript fiddle='docs/fiddles/features/notifications/main'
+const { Notification } = require('electron')
 
 const NOTIFICATION_TITLE = 'Basic Notification'
 const NOTIFICATION_BODY = 'Notification from the Main process'
 
-function showNotification () {
-  new Notification({ title: NOTIFICATION_TITLE, body: NOTIFICATION_BODY }).show()
-}
-
-app.whenReady().then(createWindow).then(showNotification)
-
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
-})
-
-app.on('activate', () => {
-  if (BrowserWindow.getAllWindows().length === 0) {
-    createWindow()
-  }
-})
+new Notification({
+  title: NOTIFICATION_TITLE,
+  body: NOTIFICATION_BODY
+}).show()
 ```
 
 ### Show notifications in the renderer process
@@ -81,13 +59,14 @@ new Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY }).onclick =
 
 Here's a full example that you can open with Electron Fiddle:
 
-```fiddle docs/fiddles/features/notifications/renderer|focus=renderer.js
+```javascript fiddle='docs/fiddles/features/notifications/renderer'
 const NOTIFICATION_TITLE = 'Title'
-const NOTIFICATION_BODY = 'Notification from the Renderer process. Click to log to console.'
-const CLICK_MESSAGE = 'Notification clicked!'
+const NOTIFICATION_BODY =
+  'Notification from the Renderer process. Click to log to console.'
+const CLICK_MESSAGE = 'Notification clicked'
 
-new window.Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
-  .onclick = () => { document.getElementById('output').innerText = CLICK_MESSAGE }
+new Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY }).onclick =
+  () => console.log(CLICK_MESSAGE)
 ```
 
 ## Platform considerations

docs/tutorial/offscreen-rendering.md

@@ -39,44 +39,22 @@ To enable this mode, GPU acceleration has to be disabled by calling the
 
 ## Example
 
-```fiddle docs/fiddles/features/offscreen-rendering
-const { app, BrowserWindow } = require('electron/main')
+```javascript fiddle='docs/fiddles/features/offscreen-rendering'
+const { app, BrowserWindow } = require('electron')
 const fs = require('node:fs')
-const path = require('node:path')
 
 app.disableHardwareAcceleration()
 
-function createWindow () {
-  const win = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      offscreen: true
-    }
-  })
+let win
+
+app.whenReady().then(() => {
+  win = new BrowserWindow({ webPreferences: { offscreen: true } })
 
   win.loadURL('https://github.com')
   win.webContents.on('paint', (event, dirty, image) => {
     fs.writeFileSync('ex.png', image.toPNG())
   })
   win.webContents.setFrameRate(60)
-  console.log(`The screenshot has been successfully saved to ${path.join(process.cwd(), 'ex.png')}`)
-}
-
-app.whenReady().then(() => {
-  createWindow()
-
-  app.on('activate', () => {
-    if (BrowserWindow.getAllWindows().length === 0) {
-      createWindow()
-    }
-  })
-})
-
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
 })
 ```
 

docs/tutorial/progress-bar.md

@@ -50,12 +50,12 @@ See the [API documentation for more options and modes][setprogressbar].
 In this example, we add a progress bar to the main window that increments over time
 using Node.js timers.
 
-```fiddle docs/fiddles/features/progress-bar
-const { app, BrowserWindow } = require('electron/main')
+```javascript fiddle='docs/fiddles/features/progress-bar'
+const { app, BrowserWindow } = require('electron')
 
 let progressInterval
 
-function createWindow () {
+const createWindow = () => {
   const win = new BrowserWindow({
     width: 800,
     height: 600
@@ -73,11 +73,8 @@ function createWindow () {
     win.setProgressBar(c)
 
     // increment or reset progress bar
-    if (c < 2) {
-      c += INCREMENT
-    } else {
-      c = (-INCREMENT * 5) // reset to a bit less than 0 to show reset state
-    }
+    if (c < 2) c += INCREMENT
+    else c = 0
   }, INTERVAL_DELAY)
 }
 

docs/tutorial/recent-documents.md

@@ -24,12 +24,12 @@ the application via JumpList or dock menu, respectively.
 
 ### Managing recent documents
 
-```fiddle docs/fiddles/features/recent-documents
-const { app, BrowserWindow } = require('electron/main')
+```javascript fiddle='docs/fiddles/features/recent-documents'
+const { app, BrowserWindow } = require('electron')
 const fs = require('node:fs')
 const path = require('node:path')
 
-function createWindow () {
+const createWindow = () => {
   const win = new BrowserWindow({
     width: 800,
     height: 600
@@ -116,7 +116,7 @@ following code snippet to your menu template:
 Make sure the application menu is added after the [`'ready'`](../api/app.md#event-ready)
 event and not before, or the menu item will be disabled:
 
-```js
+```javascript
 const { app, Menu } = require('electron')
 
 const template = [

docs/tutorial/represented-file.md

@@ -27,30 +27,22 @@ To set the represented file of window, you can use the
 
 ## Example
 
-```fiddle docs/fiddles/features/represented-file
-const { app, BrowserWindow } = require('electron/main')
+```javascript fiddle='docs/fiddles/features/represented-file'
+const { app, BrowserWindow } = require('electron')
 const os = require('node:os')
 
-function createWindow () {
+const createWindow = () => {
   const win = new BrowserWindow({
     width: 800,
     height: 600
   })
-
-  win.setRepresentedFilename(os.homedir())
-  win.setDocumentEdited(true)
-
-  win.loadFile('index.html')
 }
 
 app.whenReady().then(() => {
-  createWindow()
+  const win = new BrowserWindow()
 
-  app.on('activate', () => {
-    if (BrowserWindow.getAllWindows().length === 0) {
-      createWindow()
-    }
-  })
+  win.setRepresentedFilename(os.homedir())
+  win.setDocumentEdited(true)
 })
 
 app.on('window-all-closed', () => {
@@ -58,6 +50,12 @@ app.on('window-all-closed', () => {
     app.quit()
   }
 })
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})
 ```
 
 After launching the Electron application, click on the title with `Command` or

docs/tutorial/security.md

@@ -375,7 +375,7 @@ which can be set using Electron's
 [`webRequest.onHeadersReceived`](../api/web-request.md#webrequestonheadersreceivedfilter-listener)
 handler:
 
-```js title='main.js (Main Process)'
+```javascript title='main.js (Main Process)'
 const { session } = require('electron')
 
 session.defaultSession.webRequest.onHeadersReceived((details, callback) => {

docs/tutorial/snapcraft.md

@@ -16,7 +16,7 @@ There are three ways to create a `.snap` file:
 1) Using [Electron Forge][electron-forge] or
    [`electron-builder`][electron-builder], both tools that come with `snap`
    support out of the box. This is the easiest option.
-2) Using `electron-installer-snap`, which takes `@electron/packager`'s output.
+2) Using `electron-installer-snap`, which takes `electron-packager`'s output.
 3) Using an already created `.deb` package.
 
 In some cases, you will need to have the `snapcraft` tool installed.
@@ -35,7 +35,7 @@ npm install --save-dev electron-installer-snap
 
 ### Step 1: Package Your Electron Application
 
-Package the application using [@electron/packager][electron-packager] (or a
+Package the application using [electron-packager][electron-packager] (or a
 similar tool). Make sure to remove `node_modules` that you don't need in your
 final application, since any module you don't actually need will increase
 your application's size.
@@ -79,7 +79,7 @@ snap(options)
   .then(snapPath => console.log(`Created snap at ${snapPath}!`))
 ```
 
-## Using `snapcraft` with `@electron/packager`
+## Using `snapcraft` with `electron-packager`
 
 ### Step 1: Create Sample Snapcraft Project
 
@@ -113,7 +113,7 @@ parts:
     plugin: nil
     source: https://github.com/electron/electron-quick-start.git
     override-build: |
-        npm install electron @electron/packager
+        npm install electron electron-packager
         npx electron-packager . --overwrite --platform=linux --output=release-build --prune=true
         cp -rv ./electron-quick-start-linux-* $SNAPCRAFT_PART_INSTALL/electron-quick-start
     build-snaps:
@@ -266,7 +266,7 @@ Finally, configure your application's environment for PipeWire:
 ```
 
 [snapcraft-syntax]: https://docs.snapcraft.io/build-snaps/syntax
-[electron-packager]: https://github.com/electron/packager
+[electron-packager]: https://github.com/electron/electron-packager
 [electron-forge]: https://github.com/electron/forge
 [electron-builder]: https://github.com/electron-userland/electron-builder
 [electron-installer-debian]: https://github.com/electron-userland/electron-installer-debian

docs/tutorial/tutorial-2-first-app.md

@@ -243,11 +243,11 @@ const { app, BrowserWindow } = require('electron/main')
 For more information, see the [Process Model docs](../tutorial/process-model.md#process-specific-module-aliases-typescript).
 </details>
 
-:::info ES Modules in Electron
+:::warning ES Modules in Electron
 
 [ECMAScript modules](https://nodejs.org/api/esm.html) (i.e. using `import` to load a module)
-are supported in Electron as of Electron 28. You can find more information about the
-state of ESM in Electron and how to use them in our app in [our ESM guide](../tutorial/esm.md).
+are currently not directly supported in Electron. You can find more information about the
+state of ESM in Electron in [electron/electron#21457](https://github.com/electron/electron/issues/21457).
 
 :::
 

docs/tutorial/tutorial-5-packaging.md

@@ -35,7 +35,7 @@ as a **distributable**). Distributables can be either installers (e.g. MSI on Wi
 portable executable files (e.g. `.app` on macOS).
 
 Electron Forge is an all-in-one tool that handles the packaging and distribution of Electron
-apps. Under the hood, it combines a lot of existing Electron tools (e.g. [`@electron/packager`][],
+apps. Under the hood, it combines a lot of existing Electron tools (e.g. [`electron-packager`][],
 [`@electron/osx-sign`][], [`electron-winstaller`][], etc.) into a single interface so you do not
 have to worry about wiring them all together.
 
@@ -200,7 +200,7 @@ information.
 
 [`@electron/osx-sign`]: https://github.com/electron/osx-sign
 [application packaging]: ./application-distribution.md
-[`@electron/packager`]: https://github.com/electron/packager
+[`electron-packager`]: https://github.com/electron/electron-packager
 [`electron-winstaller`]: https://github.com/electron/windows-installer
 [electron forge]: https://www.electronforge.io
 [electron forge cli documentation]: https://www.electronforge.io/cli#commands

docs/tutorial/updates.md

@@ -81,14 +81,14 @@ You can use the [app.isPackaged](../api/app.md#appispackaged-readonly) API to ch
 
 :::
 
-```js title='main.js'
+```javascript title='main.js'
 const { app, autoUpdater, dialog } = require('electron')
 ```
 
 Next, construct the URL of the update server feed and tell
 [autoUpdater](../api/auto-updater.md) about it:
 
-```js title='main.js'
+```javascript title='main.js'
 const server = 'https://your-deployment-url.com'
 const url = `${server}/update/${process.platform}/${app.getVersion()}`
 
@@ -97,7 +97,7 @@ autoUpdater.setFeedURL({ url })
 
 As the final step, check for updates. The example below will check every minute:
 
-```js title='main.js'
+```javascript title='main.js'
 setInterval(() => {
   autoUpdater.checkForUpdates()
 }, 60000)
@@ -113,7 +113,7 @@ Now that you've configured the basic update mechanism for your application, you
 need to ensure that the user will get notified when there's an update. This
 can be achieved using the [autoUpdater API events](../api/auto-updater.md#events):
 
-```js title="main.js" @ts-expect-error=[11]
+```javascript title="main.js" @ts-expect-error=[11]
 autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) => {
   const dialogOpts = {
     type: 'info',
@@ -134,7 +134,7 @@ Also make sure that errors are
 [being handled](../api/auto-updater.md#event-error). Here's an example
 for logging them to `stderr`:
 
-```js title="main.js"
+```javascript title="main.js"
 autoUpdater.on('error', (message) => {
   console.error('There was a problem updating the application')
   console.error(message)

docs/tutorial/using-native-node-modules.md

@@ -169,5 +169,5 @@ environment variable.
 [abi]: https://en.wikipedia.org/wiki/Application_binary_interface
 [@electron/rebuild]: https://github.com/electron/rebuild
 [electron-forge]: https://electronforge.io/
-[electron-packager]: https://github.com/electron/packager
+[electron-packager]: https://github.com/electron/electron-packager
 [node-pre-gyp]: https://github.com/mapbox/node-pre-gyp

docs/tutorial/window-customization.md

@@ -14,7 +14,7 @@ that are not a part of the web page.
 To create a frameless window, you need to set `frame` to `false` in the `BrowserWindow`
 constructor.
 
-```js title='main.js'
+```javascript title='main.js'
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({ frame: false })
 ```
@@ -28,7 +28,7 @@ option in the `BrowserWindow` constructor.
 Applying the `hidden` title bar style results in a hidden title bar and a full-size
 content window.
 
-```js title='main.js'
+```javascript title='main.js'
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({ titleBarStyle: 'hidden' })
 ```
@@ -44,7 +44,7 @@ The `customButtonsOnHover` title bar style will hide the traffic lights until yo
 over them. This is useful if you want to create custom traffic lights in your HTML but still
 use the native UI to control the window.
 
-```js
+```javascript
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({ titleBarStyle: 'customButtonsOnHover' })
 ```
@@ -57,7 +57,7 @@ options available.
 Applying `hiddenInset` title bar style will shift the vertical inset of the traffic lights
 by a fixed amount.
 
-```js title='main.js'
+```javascript title='main.js'
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({ titleBarStyle: 'hiddenInset' })
 ```
@@ -66,7 +66,7 @@ If you need more granular control over the positioning of the traffic lights, yo
 a set of coordinates to the `trafficLightPosition` option in the `BrowserWindow`
 constructor.
 
-```js title='main.js'
+```javascript title='main.js'
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({
   titleBarStyle: 'hidden',
@@ -80,7 +80,7 @@ You can also show and hide the traffic lights programmatically from the main pro
 The `win.setWindowButtonVisibility` forces traffic lights to be show or hidden depending
 on the value of its boolean parameter.
 
-```js title='main.js'
+```javascript title='main.js'
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 // hides the traffic lights
@@ -106,7 +106,7 @@ The `titleBarOverlay` option accepts two different value formats.
 Specifying `true` on either platform will result in an overlay region with default
 system colors:
 
-```js title='main.js'
+```javascript title='main.js'
 // on macOS or Windows
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({
@@ -119,7 +119,7 @@ On either platform `titleBarOverlay` can also be an object. On both macOS and Wi
 
 If a color option is not specified, the color will default to its system color for the window control buttons. Similarly, if the height option is not specified it will default to the default height:
 
-```js title='main.js'
+```javascript title='main.js'
 // on Windows
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({
@@ -140,7 +140,7 @@ const win = new BrowserWindow({
 
 By setting the `transparent` option to `true`, you can make a fully transparent window.
 
-```js title='main.js'
+```javascript title='main.js'
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({ transparent: true })
 ```
@@ -169,7 +169,7 @@ To create a click-through window, i.e. making the window ignore all mouse
 events, you can call the [win.setIgnoreMouseEvents(ignore)][ignore-mouse-events]
 API:
 
-```js title='main.js'
+```javascript title='main.js'
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 win.setIgnoreMouseEvents(true)
@@ -182,7 +182,7 @@ meaning that mouse movement events will not be emitted. On Windows and macOS, an
 optional parameter can be used to forward mouse move messages to the web page,
 allowing events such as `mouseleave` to be emitted:
 
-```js title='main.js'
+```javascript title='main.js'
 const { BrowserWindow, ipcMain } = require('electron')
 const path = require('node:path')
 
@@ -198,7 +198,7 @@ ipcMain.on('set-ignore-mouse-events', (event, ignore, options) => {
 })
 ```
 
-```js title='preload.js'
+```javascript title='preload.js'
 window.addEventListener('DOMContentLoaded', () => {
   const el = document.getElementById('clickThroughElement')
   el.addEventListener('mouseenter', () => {