You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
We can inject a button to the DOM using content scripts, which lets you save those persons details.
If the user chooses to press the button, we send an action message event to the service worker passing the relevant information as input.
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.
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.
To render text from current pages DOM into react, we can make a request with a message event to a content script
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.
React will sanitize the input and then make required database calls
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.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Core principles
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.
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.
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.
Beta Was this translation helpful? Give feedback.
All reactions