Browser extension resources

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}, ()=>{});         }       })   });

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!

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 ... !

Let me be lazy today and relay some good work made by a Moscow based SW developer named Vitaly Gordon. That fellow has published an autorefresh javascript snippet which improves extension development productivity by a signifcant factor. In dev mode, edit and save one of your build files and your browser will automatically reload the extension and the current active tab ... neat! Comparing to other solutions I've found on the net, this one is very elegant since it does not require any change to your build process, just inclusion of a snippet in your manifest. Code can be found on git. Thanks Vitaly!

Crx format is a zip  archive format with a special header (more details here ) used for chrome addon packaging (quite similar to .xpi files fr Firefox). But used for what ? Initially, it was a nice way for exchanging addons among people especially in the dev phase. But ...  Google people have now forbidden the installation of addons from local files (you got to use the store!). Various sources suggest using a less restrictive version of Chrome like Canary or dev version but as of today those versions present the same symptom. So what ? well go back to the source ie chromium project, download a version from  https://www.chromium.org/getting-involved/download-chromium .

Use case: I had recently a new requirement for a utility chrome extension to help with building the most appropriate CSS selector for a given DOM element. I was initially thinking about the regular extension architecture including a sidebar before going for a little exploration on the google store. I ended up inspiring myself from an existing extension called  CSS Selector Helper for Chrome™  which does a very similar job at the cost of  less than 300 lines of lines of javascript ! I was able to adapt it to my needs in a few days (including a complete code refactoring and a migration to reactjs) How to use the extension: - addon creates a sidebar in the devtools space accessible via inspect/elements/css selector. You'll access it from the devtools panel (elements and then css selector in the right pane menu) - selects a DOM element using the inspector feature - addon displays a limited DOM hierarchy with selected attributes for each node level. - a couple of simple rules a