docs: example of puppeteer in extension

.eslintignore

@@ -53,4 +53,6 @@ packages/ng-schematics/src/**/files/
 
 # examples
 examples/puppeteer-in-browser/out/**/*
-examples/puppeteer-in-browser/node_modules/**/*
+examples/puppeteer-in-browser/node_modules/**/*
+examples/puppeteer-in-extension/out/**/*
+examples/puppeteer-in-extension/node_modules/**/*

examples/puppeteer-in-extension/.gitignore

@@ -0,0 +1,2 @@
+out
+node_modules

examples/puppeteer-in-extension/background.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2024 Google Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import {
+  connect,
+  ExtensionTransport,
+} from 'puppeteer-core/lib/esm/puppeteer/puppeteer-core-browser.js';
+
+globalThis.testConnect = async url => {
+  const tab = await chrome.tabs.create({
+    url,
+  });
+  const browser = await connect({
+    transport: await ExtensionTransport.connectTab(tab.id),
+  });
+  const [page] = await browser.pages();
+  return await page.evaluate('document.title');
+};

examples/puppeteer-in-extension/manifest.json

@@ -0,0 +1,10 @@
+{
+  "name": "Puppeteer in extension",
+  "version": "1.0",
+  "manifest_version": 3,
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "permissions": ["debugger", "background"]
+}