[Docs]: Browser Extensions require "Developer Mode" turned on

[fungairino]

Page(s)

https://playwright.dev/docs/chrome-extensions

Description

Just a heads up, in the latest version of chrome, "developer mode" is required to be turned on for locally loaded extensions to be active and run. This means that if you follow the docs as written, https://playwright.dev/docs/chrome-extensions, your extension won't be loaded for your test. Ideally we could just launch the browser setting a preference to turn this on, but this is not currently supported in playwright. https://github.com/microsoft/playwright/issues/9384#issuecomment-2648519781

To get around this issue, you can manually turn on dev mode in the "chrome://extensions/" settings page as we have done here: https://github.com/pixiebrix/pixiebrix-source/pull/863/files

Hopefully playwright gets around to the issue I linked above, or at least updates their chrome-extensions documentation to reflect this change in behavior.

Also as a side note, the extensions documentation currently uses a mv2 extension as an example, but those are now deprecated in favor of mv3

[mxschmitt]

I saw https://issues.chromium.org/issues/362756477 - do you have a concrete code snippet which does not work anymore?

We just rolled recent Chromium tip-of-tree (https://github.com/microsoft/playwright/pull/34726) to https://github.com/chromium/chromium/commit/07bde3181fa9396ec0ccab4665463c0400a20b60 and our extension tests are still passing.

PWTEST_CHANNEL=chromium-tip-of-tree npm run ctest -- launcher

Note: I don't have access to https://github.com/pixiebrix/pixiebrix-source/pull/863.

[fungairino]

This is currently only an issue on the chrome-beta channel. The "chromium" channel works fine for us as well currently.

The code in the PR I linked (sorry forgot it was private) just loads up the browser settings page and turns on the developer mode switch.

      // Local extensions won't work unless dev mode is turned on. Ideally we could set this via prefs ({"extensions.ui.developer_mode": True})
      // when launching the browser, but this is not supported by playwright yet.
      // see: https://github.com/microsoft/playwright/issues/9384
      const newPage = await context.newPage();
      await newPage.goto("chrome://extensions/");
      await newPage.getByLabel("Developer mode").click();
      // Ensure dev mode was turned off "Load unpacked" button is visible before continuing
      await newPage.getByRole("button", { name: "Load unpacked" }).waitFor();

The chromium issue you linked does seem to be directly related to this, though.

[mxschmitt]

PWTEST_CHANNEL=chrome-beta npm run ctest -- launcher works for me as well! So anything you can share with us, e.g. if the example from the docs doesn't work anymore, we're more than happy to investigate into it.

[fungairino]

I can confirm that just initially loading the extension does work, but at some point in our test, chrome-beta puts our extension into some sort of disabled state, and I'm not exactly sure what triggers this. Enabling developer mode fixes it.

I don't have the bandwidth to narrow down the minimum reproducible example of how this occurs, but it seems related to recent changes in chromium: https://chromium.googlesource.com/chromium/src/+/45b99ca513688af9f87a2a8a69b0e7bf0d942e1e%5E%21/

Feel free to resolve since this does not currently seem to be an issue for the documented happy path, but I'd watch out for this changing in the near future.

[mxschmitt]

I'll mark it for now as p3-collecting-feedback until we get more feedback from users that their extension testing scenario breaks - maybe it only gets triggered under a special condition etc.

[SpaceK33z]

Not sure if this helps — but since this ticket has the "collecting feedback" label;

our CI tests are breaking because of this; we have a test suite that tests Beta/Dev versions of Chrome (which of course is not expected to be 100% succeed), but as soon as this is promoted to Chrome Stable then all of our CI tests would fail. The workaround @fungairino describes works, but some easier way to do this would be very appreciated.

[mxschmitt]

We are still lacking a minimal reproduction of whats exactly broken. We have a subset of extension tests which we run on Chromium Tip of Tree and Chrome Canary which are still passing. See https://github.com/microsoft/playwright/issues/34711#issuecomment-2651574506. Would someone help us to narrow it down?

[cjlanzo]

I just updated our test suite to use Playwright 1.51.0 and am seeing this issue with chrome 134.0.6998.35.

When the test begins, the extension is loaded

But once I call chrome.runtime.reload() from within serviceWorker.evaluate(), it crashes the extension. Notice there is no extension icon anymore because none are loaded

If I go to chrome://extensions, I see this banner on my extension

If I enable developer mode, the extension loads again

[fungairino]

As @cjlanzo noted, reloading the extension definitely puts it into this disabled state. It's possible that other chrome extension apis also do the same.

Here is a changeset against playwright tests showing this behavior (@mxschmitt):

https://github.com/microsoft/playwright/pull/35254

To run the relevant test: PWTEST_CHANNEL=chrome npm run ctest -- -g "should report console messages"

[victor-ca]

We have the same situation - on refresh, the extension becomes disabled.

For headed mode you can do this:

   const userDataDir = '/some/random/dir'
    const context = await chromium.launchPersistentContext(userDataDir/*, [...]*/)
   // [...]

    const profileDir = path.join(userDataDir, "Default");
    const securePreferencesFile = path.join(profileDir, "Secure Preferences");
    await fs.ensureDir(profileDir);
    await fs.writeFile(
      securePreferencesFile,
      JSON.stringify({
        extensions: {
          ui: {
            developer_mode: true,
          },
        },
      })
    );

For headless no solution yet

[cjlanzo]

Using --disable-features=ExtensionDisableUnsupportedDeveloper (from the other thread above) solved the issue for me

[Aboude-Adra]

Just in case this helps anyone, the --disable-features=DisableLoadExtensionCommandLineSwitch argument worked for me but I had to do the following as well in my case:

• remove --disable-extensions and --disable-extensions-except=${extensionPath} flags
• add the --disable-features=DisableLoadExtensionCommandLineSwitch at the end of my arguments list as it wouldn't work when adding at the top

[Aboude-Adra]

The --disable-features=DisableLoadExtensionCommandLineSwitch argument has been removed in Google Chrome version 142.0.7444.59/60 and it no longer works, is there any other solution?

[ioio101]

The --disable-features=DisableLoadExtensionCommandLineSwitch argument has been removed in Google Chrome version 142.0.7444.59/60 and it no longer works, is there any other solution?

Wondering the same.