Update Puppeteer tutorial to open popup with openPopup() (#1613)

Updates the Puppeteer tutorial to use the `action.openPopup()`
method to open the popup, and then `asPage()` to access the popup
as a page target.

A basic service worker has been added to the history sample to
give us a context to call `action.openPopup()` in.

api-samples/history/showHistory/manifest.json

@@ -4,6 +4,9 @@
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA0FAp+xWiJpGBmsKPhGcqF4/gQN9F5tmXgEVYEHUHc8HcBIUcT+9w+jo4q2OtXa2ThqgEXsx2zcNZIWJ/5yXcofVry5E2/HKBuLWHNtYOlI1rhwc/CLujo0RHhzF7rIiYcMPQdBhzr6L0u5u9N29VUWjLozltquKRcUbjXNe4LT7+q/akhn5tvfvWHkQ9qC6mRjvGwGTFlh1A6+vWKKSVYx/J+IBHW+I2X5NlAxwG734OMYVWRWK487jf1wsWZ2jHRTqg9TB3htT+84r7+E3kFYMycow9+2EhvoI2k5VGhZw1tAJcpie1Poozc5u8CTrZ4sZ5LK4h59OCOxmejC048QIDAQAB",
   "description": "Uses the chrome.history API to display in a popup the user's most visited pages.",
   "permissions": ["history"],
+  "background": {
+    "service_worker": "service-worker.js"
+  },
   "action": {
     "default_popup": "popup.html",
     "default_icon": "clock.png"

api-samples/history/showHistory/service-worker.js

@@ -0,0 +1,3 @@
+chrome.runtime.onInstalled.addListener(() => {
+  console.log('Hello world!');
+});

functional-samples/tutorial.puppeteer/index.test.js

@@ -16,9 +16,9 @@
 const puppeteer = require('puppeteer');
 
 const EXTENSION_PATH = '../../api-samples/history/showHistory';
-const EXTENSION_ID = 'jkomgjfbbjocikdmilgaehbfpllalmia';
 
 let browser;
+let worker;
 
 beforeEach(async () => {
   browser = await puppeteer.launch({
@@ -27,6 +27,15 @@ beforeEach(async () => {
     pipe: true,
     enableExtensions: [EXTENSION_PATH]
   });
+
+  const workerTarget = await browser.waitForTarget(
+    // Assumes that there is only one service worker created by the extension and its URL ends with service-worker.js.
+    (target) =>
+      target.type() === 'service_worker' &&
+      target.url().endsWith('service-worker.js')
+  );
+
+  worker = await workerTarget.worker();
 });
 
 afterEach(async () => {
@@ -35,10 +44,22 @@ afterEach(async () => {
 });
 
 test('one history item is visible', async () => {
+  // Open a page to add a history item.
   const page = await browser.newPage();
-  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
+  await page.goto('https://example.com');
 
-  const list = await page.$('ul');
+  // Open the extension popup.
+  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.
+    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
+  );
+
+  const popup = await popupTarget.asPage();
+
+  const list = await popup.$('ul');
   const children = await list.$$('li');
 
   expect(children.length).toBe(1);

functional-samples/tutorial.puppeteer/package.json

@@ -3,7 +3,7 @@
   "version": "1.0",
   "dependencies": {
     "jest": "29.7.0",
-    "puppeteer": "24.8.1"
+    "puppeteer": "24.35.0"
   },
   "scripts": {
     "start": "jest ."