Best npm and javascript libraries for extensions

Javascript libraries
  • jquery, jquery-ui : well-known DOM manipulation functions and widgets. Don't forget to include minified version in your addon structure !
  • materialize, bootstrap: adopt a standard look&feel for your addons.
  • underscore:widely used library to manipulate collections and arrays. Streamline your code !
  • TLD: url analysis library, allows to dissect urls and separate the various components of a url.

NPM modules
Despite the fact that most js libraries can be webified for internal addon usage, I mainly use npm modules for my build environment:
  •  after testing grunt, I've adopted gulp for the readability and compactness of the build scripts.
I have validated and I'm using the following modules on a daily basis:
  • gulp-vinyl-zip: package all addon files into a single zip file for Chrome store advertisement.
  • crx : package all addon files into a crx file for Chrome
  • firefox-xpi: to package all addon files into a single xpi file for AMO store advertisement
  • gulp-watch: dynamic addon rebuild. I keep running this in the background
  • gulp-template: instantiate portions of codes with target-dependent content (useful for branding addons)
  • gulp-preprocess: generate code based on inline directives (useful for branding addons and handling dev and production versions)
  • child_process: run system commands
  • run-sequence: run sequentially multiple tasks
  • gulp-less: handle mutualization of css stylesheet files

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

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