Browser extension resources

Here is an astute method I got from Vitaly a colleague I worked with a few years ago for easily and quickly localizing your html files. It relies on jquery, the i18 chrome API and the corresponding dictionnary built in your extension package. 1/ Copy paste the following jquery code into a file you'll name translate.js $($=> { $('[translate]').each((i, elem)=> { let $elem = $(elem); $elem.text(chrome.i18n.getMessage($elem.text())); }); }); 2/ edit each and every html page of your extension: add a "translate" attribute to all elements requiring translation like: <span translate>theStringToTranslate</span> include the above translate.js in your page. Voila ... !

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 vario