Add Chrome browser event in database during recording

[abrichr]

What kind of change does this PR introduce?
This PR implements the chrome extension to write DOM and DOM events to the database.

Summary
Motivation: Related Issue: #51

Checklist

• My code follows the style guidelines of OpenAdapt
• I have performed a self-review of my code
• If applicable, I have added tests to prove my fix is functional/effective
• I have linted my code locally prior to submission
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (e.g. README.md, requirements.txt)
• New and existing unit tests pass locally with my changes
• How can your code be run and tested? -> Add Chrome browser event in database during recording #744 (comment)

Other information
Supercedes #364

[abrichr]

Thank you @KrishPatel13 ! I left a few comments, happy to chat about any of it if you like.

If you could show some console output and/or screenshots in the PR description that would be very much appreciated!

[KrishPatel13]

An update for Chrome Extension Issue:

After spending about 4-5 hours debugging nativeMessaging, I was not able to fix the issue. I dropped the idea of using nativeMessaging. Reasons:

• Setup is complex, and it is different for all types of Os.
• APIs and example are about 6-7 years old and no debugging features with it, which prevent to make progress.
• Very less resources to find help about nativeMessaging.

Hence, After an hour of research, I recalled that I had used WebSockets in my assignment in CSC309 to communicate between an web server and my java running process. The task there was that whenever the user click submit I had to sent that api request to my java running client and then, connect to db and save some info about the user (registering).

I thought this might relevant for the task that we are working on too.

Hence, I quickly made a web_socket_extension example to demo this idea for constant communication between extension and a desktop running process (in our case a .py file). I made a dumpy record.py that just listening for incoming messages fromt the websocket and prints them.

Commit for the Web Socket "Ping" Example: https://github.com/OpenAdaptAI/OpenAdapt/pull/744/commits/9c749caef0f0ba9f6e8b79fd57d00309b822d114

Some Screenshots for the output:

[KrishPatel13]

My next step would be to log the dom changes instead of "ping" message.

[KrishPatel13]

My goal is to at least, make a prototype by tonight:

record.py (dummy): that runs and save all the dom changes in a sqlite db and once this is done, I will then manipulate the actual record.py next week so that it records the dom changes in our actual db. (our main goal). I hope this sounds like a good plan to tackle this issue :-)

[KrishPatel13]

Update: Now I am able to log DOM changes

Commit: d9f9792

[KrishPatel13]

Now, I can save all the DOM messages sent by the extension into a db synchronously.

Commit: 1b606fb

Some Screenshots for the work:

and

This commit proves a working prototype for the chrome extension issue.

Now my next steps shall be to integrate this into our actual application.

[KrishPatel13]

Also, we want to update visualize.py and the dashboard to display these events. (#744 (comment))

FIxed Visualization here: b3d54eb

I just ran visualize on a browser_event record recording. Here are some screenshots to support:

,