Technical documentation - Chrome extension

[AdityaPimpalkar]

Core principles

• DOM interaction
• Secure communication
• Clear workflow for user interaction and data flow
• Robust Testing Strategy
• Security Best Practices

Definitions

Content scripts: Scripts that read and modify the content of a page, can make changes to their JavaScript environment without conflicting with their host page or other extensions content scripts. It can use the standard HTML DOM to read and change the content of a page.

Service workers: Scripts which can monitor browser events in the background, these scripts are special JavaScript environments that only handle chrome events and terminate when they're not needed - like when we install extensions for the first time, when we switch tabs, or handle message events. These do have access to the DOM object and so cannot manipulate it.

Event messaging API: For communication, we can use the chromes built in messaging API which allows both service workers and content scripts to listen for each other's messages and respond on the same channel. There are two types here - one for one-time requests, and a more complex one for long-lived connections that allow multiple messages to be sent. We can have the message listeners on both the extensions service workers and content scripts.

Event architecture workflow

Scenario 1 -

Let's consider that a user is viewing someone's linkedin profile and wants to save their details to Twenty.

1. We can inject a button to the DOM using content scripts, which lets you save those persons details.
2. If the user chooses to press the button, we send an action message event to the service worker passing the relevant information as input.
3. The service worker will listen and receive said event, sanitize the input and then make a database call, after that we can do a callback as the response of the event performed.
4. Display the user that information was saved.

Scenario 2 -

Let's consider we are using the React UI to save someone's linkedin profile and want to save their details to Twenty.

1. To render text from current pages DOM into react, we can make a request with a message event to a content script
2. Since the content script has access to DOM and can also have listeners present, we can pass relevant information as JSON response in the callback to React.
3. React will sanitize the input and then make required database calls

Folder structure

Testing

Possible to use puppeteer or playwright for end-to-end testing
https://developer.chrome.com/docs/extensions/how-to/test/end-to-end-testing

Security

The documentation mentions about content scripts being not immune to attacks - https://developer.chrome.com/docs/extensions/develop/security-privacy/stay-secure#content_scripts

Also about sanitizing and validating inputs -
https://developer.chrome.com/docs/extensions/develop/security-privacy/stay-secure#sanitize

Note: we can make backend/database calls from content scripts too, but since they can be prone to malicious attacks due to having access to DOM, it's considered a good practice to have them written on service workers.