Build a chrome extension to resume the browsing experience revolution

5 min readFeb 29, 2020

Chrome has become the dominant browser. It has been continuously gaining popularity ever since its beta phase 10+ years back.

source: https://en.wikipedia.org/wiki/Usage_share_of_web_browsers

Performance is not the deal breaker though.

At 2020, most engines the modern browsers built on has been on par. Actually chrome was using WebKit built by Apple initially. And at the moment in 2020, Opera and Edge are using the same Blink engine as Chrome. Actually Edge is using almost same core including Blink and V8 as Chrome.

Nowadays even different benchmark website could give different (maybe slightly opinioned as well) results ranking the browsers.

Unless it’s with huge enough data samples and exact set up with really accurate profiling tooling, otherwise those split seconds difference of the loading/rendering time across websites on different browsers is not much observable for normal users.

Stability is definitely not the contributor either.

Actually when Chrome first started and while it’s already gaining its market shares, very often (thinking about one out of dozens of page navigations), the user would encounter this page:

So what’s making Chrome rocket up if not performance or stability ?

source: https://googleblog.blogspot.com/2008/09/fresh-take-on-browser.html

It’s the interface.

Actually Google even created a comic book mainly talking about the interface changes.

This is how Chrome looks like when it’s first launched

These are the popular competitors at the time:

Even at 2020, with the hardware price has dropped so much, screen size is always a resource people would not like to waste. With similar specs and even at bigger price, a lot people would choose the larger screens, whether being it mobile, tablet, laptop or desktop.

Why people will choose some software to waste the precious screen space ?

Chrome has dropped all those redundant bars, leave alone tabs and addresses. It’s no brainer to choose the challenger to maximize the space and so with the productivity.

With that interface changes, what Chrome targeted to be `streamlined and simple` ` clean`, our browsing experience has been upgraded at 2008.

However, it’s 2020 now.

We are still holding on the innovation introduced 10+ years back:

Why cannot we remove the tabs and addresses ? Most of time we spend while viewing the pages, the tabs and address are left them occupying our screens wastefully.

Hence I have built a chrome extension to take back our precious screen space and productivity:

This is screen casting of my complete Macbook screen

You can get the extension here

Tab & URL Manager

Please let me know whether you like the extension, and feel free to drop any comments or improvements you would like to have.

I will write a post to talk about the details building Chrome Extension. However, here is a quick summary of the steps:

Create a javascript project

This is no requirements on the frameworks, developers can choose whichever preferred either plain Javascript, react, angular or vue. I have been building extensions with jQuery, angular and react. As long as the final package can be rendered as normal web page, it will work with chrome extension.

Set up the manifest

We need to have the manifest set up. Here are some of the configurations:

{

  "manifest_version": 2,
  "name": "My Extension",
  "version": "versionString",


  "default_locale": "en",
  "description": "A plain text description",
  "icons": {...},

  // Pick one (or none)
  "browser_action": {...},
  "page_action": {...},


  "author": ...,
  "background": {
    // Recommended
    "persistent": false,
    // Optional
    "service_worker":
  },
  "chrome_settings_overrides": {...},
  "chrome_ui_overrides": {
    "bookmarks_ui": {
      "remove_bookmark_shortcut": true,
      "remove_button": true
    }
  },
  "chrome_url_overrides": {...},
  "commands": {...},
  "content_capabilities": ...,
  "content_scripts": [{...}],
  "content_security_policy": "policyString",
  "converted_from_user_script": ...,
  "current_locale": ...,
  "declarative_net_request": ...,
  "devtools_page": "devtools.html",
  "event_rules": [{...}],
  "externally_connectable": {
    "matches": ["*://*.example.com/*"]
  },
  "file_browser_handlers": [...],
  "file_system_provider_capabilities": {
    "configurable": true,
    "multiple_mounts": true,
    "source": "network"
  },
  "homepage_url": "http://path/to/homepage",
  "import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
  "incognito": "spanning, split, or not_allowed",
  "input_components": ...,
  "key": "publicKey",
  "minimum_chrome_version": "versionString",
  "nacl_modules": [...],
  "oauth2": ...,
  "offline_enabled": true,
  "omnibox": {
    "keyword": "aString"
  },
  "optional_permissions": ["tabs"],
  "options_page": "options.html",
  "options_ui": {
    "chrome_style": true,
    "page": "options.html"
  },
  "permissions": ["tabs"],
  "platforms": ...,
  "replacement_web_app": ...,
  "requirements": {...},
  "sandbox": [...],
  "short_name": "Short Name",
  "signature": ...,
  "spellcheck": ...,
  "storage": {
    "managed_schema": "schema.json"
  },
  "system_indicator": ...,
  "tts_engine": {...},
  "update_url": "http://path/to/updateInfo.xml",
  "version_name": "aString",
  "web_accessible_resources": [...]
}

most importantly, we need to have the background, popup, options and content script configured as needed. To invoke the extension by keyboard, the browser and page actions need to be set up.