diff --git a/src/_locales b/src/_locales
index 5065e91..3620c8b 160000
--- a/src/_locales
+++ b/src/_locales
@@ -1 +1 @@
-Subproject commit 5065e9151502339dee4440b25829be1367ca7175
+Subproject commit 3620c8b87379749883c5d8ebbdef2444fc09d8b8
diff --git a/src/entry-points/content/ElementPlaybackControllerCloning/ElementPlaybackControllerCloning.ts b/src/entry-points/content/ElementPlaybackControllerCloning/ElementPlaybackControllerCloning.ts
index 52779d2..509fe56 100644
--- a/src/entry-points/content/ElementPlaybackControllerCloning/ElementPlaybackControllerCloning.ts
+++ b/src/entry-points/content/ElementPlaybackControllerCloning/ElementPlaybackControllerCloning.ts
@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (C) 2021, 2022  WofWca <wofwca@protonmail.com>
+ * Copyright (C) 2021, 2022, 2023  WofWca <wofwca@protonmail.com>
  *
  * This file is part of Jump Cutter Browser Extension.
  *
@@ -188,6 +188,13 @@ export default class Controller {
 
   _didNotDoDesyncCorrectionForNSpeedSwitches = 0;
 
+  // TODO refactor: make this a constructor parameter for this Controller.
+  private readonly getMediaSourceCloneElement: ConstructorParameters<typeof Lookahead>[2] =
+    (originalElement) => import(
+      /* webpackExports: ['getMediaSourceCloneElement']*/
+      '@/entry-points/content/cloneMediaSources/getMediaSourceCloneElement'
+    ).then(({ getMediaSourceCloneElement }) => getMediaSourceCloneElement(originalElement));
+
   constructor(
     element: HTMLMediaElement,
     controllerSettings: ControllerSettings,
@@ -196,7 +203,11 @@ export default class Controller {
     this.element = element;
     this.settings = controllerSettings;
 
-    const lookahead = this.lookahead = new Lookahead(element, this.settings);
+    const lookahead = this.lookahead = new Lookahead(
+      element,
+      this.settings,
+      this.getMediaSourceCloneElement
+    );
     // Destruction is performed in `this.destroy` directly.
     lookahead.ensureInit();
 
@@ -677,7 +688,11 @@ export default class Controller {
   }
 
   private _initLookahead() {
-    const lookahead = this.lookahead = new Lookahead(this.element, this.settings);
+    const lookahead = this.lookahead = new Lookahead(
+      this.element,
+      this.settings,
+      this.getMediaSourceCloneElement
+    );
     // Destruction is performed in `this.destroy` directly.
     lookahead.ensureInit();
   }
diff --git a/src/entry-points/content/ElementPlaybackControllerCloning/Lookahead.ts b/src/entry-points/content/ElementPlaybackControllerCloning/Lookahead.ts
index 7173810..151718c 100644
--- a/src/entry-points/content/ElementPlaybackControllerCloning/Lookahead.ts
+++ b/src/entry-points/content/ElementPlaybackControllerCloning/Lookahead.ts
@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (C) 2021, 2022  WofWca <wofwca@protonmail.com>
+ * Copyright (C) 2021, 2022, 2023  WofWca <wofwca@protonmail.com>
  *
  * This file is part of Jump Cutter Browser Extension.
  *
@@ -28,6 +28,10 @@ import SilenceDetectorNode, { SilenceDetectorEventType, SilenceDetectorMessage }
   from '@/entry-points/content/SilenceDetector/SilenceDetectorNode';
 import VolumeFilterNode from '@/entry-points/content/VolumeFilter/VolumeFilterNode';
 import lookaheadVolumeFilterSmoothing from './lookaheadVolumeFilterSmoothing.json'
+import {
+  getOrCreateMediaElementSourceAndUpdateMap
+} from '@/entry-points/content/getOrCreateMediaElementSourceAndUpdateMap';
+import { getFinalCloneElement } from './getFinalCloneElement';
 
 // A more semantically correct version would be `Array<[start: MediaTime, end: MediaTime]>`,
 // but I think this is a bit faster.
@@ -59,10 +63,12 @@ type LookaheadSettings = Pick<ExtensionSettings, 'volumeThreshold' | 'marginBefo
 // and reduces time accuracy of silence ranges, which can cause it to miss short silence ranges.
 // This is practically the greatest effective absolute playbackRate one expects to achieve.
 // TODO improvement: turn this into an option.
-const maxClonePlaybackRate = Math.min(8, maxPlaybackRate);
+const maxClonePlaybackRateDefault = Math.min(8, maxPlaybackRate);
+const maxClonePlaybackRateWhenMediaSourceSrc = Math.min(4, maxPlaybackRate);
 
 export default class Lookahead {
-  clone: HTMLAudioElement; // Always <audio> for performance - so the browser doesn't have to decode video frames.
+  // Always <audio> for performance - so the browser doesn't have to decode video frames.
+  clone: HTMLAudioElement | undefined;
   silenceSince: MediaTime | undefined;
 
   // // onNewSilenceRange: TODO set in constructor?
@@ -75,33 +81,57 @@ export default class Lookahead {
 
   private _resolveDestroyedPromise!: () => void;
   private _destroyedPromise = new Promise<void>(r => this._resolveDestroyedPromise = r);
+  /**
+   * @param getFallbackCloneElement a function that returns a clone element. It is used when
+   * the `Lookahead` could not reuse the same source as the original element. The current
+   * use case is when the original element uses `MediaSource`. The function may return the same
+   * clone element for different calls.
+   */
   constructor(
     private originalElement: HTMLMediaElement,
     private settings: LookaheadSettings,
     // public onNewSilenceRange: (start: Time, end: Time) => void,
-  ) {
-    const clone = document.createElement('audio');
+    private readonly getFallbackCloneElement:
+      undefined | ((originalElement: HTMLMediaElement) => Promise<HTMLAudioElement | undefined>)
+  ) {}
+  private async _init(): Promise<void> {
+    const originalElement = this.originalElement;
+    const cloneElementP = getFinalCloneElement(
+      originalElement,
+      this.getFallbackCloneElement,
+    );
+
+    // TODO perf: don't await here, schedule other async operations.
+    const [clone, isFallbackElement] = await cloneElementP;
+    /**
+     * Whether the same element can be used between `Lookahead` instantiations and stuff.
+     * Otherwise it's disposable and we don't care what happens to it once we stop needing it.
+     */
+    const isCloneElementAndAudioContextReusable = isFallbackElement;
     this.clone = clone;
 
-    // TODO this probably doesn't cover all cases. Maybe it's better to just `originalElement.cloneNode(true)`?
-    // TODO also need to watch for changes of `crossOrigin`
-    // (in `ElementPlaybackControllerCloning.ts`).
-    clone.crossOrigin = originalElement.crossOrigin;
-    clone.src = originalElement.currentSrc;
-
-    // Not doing this appears to cause a resource (memory and processing) leak in Chromium
-    // manifesting itself when creating new instances of Lookahead (and discarding the old ones).
-    // Looks like it's because
-    // https://html.spec.whatwg.org/multipage/media.html#playing-the-media-resource
-    // > only once a media element is in a state where no further audio could ever be
-    // > played by that element may the element be garbage collected
-    // Here's the advice that tells us to do exactly this:
-    // https://html.spec.whatwg.org/multipage/media.html#best-practices-for-authors-using-media-elements
-    // > or, even better, by setting the element's src attribute to an empty string
-    // BTW, `clone.pause()` also works (sometimes?)
-    this._destroyedPromise.then(() => clone.src = '');
-
-    if (IS_DEV_MODE) {
+    if (isCloneElementAndAudioContextReusable) {
+      this._destroyedPromise.then(() => {
+        clone.pause();
+        // A lot of state is not reset, e.g. `playbackRate`, `volume`, `preservesPitch`,
+        // `currentTime`, because the next instance of `Lookahead` is gonna update it to
+        // whatever it needs anyway.
+      });
+    } else {
+      // Not doing this appears to cause a resource (memory and processing) leak in Chromium
+      // manifesting itself when creating new instances of Lookahead (and discarding the old ones).
+      // Looks like it's because
+      // https://html.spec.whatwg.org/multipage/media.html#playing-the-media-resource
+      // > only once a media element is in a state where no further audio could ever be
+      // > played by that element may the element be garbage collected
+      // Here's the advice that tells us to do exactly this:
+      // https://html.spec.whatwg.org/multipage/media.html#best-practices-for-authors-using-media-elements
+      // > or, even better, by setting the element's src attribute to an empty string
+      // BTW, `clone.pause()` also works (sometimes?)
+      this._destroyedPromise.then(() => clone.src = '');
+    }
+
+    if (IS_DEV_MODE && !isFallbackElement) {
       const interval = setInterval(() => {
         const cloneSrc = clone.src;
         const originalSrc = originalElement.currentSrc;
@@ -111,18 +141,32 @@ export default class Lookahead {
       }, 2000);
       this._destroyedPromise.then(() => clearInterval(interval));
     }
-  }
-  private async _init(): Promise<void> {
-    const originalElement = this.originalElement;
-
-    const clone = this.clone;
 
     const toAwait: Array<Promise<void>> = [];
 
-    const ctx = new AudioContext({
-      latencyHint: 'playback',
-    });
-    this._destroyedPromise.then(() => ctx.close()); // Not sure if this is required, maybe it gets GCd automatically?
+    // TODO make sure to properly clean up the element, i.e. remove event listeners and stuff.
+    // Not only the element, but the audioContext as well.
+
+    // I might have made it too obscure, but yeah, if
+    // `isCloneElementAndAudioContextReusable === false` then we create an `AudioContext` here
+    // unconditionally.
+    const [ctx, src] = getOrCreateMediaElementSourceAndUpdateMap(
+      clone,
+      () => new AudioContext({
+        latencyHint: 'playback',
+      }),
+    );
+    if (isCloneElementAndAudioContextReusable) {
+      // The fact that the clone element is reusable also means that the `AudioContext` that it's
+      // attached to must be reusable as well because `createMediaelementSource` can only be called
+      // once for an element.
+      // Maybe we should use `clone.captureStream()` instead (when it's properly supported by
+      // browsers)?
+      this._destroyedPromise.then(() => ctx.suspend());
+    } else {
+      // Not sure if this is required, maybe it gets GCd automatically?
+      this._destroyedPromise.then(() => ctx.close());
+    }
     ctx.suspend();
     const addWorkletProcessor = (url: string) => ctx.audioWorklet.addModule(browser.runtime.getURL(url));
 
@@ -145,8 +189,6 @@ export default class Lookahead {
       return silenceDetector;
     });
 
-    const src = ctx.createMediaElementSource(clone);
-
     // When `smoothingWindowLenght` is pretty big, it needs to be taken into account.
     // It kinda acts as a delay, so `marginBefore` gets decreased and `marginAfter` gets increased.
     // The following is to compensate for this.
@@ -169,7 +211,7 @@ export default class Lookahead {
           // `marginAfter` will be taken into account when we `pushNewSilenceRange`.
           const realTimePassedSinceSilenceStart =
             realTimePassedSinceEvent + silenceDetector.durationThreshold + volumeSmoothingCausedDelay;
-          const intrinsicTimePassedSinceSilenceStart = realTimePassedSinceSilenceStart * this.clone.playbackRate;
+          const intrinsicTimePassedSinceSilenceStart = realTimePassedSinceSilenceStart * clone.playbackRate;
           // TODO fix: very rarely this calculation can be a little off. It can happen when
           // 1. The element got paused juuust before the event, and then got unpaused again.
           // Imagine if the time between the message is sent and is received is 1 second.
@@ -178,7 +220,7 @@ export default class Lookahead {
           // 2. Playback rate of the clone element got changed just recently.
           // The bigger `silenceDetector.durationThreshold` is, the bigger is the error.
           // Same applies to the `SILENCE_END` case below.
-          const silenceStartAtIntrinsicTime = this.clone.currentTime - intrinsicTimePassedSinceSilenceStart;
+          const silenceStartAtIntrinsicTime = clone.currentTime - intrinsicTimePassedSinceSilenceStart;
           this.silenceSince = silenceStartAtIntrinsicTime;
         } else {
           assertDev(this.silenceSince != undefined,
@@ -186,8 +228,8 @@ export default class Lookahead {
             + 'thought to always send `SilenceDetectorEventType.SILENCE_START` before `SILENCE_END`');
           const realTimePassedSinceSilenceEnd =
             realTimePassedSinceEvent + volumeSmoothingCausedDelay;
-          const intrinsicTimePassedSinceSilenceEnd = realTimePassedSinceSilenceEnd * this.clone.playbackRate;
-          const silenceEndAtIntrinsicTime = this.clone.currentTime - intrinsicTimePassedSinceSilenceEnd;
+          const intrinsicTimePassedSinceSilenceEnd = realTimePassedSinceSilenceEnd * clone.playbackRate;
+          const silenceEndAtIntrinsicTime = clone.currentTime - intrinsicTimePassedSinceSilenceEnd;
           this.pushNewSilenceRange(
             this.silenceSince + this.settings.marginAfter,
             silenceEndAtIntrinsicTime - this.settings.marginBefore,
@@ -209,13 +251,13 @@ export default class Lookahead {
         return;
       }
       // In case it's due to a seek to the end of the file, so we don't create a silence range of 0 length.
-      if (this.silenceSince === this.clone.duration) {
+      if (this.silenceSince === clone.duration) {
         return;
       }
       assertDev(this.silenceSince);
       this.pushNewSilenceRange(
         this.silenceSince + this.settings.marginAfter,
-        this.clone.duration,
+        clone.duration,
       );
     }
     clone.addEventListener('ended', onEnded, { passive: true });
@@ -238,6 +280,18 @@ export default class Lookahead {
       : (seekTo: MediaTime) => { clone.currentTime = seekTo };
     const seekCloneIfOriginalElIsPlayingUnprocessedRange = () => {
       const originalElementTime = originalElement.currentTime;
+      // TODO fix: Since the `HTMLMediaElement` may be reusable
+      // (`isCloneElementAndAudioContextReusable`), its `played` ranges may already be populated,
+      // so we can't rely on them. So we may actually skip performing a seek here even though
+      // it may be necessary.
+      // I don't know of a way to reset `played` for an element without re-loading its source.
+      // We probably need to make a custom `played` implementation that is
+      // specific to a `Lookahead` instance.
+      // Or, we can say that it's not a bug but a feature and that if you change some
+      // skipping settings (leading to `Lookahead` re-initialization) and seek back the video
+      // then it's not gonna skip silnece because "well I thought you seeked back because
+      // you wanted to thoriughly re-watch some part".
+      //
       // TODO fix: `clone.played` doesn't mean that we've actually played back that part.
       // E.g. if you play a video in Odysee then reload the page such that the video starts
       // playing from the middle then this is gonna say that it `played` it from start to middle.
@@ -262,7 +316,15 @@ export default class Lookahead {
     // TODO perf: also utilize `requestIdleCallback` so it gets called less frequently during high loads?
     // TODO perf: we could instead detach the listener and attach it again after one second.
     const throttledSeekCloneIfPlayingUnprocessedRange = throttle(seekCloneIfOriginalElIsPlayingUnprocessedRange, 1000);
-    throttledSeekCloneIfPlayingUnprocessedRange();
+    if (isCloneElementAndAudioContextReusable) {
+      // A somewhat of a workaround for the `played` thing (see the comment about it above).
+      // Ensure that even if the current range is `played` by clone, we start processing
+      // it anyway, at least until the next `seekCloneIfOriginalElIsPlayingUnprocessedRange`
+      // (which currently happens when the original element is 'seeking').
+      seekClone(originalElement.currentTime);
+    } else {
+      throttledSeekCloneIfPlayingUnprocessedRange();
+    }
     // TODO refactor: are there other cases when the clone can get out of sync?
     // the media load algorithm, but we re-create the Lookahead in that case.
     // Anything else? Maybe search the spec for "set the (current|official) playback position".
@@ -282,7 +344,11 @@ export default class Lookahead {
       let timeoutId = -1;
       const setClonePlaybackRateAndScheduleAnother = () => {
         // TODO improvement: also make it depend on `soundedSpeed` and how much
-        // silence there is and other stuff. Maybe also on for how long we can't keep up?
+        // silence there is and other stuff. Also on `clone.buffered`? Especially useful for the
+        // `MediaSource` cloning algorithm where the clone's `buffered` range is the same as
+        // the original element's `buffered` range so it can't run ahead too much, only as far as
+        // `buffered` goes.
+        // Maybe also on for how long we can't keep up?
         // Maybe we could utilize `TimeSavedTracker`.
         // Because it doesn't make sense to play the clone say 4x faster than
         // the original if we're only expecting 10% of the meida to be silent.
@@ -298,8 +364,30 @@ export default class Lookahead {
             console.warn('aheadSeconds < 0:', aheadSeconds, clone.currentTime, originalElement.currentTime);
           }
         }
-        // Speed is max when 0 seconds ahead and is 0 when 3 minutes ahead (but we'll clamp it, below).
-        const playbackRateUnclamped = maxClonePlaybackRate * (1 - (aheadSeconds / (3 * 60)));
+
+        /**
+         * Yeah, looks like a naming/abstraction issue, we're not supposed to be able to say
+         * whether the clone is unable to get far ahead of the original element just based
+         * on the fact that it's reusable. It's just me knowing that if it's reusable then
+         * it means that it's `MediaSource` clone based.
+         * TODO refactor?
+         */
+        const cloneCanNotPlayFarAheadOfOriginal = isCloneElementAndAudioContextReusable;
+        const zeroSpeedAt = cloneCanNotPlayFarAheadOfOriginal
+          ? (2 * 60)
+          : (3 * 60);
+        // If the clone element can't get far ahead of the original one in terms of playback
+        // position, it happens more often that `aheadSeconds` is not high enough to the
+        // point that we don't see the next silence range. And silence range detection
+        // accuracy goes down as the clone playback increases.
+        // So, here's sort of a workaround to make sure that playback rate is never too big.
+        const maxClonePlaybackRate = cloneCanNotPlayFarAheadOfOriginal
+          ? maxClonePlaybackRateWhenMediaSourceSrc
+          : maxClonePlaybackRateDefault;
+        // Speed is max when 0 seconds ahead and is 0 when `zeroSpeedAt` ahead
+        // (but we'll clamp it, below).
+
+        const playbackRateUnclamped = maxClonePlaybackRate * (1 - (aheadSeconds / zeroSpeedAt));
         // Min clamp shouldn't be low because of performance - playing a video at 0.01 speed for 100 seconds
         // is much worse than playing it at 1 speed for 1 second.
         // TODO perf: Need to pause the video instead when it goes below the lower bound.
@@ -370,7 +458,8 @@ export default class Lookahead {
   public ensureInit = once(this._init);
 
   private _getSilenceDetectorNodeDurationThreshold() {
-    return getRealtimeMargin(this.settings.marginAfter + this.settings.marginBefore, this.clone.playbackRate);
+    // TODO refactor: get rid of the only occurence of `this.clone`? Or shall we keep it?
+    return getRealtimeMargin(this.settings.marginAfter + this.settings.marginBefore, this.clone!.playbackRate);
   }
 
   /**
diff --git a/src/entry-points/content/ElementPlaybackControllerCloning/createCloneElementWithSameSrc.ts b/src/entry-points/content/ElementPlaybackControllerCloning/createCloneElementWithSameSrc.ts
new file mode 100644
index 0000000..7b00179
--- /dev/null
+++ b/src/entry-points/content/ElementPlaybackControllerCloning/createCloneElementWithSameSrc.ts
@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright (C) 2023  WofWca <wofwca@protonmail.com>
+ *
+ * This file is part of Jump Cutter Browser Extension.
+ *
+ * Jump Cutter Browser Extension is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Jump Cutter Browser Extension is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Jump Cutter Browser Extension.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ * Create a clone `HTMLMediaElement` that uses the same source as the original one.
+ */
+export function createCloneElementWithSameSrc(
+  originalElement: HTMLMediaElement,
+): HTMLAudioElement {
+  // Also see {@link `getOriginalMediaSource`}. It is very similar.
+  // Maybe even too similar.
+
+  const cloneEl = document.createElement('audio');
+
+  // TODO fix: this probably doesn't cover all cases. Maybe it's better to just
+  // `originalElement.cloneNode(true)`?
+  // TODO fix: also need to watch for _changes_ of `crossOrigin`
+  // (in `ElementPlaybackControllerCloning.ts`).
+  // TODO wait, we gotta do the same for the `MediaSource` clone element, no?
+  cloneEl.crossOrigin = originalElement.crossOrigin;
+
+  // https://html.spec.whatwg.org/multipage/media.html#concept-media-load-algorithm
+  // > If mode is object
+  // > 1. Set the currentSrc attribute to the empty string.
+  const { currentSrc } = originalElement;
+  const isSrcObjectUsedOrNoSourceAtAll = !currentSrc;
+  if (isSrcObjectUsedOrNoSourceAtAll) {
+    const { srcObject } = originalElement;
+
+    if (!srcObject) {
+      if (IS_DEV_MODE) {
+        console.warn('Making a clone element for an element with no source. You probably'
+          + ' should have waited before the original element gets a source');
+      }
+      return cloneEl;
+    }
+
+    cloneEl.srcObject = srcObject;
+  } else {
+    cloneEl.src = currentSrc;
+  }
+  return cloneEl;
+}
diff --git a/src/entry-points/content/ElementPlaybackControllerCloning/getFinalCloneElement.ts b/src/entry-points/content/ElementPlaybackControllerCloning/getFinalCloneElement.ts
new file mode 100644
index 0000000..984196c
--- /dev/null
+++ b/src/entry-points/content/ElementPlaybackControllerCloning/getFinalCloneElement.ts
@@ -0,0 +1,138 @@
+/**
+ * @license
+ * Copyright (C) 2023  WofWca <wofwca@protonmail.com>
+ *
+ * This file is part of Jump Cutter Browser Extension.
+ *
+ * Jump Cutter Browser Extension is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Jump Cutter Browser Extension is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Jump Cutter Browser Extension.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { createCloneElementWithSameSrc } from "./createCloneElementWithSameSrc";
+import { sourceMayBeMediaSource } from "./sourceMayBeMediaSource";
+
+export async function getFinalCloneElement(
+  originalElement: HTMLMediaElement,
+  getFallbackCloneElement:
+    undefined | ((originalElement: HTMLMediaElement) => Promise<HTMLAudioElement | undefined>),
+): Promise<
+  [
+    element: HTMLAudioElement,
+    isFallbackElement: boolean,
+  ]
+> {
+  // Keep in mind that `canPlayCurrentSrc` can fail due to a network error, e.g. the internet
+  // suddenly getting cut off.
+  // Be careful to call `canPlayCurrentSrc` _synchronously_ (see `createCloneElementWithSameSrc`
+  // docstring).
+  const sameSourceClone = createCloneElementWithSameSrc(originalElement);
+  if (await canPlayCurrentSrc(sameSourceClone)) {
+    return [sameSourceClone, false];
+  }
+  const fallbackElementIsSupposedToExist =
+    getFallbackCloneElement
+    // You might ask "what about `MediaSourceHandle`? Aren't we supposed to have a clone
+    // in this case?". Well, better check the `../cloneMediaSources` folder for the answer.
+    // Search for `MediaSourceHandle`.
+    && sourceMayBeMediaSource(originalElement);
+  // You might ask "why don't we try to `getFallbackCloneElement` unconditionally at this point?
+  // If there is one, let's use it". The answer is that we get the fallback element from the page's
+  // world's scripts which we don't really trust, while `sourceMayBeMediaSource` is fully under
+  // our control.
+  // But then, the page might still make the original element use `MediaSource`, and forge
+  // the fallback element the way it likes, so maybe there isn't really a point to this check,
+  // maybe it only adds a point of failure for no good reason.
+  // Not only that, making this check here IMO adds unnecessary code coupling.
+  // So, TODO refactor: reconsider the necessity `sourceMayBeMediaSource` check.
+  if (fallbackElementIsSupposedToExist) {
+    const fallbackCloneElement = await getFallbackCloneElement(originalElement);
+    if (fallbackCloneElement) {
+      return [fallbackCloneElement, true];
+    }
+  } else {
+    if (IS_DEV_MODE) {
+      if (await getFallbackCloneElement?.(originalElement)) {
+        console.warn('Expected no fallback element to exist, but it actually does.'
+          + ' Is the pre-condition check outdated, or did the website\'s script make one itself?');
+      }
+    }
+  }
+  // No fallback element, the only option is to return `sameSourceClone` that we can't play.
+  // Maybe we'll be able to play it later for some reason idk.
+  return [sameSourceClone, false];
+}
+
+/**
+ * This must be called _synchronously_ after the source has been assigned to `element`, otherwise
+ * it may not work (I did not test in which cases it doesn't work, I'm just writing the contract).
+ * Has side-effects that affect the `element`, e.g. it changes its `muted` state, and tries
+ * to play it back for a moment.
+ * Until the returned `Promise` resolves, no operations must be performed on the element.
+ * Changing the source of the element before the returned promise is resolved is undefined behavior.
+ */
+async function canPlayCurrentSrc(element: HTMLMediaElement): Promise<boolean> {
+return new Promise(r_ => {
+  // TODO perf: goddamn it. If the element becomes otherwise unreachable from other code,
+  // this one might still keep references to it because of event listeners that might be waiting
+  // forever, which is a memory leak.
+
+  // To recap:
+  // * attempting to play a `MediaSource` will [most likely](https://github.com/WofWca/jumpcutter/issues/2#issuecomment-1571654947)
+  // fail.
+  // * For `Blob` (including `File`) it's gonna work (I think?).
+  // * Not sure about `MediaStream`, but either way, I think our extension is not
+  //   applicable to streams.
+  // * `MediaSource`, `Blob`, `MediaStream` can be used either as `srcObject` or
+  //   `src = URL.createObjectURL(object)`
+
+  const originaMuted = element.muted;
+  const onCanplay = () => resolveAndCleanUp(true);
+  const onError = () => resolveAndCleanUp(false);
+  const resolveAndCleanUp = (isCanPlay: boolean) => {
+    r_(isCanPlay);
+    element.pause();
+    element.muted = originaMuted;
+    element.removeEventListener('error', onError);
+    element.removeEventListener('canplay', onCanplay);
+  };
+
+  // I'm not sure if `HAVE_CURRENT_DATA` guarantees that we can play it, so let's go with
+  // `HAVE_FUTURE_DATA` to be safe.
+  // The spec says https://html.spec.whatwg.org/multipage/media.html#media-data-processing-steps-list
+  // > This indicates that the resource is usable. The user agent must follow these substeps
+  if (element.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+    resolveAndCleanUp(true);
+    return;
+  }
+  // https://html.spec.whatwg.org/multipage/media.html#event-media-canplay
+  // > readyState newly increased to HAVE_FUTURE_DATA or greater.
+  element.addEventListener('canplay', onCanplay, { once: true, passive: true });
+  // TODO refactor: use the observer pattern here to `removeEventListener`, like with
+  // `_destroyedPromise` in other files?
+
+  if (element.error) {
+    // TODO maybe we should handle `error.code`, e.g. there is `MEDIA_ERR_NETWORK`.
+    // (same for `onError`).
+    resolveAndCleanUp(false);
+    return;
+  }
+  element.addEventListener('error', onError, { once: true, passive: true });
+
+  // Make sure that the browser actually does the steps necessary to determine if the media is
+  // playable. Although I believe it does it anyway unless `element.preload` is changed, and maybe
+  // we can detect whether we need to play based on values of `readyState` and `networkState`.
+  // But let's play it safe for now.
+  element.muted = true;
+  element.play();
+});
+}
diff --git a/src/entry-points/content/ElementPlaybackControllerCloning/sourceMayBeMediaSource.ts b/src/entry-points/content/ElementPlaybackControllerCloning/sourceMayBeMediaSource.ts
new file mode 100644
index 0000000..7de0f3e
--- /dev/null
+++ b/src/entry-points/content/ElementPlaybackControllerCloning/sourceMayBeMediaSource.ts
@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright (C) 2023  WofWca <wofwca@protonmail.com>
+ *
+ * This file is part of Jump Cutter Browser Extension.
+ *
+ * Jump Cutter Browser Extension is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Jump Cutter Browser Extension is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Jump Cutter Browser Extension.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ * @returns `true` if there is a non-zero (up to 100% inclusive) chance that the
+ * source of `element` is a `MediaSource`.
+ *   If the source is known to be a `MediaSourceHandle`, `false` is returned.
+ */
+export function sourceMayBeMediaSource(element: HTMLMediaElement): boolean {
+  // Also see {@link `createCloneElementWithSameSrc`}. It is very similar.
+  // Maybe even too similar.
+
+  // https://html.spec.whatwg.org/multipage/media.html#concept-media-load-algorithm
+  // > If mode is object
+  // > 1. Set the currentSrc attribute to the empty string.
+  const { currentSrc } = element;
+  const isSrcObjectUsedOrNoSourceAtAll = !currentSrc;
+  if (isSrcObjectUsedOrNoSourceAtAll) {
+    const { srcObject } = element;
+    if (!srcObject) {
+      return false;
+    }
+    if (srcObject instanceof MediaSource) {
+      return true;
+    }
+    return false;
+  } else {
+    // URLs returned by `createObjectURL` are guaranteed to `.startsWith('blob:')`:
+    // https://w3c.github.io/FileAPI/#unicodeBlobURL
+    if (!currentSrc.startsWith('blob:')) {
+      // Just a regular src, like `https://example.com/bbb.mp4`.
+      // Hold up, but is `URL.createObjectURL` the only way to create a URL from a `MediaSource`?
+      return false;
+    }
+    // At this point we know that `currentSrc` is a `blob:` URL, which, with the current web spec,
+    //  may be a `Blob` (including `File`), or `MediaSource`:
+    // https://w3c.github.io/FileAPI/#blob-url-entry
+    //
+    // We could try to further determine if it's `Blob` or `MediaSource` by fetching the URL.
+    // Based on my testing, fetching fails for `MediaSource` and succeeds for `Blob` and `File`.
+    // But I'm not sure if this failure is a reliable way to test for it, I haven't found
+    // this being said in the spec. Maybe one day they decide to make `fetch` succeed for
+    // `MediaSource`.
+    // Also, if you look at the context of where this function is used, it's good enough the
+    // way it is now, because this function is only called when we're unable to play the source,
+    // which most likely indicates that it's a `MediaSource`. But it could simply be that the
+    // `Blob` data is not valid media data.
+    return true;
+  }
+}
diff --git a/src/entry-points/content/cloneMediaSources/constants.ts b/src/entry-points/content/cloneMediaSources/constants.ts
new file mode 100644
index 0000000..18e8640
--- /dev/null
+++ b/src/entry-points/content/cloneMediaSources/constants.ts
@@ -0,0 +1,3 @@
+export const GET_CLONE_REQUEST_EVENT_NAME = 'jumpCutterGetCloneRequest';
+export const GET_CLONE_RESPONSE_EVENT_NAME = 'jumpCutterGetCloneResponse';
+export const BRIDGE_ELEMENT_ID_AND_PROP_NAME = '__jumpCutterBridgeElement';
diff --git a/src/entry-points/content/cloneMediaSources/getMediaSourceCloneElement.ts b/src/entry-points/content/cloneMediaSources/getMediaSourceCloneElement.ts
new file mode 100644
index 0000000..9165d52
--- /dev/null
+++ b/src/entry-points/content/cloneMediaSources/getMediaSourceCloneElement.ts
@@ -0,0 +1,116 @@
+/**
+ * @license
+ * Copyright (C) 2023  WofWca <wofwca@protonmail.com>
+ *
+ * This file is part of Jump Cutter Browser Extension.
+ *
+ * Jump Cutter Browser Extension is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Jump Cutter Browser Extension is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Jump Cutter Browser Extension.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import type {
+  GlobalThisWithBridgeElement,
+} from '@/entry-points/content/cloneMediaSources/main-for-extension-world';
+import {
+  BRIDGE_ELEMENT_ID_AND_PROP_NAME,
+  GET_CLONE_REQUEST_EVENT_NAME,
+  GET_CLONE_RESPONSE_EVENT_NAME,
+} from '@/entry-points/content/cloneMediaSources/constants';
+
+const bridgeElement =
+  (globalThis as GlobalThisWithBridgeElement)[BRIDGE_ELEMENT_ID_AND_PROP_NAME];
+
+export async function getMediaSourceCloneElement(
+  originalEl: HTMLMediaElement
+): Promise<HTMLAudioElement | undefined> {
+return new Promise(r_ => {
+  // `Math.random()` is good enough to avoid collisions, since events are handled within
+  // a couple of event cycles.
+  const requestId = Math.random();
+
+  // Keep in mind that we receive these events from the page's context.
+  // They can be website-generated, or manipulated. Treat them as potentially malicious.
+  const listener = (e_: Event) => {
+    // `unknown` because the website may create such events as well, so we need to be careful.
+    if (!(e_ instanceof CustomEvent)) {
+      if (IS_DEV_MODE) {
+        // Not sure if this is possible.
+        console.warn("Received event, but it's not CustomEvent");
+      }
+      return;
+    }
+    const e: CustomEvent<unknown> = e_;
+
+    // TODO handle error response. Perhaps retry in a while, and fail after
+    // some time.
+
+    const requestIdFromResponse = (
+      e.detail
+      && typeof e.detail === 'object'
+      && 'requestId' in e.detail
+      && e.detail.requestId
+    );
+    if (requestIdFromResponse !== requestId) {
+      return;
+    }
+    const cloneEl = e.target;
+    if (!(cloneEl instanceof HTMLMediaElement)) {
+      // TODO maybe re-request after a `setTimeout`.
+      scheduleResolvePromiseAndRemoveListener(undefined);
+      return;
+    }
+    cloneEl.remove();
+    scheduleResolvePromiseAndRemoveListener(cloneEl);
+  };
+
+  const scheduleResolvePromiseAndRemoveListener = (...resolveParams: Parameters<typeof r_>) => {
+    // Why `setTimeout`? It's a workaround for
+    // https://html.spec.whatwg.org/multipage/media.html#playing-the-media-resource
+    // > When a media element is removed from a Document, the user agent must run the following
+    // > steps
+    // > 1. Await a stable state ...
+    // > 2. If the media element is in a document, return.
+    // > 3. Run the internal pause steps for the media element.
+    // So, the problem is, we `.remove()` the element in this function, and then if another
+    // piece of code tries to `play()` the element shortly after, it gets paused because of that.
+    // An issue about this:
+    // https://github.com/whatwg/html/issues/9467
+    setTimeout(r_, 0, ...resolveParams);
+
+    bridgeElement.removeEventListener(GET_CLONE_RESPONSE_EVENT_NAME, listener);
+  }
+
+  bridgeElement.addEventListener(
+    GET_CLONE_RESPONSE_EVENT_NAME,
+    listener,
+    { passive: true }
+  );
+
+  const detail = {
+    requestId,
+  };
+  originalEl.dispatchEvent(new CustomEvent(GET_CLONE_REQUEST_EVENT_NAME, {
+    bubbles: true,
+    // Need `cloneInto` so that in Gecko the receiving script can access `detail`:
+    // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts#cloneinto
+    // TODO refactor: the fact that it's not in Chromium and Gecko means that it's fragile, IDK.
+    detail: typeof cloneInto !== 'undefined'
+      ? cloneInto(detail, window)
+      : detail
+  }));
+
+  // Maybe also add a timeout?
+});
+}
+
+declare const cloneInto: undefined | (<T>(data: T, into: typeof window) => T);
diff --git a/src/entry-points/content/cloneMediaSources/lib.ts b/src/entry-points/content/cloneMediaSources/lib.ts
new file mode 100644
index 0000000..5b68d85
--- /dev/null
+++ b/src/entry-points/content/cloneMediaSources/lib.ts
@@ -0,0 +1,623 @@
+/**
+ * @license
+ * Copyright (C) 2023  WofWca <wofwca@protonmail.com>
+ * Copyright (C) 2023  Jonas Herzig <me@johni0702.de>
+ *
+ * This file is part of Jump Cutter Browser Extension.
+ *
+ * Jump Cutter Browser Extension is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Jump Cutter Browser Extension is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Jump Cutter Browser Extension.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import type { KeysOfType } from "@/helpers";
+
+// TODO refactor: hmmm there is a lot of `stopSomething: () => void`. Maybe we can utilize
+// `WeakRef`s and `FinalizationRegistry`? Why doesn't everybody does it?
+
+export function startCloningMediaSources(): [
+  getCloneElement: (originalElement: HTMLMediaElement) => HTMLMediaElement | undefined,
+  stopCloningMediaSources: () => void,
+] {
+  const [objectUrlToMediaSourceMap, stopMaintainingUrlMap] =
+    createMaintainedObjectUrlToMediaSourceMap();
+  const [mediaSourceToCloneMediaElementMap, stopMaintainingCloneMap] =
+    createMaintainedMediaSourceToCloneMediaElementMap();
+
+  function getCloneElement(originalElement: HTMLMediaElement): HTMLMediaElement | undefined {
+    const originalMediaSource = getOriginalMediaSource(originalElement);
+    if (!originalMediaSource) {
+      if (IS_DEV_MODE) {
+        console.error('No original `MediaSource` found for the requested original element')
+      }
+      return;
+    }
+    const cloneEl = mediaSourceToCloneMediaElementMap.get(originalMediaSource);
+    if (!cloneEl) {
+      if (IS_DEV_MODE) {
+        console.error('No clone element found for `MediaSource`. How did we miss it?');
+      }
+      return;
+    }
+    return cloneEl;
+  }
+  function getOriginalMediaSource(originalElement: HTMLMediaElement): MediaSource | undefined {
+    // Also see {@link `createCloneElementWithSameSrc`}. It is very similar.
+    // Maybe even too similar.
+
+    // https://html.spec.whatwg.org/multipage/media.html#concept-media-load-algorithm
+    // > If mode is object
+    // > 1. Set the currentSrc attribute to the empty string.
+    const { currentSrc } = originalElement;
+    const isSrcObjectUsedOrNoSourceAtAll = !currentSrc;
+    if (isSrcObjectUsedOrNoSourceAtAll) {
+      const { srcObject } = originalElement;
+      if (!srcObject) {
+        // TODO maybe return different errors which the caller can differentiate between?
+        return;
+      }
+      if (!(srcObject instanceof MediaSource)) {
+        // This doesn't mean that this extension only supports `MediaSource` `srcObject`.
+        // (they can also be `Blob`, `File`s):
+        // https://html.spec.whatwg.org/multipage/media.html#media-elements:dom-media-srcobject
+        // They're simply handled in a different part of the code (namely see
+        // `createCloneElementWithSameSrc`).
+        return;
+      }
+      return srcObject;
+    }
+
+    if (IS_DEV_MODE) {
+      // URLs returned by `createObjectURL` are guaranteed to `.startsWith('blob:')`:
+      // https://w3c.github.io/FileAPI/#unicodeBlobURL
+      if (!currentSrc.startsWith('blob:')) {
+        console.warn('Requested a clone element for original element whose `currentSrc` is not'
+          + ' empty and is not a URL made from `URL.createObjectURL`');
+      }
+    }
+
+    const fromObjectUrlMap = objectUrlToMediaSourceMap.get(currentSrc);
+    if (!fromObjectUrlMap) {
+      if (IS_DEV_MODE) {
+        console.error('No MediaSource for this objectURL. How did we miss it?')
+      }
+      return;
+    }
+    const derefed = fromObjectUrlMap.deref();
+    if (!derefed) {
+      if (IS_DEV_MODE) {
+        console.error('An original `MediaSource` for an `objectURL` used to exist,'
+          + ' but it is now garbage-collected. How did we get a request for it then,'
+          + ' if there are no references to it?');
+      }
+      return;
+    }
+    return derefed;
+  }
+
+  return [
+    getCloneElement,
+    () => {
+      stopMaintainingUrlMap();
+      stopMaintainingCloneMap();
+    },
+  ];
+}
+
+// I have no particular explanation on why I'm using `Map` instead of a plain object, but
+// my intuition says that it's probably better.
+type ObjectUrlToItsMediaSource = Map<
+  ReturnType<typeof URL.createObjectURL>,
+  // It's fine to not hold a strong reference because we would never
+  // actually need a `MediaSource` if it is already not used by the page.
+  //
+  // Also FYI in Chromium currently it's the case that if you
+  // `someEl.src = URL.createObjectURL(mediaSource)` but never `URL.revokeObjectURL(someEl.src)`,
+  // it would still be possible for `mediaSource` to get garbage collected. If a website
+  // relies on this (although they probably shouldn't) then we'd leak memory here.
+  WeakRef<MediaSource>
+>;
+/**
+ * Creates and maintains a map of all URLs created with `URL.createObjectURL`
+ * to a `WeakRef` of the `MediaSource` that the URL was created for.
+ * The map is automatically cleaned up when the target `MediaSource` is garbage-collected.
+ * Calling `revokeObjectURL` doesn't remove the corresponding record from the map
+ * (because the underlying object is still usable after that, see comment inside this function).
+ *
+ * TODO I think there must be a native way to resolve objectURLs to the underlying thing they're
+ * holding.
+ */
+function createMaintainedObjectUrlToMediaSourceMap(): [
+  map: ObjectUrlToItsMediaSource,
+  stopWatching: () => void,
+] {
+  const map: ObjectUrlToItsMediaSource = new Map<string, WeakRef<MediaSource>>();
+  // TODO perf: potential smol memory leak: add `FinalizationRegistry` (see the comment in
+  // `ObjectUrlToItsMediaSource`).
+
+  const stopInterceptingCreateObjectUrlCalls = startInterceptingMethodCalls(
+    URL,
+    'createObjectURL',
+    ([obj], url) => {
+      if (obj instanceof MediaSource) {
+        map.set(url, new WeakRef(obj));
+      }
+    }
+  );
+  // The fact that `revokeObjectURL` has been called
+  // doesn't mean that we need to remove it from the map, because an
+  // `HTMLMediaElement` can still have that URL as `src` and play its
+  // `MediaSource` properly, as long as started loading the URL before it
+  // got revoked:
+  // https://w3c.github.io/FileAPI/#creating-revoking
+  // > Requests that were started before the url was revoked should still succeed.
+  //
+  // const stopInterceptingRevokeObjectUrlCalls = startInterceptingMethodCalls(
+  //   URL,
+  //   'revokeObjectURL',
+  //   ([url]) => map.delete(url)
+  // );
+
+  return [
+    map,
+    stopInterceptingCreateObjectUrlCalls,
+  ];
+}
+
+function createMaintainedMediaSourceToCloneMediaElementMap(): [
+  map: WeakMap<MediaSource, HTMLMediaElement>,
+  stopMaintainingMap: () => void,
+] {
+  const map = new WeakMap<MediaSource, HTMLMediaElement>();
+  // Keep in mind that `HTMLMediaElement` sources can also be made out of `MediaSourceHandle`.
+  // However, we currently don't (and can't, I think) intercept the corresponding `MediaSource`
+  // constructor invokations since, according to the current spec, such `MediaSource`s can only
+  // be constructed in workers (also see `MediaSource.canConstructInDedicatedWorker`). Sigh. TODO?
+  const stopInterceptingMediaSourceConstructorCalls = startInterceptingMediaSourceConstructorCalls(
+    (constructorArgs, originalMediaSource) => {
+      // TODO handle `stopMaintainingMediaSourceClone` so the clone can be GCd.
+      const maintainedMediaSourceClone =
+        makeMaintainedMediaSourceClone(originalMediaSource, constructorArgs);
+
+      // "Hold up, why can't we attach clone `MediaSource`s to clone `HTMLMediaElement`s or demand,
+      // when we need a clone element to play back?". TL;DR: to avoid a memory leak.
+      // Look at how the `makeMaintainedMediaSourceClone` function works.
+      // Practically every operation on a `MediaSource` requires its `readyState` to be `"open"`.
+      // So, when an operation is performed on the original `MediaSource`, we re-apply the operation
+      // on the clone _through `cloneMSOpenP.then`_. This means that operations are queued until the
+      // clone's state is "open". And they're not light-weight, especially the `appendBuffer` ones,
+      // which are a huge memory leak hazard.
+      //
+      // TODO refactor: add tests that show that the clone `HTMLMediaElement` gets GCd when
+      // the original `MediaSource` becomes unreachable.
+      const cloneElement = document.createElement('audio');
+
+      // TODO fix: I believe we also need to copy some attributes from the original element,
+      // like `crossOrigin` (see {@link createCloneElementWithSameSrc}).
+      // Should we leave it up to the script that actually uses the element?
+      
+      // Keep in mind that `URL.createObjectURL` is intercepted by us. Currently this is fine.
+      const cloneMediaSourceUrl = URL.createObjectURL(maintainedMediaSourceClone);
+      cloneElement.src = cloneMediaSourceUrl;
+      // We can `URL.revokeObjectURL` as soon as the `HTMLMediaElement` gets a hold of the
+      // underlying `MediaSource` and it will work fine. At least based on my tests, and this note:
+      // https://w3c.github.io/FileAPI/#creating-revoking
+      // > Requests that were started before the url was revoked should still succeed.
+      // TODO refactor: the spec seems a bit vague in this regard. I.e. can you really use the
+      // term "request" in regards to `MediaSource`s being used for `HTMLMediaElement` playback?
+      {
+        const revokeAndRemoveListener = () => {
+          URL.revokeObjectURL(cloneMediaSourceUrl);
+          cloneElement.removeEventListener('loadstart', revokeAndRemoveListener);
+          clearTimeout(timeoutId);
+        }
+        cloneElement.addEventListener('loadstart', revokeAndRemoveListener, { once: true, passive: true });
+        // Failsafe, just in case the event didn't fire for some reason.
+        let timeoutId = setTimeout(() => {
+          // Two `setTimeout`s in case one event cycle takes longer than serveral seconds idk lol.
+          timeoutId = setTimeout(revokeAndRemoveListener);
+        }, 10000);
+      }
+
+      // TODO fix: memory leak. Even when an `HTMLMediaSource` becomes unreachable,
+      // it doesn't guarantee that it's gonna get GCd as long as it can potentially play audio:
+      // https://html.spec.whatwg.org/multipage/media.html#best-practices-for-authors-using-media-elements
+      // https://github.com/WofWca/jumpcutter/blob/505b55924871ebc3c433c54d431b828a052c470c/src/entry-points/content/ElementPlaybackControllerCloning/Lookahead.ts#L92-L102
+      //
+      // I'd suggest "well, just `.src = ''` when it's not needed and assign it when it is needed".
+      // Doesn't work because you can only attach a `MediaSource` to a `HTMLMediaElement` once.
+      //
+      // I guess what we have to do is ensure that this extension doesn't hold strong references
+      // to the original `MediaSource` (currently the clone `MediaSource` strongy references it)
+      // and use `FinalizationRegistry` to watch for when the original `MediaSource` gets GCd
+      // and clean up the clones.
+      //
+      // Another idea: since we know that `MediaSource`s can only be attached once to an
+      // `HTMLMediaElement` (or do we know that? this comment
+      // https://github.com/WofWca/jumpcutter/issues/2#issuecomment-1571654947
+      // says that they can?? But in that case, we'd not have to create a clone `MediaSource`,
+      // would we?), we could watch the original element that the original `MediaSource` gets
+      // attached to and when it does get detached, we are good to clean our clones up.
+
+      map.set(originalMediaSource, cloneElement);
+    }
+  )
+  return [
+    map,
+    () => stopInterceptingMediaSourceConstructorCalls(),
+  ];
+}
+
+function makeIntercepted<T extends (...args: unknown[]) => unknown>(
+  originalFn: T,
+  callback: (args: Parameters<T>, retVal: ReturnType<T>) => void,
+): T {
+  // TODO perf: should we use `Proxy.revokable()`?
+  return new Proxy(originalFn, {
+    apply(target, thisArg, argArray, ...rest) {
+      const originalRetVal = Reflect.apply(target, thisArg, argArray, ...rest) as ReturnType<T>;
+      // `queueMicrotask` ensures that if `callback` throws, the intercepted call still returns
+      // as normal. It's also probably good for performance as it gives the website's code
+      // the priority.
+      queueMicrotask(() => callback(argArray as Parameters<T>, originalRetVal));
+      return originalRetVal;
+    },
+  })
+}
+/**
+ * When called, starts invoking `callback` whenever `object[methodName]` is called.
+ * This mutates `object` (but we try to cause as little side effects as possible).
+ * @param addOriginalProperty - whether to add a property to `object` that holds the original
+ * function. Juuuuust in case. Idk, maybe someone's making an extension that is supposed to
+ * work together with ours.
+ * @returns stop intercepting
+ */
+function startInterceptingMethodCalls<
+  T extends Record<string, any>,
+  U extends KeysOfType<T, (...args: any[]) => any> & string,
+>(
+  object: T,
+  methodName: U,
+  callback: (params: Parameters<T[U]>, retVal: ReturnType<T[U]>) => void,
+  addOriginalProperty = true
+): () => void {
+  const original = object[methodName];
+  // TODO fix: consider overriding the prototype instead (`MediaSource.prototype.addSourceBuffer`).
+  // (note that we can't do `MediaSource.prototype = new Proxy(MediaSource.prototype)` since
+  // the assignment wouldn't work:
+  // https://stackoverflow.com/questions/76366764/how-to-proxy-function-prototype).
+  // Why? Because a website may call something like
+  // `Object.getPrototypeOf(object).addSourceBuffer.apply(object, args)`,
+  // which would bypass the override.
+  // This also applies to `startInterceptingSetters`.
+  //
+  // This is also probably good for performance as we're not creating a bunch of proxies for each
+  // object.
+  //
+  // That would, of course, require some refactoring since the same callback would be called for
+  // each object, so it needs to be universal.
+  object[methodName] = makeIntercepted(object[methodName], callback);
+
+  const originalValuePropName = `_jumpCutterExtensionOriginal_${methodName}` as const;
+  type OriginalValuePropName = typeof originalValuePropName;
+  type MutatedOriginalObject = T & {
+    OriginalValuePropName?: T[U]
+  };
+  if (addOriginalProperty) {
+    // Also consider `Object.defineProperty` with `enumberable: false`.
+    // @ts-expect-error 2322 Idk what's this about.
+    (object as MutatedOriginalObject)[originalValuePropName] = original;
+  }
+
+  return () => {
+    object[methodName] = original;
+    delete (object as MutatedOriginalObject)[originalValuePropName];
+  }
+}
+
+// You might ask "why not just do `new Proxy(object, { set(...`". Well, how are you gonna do it
+// for `addSourceBuffer`, smartass?
+/**
+ * @param objectClass Must be the class that actually defines the `propName` property.
+ * May be any class of the `object`'s prototype chain, e.g. for a `MediaSource` instance
+ * it can be `MediaSource`, `EventTarget`, or `Object`.
+ */
+function startInterceptingSetters<
+  C extends new (...args: any) => any,
+  T extends InstanceType<C>,
+  P extends keyof T,
+>(
+  object: T,
+  propName: P,
+  objectClass: C,
+  callback: (newVal: T[P]) => void,
+) {
+  const prototype = objectClass.prototype;
+  const originalDescriptor = Object.getOwnPropertyDescriptor(prototype, propName);
+  if (!originalDescriptor) {
+    if (IS_DEV_MODE) {
+      console.error('No such property.', object, propName, prototype);
+    }
+    return;
+  }
+  const originalSet = originalDescriptor.set;
+  if (!originalSet) {
+    if (IS_DEV_MODE) {
+      console.error('No setter for', propName, prototype, object);
+    }
+    return;
+  }
+
+  // TODO `addOriginalProperty` as in `startInterceptingMethodCalls`.
+  Object.defineProperty(object, propName, {
+    ...originalDescriptor,
+    set(newVal, ...rest) {
+      const retVal = originalSet.call(this, newVal, ...rest);
+      queueMicrotask(() => callback(newVal));
+      return retVal;
+    },
+  });
+
+  return () => {
+    delete object[propName];
+  }
+}
+
+type MutatedGlobalThis = typeof globalThis & {
+  _jumpCutterExtensionOriginal_MediaSource?: typeof MediaSource
+};
+/**
+ * @returns stop intercepting
+ */
+function startInterceptingMediaSourceConstructorCalls(
+  callback:
+    (
+      constructorArgs: ConstructorParameters<typeof MediaSource>,
+      newMediaSource: MediaSource,
+    ) => void,
+): () => void {
+  // TODO refactor: this code is very similar to `startInterceptingMethod`.
+
+  const original = MediaSource;
+  globalThis.MediaSource = new Proxy(MediaSource, {
+    construct(target, argArray, newTarget, ...rest) {
+      const originalRetVal = Reflect.construct(target, argArray, newTarget, ...rest);
+      queueMicrotask(() => callback(
+        argArray as ConstructorParameters<typeof MediaSource>,
+        originalRetVal
+      ));
+      return originalRetVal;
+    },
+    // TODO refactor: this does not belong to the function named
+    // `startInterceptingMediaSourceConstructorCalls`
+    get(target, propName, receiver) {
+      if (propName === 'canConstructInDedicatedWorker') {
+        // We cannot intercept `MediaSource`s that are created inside dedicated workers.
+        // Let's try to trick the website into falling back to creating `MediaSource` in
+        // the page's context, where we can intercept it.
+        // This currently works on e.g. twitch.tv.
+        // TODO an option to turn this off.
+        return false;
+      }
+      return Reflect.get(target, propName, receiver)
+    },
+  });
+
+  // Also make it accessible to the whole page juuuust in case.
+  (globalThis as MutatedGlobalThis)._jumpCutterExtensionOriginal_MediaSource = original;
+
+  return () => {
+    globalThis.MediaSource = original;
+    delete (globalThis as MutatedGlobalThis)._jumpCutterExtensionOriginal_MediaSource;
+  }
+}
+
+function makeMaintainedMediaSourceClone(
+  originalMS: MediaSource,
+  constructorArgs: ConstructorParameters<typeof MediaSource>,
+): MediaSource {
+  // The "MS" abbreviation means "MediaSource".
+
+  // Calling the original one so that a clone is not created for the clone.
+  // TODO refactor: write this properly somehow, decouple. Maybe add a way to signal to the
+  // interceptor that this constructor is not to be intercepted? Extra constructor parameter?
+  // Or some global variable, like `dontCloneNextMediaSourceInstance`. Or make
+  // `startInterceptingMediaSourceConstructorCalls` also return `(pause/unpause)Intercepting`.
+  const cloneMS = new (globalThis as Required<MutatedGlobalThis>)
+    ._jumpCutterExtensionOriginal_MediaSource(...constructorArgs);
+
+  // Many mutations of `MediaSource` (like `addSourceBuffer`) throw if its state is not "open",
+  // so need to await.
+  // https://w3c.github.io/media-source/#dom-mediasource-addsourcebuffer
+  // TODO `readyState` can transition back from "open" actually, so maybe need to check and await
+  // every time, roughly like `execWhenSourceBufferReady`.
+  const cloneMSOpenP = new Promise<MediaSource>(r => {
+    cloneMS.addEventListener('sourceopen', () => r(cloneMS), { once: true, passive: true });
+  });
+
+  if (IS_DEV_MODE) {
+    const timeoutId = setTimeout(() => {
+      console.error("Created a clone `MediaSource` for", cloneMS, "5 seconds ago, but it's"
+        + " still not 'open'. Potential memory leak.");
+      cloneMSOpenP.then(() => {
+        console.warn(cloneMS, "is finally 'open'. Sheesh, that took a while");
+      });
+    }, 5000);
+    cloneMSOpenP.then(() => clearTimeout(timeoutId));
+  }
+
+  const originalToCloneSourceBufferP =
+    new WeakMap<SourceBuffer, Promise<SourceBuffer>>();
+
+  // TODO perf: `stopIntercepting`.
+  //
+  // Currently known functions that we're not intercepting:
+  // setLiveSeekableRange, clearLiveSeekableRange,
+  // `EventTarget` ones (`addEventListener`, `dispatchEvent`)
+  //
+  // We're probably not intercepting something we should. But this works for the majority of sites.
+  //
+  // TODO refactor: consider a black-list approach instead, for forwards compatibility, or
+  // maybe even dynamically determine which properties are settable
+  // (`Object.getOwnPropertyDescriptors(MediaSource.prototype)`).
+  startInterceptingMethodCalls(originalMS, 'addSourceBuffer', (params, originalSourceBuffer) => {
+    const cloneSourceBufferP = makeMaintainedSourceBufferCloneWhenOpen(
+      originalSourceBuffer,
+      params,
+      cloneMSOpenP
+    );
+    originalToCloneSourceBufferP.set(originalSourceBuffer, cloneSourceBufferP);
+  });
+  startInterceptingMethodCalls(
+    originalMS,
+    'removeSourceBuffer',
+    ([originalSourceBuffer]) => {
+      const cloneSourceBufferP = originalToCloneSourceBufferP.get(originalSourceBuffer);
+      cloneSourceBufferP!.then(cloneSourceBuffer => cloneMS.removeSourceBuffer(cloneSourceBuffer));
+    }
+  );
+  // TBH I'm not sure if it's of any use to replicate `endOfStream`.
+  startInterceptingMethodCalls(originalMS, 'endOfStream', (params) => {
+    // TODO fix: this throws if one or more of the `SourceBuffer`s are `.updating === true`.
+    // https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/endOfStream#exceptions
+    // M8, how am I supposed to track that?
+    cloneMSOpenP.then(cloneMS => cloneMS.endOfStream(...params));
+  });
+
+  startInterceptingSetters(originalMS, 'duration', MediaSource, newVal => {
+    // TODO this throws if one or more of the `SourceBuffer`s are `.updating === true`.
+    // And I actually encountered it in the wild.
+    cloneMSOpenP.then(cloneMS => cloneMS.duration = newVal);
+  });
+
+  return cloneMS;
+}
+
+/**
+ * @returns a Promise that resolves that the clone SourceBuffer
+ */
+function makeMaintainedSourceBufferCloneWhenOpen(
+  originalSourceBuffer: ReturnType<MediaSource['addSourceBuffer']>,
+  addSourceBufferParams: Parameters<MediaSource['addSourceBuffer']>,
+  cloneMediaSourceOpenP: Promise<MediaSource>,
+): Promise<SourceBuffer> {
+  const cloneSourceBufferP = cloneMediaSourceOpenP.then(cloneMS => {
+    return cloneMS.addSourceBuffer(...addSourceBufferParams);
+  });
+
+  // TODO perf: `stopIntercepting`.
+  //
+  // TODO fix: add appendBufferAsync, removeAsync
+  // Currently known functions that we're not intercepting:
+  // `EventTarget` ones (`addEventListener`, `dispatchEvent`)
+  const methodNamesToReplicateCallsFor = [
+    'appendBuffer',
+    // `abort` may seem unimportant based on its name (like "let's just save time and not process"
+    // the last chunk"), but it actually also
+    // > resets the segment parser
+    // , which is important for when you perform a seek to an unbuffered range, i.e. when
+    // you `appendBuffer` that does not directly follow the last appended one in media-time
+    // (or something like that, I'm not good at codecs).
+    'abort',
+    // We're replicating this mostly to avoid memory leaks, but I don't know if it's of essense
+    // to playback.
+    'remove',
+    'changeType',
+  ] as const /* satisfies Array<keyof typeof originalSourceBuffer> */;
+  for (const methodName of methodNamesToReplicateCallsFor) {
+    // Yes, we need to start intercepting _before_ the `cloneSourceBuffer` is created, in order
+    // to not skip any calls.
+    startInterceptingMethodCalls(originalSourceBuffer, methodName, async (params) => {
+      const cloneSourceBuffer = await cloneSourceBufferP;
+      execWhenSourceBufferReady(
+        cloneSourceBuffer,
+        () => (cloneSourceBuffer[methodName] as any)(...params),
+      );
+    });
+  }
+
+  const propNamesToReplicateSettersFor = [
+    'appendWindowStart',
+    'appendWindowEnd',
+    'mode',
+    'timestampOffset',
+  ] as const /* satisfies Array<keyof typeof originalSourceBuffer> */;
+  for (const propName of propNamesToReplicateSettersFor) {
+    startInterceptingSetters(originalSourceBuffer, propName, SourceBuffer, async newVal => {
+      const cloneSourceBuffer = await cloneSourceBufferP;
+      execWhenSourceBufferReady(
+        cloneSourceBuffer,
+        () => (cloneSourceBuffer[propName] as any) = newVal
+      );
+    });
+  }
+
+  return cloneSourceBufferP;
+}
+
+/**
+ * Execute `fn` synchronously when `sourceBuffer.updating` becomes `false`.
+ * If this function was called several times while `sourceBuffer.updating === true` then
+ * `fn`s are executed in the same order as this function was called.
+ */
+async function execWhenSourceBufferReady(sourceBuffer: SourceBuffer, fn: () => void) {
+  // TODO refactor: this comment is written with an assumption that the reader knows
+  // the context of where it is used.
+  //
+  // Why `while` instead of just `if`? Because if there were several calls to
+  // `originalSourceBuffer.appendBuffer` then several instances of this function could be
+  // `await`ing here. The event is gonna trigger all of them, but when the first awaiter
+  // does `cloneSourceBuffer.appendBuffer()`, it's gonna set `cloneSourceBuffer.updating`
+  // to `true` again. So the next awaiter is gonna need to wait again, hence `while`.
+  //
+  // This usually only happens during initialization, when `cloneMediaSource`'s 'sourceopen'
+  // fires.
+  //
+  // Don't worry, buffers are appended to the clone in the same order as they are appended
+  // to the original `SourceBuffer` (I believe so at least), in case `.mode === "sequence"`.
+  //
+  // Be careful if you decide to refactor this function as it is important that
+  // `fn` is executed _synchronously_ after the `sourceBuffer.updating` check, otherwise
+  // `sourceBuffer.updating` may actually be `true`.
+  //
+  // FYI we could also rewrite it using an explicit queue.
+  while (sourceBuffer.updating) {
+    await new Promise(r => {
+      // TODO fix: wait, 'updateend' is not the only event that signals the transition of
+      // `.updating` from `true` to `false`.
+      // https://www.w3.org/TR/media-source-2/#sourcebuffer-events
+      // So there is an error where `fn` is called in a different order than for the original
+      // sourceBuffer.
+      //
+      // TODO fix: actually, I think it's not the only case where this can happen.
+      // Suppose currently `cloneSourceBuffer.updating === true` and the following website code
+      // gets executed:
+      // ```
+      // originalSourceBuffer.appendBuffer(...);
+      // originalSourceBuffer.addEventListener('updateend', () => {
+      //   originalSourceBuffer.appendBuffer(...))
+      // });
+      // ```
+      // Also suppose that for every `SourceBuffer` after `appendBuffer` `.updating` becomes
+      // `false` for the next event loop.
+      // After this is executed, in terms of the event loop queue, the first thing in the queue
+      // is gonna be the first line's interceptor's `queueMicrotask`. Then there's gonna be the
+      // second line's addEventListener. After the `queueMicrotask`'s task is executed,
+      // `clone.addEventListener('updateend'` will get appended.
+      // wait, actually it's fine because of `queueMicrotask` again.
+      //
+      // Anyways, maybe it's time to switch to an explicit queue, as I said above?
+      sourceBuffer.addEventListener('updateend', r, { once: true, passive: true });
+    })
+  }
+  fn();
+}
diff --git a/src/entry-points/content/cloneMediaSources/main-for-extension-world.ts b/src/entry-points/content/cloneMediaSources/main-for-extension-world.ts
new file mode 100644
index 0000000..161900b
--- /dev/null
+++ b/src/entry-points/content/cloneMediaSources/main-for-extension-world.ts
@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright (C) 2023  WofWca <wofwca@protonmail.com>
+ *
+ * This file is part of Jump Cutter Browser Extension.
+ *
+ * Jump Cutter Browser Extension is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Jump Cutter Browser Extension is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Jump Cutter Browser Extension.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { browserOrChrome } from '@/webextensions-api-browser-or-chrome';
+import { BRIDGE_ELEMENT_ID_AND_PROP_NAME } from './constants';
+
+sendBridgeElement();
+
+// In Manifest V2 there is no direct way to execute a script in the page's
+// [world](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/scripting/ExecutionWorld)
+// , hence this helper script that does it.
+// The approach is taken from:
+// https://stackoverflow.com/questions/9515704/access-variables-and-functions-defined-in-page-context-using-a-content-script
+//
+// TODO fix: _this_ script runs at `document_start` (see `manifest.json`), but I'm not sure whether
+// the script we inject below also runs before other scripts. Manifest V3 with its
+// `content_scripts.world` should fix it.
+//
+// TODO fix: add an option to disable the execution of this script. Because of it, now
+// in Chromium if the user has "Site access" for this extension set to "activate on click",
+// the browser will prompt the user to reload the page after they do click on it.
+// Also it slows down page load, and introduces potential side effects because it mutates
+// built-in objects.
+// `scripting.registerContentScripts()` or `contentScripts.register()` is the way.
+// Or maybe add a way to execute it on `document_idle` as well, in case the target websites work
+// ok that way.
+const scriptEl = document.createElement('script');
+scriptEl.src = browserOrChrome.runtime.getURL('content/cloneMediaSources-for-page-world.js');
+// TODO perf: consider adding `defer`, `async`, etc.
+scriptEl.onload = () => scriptEl.remove();
+// Wait, is it legal to inject scripts as direct children of `<html>` (in case `document.head` is
+// `undefined`? Appears to work, idk.
+(document.head || document.documentElement).prepend(scriptEl);
+
+/**
+ * Since we can't directly pass objects such as `HTMLElement`s and `MediaSource`s using events
+ * and messages between worlds (see
+ * - https://stackoverflow.com/questions/9515704/access-variables-and-functions-defined-in-page-context-using-a-content-script/19312198#19312198
+ * - https://developer.chrome.com/docs/extensions/mv3/content_scripts/#host-page-communication
+ * - https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts
+ *
+ * ), let's create a dummy element that both this world's script and the extension world's script
+ * can get a reference to through DOM, and use it like a message channel.
+ * Why not just use `document.body` for this purpose? To avoid side effects as much as possible.
+ *
+ * The page's world's script is supposed to remove the element from the DOM as soon as it gets
+ * a reference to it, see {@link receiveBridgeElement}.
+ */
+function sendBridgeElement(): void {
+  const el = document.createElement('div');
+  el.id = BRIDGE_ELEMENT_ID_AND_PROP_NAME;
+  (document.body || document.documentElement).append(el);
+
+  // This is so other scripts of this (the extension's) world (not the page's world)
+  // can get a reference to it as well. This does nothing to the page's world.
+  (globalThis as GlobalThisWithBridgeElement)[BRIDGE_ELEMENT_ID_AND_PROP_NAME] = el;
+}
+
+export type GlobalThisWithBridgeElement = typeof globalThis & {
+  [BRIDGE_ELEMENT_ID_AND_PROP_NAME]: HTMLDivElement;
+};
diff --git a/src/entry-points/content/cloneMediaSources/main-for-page-world.ts b/src/entry-points/content/cloneMediaSources/main-for-page-world.ts
new file mode 100644
index 0000000..ecf8f87
--- /dev/null
+++ b/src/entry-points/content/cloneMediaSources/main-for-page-world.ts
@@ -0,0 +1,138 @@
+/**
+ * @license
+ * Copyright (C) 2023  WofWca <wofwca@protonmail.com>
+ * Copyright (C) 2023  Jonas Herzig <me@johni0702.de>
+ *
+ * This file is part of Jump Cutter Browser Extension.
+ *
+ * Jump Cutter Browser Extension is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Jump Cutter Browser Extension is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Jump Cutter Browser Extension.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {
+  BRIDGE_ELEMENT_ID_AND_PROP_NAME,
+  GET_CLONE_REQUEST_EVENT_NAME,
+  GET_CLONE_RESPONSE_EVENT_NAME
+} from "./constants";
+import { startCloningMediaSources } from "./lib";
+
+/**
+ * This script is executed in the environment (world) of the web page, unlike regular
+ * extension scripts (see ./main-for-extension-world.ts).
+ * Be careful not to introduce security vulnerabilities.
+ * - https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/scripting/ExecutionWorld
+ * - https://developer.chrome.com/docs/extensions/reference/scripting/#type-ExecutionWorld
+ * Why do we need to execute in this world? Because its relies on modifying built-in objects,
+ * which is something that world isolation is supposed to prevent:
+ * - https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#content_script_environment
+ * - https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts
+ *
+ * This script is needed to support the `ElementPlaybackControllerCloning` for `HTMLMediaElement`s
+ * that use `MediaSource` (either with `el.src = URL.createObjectURL(mediaSource)` or
+ * `el.srcObject = mediaSource`).
+ * For such elements, we can't simply do `cloneEl.src = originalEl.src` since the clone
+ * element would be unable to playback the media. See https://github.com/WofWca/jumpcutter/issues/2
+ * TODO refactor: might need to support this claim with a link to a part of the spec.
+ *
+ * What we do instead is create a new `MediaSource` for each `MediaSource` that is created
+ * by the website and replicate all of the changes made to the original one to our clone.
+ * The resulting clone `MediaSource` can be used as the source for the clone `HTMLMediaElement`
+ * in `ElementPlaybackControllerCloning`.
+ *
+ * Therefore this script also needs to get executed before the page's script interacts with
+ * the APIs that we modify here.
+ */
+
+const bridgeElement = receiveBridgeElement();
+
+const [
+  getCloneElement,
+  stopCloningMediaSources,
+] = startCloningMediaSources();
+
+
+// Keep in mind that the website itself (or other extensions) can also dispatch such an event.
+// TODO perf: `removeEventListener` when appropriate (when the extension is disabled, idk).
+document.addEventListener(GET_CLONE_REQUEST_EVENT_NAME, async e_ => {
+  if (!(e_ instanceof CustomEvent)) {
+    if (IS_DEV_MODE) {
+      console.warn('Not a CustomEvent');
+    }
+    return;
+  }
+
+  const e: CustomEvent<unknown> = e_;
+  const requestId = (
+    e.detail
+    && typeof e.detail === 'object'
+    && 'requestId' in e.detail
+    && e.detail.requestId
+  );
+
+  if (!requestId) {
+    if (IS_DEV_MODE) {
+      console.warn('No `requestId` in a request event');
+    }
+    return;
+  }
+
+  // FYI we could use a different channel for error responses.
+  const sendGetCloneErrorResponse = () => sendGetCloneResponse(bridgeElement, { requestId });
+  // TODO fix: the extension might request a clone for an element that is not actually
+  // in the document tree, so this event won't get caught.
+  // Such elements can still play audio:
+  // https://html.spec.whatwg.org/multipage/media.html#playing-the-media-resource
+  // > Media elements that are potentially playing while not in a document must
+  // > not play any video, but should play any audio component
+  // therefore they still are a valid target for us. Thought websites are rarely made this way.
+  const originalEl = e.target;
+
+  if (!(originalEl instanceof HTMLMediaElement)) {
+    console.warn('Requested a clone for an element that is not an HTMLMediaElement');
+    sendGetCloneErrorResponse();
+    return;
+  }
+
+  const cloneEl = getCloneElement(originalEl);
+  if (!cloneEl) {
+    sendGetCloneErrorResponse();
+    return;
+  }
+
+  // Keep in mind that the original element's source might change before our response is
+  // received.
+
+  // The receiver will remove the clone element from the bridge element.
+  bridgeElement.appendChild(cloneEl);
+  sendGetCloneResponse(cloneEl, { requestId });
+}, { passive: true });
+
+/**
+ * @see {@link sendBridgeElement}
+ */
+function receiveBridgeElement(): HTMLDivElement {
+  const el = document.getElementById(BRIDGE_ELEMENT_ID_AND_PROP_NAME) as HTMLDivElement;
+  el.id = ''; // No need for it anymore.
+  el.remove();
+  return el;
+}
+
+function sendGetCloneResponse(
+  targetElement: HTMLMediaElement | typeof bridgeElement,
+  detail: { requestId: number | unknown } & Record<string, unknown>,
+) {
+  targetElement.dispatchEvent(new CustomEvent(GET_CLONE_RESPONSE_EVENT_NAME, {
+    bubbles: true, // The event shall be received on the bridgeElement.
+    detail,
+  }));
+}
diff --git a/src/manifest.json b/src/manifest.json
index fd6a678..70cbaff 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -21,9 +21,17 @@
       "all_frames": true,
       "run_at": "document_idle",
       "match_about_blank": true
+    },
+    {
+      "matches": ["http://*/*", "https://*/*"],
+      "js": ["content/cloneMediaSources-for-extension-world.js"],
+      "all_frames": true,
+      "run_at": "document_start",
+      "match_about_blank": true
     }
   ],
   "web_accessible_resources": [
+    "content/cloneMediaSources-for-page-world.js",
     "content/SilenceDetectorProcessor.js",
     "content/VolumeFilterProcessor.js",
     "chunks/*.js"
diff --git a/webpack.config.js b/webpack.config.js
index da6a998..eb19426 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -93,6 +93,12 @@ module.exports = env => {
 
     entry: {
       content: './src/entry-points/content/main.ts',
+      // Yes, the following are also entry points, but I'm not convinced they should be put in a
+      // separate `./src/entry-points/*` directory.
+      'cloneMediaSources-for-extension-world':
+        './src/entry-points/content/cloneMediaSources/main-for-extension-world.ts',
+      'cloneMediaSources-for-page-world':
+        './src/entry-points/content/cloneMediaSources/main-for-page-world.ts',
       SilenceDetectorProcessor: './src/entry-points/content/SilenceDetector/SilenceDetectorProcessor.ts',
       VolumeFilterProcessor: './src/entry-points/content/VolumeFilter/VolumeFilterProcessor.ts',
 
@@ -107,7 +113,14 @@ module.exports = env => {
       path: path.resolve(__dirname, `dist-${env.browser}`),
       filename: (pathData, assetInfo) => {
         const chunkName = pathData.chunk.name;
-        if (['SilenceDetectorProcessor', 'VolumeFilterProcessor'].includes(chunkName)) {
+        if (
+          [
+            'cloneMediaSources-for-extension-world',
+            'cloneMediaSources-for-page-world',
+            'SilenceDetectorProcessor',
+            'VolumeFilterProcessor'
+          ].includes(chunkName)
+        ) {
           return `content/${chunkName}.js`;
         }
         return `${chunkName}/main.js`;