create a chrome extension for recording arbitrary web apps

[Vadman97]

No description provided.

[linear]

HIG-4642 create a chrome extension for recording arbitrary web apps

[greptile-apps]

To create a Chrome extension for recording arbitrary web apps, follow these steps based on the highlight/highlight codebase:

1. Extension Message Listener: Implement a message listener similar to /sdk/firstload/src/browserExtension/extensionListener.ts. Use chrome.runtime.onMessage to listen for messages from the content script and initiate or stop recording based on the message action.

chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
  switch (message.action) {
    case 'init':
      // Initialize recording
      break;
    case 'stop':
      // Stop recording
      break;
  }
  return true;
});

2. Content Script Interaction: In your extension's UI, like in /experiments/chrome-extension/src/App.tsx, use chrome.tabs.sendMessage to communicate with the content script to start or stop recording.

const sendMessageToPageScript = (payload, callback) => {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(tabs[0]?.id ?? 0, payload, callback);
  });
};

3. Recording Configuration: Allow users to configure recording settings through the extension's popup UI, similar to the TabApp component in App.tsx.

4. WebSocket Recording: For recording WebSocket traffic, refer to the blog post /blog-content/web-socket-recording.md for insights on implementing WebSocket event recording in your extension.

These steps provide a foundation for building a Chrome extension capable of recording arbitrary web apps, leveraging the Highlight SDK and Chrome APIs.

References

/sdk/firstload/src/browserExtension/extensionListener.ts
/experiments/chrome-extension/src/App.tsx
/docs-content/general/6_product-features/1_session-replay/dev-tools.md
/blog-content/web-socket-recording.md

Ask Greptile