A lazy/optimized expression detection method

I recently put together a chrome extension for a customer who wanted to detect predefined expressions in webpages. Given the size of the targetted web pages, he was concerned about performance and did not want the web site / browser to be slowed down by the extra processing involved.

I designed a triple blade razor contentScript based on two web APIs which can help with the job:

Blade1: to deal with any web page including the dynamic ones, I configured a mutationObserver to detect the newly created DOM elements. By the way, I'm only interested by the elements which contain text nodes (i.e. nodeType===Node.TEXT_NODE)..


Blade2/ to spend CPU time on useful things, I configured an intersectionObserver to which I passed those elements. This observer detects the nodes becoming visible and feeds those to the third blade.


Blade3/ finally, a simple job scheduler scans its pipeline every 5 ms and communicates with the background script which holds the content processing engine (in this particular case, it looks at the words detected and tries to find expressions in a huge dictionnary).

Hints: to simplify the code and rely only on the mutationObserver to fuel the pipe (even for the static pages), I contentScript is configured to start before the document is ready, ie in manifest.json file:

      "run_at": "document_start",


Next work:  a bit of optimization to take care of users which scroll very quickly (by pages). This can be done by eliminating elements from the scheduler pipeline in blade2 if those elements have become invisible.

EDIT: sample addon code can be found here on github!


Comments

Post a Comment

Popular posts from this blog

Extending an extension with a native app.

Usecase I've recently come across a specific requirement from a customer who wanted a chrome extension  fiddling with the user machine file system. To be more specific, the addon was supposed to allow for the download of a cloud-based compressed file, decompress it and place the result in a specific directory for consumption by another application. As many know, filesystem is sandboxed by chrome for security reasons and it is impossible per design to write files on the user machine outside of the control of the user. I ended-up with a specific architecture outsourcing of the unauthorized job to a native app which bears none of the constraints a chrome extension does. An elegant architecture NativeMessaging Chrome API allows an extension to control - ie launch,communicate with and close - an external application: Native application can be written in any language An instance of the native app is launched when the extension connects to a configured service Native app  recei
Read more

Intercepting file download in chrome

Here is a little JS snippet which prevents every file download  (and accessorily opens a new tab in Gsuite for attempts to download from the Gsuite):   chrome.downloads.onCreated.addListener(downloadItem => {       chrome.downloads.cancel( downloadItem.id, ()=>{         alert("DL canceled: "+downloadItem.finalUrl);         if (downloadItem.finalUrl.search("https://docs.google.com")!=-1){           var _driveUrl = downloadItem.finalUrl.replace(/export\?.*/,"");           chrome.tabs.create({url:_driveUrl}, ()=>{});         }       })   });
Read more

Filtering console messages in the chrome devtools window

Image
I was disappointed to see that the regexp '.*' filter button had disapeared starting from a given chrome version (I can't remember the exact one). In fact you still have this ability by entering a '/' surrounded expression in the filter field. As an example, if you want to remove all logs containing either badword1 or badword2 or badword3 : /^((?!badword1|badword2|badword3).)*$/ Try it!
Read more