fix: Reset streams on BFCache events

app/scripts/contentscript.js

@@ -1,8 +1,10 @@
 import { getIsBrowserPrerenderBroken } from '../../shared/modules/browser-runtime.utils';
 import shouldInjectProvider from '../../shared/modules/provider-injection';
 import {
+  destroyStreams,
   initStreams,
   onDisconnectDestroyStreams,
+  setupExtensionStreams,
 } from './streams/provider-stream';
 import {
   isDetectedPhishingSite,
@@ -33,6 +35,20 @@ const start = () => {
         );
       });
     }
+
+    window.addEventListener('pageshow', (event) => {
+      if (event.persisted) {
+        console.warn('BFCached page has become active. Restoring the streams.');
+        setupExtensionStreams();
+      }
+    });
+
+    window.addEventListener('pagehide', (event) => {
+      if (event.persisted) {
+        console.warn('Page may become BFCached. Destroying the streams.');
+        destroyStreams();
+      }
+    });
   }
 };
 

app/scripts/streams/provider-stream.ts

@@ -33,7 +33,7 @@ let legacyExtMux: ObjectMultiplex,
 
 let extensionMux: ObjectMultiplex,
   extensionChannel: Substream,
-  extensionPort: browser.Runtime.Port,
+  extensionPort: browser.Runtime.Port | null,
   extensionStream: PortStream | null,
   pageMux: ObjectMultiplex,
   pageChannel: Substream;
@@ -65,7 +65,7 @@ const setupPageStreams = () => {
 // The field below is used to ensure that replay is done only once for each restart.
 let METAMASK_EXTENSION_CONNECT_SENT = false;
 
-const setupExtensionStreams = () => {
+export const setupExtensionStreams = () => {
   METAMASK_EXTENSION_CONNECT_SENT = true;
   extensionPort = browser.runtime.connect({ name: CONTENT_SCRIPT });
   extensionStream = new PortStream(extensionPort);
@@ -226,19 +226,35 @@ const onMessageSetUpExtensionStreams = (msg: MessageType) => {
   return undefined;
 };
 
+/**
+ * Ends two-way communication streams between browser extension and
+ * the local per-page browser context.
+ */
+export function destroyStreams() {
+  if (!extensionPort) {
+    return;
+  }
+  extensionPort.onDisconnect.removeListener(onDisconnectDestroyStreams);
+
+  destroyExtensionStreams();
+  destroyLegacyExtensionStreams();
+
+  extensionPort.disconnect();
+  extensionPort = null;
+
+  METAMASK_EXTENSION_CONNECT_SENT = false;
+}
+
 /**
  * This listener destroys the extension streams when the extension port is disconnected,
  * so that streams may be re-established later when the extension port is reconnected.
  *
  * @param [err] - Stream connection error
  */
-export const onDisconnectDestroyStreams = (err: unknown) => {
+export function onDisconnectDestroyStreams(err: unknown) {
   const lastErr = err || checkForLastError();
 
-  extensionPort.onDisconnect.removeListener(onDisconnectDestroyStreams);
-
-  destroyExtensionStreams();
-  destroyLegacyExtensionStreams();
+  destroyStreams();
 
   /**
    * If an error is found, reset the streams. When running two or more dapps, resetting the service
@@ -251,7 +267,7 @@ export const onDisconnectDestroyStreams = (err: unknown) => {
     console.warn(`${lastErr} Resetting the streams.`);
     setTimeout(setupExtensionStreams, 1000);
   }
-};
+}
 
 /**
  * Initializes two-way communication streams between the browser extension and

test/e2e/provider/bfcache.spec.js

@@ -0,0 +1,65 @@
+const { strict: assert } = require('assert');
+const {
+  withFixtures,
+  defaultGanacheOptions,
+  DAPP_URL,
+  openDapp,
+} = require('../helpers');
+const FixtureBuilder = require('../fixture-builder');
+
+const triggerBFCache = async (driver) => {
+  await driver.executeScript(`
+    window.addEventListener('pageshow', (event) => {
+      if (event.persisted) {
+        window.restoredFromBFCache = true
+      }
+    });
+  `);
+
+  await driver.driver.get(`chrome://terms/`);
+
+  await driver.driver.navigate().back();
+
+  const restoredFromBFCache = await driver.executeScript(
+    `return window.restoredFromBFCache`,
+  );
+
+  if (!restoredFromBFCache) {
+    assert.fail(new Error('Failed to trigger BFCache'));
+  }
+};
+
+describe('BFCache', function () {
+  it('has a working provider stream when a dapp is restored from BFCache', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder().build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test.fullTitle(),
+      },
+      async ({ driver }) => {
+        await openDapp(driver, undefined, DAPP_URL);
+
+        const request = JSON.stringify({
+          jsonrpc: '2.0',
+          method: 'eth_chainId',
+          params: [],
+          id: 0,
+        });
+
+        const initialResult = await driver.executeScript(
+          `return window.ethereum.request(${request})`,
+        );
+        assert.equal(initialResult, '0x539');
+
+        await triggerBFCache(driver);
+
+        const bfcacheResult = await driver.executeScript(
+          `return window.ethereum.request(${request})`,
+        );
+        assert.equal(bfcacheResult, '0x539');
+      },
+    );
+  });
+});