docs: Update extensions guide with new launch option (#13852)

Author: oliverdunk

docs/guides/chrome-extensions.md

@@ -2,59 +2,50 @@
 
 Puppeteer can be used for testing Chrome Extensions.
 
-:::caution
+## Load extensions
 
-Extensions are not available in chrome-headless-shell (headless: 'shell'),
-also known as the old headless mode.
+### Using `LaunchOptions`
 
-:::
-
-:::note
-
-See https://developer.chrome.com/docs/extensions/how-to/test/end-to-end-testing for more details.
+```ts
+import puppeteer from 'puppeteer';
+import path from 'path';
 
-:::
+const pathToExtension = path.join(process.cwd(), 'my-extension');
+const browser = await puppeteer.launch({
+  pipe: true,
+  enableExtensions: [pathToExtension],
+});
+```
 
-The following is code for getting a handle to the
-[background page](https://developer.chrome.com/extensions/background_pages) of
-an extension whose source is located in `./my-extension`:
+### At runtime
 
 ```ts
 import puppeteer from 'puppeteer';
 import path from 'path';
 
 const pathToExtension = path.join(process.cwd(), 'my-extension');
 const browser = await puppeteer.launch({
-  args: [
-    `--disable-extensions-except=${pathToExtension}`,
-    `--load-extension=${pathToExtension}`,
-  ],
+  pipe: true,
+  enableExtensions: true,
 });
-const backgroundPageTarget = await browser.waitForTarget(
-  target => target.type() === 'background_page',
-);
-const backgroundPage = await backgroundPageTarget.page();
-// Test the background page as you would any other page.
-await browser.close();
+
+await browser.installExtension(pathToExtension);
 ```
 
-:::note
+## Background contexts
 
-Chrome Manifest V3 extensions have a background ServiceWorker of type
-'service_worker', instead of a page of type 'background_page'.
+You can get a reference to the extension service worker or background page, which can be useful for evaluating code in the extension context or forcefully terminating the service worker.
 
-:::
+### Service worker (MV3)
 
 ```ts
 import puppeteer from 'puppeteer';
 import path from 'path';
 
 const pathToExtension = path.join(process.cwd(), 'my-extension');
 const browser = await puppeteer.launch({
-  args: [
-    `--disable-extensions-except=${pathToExtension}`,
-    `--load-extension=${pathToExtension}`,
-  ],
+  pipe: true,
+  enableExtensions: [pathToExtension],
 });
 
 const workerTarget = await browser.waitForTarget(
@@ -66,11 +57,46 @@ const workerTarget = await browser.waitForTarget(
 
 const worker = await workerTarget.worker();
 
-// Open a popup (available for Canary channels).
+// Test the service worker.
+
+await browser.close();
+```
+
+### Background page (MV2)
+
+The following is code for getting a handle to the
+[background page](https://developer.chrome.com/extensions/background_pages) of
+an extension whose source is located in `./my-extension`:
+
+```ts
+import puppeteer from 'puppeteer';
+import path from 'path';
+
+const pathToExtension = path.join(process.cwd(), 'my-extension');
+const browser = await puppeteer.launch({
+  pipe: true,
+  enableExtensions: [pathToExtension],
+});
+const backgroundPageTarget = await browser.waitForTarget(
+  target => target.type() === 'background_page',
+);
+const backgroundPage = await backgroundPageTarget.page();
+
+// Test the background page as you would any other page.
+
+await browser.close();
+```
+
+## Popup
+
+Access the service worker [as above](#service-worker-mv3). Then:
+
+```ts
 await worker.evaluate('chrome.action.openPopup();');
 
 const popupTarget = await browser.waitForTarget(
-  // Assumes that there is only one page with the URL ending with popup.html and that is the popup created by the extension.
+  // Assumes that there is only one page with the URL ending with popup.html
+  // and that is the popup created by the extension.
   target => target.type() === 'page' && target.url().endsWith('popup.html'),
 );
 
@@ -81,8 +107,12 @@ const popupPage = popupTarget.asPage();
 await browser.close();
 ```
 
-:::note
+## Content scripts
+
+Content scripts are injected as normal. Use `browser.newPage()` and `page.goto()` to navigate to a page where a content script will be injected.
+
+It is not currently possible to evaluate code in the content script isolated world.
 
-It is not yet possible to test extension content scripts.
+## Learn more
 
-:::
+To learn more, see the documentation on [Chrome for Developers](https://developer.chrome.com/docs/extensions/how-to/test/end-to-end-testing).