Google chrome extension manifest v3 for beginners
Tags: javascript, beginners, programming
Published: 2022-06-12 21:14:39

Manifest file uses JSON format to describe the important information about the extension. It contains fields that are required, recommended while other are optional depending on the extension you are building.
* `name` refers to the name of the extension and should be up to 45 characters.
* `version` digits separated by dots showing the extension version. For example; 1.0.0
* `manifest_version` version of the manifest. The latest is 3
* `host_permissions` It is a group of URLs which the extension needs extra privileges. you must specify the host permissions in manifest v3 and higher.

```javascript
{
     "name": "My YT Bookmarks",
    "version": "0.1.0",
    "description": "Saving timestamps in YT videos",
    "permissions": ["storage", "tabs"],
    "host_permissions": ["https://*.youtube.com/*"],
    "manifest_version": 3
}
``` 

The recommended fields are;
 * `description`- brief details on the functionality of the extension
 * `action`  action key allows us to use the chrome.action API to control the toolbar for your extension in chromes UI. It also allows us to specify the objects of default icons, the default title and the default popup html.

```javascript

 "description": "Saving timestamps in YT videos",
"action": {
      "default_icon": {
        "16": "assets/ext-icon.png",
        "24": "assets/ext-icon.png",
        "32": "assets/ext-icon.png"
      },
      "default_title": "My YT Bookmarks",
      "default_popup": "popup.html"
    },
```

The optional fields are;
*  `author`  it is a string of the authors name
```javascript
{
...
 "author": "Erica",
...
}
```
* `background` background scripts interact with the events through the Chrome API. These scripts are registered as an object using the `service_worker` key.

```javascript
{
...
 "background": {
      "service_worker": "background.js"
    },
...
}
```

* `permissions` – extensions may require various permissions such s to use chrome storage to function properly. The permissions required are passed as an array of strings.

```javascript
{
...
 "permissions": ["storage", "tabs"],
...
}
```


 * `web_accessible_resources` it is an array of objects that declare the various resource such as images or any other asset needed by the extension

```javascript
{
...
 "web_accessible_resources": [
      {
        "resources": [
          "assets/bookmark.png",
          "assets/play.png",
          "assets/delete.png",
          "assets/save.png"
        ],
        "matches": ["https://*.youtube.com/*"]
      }
    ],
...
}
```

 `content_scripts` are scripts that can manipulate the page’s DOM and run in context of a particular page. 

```javascript
{
...
 "content_scripts": [
      {
        "matches": ["https://*.youtube.com/*"],
        "js": ["contentScript.js"]
      }
    ],
...
}
```


If the script is using a JavaScript library, then it should also be injected.

```javascript
{
...
 "content_scripts": [
      {
        "matches": ["https://*.youtube.com/*"],
        "js": [jquery, "contentScript.js"]
      }
    ],
...
}
```

## Final remarks
There is much more to do with chrome extensions, but this is a great starting point. We will be looking on all other files in details soon