Das ganze Potential des Browsers nutzen

Using the browser’s full potential

Problem

Everyone knows how to use a browser to perform certain tasks. And yet (or maybe because of that) there are problems many people might work around, because they don't know the browser’s full potential. Possible problems:

  • You suspect that the browser cache, local storage or cookies are responsible for a problem and delete them to test this theory.
  • You write debugging code to help analyzing the status (change) of the application.
  • You have to log in to a web service (Gmail, Office365, ...) with different user IDs and therefore use a different browser for each user account.

Solution

  • Instead of clearing the browser cache, etc., simply use the browser’s private/incognito mode. It strictly separates cache, local storage, cookies, etc. from the non-private tabs.
  • So-called web extensions (formerly called browser add-ons) allow you to add functionality to the browser. Ad blockers are the best known, but there are also some special extensions for developers. These allow, for example, to monitor the Redux State.
  • In Firefox, Mozilla has taken the encapsulation of private tabs one step further:
    • So-called container tabs (contextual identities) allow you to create new tabs, which run separately from the normal tabs – similar to the private mode. Unlike in private mode, cache, cookies, etc. are not forgotten when closing the tab.
    • That way, you can create separate containers – for the company, the customer and also for the private account. Simply press the plus in the tab bar a bit longer or search using the menu "File -> New Container Tab".

Example

Web extensions worth looking at:

Further Aspects

If there is no suitable web extension available, it is relatively easy to write one yourself in JavaScript or TypeScript:

  • Popups or sidebars can provide information or controls
  • Panels can complement browser developer tools
  • HTTP headers can be inspected and modified live. It is also possible to redirect requests to other URLs.
  • Code and CSS can be injected into web pages to add missing functionality.
  • Reading, saving and deleting cookies is part of the basics.

There are endless possibilities. Most features are available in Firefox, but all major browsers (Firefox, Chrome, Edge, Opera) support web extensions at least in part. Polyfills for cross-browser development can be found on NPM: JavaScript (webextension-polyfill) und TypeScript (webextension-polyfill-ts)

API documentation: https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions

---

Author: Santo Pfingsten / Software Engineer / jambit office Leipzig

Das ganze Potential des Browsers nutzen mit Web Extensions (Browsererweiterungen)

Wir verwenden Cookies, um unsere Webseite für Sie zu optimieren. Mit dem Besuch unserer Webseite erklären Sie sich damit einverstanden. // Our website is using cookies to improve your experience. By continuing to browse the site, you are agreeing to our use of cookies.

Weitere Informationen finden Sie in unserer Datenschutzerklärung. // For more information, please refer to our privacy policy.