Confine DOM injected content from any existing web page styles


Problem statement: 
Extensions generally add some UI components to existing web pages. Those components which you create thru contentScripts get influenced by the webpage css styles. Their appearance is therefore not guaranteed and sometimes compromised. This becomes an important problem:
-  if you inject complex UI (sidebar/toolbar based addons for example)
-  if you target many websites (broad permissions)
-  if page structure and styles vary frequently for the sites you target.

Solutions
- solution 0: I have seen people setting every possible attribute for all their addon UI elements in gigantic stylesheets to prevent any potential influence.
Pros: simple
Cons: tedious and cumbersome.

 - solution 1: inject an iframe (portable across all browsers)
Pros: isolate also from CSP perspective. JS UI libraries can be used without side-effect.
Cons: complexify the architecture of the addon since it introduces a new agent to handle the iframe. Communication between the various parts can get very quickly messy and difficult to follow/maintain.

- solution 2: use shadow DOM to store UI elements see here for example. Main intent of shadow DOM is to provide scoped styling.

Pros: simple to implement. With React you can use ShadowDom plugin to even simplify it farther.
Cons: not all plugins libraries are compatible with shadow DOM. Some Jquery-ui plugins for instance create other elements  outside of the shadowed scope. Other do not handle well focus events (like chosen-js).
Third disadvantage is that shadowed DOM elements are still constrained by the webpage CSPs and you may have to disable CSPs at addon level to get them to work properly (see this extension on how to disable CSPs).

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