Build a chrome extension to resume the browsing experience revolution

Chrome has become the defecto 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 slightly opinioned 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 oberserval 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:

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

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:

Internet Explorer 6
Internet Explorer 7
Safari 3
Opera 9

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

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

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

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

Build and Test out

You can load the extension locally using the `developer mode`

Note: if you are using react and react-scripts for packaging, you need to set up for the CSP policy:

Publish to the market

You need to create a developer account and publish using the chrome developer console.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store