Vlas Bashynskyi

Make Your Chrome Extension Lightning Fast

In this video, I will show how you can use mutation Observer for your Chrome extension to make sure it reacts very fast to changes in Dom and looks seamless with the website that you'reextending.

Video

Transcript

In this video I will show how you can use mutation Observer for your Chrome extension to make sure it reacts very fast to changes in Dom and looks seamless with the website that you're extending.

For example, let's say you want to develop a Chrome extension for Wikipedia that adds an edit icon to the settings icon.

One way to implement that would be to create an interval that every seconds checks for a specific element on the page

In our case that element would be this footer where we need to add a new icon and every second we will check if this element exists if it does we add a new icon to it now let's run this code in console and see how it works now you can see icon was added now

if I move Mouse over a link we can see that after a small delay this button is added again. sometimes it's fast other times it's slower. We can use mutation Observer to make sure this change is instant and this button is added immediately after new element appears and to do that we need to modify our script only a little bit

In this code instead of setting interval that checks every second for changes we create a mutation Observer that checks a document body for new elements because if we open elements and mouse over a link. We can see that this pop-up is added directly to the body element now if we reload the page and execute this script with mutation Observer we will see that the edit icon is added immediately after the popup appears

However, be careful when creating a new mutation Observer because it can cause a lot of checks to be executed if there are a lot of changes to the body element. However in this case the changes to the body element directly are very small and this method will be executed only a few times when we need it .Thank you for watching