Bulid your own chrome extension with html&css

 The Chrome extension seems a mystry tech until I watched the tutorial video from Brad Traversy. It's so fun to get to know something web related new.

I followed the video step by step. You get your own Chrome extention only with html and css,no Javscript suprisingly.

Github file

To build the small site,we need a html file.

the body structure has two parts: header and content

the header is a logo included

the content has four icon link in my demo, while you can add as many as you want.

For the fonts, I normally use Google Fonts.

For the icon,  Font Awesome icon is the first choice.

So the html links added in the head.

Next , css to layout the box.

Then we can upload to Chrome extension.

Open three dots in the right side of browser-->more tools-->extension

Turn on the developer mode and load unpacked

Manifest.json

Required to set the manifest-version,name and version

you can set the version of your work and number higher when you update

icons contains all the icons you need with different pixel images

brower_action is the default popup file ,which changne to "action" in V3

permissions is the permission of the site,and activeTab permission to allow the extension temporary access to the current page.

For V3:

If you want to show in the Chrome web store, it's easy to upload to store follwing this guide,so your work can be display in store. But first time to use store ,you need pau $5 registration fee.

For newst manifest.json version which is V3, so something changes.

How to migrate V2 to V3 ?  check this link

For the usual update:

//Manifest v2
"manifest_version": 2

//Manifest v3
"manifest_version": 3

//Manifest v2
"browser_action": {...}
"page_action": {...}

//Manifest v3
"action": {...}

//Manifest v2
"background": {
 "scripts": ["js/background.js"]
}

//Manifest v3
"background": {
 "service_worker": "js/background.js"
}

//Manifest v2
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" 

//Manifest v3
"content_security_policy": {
 "extension_pages": "script-src 'self' 'unsafe-eval'; object-src 'self'",
 "sandbox": "..."
}

About the "permission",with optional permimssions and host_permissions to declare: more document

{
  "name": "My extension",
  ...
  "optional_permissions": ["tabs"],
  "host_permissions": ["https://www.google.com/"],
  ...
}