Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save swapnilraj/5265080ec4ef10a9fc47bee22b53e6e4 to your computer and use it in GitHub Desktop.
Save swapnilraj/5265080ec4ef10a9fc47bee22b53e6e4 to your computer and use it in GitHub Desktop.

Brief

With the new changes coming in the MutationObserver branch; we discovered the title of the Youbube page is always the same as the title of the page and instead of doing an expensive call to the document with a query selector for the title of the video which is a nested DOM element we can use the document title.

The MutationObserver branch also makes all the lyric logic depend on the change in the title of the web-page; coupled with this change there is a nice symmetry between the two main components of the extension; being the tab change detection logic and the lyric fetching and injection.

Code Changes

Effects on awaitElement

Since this change is meant to go with the MutationObserver change, it is guaranteed that the title of the of document will exist and hence we can remove the dependency on awaitElement/document.querySelector

With this change the only call to the document.querySelector function is in the tag parser and since we use the utility function awaitElement as a wrapper to make sure we don't fail the querySelector call before the element is rendered. We can slowly phase out the awaitElement utility. The tag parser is currently not used in hopes to be used as a fall-back for the title parser at a later stage but it needs a big overhaul.

Title Regex

The title regex now has to account for a - YouTube suffix in the title which is easily dealt with, by adding a new group and capturing that part out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment