Google chrome extension manifest v3 for beginners

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.

{
     "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.

 "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

{
...
 "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.

{
...
 "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.

{
...
 "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

{
...
 "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.

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

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

{
...
 "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