chore(extension): connect button for each page, style tweaks (#848)

<img width="643" height="709" alt="image"
src="https://github.com/user-attachments/assets/850f2455-b853-4c0f-8047-a7f2ced16b7b"
/>

extension/tests/extension.spec.ts

@@ -94,7 +94,7 @@ test('navigate with extension', async ({ browserWithExtension, startClient, serv
   });
 
   const selectorPage = await confirmationPagePromise;
-  await selectorPage.getByRole('button', { name: 'Continue' }).click();
+  await selectorPage.locator('.tab-item', { hasText: 'Playwright MCP Extension' }).getByRole('button', { name: 'Connect' }).click();
 
   expect(await navigateResponse).toHaveResponse({
     pageState: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),