fix: revert SameParty cookie attribute removal

Update message-ports.md

fix multiplying object * a number. It would multiply number * number.

.circleci/config.yml

@@ -65,6 +65,9 @@ jobs:
             curl -fLSs https://raw.githubusercontent.com/CircleCI-Public/circleci-cli/main/install.sh | DESTDIR=$CIRCLECI_BINARY bash
             node build.js
           name: Pack config.yml
+      - run:
+          name: Set params
+          command: node .circleci/config/params.js
       - continuation/continue:
           configuration_path: .circleci/config-staging/built.yml
           parameters: /tmp/pipeline-parameters.json

.circleci/config/base.yml

@@ -35,6 +35,16 @@ parameters:
     default: all
     enum: ["all", "osx-x64", "osx-arm64", "mas-x64", "mas-arm64"]
 
+  medium-linux-executor:
+    type: enum
+    default: electronjs/aks-linux-medium
+    enum: ["electronjs/aks-linux-medium", "medium"]
+  
+  large-linux-executor:
+    type: enum
+    default: electronjs/aks-linux-large
+    enum: ["electronjs/aks-linux-large", "2xlarge"]
+
 # Executors
 executors:
   linux-docker:
@@ -42,9 +52,9 @@ executors:
       size:
         description: "Docker executor size"
         type: enum
-        # aks-linux-medium === 8 core (32 core host, shared with other builds)
         # aks-linux-large === 32 core
-        enum: ["medium", "xlarge", "electronjs/aks-linux-medium", "electronjs/aks-linux-large"]
+        # 2xlarge should not be used directly, use the pipeline param instead
+        enum: ["medium", "electronjs/aks-linux-medium", "xlarge", "electronjs/aks-linux-large", "2xlarge"]
     docker:
       - image: ghcr.io/electron/build:e6bebd08a51a0d78ec23e5b3fd7e7c0846412328
     resource_class: << parameters.size >>
@@ -249,19 +259,19 @@ step-depot-tools-get: &step-depot-tools-get
         cd depot_tools
         cat > gclient.diff \<< 'EOF'
       diff --git a/gclient.py b/gclient.py
-      index 3a9c5c6..f222043 100755
+      index c305c248..e6e0fbdc 100755
       --- a/gclient.py
       +++ b/gclient.py
-      @@ -712,7 +712,8 @@ class Dependency(gclient_utils.WorkItem, DependencySettings):
-
-             if dep_type == 'cipd':
-               cipd_root = self.GetCipdRoot()
-      -        for package in dep_value.get('packages', []):
-      +        packages = dep_value.get('packages', [])
-      +        for package in (x for x in packages if "infra/3pp/tools/swift-format" not in x.get('package')):
-                 deps_to_add.append(
-                     CipdDependency(
-                         parent=self,
+      @@ -735,7 +735,8 @@ class Dependency(gclient_utils.WorkItem, DependencySettings):
+ 
+                   if dep_type == 'cipd':
+                       cipd_root = self.GetCipdRoot()
+      -                for package in dep_value.get('packages', []):
+      +                packages = dep_value.get('packages', [])
+      +                for package in (x for x in packages if "infra/3pp/tools/swift-format" not in x.get('package')):
+                           deps_to_add.append(
+                               CipdDependency(parent=self,
+                                              name=name,
       EOF
         git apply --3way gclient.diff
       fi
@@ -349,7 +359,7 @@ step-setup-goma-for-build: &step-setup-goma-for-build
         exit 1
       fi
       echo 'export GN_GOMA_FILE='`node -e "console.log(require('./src/utils/goma.js').gnFilePath)"` >> $BASH_ENV
-      echo 'export LOCAL_GOMA_DIR='`node -e "console.log(require('./src/utils/goma.js').dir)"` >> $BASH_ENV
+      echo 'export GOMA_DIR='`node -e "console.log(require('./src/utils/goma.js').dir)"` >> $BASH_ENV
       echo 'export GOMA_FALLBACK_ON_AUTH_FAILURE=true' >> $BASH_ENV
       cd ..
       touch "${TMPDIR:=/tmp}"/.goma-ready
@@ -744,8 +754,8 @@ step-show-goma-stats: &step-show-goma-stats
     command: |
       set +e
       set +o pipefail
-      $LOCAL_GOMA_DIR/goma_ctl.py stat
-      $LOCAL_GOMA_DIR/diagnose_goma_log.py
+      $GOMA_DIR/goma_ctl.py stat
+      $GOMA_DIR/diagnose_goma_log.py
       true
     when: always
     background: true
@@ -895,14 +905,26 @@ step-touch-sync-done: &step-touch-sync-done
 step-maybe-restore-src-cache: &step-maybe-restore-src-cache
   restore_cache:
     keys:
-      - v16-src-cache-{{ checksum "src/electron/.depshash" }}
+      - v17-src-cache-{{ checksum "src/electron/.depshash" }}
     name: Restoring src cache
 step-maybe-restore-src-cache-marker: &step-maybe-restore-src-cache-marker
   restore_cache:
     keys:
-      - v16-src-cache-marker-{{ checksum "src/electron/.depshash" }}
+      - v17-src-cache-marker-{{ checksum "src/electron/.depshash" }}
     name: Restoring src cache marker
 
+step-maybe-restore-src-cache-aks: &step-maybe-restore-src-cache-aks
+  restore_cache_aks:
+    step-name: Restoring src cache
+    cache_key: v17-src-cache-$(shasum src/electron/.depshash | cut -f1 -d' ')
+    cache_path: /var/portal
+
+step-maybe-restore-src-cache-marker-aks: &step-maybe-restore-src-cache-marker-aks
+  restore_cache_aks:
+    step-name: Restoring src cache marker
+    cache_key: v17-src-cache-marker-$(shasum src/electron/.depshash | cut -f1 -d' ')
+    cache_path: "."
+
 # Restore exact or closest git cache based on the hash of DEPS and .circle-sync-done
 # If the src cache was restored above then this will match an empty cache
 # If the src cache was not restored above then this will match a close git cache
@@ -915,6 +937,12 @@ step-maybe-restore-git-cache: &step-maybe-restore-git-cache
       - v1-git-cache-{{ checksum "src/electron/.circle-sync-done" }}
     name: Conditionally restoring git cache
 
+step-maybe-restore-git-cache-aks: &step-maybe-restore-git-cache-aks
+  restore_cache_aks:
+    step-name: Conditionally restoring git cache (aks)
+    cache_key: v1-git-cache-$(shasum src/electron/.circle-sync-done | cut -f1 -d' ')-$(shasum src/electron/DEPS | cut -f1 -d' ') v1-git-cache-$(shasum src/electron/.circle-sync-done | cut -f1 -d' ')
+    cache_path: git-cache
+
 step-set-git-cache-path: &step-set-git-cache-path
   run:
     name: Set GIT_CACHE_PATH to make gclient to use the cache
@@ -932,6 +960,12 @@ step-save-git-cache: &step-save-git-cache
     key: v1-git-cache-{{ checksum "src/electron/.circle-sync-done" }}-{{ checksum "src/electron/DEPS" }}
     name: Persisting git cache
 
+step-save-git-cache-aks: &step-save-git-cache-aks
+  save_cache_aks:
+    step-name: Persisting git cache (AKS)
+    cache_key: v1-git-cache-$(shasum src/electron/.circle-sync-done | cut -f1 -d' ')-$(shasum src/electron/DEPS | cut -f1 -d' ')
+    cache_path: git-cache
+
 step-run-electron-only-hooks: &step-run-electron-only-hooks
   run:
     name: Run Electron Only Hooks
@@ -969,7 +1003,7 @@ step-save-src-cache: &step-save-src-cache
   save_cache:
     paths:
       - /var/portal
-    key: v16-src-cache-{{ checksum "/var/portal/src/electron/.depshash" }}
+    key: v17-src-cache-{{ checksum "/var/portal/src/electron/.depshash" }}
     name: Persisting src cache
 step-make-src-cache-marker: &step-make-src-cache-marker
   run:
@@ -979,7 +1013,17 @@ step-save-src-cache-marker: &step-save-src-cache-marker
   save_cache:
     paths:
       - .src-cache-marker
-    key: v16-src-cache-marker-{{ checksum "/var/portal/src/electron/.depshash" }}
+    key: v17-src-cache-marker-{{ checksum "/var/portal/src/electron/.depshash" }}
+step-save-src-cache-aks: &step-save-src-cache-aks
+  save_cache_aks:
+    step-name: Persisting src cache (aks)
+    cache_key: v17-src-cache-$(shasum /var/portal/src/electron/.depshash | cut -f1 -d' ')
+    cache_path: /var/portal
+step-save-src-cache-marker-aks: &step-save-src-cache-marker-aks
+  save_cache_aks:
+    step-name: Persisting src cache marker (aks)
+    cache_key: v17-src-cache-marker-$(shasum /var/portal/src/electron/.depshash | cut -f1 -d' ')
+    cache_path: .src-cache-marker
 
 step-maybe-early-exit-no-doc-change: &step-maybe-early-exit-no-doc-change
   run:
@@ -1005,15 +1049,6 @@ step-ts-compile: &step-ts-compile
       done
 
 # List of all steps.
-steps-electron-gn-check: &steps-electron-gn-check
-  steps:
-    - *step-setup-goma-for-build
-    - checkout-from-cache
-    - *step-setup-env-for-build
-    - *step-wait-for-goma
-    - *step-gn-gen-default
-    - *step-gn-check
-
 steps-electron-ts-compile-for-doc-change: &steps-electron-ts-compile-for-doc-change
   steps:
     # Checkout - Copied from steps-checkout
@@ -1025,11 +1060,92 @@ steps-electron-ts-compile-for-doc-change: &steps-electron-ts-compile-for-doc-cha
 
 # Command Aliases
 commands:
+  aks-specific-step:
+    parameters:
+      circle:
+        type: steps
+      aks:
+        type: steps
+      could-be-aks:
+        type: boolean
+        description: Only set this to true on linux hosts
+    steps:
+      - when:
+          condition:
+            or:
+              - equal: [<< parameters.could-be-aks >>, false]
+              - equal: [<< pipeline.parameters.large-linux-executor >>, 2xlarge]
+          steps: << parameters.circle >>
+      - when:
+          condition:
+            and:
+              - equal: [<< parameters.could-be-aks >>, true]
+              - equal: [<< pipeline.parameters.large-linux-executor >>, electronjs/aks-linux-large]
+          steps: << parameters.aks >>
+  save_cache_aks:
+    parameters:
+      step-name:
+        type: string
+      cache_key:
+        type: string
+      cache_path:
+        type: string
+    steps:
+      - run:
+          name: << parameters.step-name >>
+          command: |
+            cache_key="<< parameters.cache_key >>"
+            final_cache_path=/mnt/cross-instance-cache/${cache_key}.tar
+            echo "Using cache key: $cache_key"
+            echo "Checking path: $final_cache_path"
+            if [ ! -f "$final_cache_path" ]; then
+              echo "Cache key not founding, storing tarball"
+              tmp_container=/mnt/cross-instance-cache/tmp/$CIRCLE_WORKFLOW_JOB_ID
+              tmp_cache_path=$tmp_container/${cache_key}.tar
+              mkdir -p $tmp_container
+              if [ -f "<< parameters.cache_path >>" ]; then
+                tar -cf $tmp_cache_path -C $(dirname << parameters.cache_path >>) ./$(basename << parameters.cache_path >>)
+              else
+                tar -cf $tmp_cache_path -C << parameters.cache_path >>/ ./
+              fi
+              mv -vn $tmp_cache_path $final_cache_path
+              rm -rf $tmp_container
+            else
+              echo "Cache key already exists, skipping.."
+            fi
+  restore_cache_aks:
+    parameters:
+      step-name:
+        type: string
+      cache_key:
+        type: string
+      cache_path:
+        type: string
+    steps:
+      - run:
+          name: << parameters.step-name >>
+          command: |
+            df -h
+            for cache_key in << parameters.cache_key >>; do
+              cache_path=/mnt/cross-instance-cache/${cache_key}.tar
+              echo "Using cache key: $cache_key"
+              echo "Checking path: $cache_path"
+              if [ ! -f "$cache_path" ]; then
+                echo "Cache key not found, nothing to restore..."
+              else
+                echo "Cache key found, restoring to path..."
+                mkdir -p << parameters.cache_path >>/
+                tar -xf /mnt/cross-instance-cache/${cache_key}.tar -C << parameters.cache_path >>/
+                exit 0
+              fi
+            done
   maybe-restore-portaled-src-cache:
     parameters:
       halt-if-successful:
         type: boolean
         default: false
+      could-be-aks:
+        type: boolean
     steps:
       - run:
           name: Prepare for cross-OS sync restore
@@ -1039,23 +1155,44 @@ commands:
       - when:
           condition: << parameters.halt-if-successful >>
           steps:
-            - *step-maybe-restore-src-cache-marker
+            - aks-specific-step:
+                circle:
+                  - *step-maybe-restore-src-cache-marker
+                aks:
+                  - *step-maybe-restore-src-cache-marker-aks
+                could-be-aks: << parameters.could-be-aks >>
             - run:
                 name: Halt the job early if the src cache exists
                 command: |
                   if [ -f ".src-cache-marker" ]; then
                     circleci-agent step halt
                   fi
-      - *step-maybe-restore-src-cache
+      - aks-specific-step:
+          circle:
+            - *step-maybe-restore-src-cache
+          aks:
+            - *step-maybe-restore-src-cache-aks
+          could-be-aks: << parameters.could-be-aks >>
       - run:
-          name: Fix the src cache restore point on macOS
+          name: Fix the src cache restore point
           command: |
             if [ -d "/var/portal/src" ]; then
               echo Relocating Cache
               rm -rf src
               mv /var/portal/src ./
             fi
-
+  run-gn-check:
+    parameters:
+      could-be-aks:
+        type: boolean
+    steps:
+      - *step-setup-goma-for-build
+      - checkout-from-cache:
+          could-be-aks: << parameters.could-be-aks >>
+      - *step-setup-env-for-build
+      - *step-wait-for-goma
+      - *step-gn-gen-default
+      - *step-gn-check
   build_and_save_artifacts:
     parameters:
       artifact-key:
@@ -1169,12 +1306,16 @@ commands:
             mv_if_exist cross-arch-snapshots src
 
   checkout-from-cache:
+    parameters:
+      could-be-aks:
+        type: boolean
     steps:
       - *step-checkout-electron
       - *step-depot-tools-get
       - *step-depot-tools-add-to-path
       - *step-generate-deps-hash
-      - maybe-restore-portaled-src-cache
+      - maybe-restore-portaled-src-cache:
+          could-be-aks: << parameters.could-be-aks >>
       - run:
           name: Ensure src checkout worked
           command: |
@@ -1286,6 +1427,8 @@ commands:
       after-persist:
         type: steps
         default: []
+      could-be-aks:
+        type: boolean
     steps:
       - when:
           condition: << parameters.attach >>
@@ -1303,7 +1446,8 @@ commands:
       - when:
           condition: << parameters.checkout-and-assume-cache >>
           steps:
-            - checkout-from-cache
+            - checkout-from-cache:
+                could-be-aks: << parameters.could-be-aks >>
       - when:
           condition: << parameters.checkout >>
           steps:
@@ -1319,8 +1463,15 @@ commands:
                 steps:
                   - maybe-restore-portaled-src-cache:
                       halt-if-successful: << parameters.checkout-to-create-src-cache >>
-            - *step-maybe-restore-git-cache
+                      could-be-aks: << parameters.could-be-aks >>
+            - aks-specific-step:
+                circle:
+                  - *step-maybe-restore-git-cache
+                aks:
+                  - *step-maybe-restore-git-cache-aks
+                could-be-aks: << parameters.could-be-aks >>
             - *step-set-git-cache-path
+            - *step-fix-known-hosts-linux
             # This sync call only runs if .circle-sync-done is an EMPTY file
             - *step-gclient-sync
             - store_artifacts:
@@ -1336,7 +1487,12 @@ commands:
             - when:
                 condition: << parameters.save-git-cache >>
                 steps:
-                  - *step-save-git-cache
+                  - aks-specific-step:
+                      circle:
+                        - *step-save-git-cache
+                      aks:
+                        - *step-save-git-cache-aks
+                      could-be-aks: << parameters.could-be-aks >>
             # Mark sync as done _after_ saving the git cache so that it is uploaded
             # only when the src cache was not present
             # Their are theoretically two cases for this cache key
@@ -1386,9 +1542,19 @@ commands:
                         sudo mkdir -p /var/portal
                         sudo chown -R $(id -u):$(id -g) /var/portal
                         mv ./src /var/portal
-                  - *step-save-src-cache
+                  - aks-specific-step:
+                      circle:
+                        - *step-save-src-cache
+                      aks:
+                        - *step-save-src-cache-aks
+                      could-be-aks: << parameters.could-be-aks >>
                   - *step-make-src-cache-marker
-                  - *step-save-src-cache-marker
+                  - aks-specific-step:
+                      circle:
+                        - *step-save-src-cache-marker
+                      aks:
+                        - *step-save-src-cache-marker-aks
+                      could-be-aks: << parameters.could-be-aks >>
 
       - when:
           condition: << parameters.build >>
@@ -1442,6 +1608,18 @@ commands:
           condition: << parameters.build >>
           steps:
             - *step-maybe-notify-slack-failure
+      - when:
+          condition: << parameters.could-be-aks >>
+          steps:
+            - run:
+                name: Wait for active debug sessions
+                command: |
+                  while [ -f /var/.ssh-lock ]
+                  do
+                    sleep 60
+                  done
+                no_output_timeout: 2h
+                when: always
 
   electron-tests:
     parameters:
@@ -1628,7 +1806,7 @@ jobs:
   linux-make-src-cache:
     executor:
       name: linux-docker
-      size: xlarge
+      size: << pipeline.parameters.large-linux-executor >>
     environment:
       <<: *env-linux-2xlarge
       GCLIENT_EXTRA_ARGS: '--custom-var=checkout_arm=True --custom-var=checkout_arm64=True'
@@ -1641,6 +1819,7 @@ jobs:
           checkout-to-create-src-cache: true
           artifact-key: 'nil'
           build-type: 'nil'
+          could-be-aks: true
 
   mac-checkout:
     executor:
@@ -1660,6 +1839,7 @@ jobs:
           restore-src-cache: false
           artifact-key: 'nil'
           build-type: 'nil'
+          could-be-aks: false
 
   mac-make-src-cache-x64:
     executor:
@@ -1679,6 +1859,7 @@ jobs:
           checkout-to-create-src-cache: true
           artifact-key: 'nil'
           build-type: 'nil'
+          could-be-aks: false
 
   mac-make-src-cache-arm64:
     executor:
@@ -1698,12 +1879,13 @@ jobs:
           checkout-to-create-src-cache: true
           artifact-key: 'nil'
           build-type: 'nil'
+          could-be-aks: false
 
   # Layer 2: Builds.
   linux-x64-testing:
     executor:
       name: linux-docker
-      size: electronjs/aks-linux-large
+      size: << pipeline.parameters.large-linux-executor >>
     environment:
       <<: *env-global
       <<: *env-testing-build
@@ -1716,11 +1898,12 @@ jobs:
           checkout-and-assume-cache: true
           artifact-key: 'linux-x64'
           build-type: 'Linux'
+          could-be-aks: true
 
   linux-x64-testing-asan:
     executor:
       name: linux-docker
-      size: electronjs/aks-linux-large
+      size: << pipeline.parameters.large-linux-executor >>
     environment:
       <<: *env-global
       <<: *env-testing-build
@@ -1731,25 +1914,29 @@ jobs:
     steps:
       - electron-build:
           persist: true
-          checkout: true
+          checkout: false
+          checkout-and-assume-cache: true
           build-nonproprietary-ffmpeg: false
           artifact-key: 'linux-x64-asan'
           build-type: 'Linux'
+          could-be-aks: true
 
   linux-x64-testing-gn-check:
     executor:
       name: linux-docker
-      size: medium
+      size: << pipeline.parameters.medium-linux-executor >>
     environment:
       <<: *env-linux-medium
       <<: *env-testing-build
       GCLIENT_EXTRA_ARGS: '--custom-var=checkout_arm=True --custom-var=checkout_arm64=True'
-    <<: *steps-electron-gn-check
+    steps:
+      - run-gn-check:
+          could-be-aks: true
 
   linux-x64-publish:
     executor:
       name: linux-docker
-      size: electronjs/aks-linux-large
+      size: << pipeline.parameters.large-linux-executor >>
     environment:
       <<: *env-linux-2xlarge-release
       <<: *env-release-build
@@ -1772,7 +1959,7 @@ jobs:
   linux-arm-testing:
     executor:
       name: linux-docker
-      size: electronjs/aks-linux-large
+      size: << pipeline.parameters.large-linux-executor >>
     environment:
       <<: *env-global
       <<: *env-arm
@@ -1788,11 +1975,12 @@ jobs:
           checkout-and-assume-cache: true
           artifact-key: 'linux-arm'
           build-type: 'Linux ARM'
+          could-be-aks: true
 
   linux-arm-publish:
     executor:
       name: linux-docker
-      size: electronjs/aks-linux-large
+      size: << pipeline.parameters.large-linux-executor >>
     environment:
       <<: *env-linux-2xlarge-release
       <<: *env-arm
@@ -1817,7 +2005,7 @@ jobs:
   linux-arm64-testing:
     executor:
       name: linux-docker
-      size: electronjs/aks-linux-large
+      size: << pipeline.parameters.large-linux-executor >>
     environment:
       <<: *env-global
       <<: *env-arm64
@@ -1833,22 +2021,25 @@ jobs:
           checkout-and-assume-cache: true
           artifact-key: 'linux-arm64'
           build-type: 'Linux ARM64'
+          could-be-aks: true
 
   linux-arm64-testing-gn-check:
     executor:
       name: linux-docker
-      size: medium
+      size: << pipeline.parameters.medium-linux-executor >>
     environment:
       <<: *env-linux-medium
       <<: *env-arm64
       <<: *env-testing-build
       GCLIENT_EXTRA_ARGS: '--custom-var=checkout_arm=True --custom-var=checkout_arm64=True'
-    <<: *steps-electron-gn-check
+    steps:
+      - run-gn-check:
+          could-be-aks: true
 
   linux-arm64-publish:
     executor:
       name: linux-docker
-      size: electronjs/aks-linux-large
+      size: << pipeline.parameters.large-linux-executor >>
     environment:
       <<: *env-linux-2xlarge-release
       <<: *env-arm64
@@ -1903,6 +2094,7 @@ jobs:
                 root: .
                 paths:
                   - generated_artifacts_mas-x64
+          could-be-aks: false
 
   osx-testing-x64-gn-check:
     executor:
@@ -1912,7 +2104,9 @@ jobs:
       <<: *env-machine-mac
       <<: *env-testing-build
       GCLIENT_EXTRA_ARGS: '--custom-var=checkout_mac=True --custom-var=host_os=mac'
-    <<: *steps-electron-gn-check
+    steps:
+      - run-gn-check:
+          could-be-aks: false
 
   osx-publish-x64:
     executor:
@@ -1994,6 +2188,7 @@ jobs:
                 root: .
                 paths:
                   - generated_artifacts_mas-arm64
+          could-be-aks: false
 
   mas-publish-x64:
     executor:

.circleci/config/params.js

@@ -0,0 +1,12 @@
+const fs = require('fs');
+
+const PARAMS_PATH = '/tmp/pipeline-parameters.json';
+
+const content = JSON.parse(fs.readFileSync(PARAMS_PATH, 'utf-8'));
+
+// Choose resource class for linux hosts
+const currentBranch = process.env.CIRCLE_BRANCH || '';
+content['large-linux-executor'] = /^pull\/[0-9-]+$/.test(currentBranch) ? '2xlarge' : 'electronjs/aks-linux-large';
+content['medium-linux-executor'] = /^pull\/[0-9-]+$/.test(currentBranch) ? 'medium' : 'electronjs/aks-linux-medium';
+
+fs.writeFileSync(PARAMS_PATH, JSON.stringify(content));

.github/workflows/branch-created.yml

@@ -60,16 +60,15 @@ jobs:
           done
       - name: Generate GitHub App token
         if: ${{ steps.check-major-version.outputs.MAJOR }}
+        uses: electron/github-app-auth-action@cc6751b3b5e4edc5b9a4ad0a021ac455653b6dc8 # v1.0.0
         id: generate-token
-        env:
-          RELEASE_BOARD_GH_APP_CREDS: ${{ secrets.RELEASE_BOARD_GH_APP_CREDS }}
-        run: |
-          TOKEN=$(npx @electron/github-app-auth --creds=$RELEASE_BOARD_GH_APP_CREDS --org=electron)
-          echo "TOKEN=$TOKEN" >> "$GITHUB_OUTPUT"
+        with:
+          creds: ${{ secrets.RELEASE_BOARD_GH_APP_CREDS }}
+          org: electron
       - name: Create Release Project Board
         if: ${{ steps.check-major-version.outputs.MAJOR }}
         env:
-          GITHUB_TOKEN: ${{ steps.generate-token.outputs.TOKEN }}
+          GITHUB_TOKEN: ${{ steps.generate-token.outputs.token }}
           MAJOR: ${{ steps.check-major-version.outputs.MAJOR }}
           ELECTRON_ORG_ID: "O_kgDOAMybxg"
           ELECTRON_REPO_ID: "R_kgDOAI8xSw"

.github/workflows/issue-commented.yml

@@ -5,20 +5,22 @@ on:
     types:
       - created
 
-permissions:
-  contents: read
+permissions: {}
 
 jobs:
   issue-commented:
     name: Remove blocked/need-repro on comment
-    if: ${{ contains(github.event.issue.labels.*.name, 'blocked/need-repro') && !contains(fromJSON('["MEMBER", "OWNER"]'), github.event.comment.author_association) }}
-    permissions:
-      issues: write
+    if: ${{ contains(github.event.issue.labels.*.name, 'blocked/need-repro') && !contains(fromJSON('["MEMBER", "OWNER"]'), github.event.comment.author_association) && github.event.comment.user.type != 'Bot' }}
     runs-on: ubuntu-latest
     steps:
+      - name: Generate GitHub App token
+        uses: electron/github-app-auth-action@cc6751b3b5e4edc5b9a4ad0a021ac455653b6dc8 # v1.0.0
+        id: generate-token
+        with:
+          creds: ${{ secrets.ISSUE_TRIAGE_GH_APP_CREDS }}
       - name: Remove label
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ steps.generate-token.outputs.token }}
           ISSUE_URL: ${{ github.event.issue.html_url }}
         run: |
           gh issue edit $ISSUE_URL --remove-label 'blocked/need-repro'

.github/workflows/issue-labeled.yml

@@ -14,18 +14,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Generate GitHub App token
+        uses: electron/github-app-auth-action@cc6751b3b5e4edc5b9a4ad0a021ac455653b6dc8 # v1.0.0
         id: generate-token
-        env:
-          RELEASE_BOARD_GH_APP_CREDS: ${{ secrets.RELEASE_BOARD_GH_APP_CREDS }}
-        run: |
-          set -eo pipefail
-          TOKEN=$(npx @electron/github-app-auth --creds=$RELEASE_BOARD_GH_APP_CREDS --org=electron)
-          echo "TOKEN=$TOKEN" >> "$GITHUB_OUTPUT"
+        with:
+          creds: ${{ secrets.ISSUE_TRIAGE_GH_APP_CREDS }}
+          org: electron
       - name: Set status
-        if: ${{ steps.generate-token.outputs.TOKEN }}
         uses: github/update-project-action@2d475e08804f11f4022df7e21f5816531e97cb64 # v2
         with:
-          github_token: ${{ steps.generate-token.outputs.TOKEN }}
+          github_token: ${{ steps.generate-token.outputs.token }}
           organization: electron
           project_number: 90
           content_id: ${{ github.event.issue.node_id }}
@@ -45,15 +42,22 @@ jobs:
           GH_REPO: electron/electron
         run: |
           set -eo pipefail
-          COMMENT_COUNT=$(gh issue view ${{ github.event.issue.number }} --comments --json comments | jq '[ .comments[] | select(.author.login == "github-actions" or .authorAssociation == "OWNER" or .authorAssociation == "MEMBER") | select(.body | startswith("<!-- blocked/need-repro -->")) ] | length')
+          COMMENT_COUNT=$(gh issue view ${{ github.event.issue.number }} --comments --json comments | jq '[ .comments[] | select(.author.login == "electron-issue-triage" or .authorAssociation == "OWNER" or .authorAssociation == "MEMBER") | select(.body | startswith("<!-- blocked/need-repro -->")) ] | length')
           if [[ $COMMENT_COUNT -eq 0 ]]; then
             echo "SHOULD_COMMENT=1" >> "$GITHUB_OUTPUT"
           fi
+      - name: Generate GitHub App token
+        if: ${{ steps.check-for-comment.outputs.SHOULD_COMMENT }}
+        uses: electron/github-app-auth-action@cc6751b3b5e4edc5b9a4ad0a021ac455653b6dc8 # v1.0.0
+        id: generate-token
+        with:
+          creds: ${{ secrets.ISSUE_TRIAGE_GH_APP_CREDS }}
       - name: Create comment
         if: ${{ steps.check-for-comment.outputs.SHOULD_COMMENT }}
         uses: actions-cool/issues-helper@275328970dbc3bfc3bc43f5fe741bf3638300c0a # v3.3.3
         with:
           actions: 'create-comment'
+          token: ${{ steps.generate-token.outputs.token }}
           body: |
             <!-- blocked/need-repro -->
 

.github/workflows/issue-unlabeled.yml

@@ -10,7 +10,7 @@ permissions:
 jobs:
   issue-unlabeled-blocked:
     name: All blocked/* labels removed
-    if: startsWith(github.event.label.name, 'blocked/')
+    if: startsWith(github.event.label.name, 'blocked/') && github.event.issue.state == 'open'
     runs-on: ubuntu-latest
     steps:
       - name: Check for any blocked labels
@@ -23,18 +23,16 @@ jobs:
           fi
       - name: Generate GitHub App token
         if: ${{ steps.check-for-blocked-labels.outputs.NOT_BLOCKED }}
+        uses: electron/github-app-auth-action@cc6751b3b5e4edc5b9a4ad0a021ac455653b6dc8 # v1.0.0
         id: generate-token
-        env:
-          RELEASE_BOARD_GH_APP_CREDS: ${{ secrets.RELEASE_BOARD_GH_APP_CREDS }}
-        run: |
-          set -eo pipefail
-          TOKEN=$(npx @electron/github-app-auth --creds=$RELEASE_BOARD_GH_APP_CREDS --org=electron)
-          echo "TOKEN=$TOKEN" >> "$GITHUB_OUTPUT"
+        with:
+          creds: ${{ secrets.ISSUE_TRIAGE_GH_APP_CREDS }}
+          org: electron
       - name: Set status
-        if: ${{ steps.generate-token.outputs.TOKEN }}
+        if: ${{ steps.check-for-blocked-labels.outputs.NOT_BLOCKED }}
         uses: github/update-project-action@2d475e08804f11f4022df7e21f5816531e97cb64 # v2
         with:
-          github_token: ${{ steps.generate-token.outputs.TOKEN }}
+          github_token: ${{ steps.generate-token.outputs.token }}
           organization: electron
           project_number: 90
           content_id: ${{ github.event.issue.node_id }}

.github/workflows/pull-request-labeled.yml

@@ -14,18 +14,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Generate GitHub App token
+        uses: electron/github-app-auth-action@cc6751b3b5e4edc5b9a4ad0a021ac455653b6dc8 # v1.0.0
         id: generate-token
-        env:
-          RELEASE_BOARD_GH_APP_CREDS: ${{ secrets.RELEASE_BOARD_GH_APP_CREDS }}
-        run: |
-          set -eo pipefail
-          TOKEN=$(npx @electron/github-app-auth --creds=$RELEASE_BOARD_GH_APP_CREDS --org=electron)
-          echo "TOKEN=$TOKEN" >> "$GITHUB_OUTPUT"
+        with:
+          creds: ${{ secrets.RELEASE_BOARD_GH_APP_CREDS }}
+          org: electron
       - name: Set status
-        if: ${{ steps.generate-token.outputs.TOKEN }}
         uses: dsanders11/update-project-action@7ade91760df70df76770a238abee7a4869e01cf8
         with:
-          github_token: ${{ steps.generate-token.outputs.TOKEN }}
+          github_token: ${{ steps.generate-token.outputs.token }}
           organization: electron
           project_number: 94
           content_id: ${{ github.event.pull_request.node_id }}

.github/workflows/stale.yml

@@ -5,15 +5,20 @@ on:
     # 1:30am every day
     - cron: '30 1 * * *'
 
-permissions:
-  issues: write
+permissions: {}
 
 jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
+      - name: Generate GitHub App token
+        uses: electron/github-app-auth-action@cc6751b3b5e4edc5b9a4ad0a021ac455653b6dc8 # v1.0.0
+        id: generate-token
+        with:
+          creds: ${{ secrets.ISSUE_TRIAGE_GH_APP_CREDS }}
       - uses: actions/stale@5ebf00ea0e4c1561e9b43a292ed34424fb1d4578 # tag: v6.0.1
         with:
+          repo-token: ${{ steps.generate-token.outputs.token }}
           days-before-stale: 90
           days-before-close: 30
           stale-issue-label: stale
@@ -29,8 +34,14 @@ jobs:
     if: ${{ always() }}
     needs: stale
     steps:
+      - name: Generate GitHub App token
+        uses: electron/github-app-auth-action@cc6751b3b5e4edc5b9a4ad0a021ac455653b6dc8 # v1.0.0
+        id: generate-token
+        with:
+          creds: ${{ secrets.ISSUE_TRIAGE_GH_APP_CREDS }}
       - uses: actions/stale@5ebf00ea0e4c1561e9b43a292ed34424fb1d4578 # tag: v6.0.1
         with:
+          repo-token: ${{ steps.generate-token.outputs.token }}
           days-before-stale: -1
           days-before-close: 10
           remove-stale-when-updated: false

BUILD.gn

@@ -671,6 +671,13 @@ source_set("electron_lib") {
     ]
   }
 
+  if (enable_views_api) {
+    sources += [
+      "shell/browser/api/views/electron_api_image_view.cc",
+      "shell/browser/api/views/electron_api_image_view.h",
+    ]
+  }
+
   if (enable_printing) {
     sources += [
       "shell/browser/printing/print_view_manager_electron.cc",
@@ -723,8 +730,8 @@ source_set("electron_lib") {
       "//pdf",
     ]
     sources += [
-      "shell/browser/electron_pdf_web_contents_helper_client.cc",
-      "shell/browser/electron_pdf_web_contents_helper_client.h",
+      "shell/browser/electron_pdf_document_helper_client.cc",
+      "shell/browser/electron_pdf_document_helper_client.h",
       "shell/browser/extensions/api/pdf_viewer_private/pdf_viewer_private_api.cc",
       "shell/browser/extensions/api/pdf_viewer_private/pdf_viewer_private_api.h",
     ]
@@ -899,7 +906,7 @@ if (is_mac) {
       output_name = electron_helper_name + invoker.helper_name_suffix
       deps = [
         ":electron_framework+link",
-        "//base/allocator:early_zone_registration_mac",
+        "//base/allocator:early_zone_registration_apple",
       ]
       if (!is_mas_build) {
         deps += [ "//sandbox/mac:seatbelt" ]
@@ -1061,7 +1068,7 @@ if (is_mac) {
       ":electron_app_plist",
       ":electron_app_resources",
       ":electron_fuses",
-      "//base/allocator:early_zone_registration_mac",
+      "//base/allocator:early_zone_registration_apple",
       "//electron/buildflags",
     ]
     if (is_mas_build) {

DEPS

@@ -2,11 +2,11 @@ gclient_gn_args_from = 'src'
 
 vars = {
   'chromium_version':
-    '118.0.5949.0',
+    '119.0.6019.2',
   'node_version':
-    'v18.17.1',
+    'v18.18.0',
   'nan_version':
-    '16fa32231e2ccd89d2804b3f765319128b20c4ac',
+    'e14bdcd1f72d62bca1d541b66da43130384ec213',
   'squirrel.mac_version':
     '0e5d146ba13101a1302d59ea6e6e0b3cace4ae38',
   'reactiveobjc_version':

README.md

@@ -78,7 +78,7 @@ binary. Use this to spawn Electron from Node scripts:
 
 ```javascript
 const electron = require('electron')
-const proc = require('child_process')
+const proc = require('node:child_process')
 
 // will print something similar to /Users/maf/.../Electron
 console.log(electron)

appveyor-woa.yml

@@ -29,7 +29,7 @@
 
 version: 1.0.{build}
 build_cloud: electronhq-16-core
-image: e-118.0.5949.0
+image: e-119.0.6019.2
 environment:
   GIT_CACHE_PATH: C:\Users\appveyor\libcc_cache
   ELECTRON_OUT_DIR: Default

appveyor.yml

@@ -29,7 +29,7 @@
 
 version: 1.0.{build}
 build_cloud: electronhq-16-core
-image: e-118.0.5949.0
+image: e-119.0.6019.2
 environment:
   GIT_CACHE_PATH: C:\Users\appveyor\libcc_cache
   ELECTRON_OUT_DIR: Default

build/webpack/webpack.config.base.js

@@ -53,6 +53,12 @@ module.exports = ({
 
     const ignoredModules = [];
 
+    if (defines.ENABLE_VIEWS_API === 'false') {
+      ignoredModules.push(
+        '@electron/internal/browser/api/views/image-view.js'
+      );
+    }
+
     const plugins = [];
 
     if (onlyPrintingGraph) {

buildflags/BUILD.gn

@@ -9,6 +9,7 @@ buildflag_header("buildflags") {
   header = "buildflags.h"
 
   flags = [
+    "ENABLE_VIEWS_API=$enable_views_api",
     "ENABLE_PDF_VIEWER=$enable_pdf_viewer",
     "ENABLE_ELECTRON_EXTENSIONS=$enable_electron_extensions",
     "ENABLE_BUILTIN_SPELLCHECKER=$enable_builtin_spellchecker",

buildflags/buildflags.gni

@@ -3,6 +3,8 @@
 # found in the LICENSE file.
 
 declare_args() {
+  enable_views_api = true
+
   enable_pdf_viewer = true
 
   # Provide a fake location provider for mocking

chromium_src/BUILD.gn

@@ -37,6 +37,8 @@ static_library("chrome") {
     "//chrome/browser/icon_loader.h",
     "//chrome/browser/icon_manager.cc",
     "//chrome/browser/icon_manager.h",
+    "//chrome/browser/media/webrtc/desktop_capturer_wrapper.cc",
+    "//chrome/browser/media/webrtc/desktop_capturer_wrapper.h",
     "//chrome/browser/media/webrtc/desktop_media_list.cc",
     "//chrome/browser/media/webrtc/desktop_media_list.h",
     "//chrome/browser/media/webrtc/desktop_media_list_base.cc",
@@ -44,6 +46,8 @@ static_library("chrome") {
     "//chrome/browser/media/webrtc/desktop_media_list_observer.h",
     "//chrome/browser/media/webrtc/native_desktop_media_list.cc",
     "//chrome/browser/media/webrtc/native_desktop_media_list.h",
+    "//chrome/browser/media/webrtc/thumbnail_capturer.cc",
+    "//chrome/browser/media/webrtc/thumbnail_capturer.h",
     "//chrome/browser/media/webrtc/window_icon_util.h",
     "//chrome/browser/net/chrome_mojo_proxy_resolver_factory.cc",
     "//chrome/browser/net/chrome_mojo_proxy_resolver_factory.h",
@@ -51,6 +55,8 @@ static_library("chrome") {
     "//chrome/browser/net/proxy_config_monitor.h",
     "//chrome/browser/net/proxy_service_factory.cc",
     "//chrome/browser/net/proxy_service_factory.h",
+    "//chrome/browser/picture_in_picture/picture_in_picture_bounds_cache.cc",
+    "//chrome/browser/picture_in_picture/picture_in_picture_bounds_cache.h",
     "//chrome/browser/picture_in_picture/picture_in_picture_window_manager.cc",
     "//chrome/browser/picture_in_picture/picture_in_picture_window_manager.h",
     "//chrome/browser/platform_util.cc",

default_app/default_app.ts

@@ -51,16 +51,17 @@ async function createWindow (backgroundColor?: string) {
     autoHideMenuBar: true,
     backgroundColor,
     webPreferences: {
-      preload: path.resolve(__dirname, 'preload.js'),
+      preload: url.fileURLToPath(new URL('preload.js', import.meta.url)),
       contextIsolation: true,
-      sandbox: true
+      sandbox: true,
+      nodeIntegration: false
     },
     useContentSize: true,
     show: false
   };
 
   if (process.platform === 'linux') {
-    options.icon = path.join(__dirname, 'icon.png');
+    options.icon = url.fileURLToPath(new URL('icon.png', import.meta.url));
   }
 
   mainWindow = new BrowserWindow(options);

default_app/main.ts

@@ -1,6 +1,7 @@
 import * as electron from 'electron/main';
 
 import * as fs from 'node:fs';
+import { Module } from 'node:module';
 import * as path from 'node:path';
 import * as url from 'node:url';
 const { app, dialog } = electron;
@@ -15,8 +16,6 @@ type DefaultAppOptions = {
   modules: string[];
 }
 
-const Module = require('node:module');
-
 // Parse command line options.
 const argv = process.argv.slice(1);
 
@@ -71,10 +70,10 @@ if (nextArgIsRequire) {
 
 // Set up preload modules
 if (option.modules.length > 0) {
-  Module._preloadModules(option.modules);
+  (Module as any)._preloadModules(option.modules);
 }
 
-function loadApplicationPackage (packagePath: string) {
+async function loadApplicationPackage (packagePath: string) {
   // Add a flag indicating app is started from default app.
   Object.defineProperty(process, 'defaultApp', {
     configurable: false,
@@ -89,11 +88,19 @@ function loadApplicationPackage (packagePath: string) {
     let appPath;
     if (fs.existsSync(packageJsonPath)) {
       let packageJson;
+      const emitWarning = process.emitWarning;
       try {
-        packageJson = require(packageJsonPath);
+        process.emitWarning = () => {};
+        packageJson = (await import(url.pathToFileURL(packageJsonPath).toString(), {
+          assert: {
+            type: 'json'
+          }
+        })).default;
       } catch (e) {
         showErrorMessage(`Unable to parse ${packageJsonPath}\n\n${(e as Error).message}`);
         return;
+      } finally {
+        process.emitWarning = emitWarning;
       }
 
       if (packageJson.version) {
@@ -112,13 +119,15 @@ function loadApplicationPackage (packagePath: string) {
       // Set v8 flags, deliberately lazy load so that apps that do not use this
       // feature do not pay the price
       if (packageJson.v8Flags) {
-        require('node:v8').setFlagsFromString(packageJson.v8Flags);
+        (await import('node:v8')).setFlagsFromString(packageJson.v8Flags);
       }
       appPath = packagePath;
     }
 
+    let filePath: string;
+
     try {
-      const filePath = Module._resolveFilename(packagePath, module, true);
+      filePath = (Module as any)._resolveFilename(packagePath, null, true);
       app.setAppPath(appPath || path.dirname(filePath));
     } catch (e) {
       showErrorMessage(`Unable to find Electron app at ${packagePath}\n\n${(e as Error).message}`);
@@ -126,7 +135,7 @@ function loadApplicationPackage (packagePath: string) {
     }
 
     // Run the app.
-    Module._load(packagePath, module, true);
+    await import(url.pathToFileURL(filePath).toString());
   } catch (e) {
     console.error('App threw an error during load');
     console.error((e as Error).stack || e);
@@ -141,16 +150,16 @@ function showErrorMessage (message: string) {
 }
 
 async function loadApplicationByURL (appUrl: string) {
-  const { loadURL } = await import('./default_app');
+  const { loadURL } = await import('./default_app.js');
   loadURL(appUrl);
 }
 
 async function loadApplicationByFile (appPath: string) {
-  const { loadFile } = await import('./default_app');
+  const { loadFile } = await import('./default_app.js');
   loadFile(appPath);
 }
 
-function startRepl () {
+async function startRepl () {
   if (process.platform === 'win32') {
     console.error('Electron REPL not currently supported on Windows');
     process.exit(1);
@@ -171,8 +180,8 @@ function startRepl () {
     Using: Node.js ${nodeVersion} and Electron.js ${electronVersion}
   `);
 
-  const { REPLServer } = require('node:repl');
-  const repl = new REPLServer({
+  const { start } = await import('node:repl');
+  const repl = start({
     prompt: '> '
   }).on('exit', () => {
     process.exit(0);
@@ -225,8 +234,8 @@ function startRepl () {
 
   const electronBuiltins = [...Object.keys(electron), 'original-fs', 'electron'];
 
-  const defaultComplete = repl.completer;
-  repl.completer = (line: string, callback: Function) => {
+  const defaultComplete: Function = repl.completer;
+  (repl as any).completer = (line: string, callback: Function) => {
     const lastSpace = line.lastIndexOf(' ');
     const currentSymbol = line.substring(lastSpace + 1, repl.cursor);
 
@@ -249,11 +258,11 @@ if (option.file && !option.webdriver) {
   const protocol = url.parse(file).protocol;
   const extension = path.extname(file);
   if (protocol === 'http:' || protocol === 'https:' || protocol === 'file:' || protocol === 'chrome:') {
-    loadApplicationByURL(file);
+    await loadApplicationByURL(file);
   } else if (extension === '.html' || extension === '.htm') {
-    loadApplicationByFile(path.resolve(file));
+    await loadApplicationByFile(path.resolve(file));
   } else {
-    loadApplicationPackage(file);
+    await loadApplicationPackage(file);
   }
 } else if (option.version) {
   console.log('v' + process.versions.electron);
@@ -262,7 +271,7 @@ if (option.file && !option.webdriver) {
   console.log(process.versions.modules);
   process.exit(0);
 } else if (option.interactive) {
-  startRepl();
+  await startRepl();
 } else {
   if (!option.noHelp) {
     const welcomeMessage = `
@@ -285,5 +294,5 @@ Options:
     console.log(welcomeMessage);
   }
 
-  loadApplicationByFile('index.html');
+  await loadApplicationByFile('index.html');
 }

default_app/package.json

@@ -1,5 +1,6 @@
 {
   "name": "electron",
   "productName": "Electron",
-  "main": "main.js"
+  "main": "main.js",
+  "type": "module"
 }

default_app/preload.ts

@@ -1,4 +1,4 @@
-import { ipcRenderer, contextBridge } from 'electron/renderer';
+const { ipcRenderer, contextBridge } = require('electron/renderer');
 
 const policy = window.trustedTypes.createPolicy('electron-default-app', {
   // we trust the SVG contents

docs/README.md

@@ -106,7 +106,7 @@ These individual tutorials expand on topics discussed in the guide above.
 
 * [app](api/app.md)
 * [autoUpdater](api/auto-updater.md)
-* [BaseWindow](api/base-window.md)
+* [BrowserView](api/browser-view.md)
 * [BrowserWindow](api/browser-window.md)
 * [contentTracing](api/content-tracing.md)
 * [desktopCapturer](api/desktop-capturer.md)
@@ -134,10 +134,8 @@ These individual tutorials expand on topics discussed in the guide above.
 * [TouchBar](api/touch-bar.md)
 * [Tray](api/tray.md)
 * [utilityProcess](api/utility-process.md)
-* [View](api/view.md)
 * [webContents](api/web-contents.md)
 * [webFrameMain](api/web-frame-main.md)
-* [WebContentsView](api/web-contents-view.md)
 
 ### Modules for the Renderer Process (Web Page):
 

docs/api/app.md

@@ -1333,7 +1333,7 @@ application name. For example:
 
 ``` js
 const { app } = require('electron')
-const path = require('path')
+const path = require('node:path')
 
 const appFolder = path.dirname(process.execPath)
 const updateExe = path.resolve(appFolder, '..', 'Update.exe')
@@ -1404,7 +1404,7 @@ Returns `Function` - This function **must** be called once you have finished acc
 
 ```js
 const { app, dialog } = require('electron')
-const fs = require('fs')
+const fs = require('node:fs')
 
 let filepath
 let bookmark

docs/api/browser-view.md

@@ -1,9 +1,5 @@
 # BrowserView
 
-> **Note**
-> The `BrowserView` class is deprecated, and replaced by the new
-> [`WebContentsView`](web-contents-view.md) class.
-
 A `BrowserView` can be used to embed additional web content into a
 [`BrowserWindow`](browser-window.md). It is like a child window, except that it is positioned
 relative to its owning window. It is meant to be an alternative to the
@@ -13,10 +9,6 @@ relative to its owning window. It is meant to be an alternative to the
 
 > Create and control views.
 
-> **Note**
-> The `BrowserView` class is deprecated, and replaced by the new
-> [`WebContentsView`](web-contents-view.md) class.
-
 Process: [Main](../glossary.md#main-process)
 
 This module cannot be used until the `ready` event of the `app`
@@ -38,7 +30,7 @@ app.whenReady().then(() => {
 })
 ```
 
-### `new BrowserView([options])` _Experimental_ _Deprecated_
+### `new BrowserView([options])` _Experimental_
 
 * `options` Object (optional)
   * `webPreferences` [WebPreferences](structures/web-preferences.md?inline) (optional) - Settings of web page's features.
@@ -47,7 +39,7 @@ app.whenReady().then(() => {
 
 Objects created with `new BrowserView` have the following properties:
 
-#### `view.webContents` _Experimental_ _Deprecated_
+#### `view.webContents` _Experimental_
 
 A [`WebContents`](web-contents.md) object owned by this view.
 
@@ -55,7 +47,7 @@ A [`WebContents`](web-contents.md) object owned by this view.
 
 Objects created with `new BrowserView` have the following instance methods:
 
-#### `view.setAutoResize(options)` _Experimental_ _Deprecated_
+#### `view.setAutoResize(options)` _Experimental_
 
 * `options` Object
   * `width` boolean (optional) - If `true`, the view's width will grow and shrink together
@@ -67,19 +59,19 @@ Objects created with `new BrowserView` have the following instance methods:
   * `vertical` boolean (optional) - If `true`, the view's y position and height will grow
     and shrink proportionally with the window. `false` by default.
 
-#### `view.setBounds(bounds)` _Experimental_ _Deprecated_
+#### `view.setBounds(bounds)` _Experimental_
 
 * `bounds` [Rectangle](structures/rectangle.md)
 
 Resizes and moves the view to the supplied bounds relative to the window.
 
-#### `view.getBounds()` _Experimental_ _Deprecated_
+#### `view.getBounds()` _Experimental_
 
 Returns [`Rectangle`](structures/rectangle.md)
 
 The `bounds` of this BrowserView instance as `Object`.
 
-#### `view.setBackgroundColor(color)` _Experimental_ _Deprecated_
+#### `view.setBackgroundColor(color)` _Experimental_
 
 * `color` string - Color in Hex, RGB, ARGB, HSL, HSLA or named CSS color format. The alpha channel is
   optional for the hex type.
@@ -87,25 +79,25 @@ The `bounds` of this BrowserView instance as `Object`.
 Examples of valid `color` values:
 
 * Hex
-  * `#fff` (RGB)
-  * `#ffff` (ARGB)
-  * `#ffffff` (RRGGBB)
-  * `#ffffffff` (AARRGGBB)
+  * #fff (RGB)
+  * #ffff (ARGB)
+  * #ffffff (RRGGBB)
+  * #ffffffff (AARRGGBB)
 * RGB
-  * `rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)`
-    * e.g. `rgb(255, 255, 255)`
+  * rgb\((\[\d]+),\s*(\[\d]+),\s*(\[\d]+)\)
+    * e.g. rgb(255, 255, 255)
 * RGBA
-  * `rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)`
-    * e.g. `rgba(255, 255, 255, 1.0)`
+  * rgba\((\[\d]+),\s*(\[\d]+),\s*(\[\d]+),\s*(\[\d.]+)\)
+    * e.g. rgba(255, 255, 255, 1.0)
 * HSL
-  * `hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)`
-    * e.g. `hsl(200, 20%, 50%)`
+  * hsl\((-?\[\d.]+),\s*(\[\d.]+)%,\s*(\[\d.]+)%\)
+    * e.g. hsl(200, 20%, 50%)
 * HSLA
-  * `hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)`
-    * e.g. `hsla(200, 20%, 50%, 0.5)`
+  * hsla\((-?\[\d.]+),\s*(\[\d.]+)%,\s*(\[\d.]+)%,\s*(\[\d.]+)\)
+    * e.g. hsla(200, 20%, 50%, 0.5)
 * Color name
   * Options are listed in [SkParseColor.cpp](https://source.chromium.org/chromium/chromium/src/+/main:third_party/skia/src/utils/SkParseColor.cpp;l=11-152;drc=eea4bf52cb0d55e2a39c828b017c80a5ee054148)
   * Similar to CSS Color Module Level 3 keywords, but case-sensitive.
     * e.g. `blueviolet` or `red`
 
-**Note:** Hex format with alpha takes `AARRGGBB` or `ARGB`, _not_ `RRGGBBAA` or `RGB`.
+**Note:** Hex format with alpha takes `AARRGGBB` or `ARGB`, _not_ `RRGGBBA` or `RGA`.

docs/api/browser-window.md

@@ -140,7 +140,7 @@ state is `hidden` in order to minimize power consumption.
 * On Linux the type of modal windows will be changed to `dialog`.
 * On Linux many desktop environments do not support hiding a modal window.
 
-## Class: BrowserWindow extends `BaseWindow`
+## Class: BrowserWindow
 
 > Create and control browser windows.
 
@@ -367,36 +367,6 @@ The following app commands are explicitly supported on Linux:
 * `browser-backward`
 * `browser-forward`
 
-#### Event: 'scroll-touch-begin' _macOS_ _Deprecated_
-
-Emitted when scroll wheel event phase has begun.
-
-> **Note**
-> This event is deprecated beginning in Electron 22.0.0. See [Breaking
-> Changes](../breaking-changes.md#deprecated-browserwindow-scroll-touch--events)
-> for details of how to migrate to using the [WebContents
-> `input-event`](./web-contents.md#event-input-event) event.
-
-#### Event: 'scroll-touch-end' _macOS_ _Deprecated_
-
-Emitted when scroll wheel event phase has ended.
-
-> **Note**
-> This event is deprecated beginning in Electron 22.0.0. See [Breaking
-> Changes](../breaking-changes.md#deprecated-browserwindow-scroll-touch--events)
-> for details of how to migrate to using the [WebContents
-> `input-event`](./web-contents.md#event-input-event) event.
-
-#### Event: 'scroll-touch-edge' _macOS_ _Deprecated_
-
-Emitted when scroll wheel event phase filed upon reaching the edge of element.
-
-> **Note**
-> This event is deprecated beginning in Electron 22.0.0. See [Breaking
-> Changes](../breaking-changes.md#deprecated-browserwindow-scroll-touch--events)
-> for details of how to migrate to using the [WebContents
-> `input-event`](./web-contents.md#event-input-event) event.
-
 #### Event: 'swipe' _macOS_
 
 Returns:
@@ -470,14 +440,10 @@ Returns `BrowserWindow | null` - The window that is focused in this application,
 Returns `BrowserWindow | null` - The window that owns the given `webContents`
 or `null` if the contents are not owned by a window.
 
-#### `BrowserWindow.fromBrowserView(browserView)` _Deprecated_
+#### `BrowserWindow.fromBrowserView(browserView)`
 
 * `browserView` [BrowserView](browser-view.md)
 
-> **Note**
-> The `BrowserView` class is deprecated, and replaced by the new
-> [`WebContentsView`](web-contents-view.md) class.
-
 Returns `BrowserWindow | null` - The window that owns the given `browserView`. If the given view is not attached to any window, returns `null`.
 
 #### `BrowserWindow.fromId(id)`
@@ -1215,7 +1181,7 @@ const win = new BrowserWindow()
 const url = require('url').format({
   protocol: 'file',
   slashes: true,
-  pathname: require('path').join(__dirname, 'index.html')
+  pathname: require('node:path').join(__dirname, 'index.html')
 })
 
 win.loadURL(url)
@@ -1610,69 +1576,48 @@ machine has a touch bar.
 **Note:** The TouchBar API is currently experimental and may change or be
 removed in future Electron releases.
 
-#### `win.setBrowserView(browserView)` _Experimental_ _Deprecated_
+#### `win.setBrowserView(browserView)` _Experimental_
 
 * `browserView` [BrowserView](browser-view.md) | null - Attach `browserView` to `win`.
 If there are other `BrowserView`s attached, they will be removed from
 this window.
 
-> **Note**
-> The `BrowserView` class is deprecated, and replaced by the new
-> [`WebContentsView`](web-contents-view.md) class.
-
-#### `win.getBrowserView()` _Experimental_ _Deprecated_
+#### `win.getBrowserView()` _Experimental_
 
 Returns `BrowserView | null` - The `BrowserView` attached to `win`. Returns `null`
 if one is not attached. Throws an error if multiple `BrowserView`s are attached.
 
-> **Note**
-> The `BrowserView` class is deprecated, and replaced by the new
-> [`WebContentsView`](web-contents-view.md) class.
-
-#### `win.addBrowserView(browserView)` _Experimental_ _Deprecated_
+#### `win.addBrowserView(browserView)` _Experimental_
 
 * `browserView` [BrowserView](browser-view.md)
 
 Replacement API for setBrowserView supporting work with multi browser views.
 
-> **Note**
-> The `BrowserView` class is deprecated, and replaced by the new
-> [`WebContentsView`](web-contents-view.md) class.
-
-#### `win.removeBrowserView(browserView)` _Experimental_ _Deprecated_
+#### `win.removeBrowserView(browserView)` _Experimental_
 
 * `browserView` [BrowserView](browser-view.md)
 
-> **Note**
-> The `BrowserView` class is deprecated, and replaced by the new
-> [`WebContentsView`](web-contents-view.md) class.
-
-#### `win.setTopBrowserView(browserView)` _Experimental_ _Deprecated_
+#### `win.setTopBrowserView(browserView)` _Experimental_
 
 * `browserView` [BrowserView](browser-view.md)
 
 Raises `browserView` above other `BrowserView`s attached to `win`.
 Throws an error if `browserView` is not attached to `win`.
 
-> **Note**
-> The `BrowserView` class is deprecated, and replaced by the new
-> [`WebContentsView`](web-contents-view.md) class.
-
-#### `win.getBrowserViews()` _Experimental_ _Deprecated_
+#### `win.getBrowserViews()` _Experimental_
 
 Returns `BrowserView[]` - a sorted by z-index array of all BrowserViews that have been attached
 with `addBrowserView` or `setBrowserView`. The top-most BrowserView is the last element of the array.
 
-> **Note**
-> The `BrowserView` class is deprecated, and replaced by the new
-> [`WebContentsView`](web-contents-view.md) class.
+**Note:** The BrowserView API is currently experimental and may change or be
+removed in future Electron releases.
 
 #### `win.setTitleBarOverlay(options)` _Windows_
 
 * `options` Object
   * `color` String (optional) _Windows_ - The CSS color of the Window Controls Overlay when enabled.
   * `symbolColor` String (optional) _Windows_ - The CSS color of the symbols on the Window Controls Overlay when enabled.
-  * `height` Integer (optional) _Windows_ - The height of the title bar and Window Controls Overlay in pixels.
+  * `height` Integer (optional) _macOS_ _Windows_ - The height of the title bar and Window Controls Overlay in pixels.
 
 On a Window with Window Controls Overlay already enabled, this method updates
 the style of the title bar overlay.

docs/api/context-bridge.md

@@ -147,7 +147,7 @@ Be very cautious about which globals and APIs you expose to untrusted remote con
 
 ```javascript
 const { contextBridge } = require('electron')
-const crypto = require('crypto')
+const crypto = require('node:crypto')
 contextBridge.exposeInMainWorld('nodeCrypto', {
   sha256sum (data) {
     const hash = crypto.createHash('sha256')

docs/api/cookies.md

@@ -119,4 +119,8 @@ Removes the cookies matching `url` and `name`
 
 Returns `Promise<void>` - A promise which resolves when the cookie store has been flushed
 
-Writes any unwritten cookies data to disk.
+Writes any unwritten cookies data to disk
+
+Cookies written by any method will not be written to disk immediately, but will be written every 30 seconds or 512 operations
+
+Calling this method can cause the cookie to be written to disk immediately.

docs/api/environment-variables.md

@@ -111,6 +111,16 @@ Options:
 * `kioclient5`
 * `kioclient`
 
+### `ELECTRON_OZONE_PLATFORM_HINT` _Linux_
+
+Selects the preferred platform backend used on Linux. The default one is `x11`. `auto` selects Wayland if possible, X11 otherwise.
+
+Options:
+
+* `auto`
+* `wayland`
+* `x11`
+
 ## Development Variables
 
 The following environment variables are intended primarily for development and
@@ -132,6 +142,11 @@ Setting this variable is the same as passing `--log-file`
 on the command line. For more info, see `--log-file` in [command-line
 switches](./command-line-switches.md#--log-filepath).
 
+### `ELECTRON_DEBUG_DRAG_REGIONS`
+
+Adds coloration to draggable regions on [`BrowserView`](./browser-view.md)s on macOS - draggable regions will be colored
+green and non-draggable regions will be colored red to aid debugging.
+
 ### `ELECTRON_DEBUG_NOTIFICATIONS`
 
 Adds extra logs to [`Notification`](./notification.md) lifecycles on macOS to aid in debugging. Extra logging will be displayed when new Notifications are created or activated. They will also be displayed when common actions are taken: a notification is shown, dismissed, its button is clicked, or it is replied to.

docs/api/ipc-renderer.md

@@ -32,6 +32,15 @@ The `ipcRenderer` module has the following method to listen for events and send
 Listens to `channel`, when a new message arrives `listener` would be called with
 `listener(event, args...)`.
 
+### `ipcRenderer.off(channel, listener)`
+
+* `channel` string
+* `listener` Function
+  * `event` [IpcRendererEvent][ipc-renderer-event]
+  * `...args` any[]
+
+Alias for [`ipcRenderer.removeListener`](#ipcrendererremovelistenerchannel-listener).
+
 ### `ipcRenderer.once(channel, listener)`
 
 * `channel` string
@@ -42,10 +51,20 @@ Listens to `channel`, when a new message arrives `listener` would be called with
 Adds a one time `listener` function for the event. This `listener` is invoked
 only the next time a message is sent to `channel`, after which it is removed.
 
+### `ipcRenderer.addListener(channel, listener)`
+
+* `channel` string
+* `listener` Function
+  * `event` [IpcRendererEvent][ipc-renderer-event]
+  * `...args` any[]
+
+Alias for [`ipcRenderer.on`](#ipcrendereronchannel-listener).
+
 ### `ipcRenderer.removeListener(channel, listener)`
 
 * `channel` string
 * `listener` Function
+  * `event` [IpcRendererEvent][ipc-renderer-event]
   * `...args` any[]
 
 Removes the specified `listener` from the listener array for the specified

docs/api/protocol.md

@@ -33,7 +33,7 @@ to register it to that session explicitly.
 
 ```javascript
 const { app, BrowserWindow, net, protocol, session } = require('electron')
-const path = require('path')
+const path = require('node:path')
 const url = require('url')
 
 app.whenReady().then(() => {
@@ -122,7 +122,7 @@ Example:
 
 ```js
 const { app, net, protocol } = require('electron')
-const { join } = require('path')
+const { join } = require('node:path')
 const { pathToFileURL } = require('url')
 
 protocol.registerSchemesAsPrivileged([

docs/api/session.md

@@ -103,7 +103,7 @@ const { session } = require('electron')
 session.defaultSession.on('will-download', (event, item, webContents) => {
   event.preventDefault()
   require('got')(item.getURL()).then((response) => {
-    require('fs').writeFileSync('/somewhere', response.body)
+    require('node:fs').writeFileSync('/somewhere', response.body)
   })
 })
 ```
@@ -1193,7 +1193,7 @@ automatically.  To clear the handler, call `setBluetoothPairingHandler(null)`.
 
 ```javascript
 const { app, BrowserWindow, session } = require('electron')
-const path = require('path')
+const path = require('node:path')
 
 function createWindow () {
   let bluetoothPinCallback = null
@@ -1457,7 +1457,7 @@ extension to be loaded.
 
 ```js
 const { app, session } = require('electron')
-const path = require('path')
+const path = require('node:path')
 
 app.whenReady().then(async () => {
   await session.defaultSession.loadExtension(
@@ -1491,7 +1491,7 @@ is emitted.
 
 * `extensionId` string - ID of extension to query
 
-Returns `Extension` | `null` - The loaded extension with the given ID.
+Returns `Extension | null` - The loaded extension with the given ID.
 
 **Note:** This API cannot be called before the `ready` event of the `app` module
 is emitted.
@@ -1544,7 +1544,7 @@ A [`Protocol`](protocol.md) object for this session.
 
 ```javascript
 const { app, session } = require('electron')
-const path = require('path')
+const path = require('node:path')
 
 app.whenReady().then(() => {
   const protocol = session.fromPartition('some-partition').protocol

docs/api/structures/browser-window-options.md

@@ -97,9 +97,6 @@
 * `roundedCorners` boolean (optional) _macOS_ - Whether frameless window
   should have rounded corners on macOS. Default is `true`. Setting this property
   to `false` will prevent the window from being fullscreenable.
-* `fullscreenWindowTitle` boolean (optional) _macOS_ _Deprecated_ - Shows
-  the title in the title bar in full screen mode on macOS for `hiddenInset`
-  titleBarStyle. Default is `false`.
 * `thickFrame` boolean (optional) - Use `WS_THICKFRAME` style for frameless windows on
   Windows, which adds standard window frame. Setting it to `false` will remove
   window shadow and window animations. Default is `true`.

docs/api/system-preferences.md

@@ -273,7 +273,6 @@ This API is only available on macOS 10.14 Mojave or newer.
     * `window-frame` - Window frame.
     * `window-text` - Text in windows.
   * On **macOS**
-    * `alternate-selected-control-text` - The text on a selected surface in a list or table. _Deprecated_
     * `control-background` - The background of a large interface element, such as a browser or table.
     * `control` - The surface of a control.
     * `control-text` -The text of a control that isn’t disabled.
@@ -339,21 +338,6 @@ Returns `string` - Can be `dark`, `light` or `unknown`.
 Gets the macOS appearance setting that is currently applied to your application,
 maps to [NSApplication.effectiveAppearance](https://developer.apple.com/documentation/appkit/nsapplication/2967171-effectiveappearance?language=objc)
 
-### `systemPreferences.getAppLevelAppearance()` _macOS_ _Deprecated_
-
-Returns `string` | `null` - Can be `dark`, `light` or `unknown`.
-
-Gets the macOS appearance setting that you have declared you want for
-your application, maps to [NSApplication.appearance](https://developer.apple.com/documentation/appkit/nsapplication/2967170-appearance?language=objc).
-You can use the `setAppLevelAppearance` API to set this value.
-
-### `systemPreferences.setAppLevelAppearance(appearance)` _macOS_ _Deprecated_
-
-* `appearance` string | null - Can be `dark` or `light`
-
-Sets the appearance setting for your application, this should override the
-system default and override the value of `getEffectiveAppearance`.
-
 ### `systemPreferences.canPromptTouchID()` _macOS_
 
 Returns `boolean` - whether or not this device has the ability to use Touch ID.
@@ -417,15 +401,9 @@ Returns an object with system animation settings.
 
 ## Properties
 
-### `systemPreferences.appLevelAppearance` _macOS_ _Deprecated_
+### `systemPreferences.accessibilityDisplayShouldReduceTransparency()` _macOS_
 
-A `string` property that can be `dark`, `light` or `unknown`. It determines the macOS appearance setting for
-your application. This maps to values in: [NSApplication.appearance](https://developer.apple.com/documentation/appkit/nsapplication/2967170-appearance?language=objc). Setting this will override the
-system default as well as the value of `getEffectiveAppearance`.
-
-Possible values that can be set are `dark` and `light`, and possible return values are `dark`, `light`, and `unknown`.
-
-This property is only available on macOS 10.14 Mojave or newer.
+A `boolean` property which determines whether the app avoids using semitransparent backgrounds. This maps to [NSWorkspace.accessibilityDisplayShouldReduceTransparency](https://developer.apple.com/documentation/appkit/nsworkspace/1533006-accessibilitydisplayshouldreduce)
 
 ### `systemPreferences.effectiveAppearance` _macOS_ _Readonly_
 

docs/api/view.md

@@ -1,105 +0,0 @@
-# View
-
-> Create and layout native views.
-
-Process: [Main](../glossary.md#main-process)
-
-This module cannot be used until the `ready` event of the `app`
-module is emitted.
-
-```javascript
-const win = new BaseWindow()
-const view = new View()
-
-view.setBackgroundColor('red')
-view.setBounds({ x: 0, y: 0, width: 100, height: 100 })
-win.contentView.addChildView(view)
-```
-
-## Class: View
-
-> A basic native view.
-
-Process: [Main](../glossary.md#main-process)
-
-`View` is an [EventEmitter][event-emitter].
-
-### `new View()`
-
-Creates a new `View`.
-
-### Instance Events
-
-Objects created with `new View` emit the following events:
-
-#### Event: 'bounds-changed'
-
-Emitted when the view's bounds have changed in response to being laid out. The
-new bounds can be retrieved with [`view.getBounds()`](#viewgetbounds).
-
-### Instance Methods
-
-Objects created with `new View` have the following instance methods:
-
-#### `view.addChildView(view[, index])`
-
-* `view` View - Child view to add.
-* `index` Integer (optional) - Index at which to insert the child view.
-  Defaults to adding the child at the end of the child list.
-
-#### `view.removeChildView(view)`
-
-* `view` View - Child view to remove.
-
-#### `view.setBounds(bounds)`
-
-* `bounds` [Rectangle](structures/rectangle.md) - New bounds of the View.
-
-#### `view.getBounds()`
-
-Returns [`Rectangle`](structures/rectangle.md) - The bounds of this View, relative to its parent.
-
-#### `view.setBackgroundColor(color)`
-
-* `color` string - Color in Hex, RGB, ARGB, HSL, HSLA or named CSS color format. The alpha channel is
-  optional for the hex type.
-
-Examples of valid `color` values:
-
-* Hex
-  * `#fff` (RGB)
-  * `#ffff` (ARGB)
-  * `#ffffff` (RRGGBB)
-  * `#ffffffff` (AARRGGBB)
-* RGB
-  * `rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)`
-    * e.g. `rgb(255, 255, 255)`
-* RGBA
-  * `rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)`
-    * e.g. `rgba(255, 255, 255, 1.0)`
-* HSL
-  * `hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)`
-    * e.g. `hsl(200, 20%, 50%)`
-* HSLA
-  * `hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)`
-    * e.g. `hsla(200, 20%, 50%, 0.5)`
-* Color name
-  * Options are listed in [SkParseColor.cpp](https://source.chromium.org/chromium/chromium/src/+/main:third_party/skia/src/utils/SkParseColor.cpp;l=11-152;drc=eea4bf52cb0d55e2a39c828b017c80a5ee054148)
-  * Similar to CSS Color Module Level 3 keywords, but case-sensitive.
-    * e.g. `blueviolet` or `red`
-
-**Note:** Hex format with alpha takes `AARRGGBB` or `ARGB`, _not_ `RRGGBBAA` or `RGB`.
-
-#### `view.setVisible(visible)`
-
-* `visible` boolean - If false, the view will be hidden from display.
-
-### Instance Properties
-
-Objects created with `new View` have the following properties:
-
-#### `view.children` _Readonly_
-
-A `View[]` property representing the child views of this view.
-
-[event-emitter]: https://nodejs.org/api/events.html#events_class_eventemitter

docs/api/web-contents-view.md

@@ -1,123 +0,0 @@
-# WebContentsView
-
-> A View that displays a WebContents.
-
-Process: [Main](../glossary.md#main-process)
-
-This module cannot be used until the `ready` event of the `app`
-module is emitted.
-
-```javascript
-const win = new BaseWindow({ width: 800, height: 400 })
-
-const view1 = new WebContentsView()
-win.contentView.addChildView(view1)
-view1.webContents.loadURL('https://electronjs.org')
-view1.setBounds({ x: 0, y: 0, width: 400, height: 400 })
-
-const view2 = new WebContentsView()
-win.contentView.addChildView(view2)
-view2.webContents.loadURL('https://github.com/electron/electron')
-view2.setBounds({ x: 400, y: 0, width: 400, height: 400 })
-```
-
-## Class: WebContentsView extends `View`
-
-> A View that displays a WebContents.
-
-Process: [Main](../glossary.md#main-process)
-
-`WebContentsView` is an [EventEmitter][event-emitter].
-
-### `new WebContentsView([options])`
-
-* `options` WebPreferences (optional) - See the [`webPreferences` option in
-  BrowserWindow](./browser-window.md#new-browserwindowoptions).
-
-Creates an empty WebContentsView.
-
-### Instance Events
-
-Objects created with `new View` emit the following events:
-
-#### Event: 'bounds-changed'
-
-Emitted when the view's bounds have changed in response to being laid out. The
-new bounds can be retrieved with [`view.getBounds()`](#viewgetbounds).
-
-### Instance Methods
-
-Objects created with `new WebContentsView` have the following instance methods:
-
-#### `view.addChildView(view[, index])`
-
-* `view` View - Child view to add.
-* `index` Integer (optional) - Index at which to insert the child view.
-  Defaults to adding the child at the end of the child list.
-
-#### `view.removeChildView(view)`
-
-* `view` View - Child view to remove.
-
-#### `view.setBounds(bounds)`
-
-* `bounds` [Rectangle](structures/rectangle.md) - New bounds of the View.
-
-#### `view.getBounds()`
-
-Returns [`Rectangle`](structures/rectangle.md) - The bounds of this View, relative to its parent.
-
-#### `view.setBackgroundColor(color)`
-
-* `color` string - Color in Hex, RGB, ARGB, HSL, HSLA or named CSS color format. The alpha channel is
-  optional for the hex type.
-
-Examples of valid `color` values:
-
-* Hex
-  * `#fff` (RGB)
-  * `#ffff` (ARGB)
-  * `#ffffff` (RRGGBB)
-  * `#ffffffff` (AARRGGBB)
-* RGB
-  * `rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)`
-    * e.g. `rgb(255, 255, 255)`
-* RGBA
-  * `rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)`
-    * e.g. `rgba(255, 255, 255, 1.0)`
-* HSL
-  * `hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)`
-    * e.g. `hsl(200, 20%, 50%)`
-* HSLA
-  * `hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)`
-    * e.g. `hsla(200, 20%, 50%, 0.5)`
-* Color name
-  * Options are listed in [SkParseColor.cpp](https://source.chromium.org/chromium/chromium/src/+/main:third_party/skia/src/utils/SkParseColor.cpp;l=11-152;drc=eea4bf52cb0d55e2a39c828b017c80a5ee054148)
-  * Similar to CSS Color Module Level 3 keywords, but case-sensitive.
-    * e.g. `blueviolet` or `red`
-
-**Note:** Hex format with alpha takes `AARRGGBB` or `ARGB`, _not_ `RRGGBBAA` or `RGB`.
-
-#### `view.setVisible(visible)`
-
-* `visible` boolean - If false, the view will be hidden from display.
-
-### Instance Properties
-
-Objects created with `new WebContentsView` have the following properties:
-
-#### `view.webContents` _Readonly_
-
-A `WebContents` property containing a reference to the displayed `WebContents`.
-Use this to interact with the `WebContents`, for instance to load a URL.
-
-```javascript
-const view = new WebContentsView()
-view.webContents.loadURL('https://electronjs.org/')
-```
-
-#### `view.children` _Readonly_
-
-A `View[]` property representing the child views of this view.
-
-[event-emitter]: https://nodejs.org/api/events.html#events_class_eventemitter

docs/api/web-contents.md

@@ -1536,14 +1536,6 @@ If you would like the page to stay hidden, you should ensure that `stayHidden` i
 Returns `boolean` - Whether this page is being captured. It returns true when the capturer count
 is large then 0.
 
-#### `contents.getPrinters()` _Deprecated_
-
-Get the system printer list.
-
-Returns [`PrinterInfo[]`](structures/printer-info.md)
-
-**Deprecated:** Should use the new [`contents.getPrintersAsync`](web-contents.md#contentsgetprintersasync) API.
-
 #### `contents.getPrintersAsync()`
 
 Get the system printer list.
@@ -1638,9 +1630,9 @@ An example of `webContents.printToPDF`:
 
 ```javascript
 const { BrowserWindow } = require('electron')
-const fs = require('fs')
-const path = require('path')
-const os = require('os')
+const fs = require('node:fs')
+const path = require('node:path')
+const os = require('node:os')
 
 const win = new BrowserWindow()
 win.loadURL('https://github.com')

docs/api/webview-tag.md

@@ -4,10 +4,9 @@
 
 Electron's `webview` tag is based on [Chromium's `webview`][chrome-webview], which
 is undergoing dramatic architectural changes. This impacts the stability of `webviews`,
-including rendering, navigation, and event routing. We currently recommend to
-not use the `webview` tag and to consider alternatives, like `iframe`, a
-[`WebContentsView`](web-contents-view.md), or an architecture that avoids
-embedded content altogether.
+including rendering, navigation, and event routing. We currently recommend to not
+use the `webview` tag and to consider alternatives, like `iframe`, [Electron's `BrowserView`](browser-view.md),
+or an architecture that avoids embedded content altogether.
 
 ## Enabling
 

docs/breaking-changes.md

@@ -67,16 +67,6 @@ macOS 10.13 (High Sierra) and macOS 10.14 (Mojave) are no longer supported by [C
 Older versions of Electron will continue to run on these operating systems, but macOS 10.15 (Catalina)
 or later will be required to run Electron v27.0.0 and higher.
 
-### Behavior Changed: `BrowserView.setAutoResize` behavior on macOS
-
-Previously, the `setAutoResize` function of the `BrowserView` API was backed by [autoresizing](https://developer.apple.com/documentation/appkit/nsview/1483281-autoresizingmask?language=objc) on macOS, and by a custom algorithm on Windows and Linux.
-For simple use cases such as making a BrowserView fill the entire window, the behavior of these two approaches was identical.
-However, in more advanced cases, BrowserViews would be autoresized differently on macOS than they would be on other platforms, as the custom resizing algorithm for Windows and Linux did not perfectly match the behavior of macOS's autoresizing API.
-
-In Electron 26, BrowserView is now a wrapper around the new [WebContentsView](api/web-contents-view.md) API.
-As part of this work, the autoresizing behavior is now standardized across all platforms.
-BrowserView autoresizing on macOS now uses the same algorithm that is used on Windows and Linux.
-
 ### Deprecated: `ipcRenderer.sendTo()`
 
 The `ipcRenderer.sendTo()` API has been deprecated. It should be replaced by setting up a [`MessageChannel`](tutorial/message-ports.md#setting-up-a-messagechannel-between-two-renderers) between the renderers.
@@ -101,6 +91,57 @@ systemPreferences.on('high-contrast-color-scheme-changed', () => { /* ... */ })
 nativeTheme.on('updated', () => { /* ... */ })
 ```
 
+### Removed: `webContents.getPrinters`
+
+The `webContents.getPrinters` method has been removed. Use
+`webContents.getPrintersAsync` instead.
+
+```js
+const w = new BrowserWindow({ show: false })
+
+// Removed
+console.log(w.webContents.getPrinters())
+// Replace with
+w.webContents.getPrintersAsync().then((printers) => {
+  console.log(printers)
+})
+```
+
+### Removed: `systemPreferences.{get,set}AppLevelAppearance` and `systemPreferences.appLevelAppearance`
+
+The `systemPreferences.getAppLevelAppearance` and `systemPreferences.setAppLevelAppearance`
+methods have been removed, as well as the `systemPreferences.appLevelAppearance` property.
+Use the `nativeTheme` module instead.
+
+```js
+// Removed
+systemPreferences.getAppLevelAppearance()
+// Replace with
+nativeTheme.shouldUseDarkColors
+
+// Removed
+systemPreferences.appLevelAppearance
+// Replace with
+nativeTheme.shouldUseDarkColors
+
+// Removed
+systemPreferences.setAppLevelAppearance('dark')
+// Replace with
+nativeTheme.themeSource = 'dark'
+```
+
+### Removed: `alternate-selected-control-text` value for `systemPreferences.getColor`
+
+The `alternate-selected-control-text` value for `systemPreferences.getColor`
+has been removed. Use `selected-content-background` instead.
+
+```js
+// Removed
+systemPreferences.getColor('alternate-selected-control-text')
+// Replace with
+systemPreferences.getColor('selected-content-background')
+```
+
 ## Planned Breaking API Changes (26.0)
 
 ### Deprecated: `webContents.getPrinters`

docs/fiddles/features/web-bluetooth/preload.js

@@ -1,7 +1,7 @@
 const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('electronAPI', {
-  cancelBluetoothRequest: (callback) => ipcRenderer.send('cancel-bluetooth-request', callback),
-  bluetoothPairingRequest: (callback) => ipcRenderer.on('bluetooth-pairing-request', callback),
+  cancelBluetoothRequest: () => ipcRenderer.send('cancel-bluetooth-request'),
+  bluetoothPairingRequest: (callback) => ipcRenderer.on('bluetooth-pairing-request', () => callback()),
   bluetoothPairingResponse: (response) => ipcRenderer.send('bluetooth-pairing-response', response)
 })

docs/fiddles/features/web-hid/renderer.js

@@ -1,19 +1,10 @@
-async function testIt () {
-  const grantedDevices = await navigator.hid.getDevices()
-  let grantedDeviceList = ''
-  grantedDevices.forEach(device => {
-    grantedDeviceList += `<hr>${device.productName}</hr>`
-  })
-  document.getElementById('granted-devices').innerHTML = grantedDeviceList
-  const grantedDevices2 = await navigator.hid.requestDevice({
-    filters: []
-  })
+function formatDevices (devices) {
+  return devices.map(device => device.productName).join('<hr>')
+}
 
-  grantedDeviceList = ''
-  grantedDevices2.forEach(device => {
-    grantedDeviceList += `<hr>${device.productName}</hr>`
-  })
-  document.getElementById('granted-devices2').innerHTML = grantedDeviceList
+async function testIt () {
+  document.getElementById('granted-devices').innerHTML = formatDevices(await navigator.hid.getDevices())
+  document.getElementById('granted-devices2').innerHTML = formatDevices(await navigator.hid.requestDevice({ filters: [] }))
 }
 
 document.getElementById('clickme').addEventListener('click', testIt)

docs/fiddles/features/web-usb/renderer.js

@@ -7,9 +7,9 @@ async function testIt () {
   const grantedDevices = await navigator.usb.getDevices()
   let grantedDeviceList = ''
   if (grantedDevices.length > 0) {
-    grantedDevices.forEach(device => {
+    for (const device of grantedDevices) {
       grantedDeviceList += `<hr>${getDeviceDetails(device)}</hr>`
-    })
+    }
   } else {
     grantedDeviceList = noDevicesFoundMsg
   }

docs/fiddles/ipc/pattern-3/preload.js

@@ -1,5 +1,5 @@
 const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('electronAPI', {
-  handleCounter: (callback) => ipcRenderer.on('update-counter', callback)
+  handleCounter: (callback) => ipcRenderer.on('update-counter', () => callback())
 })

docs/fiddles/media/screenshot/take-screenshot/index.html

@@ -17,9 +17,6 @@
           <p>Clicking the demo button will take a screenshot of your current screen and open it in your default viewer.</p>
         </div>
     </div>
-    <script>
-      // You can also require other files to run in this process
-      require('./renderer.js')
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/media/screenshot/take-screenshot/main.js

@@ -1,14 +1,38 @@
-const { BrowserWindow, app, screen, ipcMain, desktopCapturer } = require('electron/main')
+const { BrowserWindow, app, screen, ipcMain, desktopCapturer, shell } = require('electron/main')
+const fs = require('node:fs').promises
+const os = require('node:os')
+const path = require('node:path')
 
 let mainWindow = null
 
-ipcMain.handle('get-screen-size', () => {
-  return screen.getPrimaryDisplay().workAreaSize
-})
+function determineScreenShotSize (devicePixelRatio) {
+  const screenSize = screen.getPrimaryDisplay().workAreaSize
+  const maxDimension = Math.max(screenSize.width, screenSize.height)
+  return {
+    width: maxDimension * devicePixelRatio,
+    height: maxDimension * devicePixelRatio
+  }
+}
 
-ipcMain.handle('get-sources', (event, options) => {
-  return desktopCapturer.getSources(options)
-})
+async function takeScreenshot (devicePixelRatio) {
+  const thumbSize = determineScreenShotSize(devicePixelRatio)
+  const options = { types: ['screen'], thumbnailSize: thumbSize }
+
+  const sources = await desktopCapturer.getSources(options)
+  for (const source of sources) {
+    const sourceName = source.name.toLowerCase()
+    if (sourceName === 'entire screen' || sourceName === 'screen 1') {
+      const screenshotPath = path.join(os.tmpdir(), 'screenshot.png')
+
+      await fs.writeFile(screenshotPath, source.thumbnail.toPNG())
+      shell.openExternal(`file://${screenshotPath}`)
+
+      return `Saved screenshot to: ${screenshotPath}`
+    }
+  }
+}
+
+ipcMain.handle('take-screenshot', (event, devicePixelRatio) => takeScreenshot(devicePixelRatio))
 
 function createWindow () {
   const windowOptions = {
@@ -16,8 +40,7 @@ function createWindow () {
     height: 300,
     title: 'Take a Screenshot',
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   }
 

docs/fiddles/media/screenshot/take-screenshot/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  takeScreenshot: () => ipcRenderer.invoke('take-screenshot', window.devicePixelRatio)
+})

docs/fiddles/media/screenshot/take-screenshot/renderer.js

@@ -1,37 +1,7 @@
-const { shell, ipcRenderer } = require('electron/renderer')
-
-const fs = require('node:fs').promises
-const os = require('node:os')
-const path = require('node:path')
-
 const screenshot = document.getElementById('screen-shot')
 const screenshotMsg = document.getElementById('screenshot-path')
 
 screenshot.addEventListener('click', async (event) => {
   screenshotMsg.textContent = 'Gathering screens...'
-  const thumbSize = await determineScreenShotSize()
-  const options = { types: ['screen'], thumbnailSize: thumbSize }
-
-  const sources = await ipcRenderer.invoke('get-sources', options)
-  for (const source of sources) {
-    const sourceName = source.name.toLowerCase()
-    if (sourceName === 'entire screen' || sourceName === 'screen 1') {
-      const screenshotPath = path.join(os.tmpdir(), 'screenshot.png')
-
-      await fs.writeFile(screenshotPath, source.thumbnail.toPNG())
-      shell.openExternal(`file://${screenshotPath}`)
-
-      const message = `Saved screenshot to: ${screenshotPath}`
-      screenshotMsg.textContent = message
-    }
-  }
+  screenshotMsg.textContent = await window.electronAPI.takeScreenshot()
 })
-
-async function determineScreenShotSize () {
-  const screenSize = await ipcRenderer.invoke('get-screen-size')
-  const maxDimension = Math.max(screenSize.width, screenSize.height)
-  return {
-    width: maxDimension * window.devicePixelRatio,
-    height: maxDimension * window.devicePixelRatio
-  }
-}

docs/fiddles/menus/customize-menus/index.html

@@ -119,10 +119,6 @@
         </div>
       </div>
     </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/menus/customize-menus/main.js

@@ -9,6 +9,7 @@ const {
   dialog,
   autoUpdater
 } = require('electron/main')
+const path = require('node:path')
 
 const menu = new Menu()
 menu.append(new MenuItem({ label: 'Hello' }))
@@ -67,9 +68,9 @@ const template = [
             // on reload, start fresh and close any old
             // open secondary windows
             if (focusedWindow.id === 1) {
-              BrowserWindow.getAllWindows().forEach(win => {
+              for (const win of BrowserWindow.getAllWindows()) {
                 if (win.id > 1) win.close()
-              })
+              }
             }
             focusedWindow.reload()
           }
@@ -208,15 +209,15 @@ function findReopenMenuItem () {
   if (!menu) return
 
   let reopenMenuItem
-  menu.items.forEach(item => {
+  for (const item of menu.items) {
     if (item.submenu) {
-      item.submenu.items.forEach(item => {
-        if (item.key === 'reopenMenuItem') {
-          reopenMenuItem = item
+      for (const subitem of item.submenu.items) {
+        if (subitem.key === 'reopenMenuItem') {
+          reopenMenuItem = subitem
         }
-      })
+      }
     }
-  })
+  }
   return reopenMenuItem
 }
 
@@ -295,8 +296,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 

docs/fiddles/menus/customize-menus/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  showContextMenu: () => ipcRenderer.send('show-context-menu')
+})

docs/fiddles/menus/customize-menus/renderer.js

@@ -1,8 +1,6 @@
-const { ipcRenderer } = require('electron/renderer')
-
 // Tell main process to show the menu when demo button is clicked
 const contextMenuBtn = document.getElementById('context-menu')
 
 contextMenuBtn.addEventListener('click', () => {
-  ipcRenderer.send('show-context-menu')
+  window.electronAPI.showContextMenu()
 })

docs/fiddles/menus/shortcuts/main.js

@@ -9,11 +9,7 @@ function createWindow () {
   // Create the browser window.
   mainWindow = new BrowserWindow({
     width: 800,
-    height: 600,
-    webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
-    }
+    height: 600
   })
 
   globalShortcut.register('CommandOrControl+Alt+K', () => {

docs/fiddles/native-ui/dialogs/error-dialog/index.html

@@ -73,9 +73,6 @@ ipcMain.on('open-error-dialog', (event) => {
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/native-ui/dialogs/error-dialog/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
+const path = require('node:path')
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -11,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 

docs/fiddles/native-ui/dialogs/error-dialog/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openErrorDialog: () => ipcRenderer.send('open-error-dialog')
+})

docs/fiddles/native-ui/dialogs/error-dialog/renderer.js

@@ -1,7 +1,5 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const errorBtn = document.getElementById('error-dialog')
 
-errorBtn.addEventListener('click', event => {
-  ipcRenderer.send('open-error-dialog')
+errorBtn.addEventListener('click', () => {
+  window.electronAPI.openErrorDialog()
 })

docs/fiddles/native-ui/dialogs/information-dialog/index.html

@@ -96,9 +96,6 @@ ipcMain.on('open-information-dialog', (event) => {
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/native-ui/dialogs/information-dialog/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
+const path = require('node:path')
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -11,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -59,16 +59,14 @@ app.on('activate', function () {
   }
 })
 
-ipcMain.on('open-information-dialog', event => {
+ipcMain.handle('open-information-dialog', async () => {
   const options = {
     type: 'info',
     title: 'Information',
     message: "This is an information dialog. Isn't it nice?",
     buttons: ['Yes', 'No']
   }
-  dialog.showMessageBox(options, index => {
-    event.sender.send('information-dialog-selection', index)
-  })
+  return (await dialog.showMessageBox(options)).response
 })
 
 // In this file you can include the rest of your app's specific main process

docs/fiddles/native-ui/dialogs/information-dialog/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openInformationDialog: () => ipcRenderer.invoke('open-information-dialog')
+})

docs/fiddles/native-ui/dialogs/information-dialog/renderer.js

@@ -1,14 +1,7 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const informationBtn = document.getElementById('information-dialog')
 
-informationBtn.addEventListener('click', event => {
-  ipcRenderer.send('open-information-dialog')
-})
-
-ipcRenderer.on('information-dialog-selection', (event, index) => {
-  let message = 'You selected '
-  if (index === 0) message += 'yes.'
-  else message += 'no.'
+informationBtn.addEventListener('click', async () => {
+  const index = await window.electronAPI.openInformationDialog()
+  const message = `You selected: ${index === 0 ? 'yes' : 'no'}`
   document.getElementById('info-selection').innerHTML = message
 })

docs/fiddles/native-ui/dialogs/open-file-or-directory/index.html

@@ -100,9 +100,6 @@ ipc.on('open-file-dialog-sheet', function (event) {
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/native-ui/dialogs/open-file-or-directory/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
+const path = require('node:path')
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -11,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -59,17 +59,11 @@ app.on('activate', function () {
   }
 })
 
-ipcMain.on('open-file-dialog', event => {
-  dialog.showOpenDialog(
-    {
-      properties: ['openFile', 'openDirectory']
-    },
-    files => {
-      if (files) {
-        event.sender.send('selected-directory', files)
-      }
-    }
-  )
+ipcMain.handle('open-file-dialog', async () => {
+  const options = {
+    properties: ['openFile', 'openDirectory']
+  }
+  return (await dialog.showOpenDialog(options)).filePaths
 })
 
 // In this file you can include the rest of your app's specific main process

docs/fiddles/native-ui/dialogs/open-file-or-directory/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openFileDialog: () => ipcRenderer.invoke('open-file-dialog')
+})

docs/fiddles/native-ui/dialogs/open-file-or-directory/renderer.js

@@ -1,11 +1,6 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const selectDirBtn = document.getElementById('select-directory')
 
-selectDirBtn.addEventListener('click', event => {
-  ipcRenderer.send('open-file-dialog')
-})
-
-ipcRenderer.on('selected-directory', (event, path) => {
+selectDirBtn.addEventListener('click', async () => {
+  const path = await window.electronAPI.openFileDialog()
   document.getElementById('selected-file').innerHTML = `You selected: ${path}`
 })

docs/fiddles/native-ui/dialogs/save-dialog/index.html

@@ -83,9 +83,6 @@ ipcMain.on('save-dialog', (event) => {
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/native-ui/dialogs/save-dialog/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
+const path = require('node:path')
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -11,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -59,14 +59,12 @@ app.on('activate', function () {
   }
 })
 
-ipcMain.on('save-dialog', event => {
+ipcMain.handle('save-dialog', async () => {
   const options = {
     title: 'Save an Image',
     filters: [{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }]
   }
-  dialog.showSaveDialog(options, filename => {
-    event.sender.send('saved-file', filename)
-  })
+  return (await dialog.showSaveDialog(options)).filePath
 })
 
 // In this file you can include the rest of your app's specific main process

docs/fiddles/native-ui/dialogs/save-dialog/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  saveDialog: () => ipcRenderer.invoke('save-dialog')
+})

docs/fiddles/native-ui/dialogs/save-dialog/renderer.js

@@ -1,12 +1,6 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const saveBtn = document.getElementById('save-dialog')
 
-saveBtn.addEventListener('click', event => {
-  ipcRenderer.send('save-dialog')
-})
-
-ipcRenderer.on('saved-file', (event, path) => {
-  if (!path) path = 'No path'
+saveBtn.addEventListener('click', async () => {
+  const path = await window.electronAPI.saveDialog()
   document.getElementById('file-saved').innerHTML = `Path selected: ${path}`
 })

docs/fiddles/native-ui/drag-and-drop/index.html

@@ -68,9 +68,6 @@ ipcMain.on('ondragstart', (event, filepath) => {
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/native-ui/drag-and-drop/main.js

@@ -1,5 +1,7 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, nativeImage, shell } = require('electron/main')
+const path = require('node:path')
+
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow
@@ -10,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -58,7 +59,8 @@ app.on('activate', function () {
   }
 })
 
-ipcMain.on('ondragstart', (event, filepath) => {
+ipcMain.on('ondragstart', (event) => {
+  const filepath = path.join(__dirname, 'renderer.js')
   const icon = nativeImage.createFromDataURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAACsZJREFUWAmtWFlsXFcZ/u82++Jt7IyT2Em6ZFHTpAtWIzspEgjEUhA8VNAiIYEQUvuABBIUwUMkQIVKPCIoEiABLShISEBbhFJwIGRpIKRpbNeJ7bh2HHvssR3PPnPnLnzfmRlju6EQqUc+c++c8y/fv54z1uQOh+/7Glh0TD59TE/TND7lnfa4/64OKsM071QoeZpA/y9WWvk/B4XCC06TUC+Xyw8HTXNQ1+Ww6PpOrMebewXxvBueJ6/XHOdMJBL5J9Y97m2R0SS/wweE6JxkGx5dilWr1S/7dXsEa2o4+LyFmcFcaL5zbX3Y9gh5hpeWYpSB9XV5/H678V89BGYDXnHJlCsWn4gHrGc1K9CXxferOdvPOOKUfF8cH7nUyCtklQZXih/VNNlmirk3GdBSoIcRswW7/vVkLPYi5W2Uze8bh7J+4wLfh4dViFx5/nmrUi7/MhGNvrCkBfpeWqnW/7BUdadqntQ8zwr6vhUV34xpYnDynWvcmwQNaclDXsqgLMqkocPDw7fNx7d5qIX+/PmJxKGD6VdDkeh7ztyqOFfrokGCEWiiZ1mp0uITnuKAosaT7+pNxMYTyefutcQfbA+b1XLpH5fnF97/yD335Fu6mqTqsclDINBVmI4fDxw80KPAvJSt1MZtMcLiGxYUu83p4UkgnJZlqcl3LAj3WnTkIS9lUBYNPJjueVWgg7qocyOgliFqjZsg8gq5tRdiieQTf1gq15Y8CUbRZtyWOzZwc8lEqS3PTCtgqd13ieO68BQ2uNl64tXAewktrFuX2mPdkWAxn3sxnmx7sqUTJGqso8MGS9tbXFz8DMH8bblUX3T9QARVi8RV8qljfcJy0zRlaf6mzHEuzEtmekqCoZB4rqp0OmudHtUnlEWZlE0d1EWd1N3EozourcO65pw4eTIZQTW9VazJtbqvw9XwKVFQMsKDBuNhtp4uvGGFI+IDgKnpMjYyIis3ZsQMBIR7pONsIaMsyqRs6ohY1rPUSd3EQFDqo+kdZ3Fh4aupbdu+99uFQr2A1CBs4uEAjZjIFUMHi4dVxMXzCdCXQj4vBrwVCofl0ulTcv/DAxJJJBUPc8mpoyI2JDw7bFyT+ifTcSubyXytJ51+roWBxwG9Q73WWjZ7eSUU3//nXM0NI+x0PBGrTSgsLS9JFuFxHFrvSqIrJV279gi6tjiVspTza3JjZhY+0CQZj0mlWJSeHTslCro6eFqymCcVVN77kkGjs1p4sy2VOoSlOrFwT+XR+PjkgGaZ+ycKVbRTYUdVrmaImCvzk1dlFCEJdHRJ284+ie/ol0h7p7jFvExcvCCXzp2Rqem3pAMAiqWS6JGYhFI9Mjo6KjevXVUyKEuFHrKpY6JQ8TXT3D8+OTkAHBw6o6LCFo9ag3o4JtlCyTHEt5AxKvS6YUi5kJeZG3Py0NAxlLcJ9xti+K7Mjo/JfGZRuvv6Ze+9+yWEhDZAvzg3JyhX2d6/S7q6e+TimdOS7ElLKBZDwqvmj6rztayr1fVI1IoXi4PAcYZY1tPEEO1wEVlXgRFBDcmIXTqJsS+XyhKLJ5A/OpIVXXptWUYv/UvaenfIocEhMQ2EzHHErlXFCgQl3paU1eVl6QAY8sQTCSmVihKJx1V/ogvgIYF/pACdcMBhqONoHhF88/2d+bojyA6cRvje2IdFjoSjUSnBS8hgyS9lZOzKFdmPxO3o6gQIGzwuDn1dVSCtCKPy1pZXlATXqUsVYMLRmKo87vP4Y1ioqwCdCegmMYx3W/VPn8RrSDwwIMMbcEjkYo29JZVOy+ybI7K4eksODx1VSqvligpReSVLgySM/FI5h2q062jNyL3s7FtoAyGJIlx1225UmwJF6aJRJ3XzHXO9bWvsJa3jQFlBJkz6iuXdu32HzM7MyP0PPNgAU6ko4Qzp6b+flr8MD9OYJg9CwtzL5+T65ITs2bsP3mGxN/ZbBcOn0sk20gAkLQ+huXpFi8vkoY9AoyDjxTR1mbo6Ltt275HpN0dlNxQE40mVM8Ajjxx9VAGhAvQR1akZFCq799ADysMuQqOxh2FNmamEaz51ItGLfFD9+oUJoZkLowHoFA2mljUacqOMflKuVmHpfmnfvlMuvXZeStmMBIMhcWEdjgFJtrUjXI0KchAuAg0ilxLJNoRVBxhIBm0TjjKAuqjTqTs3CQZ6QUUMGFW7eiWMUg6w+yo8YMW7DqtqlZLkUDV2ISfd29KyDwk9MjYmMyOXxQIIKuShqo4VGFNBEgeDQYqVam5N5tEePFQgURIUBCsd1EWd1XrtDUUMLARD9bKaK5ytQ2Gb75g8WMiEP6VkfnZGevv6UF1vSBW5E0PFDAweFRvlfun8WVmamhDNrkmweQ0pwaPt6M4m8mgKTTFXqcrV0ZH1FKBg6qAu6qTuJiCV1Cp2Q0NDr9Uq5Ym+oMEDlSewsoRwrVBEaij7AJ4s7zrOpumxEdm15y6558GHJVe1Zezy6zJx6aJkpq5JFB4z6zVZmBiX1VWUP0IY4CFMYcpQdZ3xqIs6oftCE5DHKwd0q/tzOV8svdDb3nk8VnG9qmgQC0ZURz8Ur91alXgSByZ6ES9kZZTr/PR16UOCh+7dq0CWyyXJ4xqCQ0nKt9YQSlPue2gAeYZzD7yNLk0wmqAreb2WYSxAJ8Dget64wxtEBlDaqVOn/K5dB67t6+t5MhoMJuc8w8UPKiQ9CQR9JK5czhZAQxPt7TKF3OiAIisUViAD2Lg5d0P2HDgoKeRaW0enyqVwBJcO5fFG5dqa7h406qaeX8384uTZL5w9+UqxhYHFp0YLIYA9ddfu3T+4UJF6Rg+YAc9D0+RoIGP1ULhpWspr10evyK7+ftWTrk9PS/++A9KZSm26cih2mMOErem6n/ZsZwA2TM/MPHXs2LEftnSTbh0Q36mIIbx44cLvOnu3f+xUwbWLmoHTCUlF6g2jBQo/GnFrnGNqSHdvr+rIKGMW1KahwEBdzHft98aNwMr8zd8/NDDwccihc0hLi3GubRjY0Bm6H19fPvnZI4c/fHd7PJ2peXYZ+WQ26JufZELjQ6lbAQtnWre0d3apY8TFIdtAo+Qri6mupsB49lBMC+QXF0YefObZT8j0eKWlswVjEyCCOXHihPGb575VCvVuf3lvetsH9rXF0rla3cnhpoIGjgsUPhR3I4TMKYJQV1Z6WO02aEjHa5mNe3OPW3OPRHVrbXFh9Ocvv/KR1372owx1Pf3005uc35Ddgtd8rsf06IdS5777zZ+mUqmPzjm6TPpmvayZOq4LyATeCzkanmiy4qEuC/yXiO8CSMRzvLs1x9phepLNZl868sy3Pyen/5hd1/EfRvWmuvSWNeaRS/RkPDI4+NjE1NSXEoXlpaNB1zqo20abi59/vu/UfM2pie7WUDVq8l3wTwnskeZ+zTbIQ17KoCzKpGzq2KqX32/roRbh8ePHdUzl0s9/5Rv9n/7go19MxCKfCkZiu3V06wrO5gocxL7Dgd/IEobEMH6rejg+auXidL5Y/vWv/vTX53/y/e/MkGajTH7fOt4RUJOY1df4RdtY6ICFRzqTySOhUOA+3Ai3o31H1ZbnlXBruFmt2iMrudy5xx9//BzWV7nXDBGN2xpjbt/5oGUEdhtO3iD47xZOvm8a5CHvpsV38wsUaMwBWsz3rbK5xr0mzdv2t9Jv/f5vhsF4J+Q63IUAAAAASUVORK5CYII=')
 
   event.sender.startDrag({

docs/fiddles/native-ui/drag-and-drop/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  dragStart: () => ipcRenderer.send('ondragstart')
+})

docs/fiddles/native-ui/drag-and-drop/renderer.js

@@ -1,8 +1,6 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const dragFileLink = document.getElementById('drag-file-link')
 
 dragFileLink.addEventListener('dragstart', event => {
   event.preventDefault()
-  ipcRenderer.send('ondragstart', __filename)
+  window.electronAPI.dragStart()
 })

docs/fiddles/native-ui/external-links-file-manager/index.html

@@ -95,10 +95,6 @@ for (const link of links) {
         </div>
       </div>
     </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/native-ui/external-links-file-manager/main.js

@@ -1,5 +1,15 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, shell } = require('electron/main')
+const { app, BrowserWindow, shell, ipcMain } = require('electron/main')
+const path = require('node:path')
+const os = require('node:os')
+
+ipcMain.on('open-home-dir', () => {
+  shell.showItemInFolder(os.homedir())
+})
+
+ipcMain.on('open-external', (event, url) => {
+  shell.openExternal(url)
+})
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -11,8 +21,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 

docs/fiddles/native-ui/external-links-file-manager/preload.js

@@ -0,0 +1,6 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openHomeDir: () => ipcRenderer.send('open-home-dir'),
+  openExternal: (url) => ipcRenderer.send('open-external', url)
+})

docs/fiddles/native-ui/external-links-file-manager/renderer.js

@@ -1,13 +1,10 @@
-const { shell } = require('electron/renderer')
-const os = require('node:os')
-
 const exLinksBtn = document.getElementById('open-ex-links')
 const fileManagerBtn = document.getElementById('open-file-manager')
 
 fileManagerBtn.addEventListener('click', (event) => {
-  shell.showItemInFolder(os.homedir())
+  window.electronAPI.openHomeDir()
 })
 
 exLinksBtn.addEventListener('click', (event) => {
-  shell.openExternal('https://electronjs.org')
+  window.electronAPI.openExternal('https://electronjs.org')
 })

docs/fiddles/native-ui/notifications/index.html

@@ -59,9 +59,6 @@
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/native-ui/notifications/main.js

@@ -9,11 +9,7 @@ function createWindow () {
   // Create the browser window.
   mainWindow = new BrowserWindow({
     width: 800,
-    height: 600,
-    webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
-    }
+    height: 600
   })
 
   // and load the index.html of the app.

docs/fiddles/system/system-app-user-information/app-information/index.html

@@ -18,9 +18,6 @@
         </div>
       </div>
     </div>
-    <script>
-      // You can also require other files to run in this process
-      require('./renderer.js')
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/system/system-app-user-information/app-information/main.js

@@ -1,4 +1,5 @@
 const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
+const path = require('node:path')
 
 let mainWindow = null
 
@@ -10,8 +11,7 @@ function createWindow () {
     height: 400,
     title: 'Get app information',
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   }
 

docs/fiddles/system/system-app-user-information/app-information/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  getAppPath: () => ipcRenderer.invoke('get-app-path')
+})

docs/fiddles/system/system-app-user-information/app-information/renderer.js

@@ -1,9 +1,7 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const appInfoBtn = document.getElementById('app-info')
 
 appInfoBtn.addEventListener('click', async () => {
-  const path = await ipcRenderer.invoke('get-app-path')
+  const path = await window.electronAPI.getAppPath()
   const message = `This app is located at: ${path}`
   document.getElementById('got-app-info').innerHTML = message
 })

docs/fiddles/system/system-information/get-version-information/index.html

@@ -20,7 +20,5 @@
       </div>
     </div>
   </body>
-  <script>
-    require('./renderer.js')
-  </script>
+  <script src="renderer.js"></script>
 </html>

docs/fiddles/system/system-information/get-version-information/main.js

@@ -1,4 +1,5 @@
 const { app, BrowserWindow, shell } = require('electron/main')
+const path = require('node:path')
 
 let mainWindow = null
 
@@ -8,8 +9,7 @@ function createWindow () {
     height: 400,
     title: 'Get version information',
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   }
 

docs/fiddles/system/system-information/get-version-information/preload.js

@@ -0,0 +1,3 @@
+const { contextBridge } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronVersion', process.versions.electron)

docs/fiddles/system/system-information/get-version-information/renderer.js

@@ -1,8 +1,6 @@
 const versionInfoBtn = document.getElementById('version-info')
 
-const electronVersion = process.versions.electron
-
 versionInfoBtn.addEventListener('click', () => {
-  const message = `This app is using Electron version: ${electronVersion}`
+  const message = `This app is using Electron version: ${window.electronVersion}`
   document.getElementById('got-version-info').innerHTML = message
 })

docs/fiddles/windows/manage-windows/frameless-window/index.html

@@ -68,10 +68,6 @@
         </div>
       </div>
     </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/windows/manage-windows/frameless-window/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
+const path = require('node:path')
 
 ipcMain.on('create-frameless-window', (event, { url }) => {
   const win = new BrowserWindow({ frame: false })
@@ -12,8 +13,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 

docs/fiddles/windows/manage-windows/frameless-window/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  createFramelessWindow: (args) => ipcRenderer.send('create-frameless-window', args)
+})

docs/fiddles/windows/manage-windows/frameless-window/renderer.js

@@ -1,8 +1,6 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const newWindowBtn = document.getElementById('frameless-window')
 
 newWindowBtn.addEventListener('click', () => {
   const url = 'data:text/html,<h2>Hello World!</h2><a id="close" href="javascript:window.close()">Close this Window</a>'
-  ipcRenderer.send('create-frameless-window', { url })
+  window.electronAPI.createFramelessWindow({ url })
 })

docs/fiddles/windows/manage-windows/manage-window-state/index.html

@@ -55,10 +55,6 @@
         </div>
       </div>
     </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/windows/manage-windows/manage-window-state/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
+const path = require('node:path')
 
 ipcMain.on('create-demo-window', (event) => {
   const win = new BrowserWindow({ width: 400, height: 275 })
@@ -22,8 +23,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 

docs/fiddles/windows/manage-windows/manage-window-state/preload.js

@@ -0,0 +1,6 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  createDemoWindow: () => ipcRenderer.send('create-demo-window'),
+  onBoundsChanged: (callback) => ipcRenderer.on('bounds-changed', () => callback())
+})

docs/fiddles/windows/manage-windows/manage-window-state/renderer.js

@@ -1,13 +1,11 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const manageWindowBtn = document.getElementById('manage-window')
 
-ipcRenderer.on('bounds-changed', (event, bounds) => {
+window.electronAPI.onBoundsChanged((event, bounds) => {
   const manageWindowReply = document.getElementById('manage-window-reply')
   const message = `Size: ${bounds.size} Position: ${bounds.position}`
   manageWindowReply.textContent = message
 })
 
 manageWindowBtn.addEventListener('click', (event) => {
-  ipcRenderer.send('create-demo-window')
+  window.electronAPI.createDemoWindow()
 })

docs/fiddles/windows/manage-windows/new-window/index.html

@@ -9,17 +9,14 @@
   <button id="new-window">View Demo</button>
   <p>The <code>BrowserWindow</code> module gives you the ability to create new windows in your app.</p>
   <p>There are a lot of options when creating a new window. A few are in this demo, but visit the <a href="https://www.electronjs.org/docs/latest/api/browser-window">documentation<span>(opens in new window)</span></a>
-<div>
-            <h2>ProTip</h2>
-            <strong>Use an invisible browser window to run background tasks.</strong>
-            <p>You can set a new browser window to not be shown (be invisible) in order to use that additional renderer process as a kind of new thread in which to run JavaScript in the background of your app. You do this by setting the <code>show</code> property to <code>false</code> when defining the new window.</p>
-            <pre><code><span>var</span> win = <span>new</span> BrowserWindow({
+  <div>
+    <h2>ProTip</h2>
+    <strong>Use an invisible browser window to run background tasks.</strong>
+    <p>You can set a new browser window to not be shown (be invisible) in order to use that additional renderer process as a kind of new thread in which to run JavaScript in the background of your app. You do this by setting the <code>show</code> property to <code>false</code> when defining the new window.</p>
+    <pre><code><span>var</span> win = <span>new</span> BrowserWindow({
   <span>width</span>: <span>400</span>, <span>height</span>: <span>225</span>, <span>show</span>: <span>false</span>
 })</code></pre>
-          </div>
-    <script>
-    // You can also require other files to run in this process
-    require('./renderer.js')
-  </script>
+  </div>
+  <script src="renderer.js"></script>
 </body>
 </html>

docs/fiddles/windows/manage-windows/new-window/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
+const path = require('node:path')
 
 ipcMain.on('new-window', (event, { url, width, height }) => {
   const win = new BrowserWindow({ width, height })
@@ -12,8 +13,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 

docs/fiddles/windows/manage-windows/new-window/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  newWindow: (args) => ipcRenderer.send('new-window', args)
+})

docs/fiddles/windows/manage-windows/new-window/renderer.js

@@ -1,8 +1,6 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const newWindowBtn = document.getElementById('new-window')
 
 newWindowBtn.addEventListener('click', (event) => {
   const url = 'https://electronjs.org'
-  ipcRenderer.send('new-window', { url, width: 400, height: 320 })
+  window.electronAPI.newWindow({ url, width: 400, height: 320 })
 })

docs/fiddles/windows/manage-windows/window-events/index.html

@@ -49,10 +49,6 @@
         </div>
       </div>
     </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>