[Feature] Support running extensions with Firefox

[Pooort]

Context:

• Playwright Version: 1.9.0
• Operating System: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
• Node.js version: 14.17.1
• Browser: Firefox

Can't connect to the Firefox browser using this code: #2644 (comment)

The code freezes on the:

const browser = await firefox.connect({ wsEndpoint });

I see the browser with extension started, but Playwright can't connect to Firefox.

[aslushnikov]

Can't connect to the Firefox browser using this code: #2644 (comment)

@Pooort Well, this was a best-effort hack that didn't age well. So overall, that's not a bug: it was never officially supported.

We probably can support it properly, but that's an engineering effort. The more upvotes this issue gets, the higher we'll prioritize it!

[Badgerr]

@aslushnikov I appreciate your effort. It would be nice to have extensions support. Voting up.

[sdklein]

agreed. this would be fantastic.

[rai-gaurav]

This is definitely a much needed feature.
Recently I was exploring to use Playwright and which going creating POC, I can to know through different github issues that Playwright always launch in incognito mode and there is not such easy way to launch a normal browser(#2071). Incognito mode is not great with testing extensions.

It would be great if there is easy support for extension across all browsers since its one of the USP of Playwright.

[selang]

It would be nice to have extensions support. Voting up.

[A-gambit]

Hi, It will be great to have firefox extension support. Voting up.

@aslushnikov are there any plans to make it works?

[NuLL3rr0r]

I would also like to see this feature integrated.

[AxxiD]

Being able to test a website with multiple browsers and commonly used extensions all with the same code will be a real game changer.

[ueokande]

I found another workaround to install add-ons to Firefox. Firefox allows installing addons via RDP (Remote Debugging Protocol). The following shows how to install addons by the RDP client implemented in web-ext.

import { firefox } from 'playwright';
// 'remote' is not defined by "exports" in package.json
import { connect } from './node_modules/web-ext/lib/firefox/remote.js';

const RDP_PORT = 12345;

(async () => {
  const browser = await firefox.launch({
    headless: false,
    args: [ '-start-debugger-server', String(RDP_PORT) ],
    firefoxUserPrefs: {
      'devtools.debugger.remote-enabled': true,
      'devtools.debugger.prompt-connection': false,
    }
  });

  const client = await connect(RDP_PORT);
  const resp = await client.installTemporaryAddon("path/to/addon/directory");
  console.log("Installed addon with ID", resp.addon.id);

  const page = await browser.newPage();
  await page.goto('https://mozilla.org');

  // ...
})();

Although this example imports an internal module, I believe it's better to use another client, such as Foxdriver (or implement a client yourself).

[szmarczak]

@ueokande Here's a full native Node.js implementation of this - no need to use web-ext or any external client:

import { Buffer } from 'buffer';
import net from 'net';

export const loadFirefoxAddon = (port: number, host: string, addonPath: string) => {
    return new Promise<boolean>((resolve) => {
        const socket = net.connect({
            port,
            host,
        });

        let success = false;

        socket.once('error', () => {});
        socket.once('close', () => {
            resolve(success);
        });

        const send = (data: Record<string, string>) => {
            const raw = Buffer.from(JSON.stringify(data));

            socket.write(`${raw.length}`);
            socket.write(':');
            socket.write(raw);
        };

        send({
            to: 'root',
            type: 'getRoot',
        });

        const onMessage = (message: any) => {
            if (message.addonsActor) {
                send({
                    to: message.addonsActor,
                    type: 'installTemporaryAddon',
                    addonPath,
                });
            }

            if (message.addon) {
                success = true;
                socket.end();
            }

            if (message.error) {
                socket.end();
            }
        };

        const buffers: Buffer[] = [];
        let remainingBytes = 0;

        socket.on('data', (data) => {
            while (true) {
                if (remainingBytes === 0) {
                    const index = data.indexOf(':');

                    buffers.push(data);

                    if (index === -1) {
                        return;
                    }

                    const buffer = Buffer.concat(buffers);
                    const bufferIndex = buffer.indexOf(':');

                    buffers.length = 0;
                    remainingBytes = Number(buffer.subarray(0, bufferIndex).toString());

                    if (!Number.isFinite(remainingBytes)) {
                        throw new Error('Invalid state');
                    }

                    data = buffer.subarray(bufferIndex + 1);
                }

                if (data.length < remainingBytes) {
                    remainingBytes -= data.length;
                    buffers.push(data);
                    break;
                } else {
                    buffers.push(data.subarray(0, remainingBytes));

                    const buffer = Buffer.concat(buffers);
                    buffers.length = 0;

                    const json = JSON.parse(buffer.toString());
                    queueMicrotask(() => {
                        onMessage(json);
                    });

                    const remainder = data.subarray(remainingBytes);
                    remainingBytes = 0;

                    if (remainder.length === 0) {
                        break;
                    } else {
                        data = remainder;
                    }
                }
            }
        });
    });
};

[bibinmohana]

Hello All ,

I have tried the below code in java to launch extension , its working but its getting launged in nightly . Is this still a limitation or something wrong with the code . Can some one help me here pls ?

Playwright playwright = Playwright.create()
Path extpath=Paths get("profile\extension)

List Args= new ArrayList<>();

Args.add("--dusable-extension-except="+extpath);
Args.add("--load-extension="+ extpath)

BrowserType.LaunchPersistentContextOptions lp= new BrowserType.LaunchPersistentContextOptions();
lp.setChannel("firefox")
lp.setHeadless(false)
lp.args=Args
lp.setDevtools(false)
Path path= Paths.get(path to profile folder)
BrowserContext browser= playwright.firefox().launchPersistentContext(path, lp)
Page page= browser.pages().get(0)
page.navigate()
....

The above cose is working with extensionbut its loading in Nightly .. is it a limitation or something wrong with code ?

[optionsx]

add pls.

[4n1qz5skwv]

add pls (python)

[ueokande]

Hi! I have published npm package which enables you to load an extensions on playwright.
https://github.com/ueokande/playwright-webextext

[aryangupta701]

@ueokande I used your package to install the addon. The addon installed successfully but it is asking for permissions and I am not able to give permissions to it. is there any way to do this ?

[gilgulim]

Much needed! (java)

[0x0480]

+1

[mihneamanolache]

+1

[siddharth2023]

+1

[ZouYouShun]

Bump!!!! (nodejs)

[doublex]

+1

[siddharth2023]

+1 Bump!!!

[urielgb413]

+1

[quantropi-minh]

+1 (nodejs)

[oleksiilevzhynskyi]

+1

[ddailyCO]

+1

[sudesh0sudesh]

+1

[Rymar4ik]

+1

[Dwtexe]

+1

[xinlai-ni]

+1

[s-c-p]

+1 (python)

[siddharth2023]

Much needed feature!!

[ezexe]

would be awesome

[JackYouk]

+1 (python)

[3droj7]

This one should be great! (python)