How to Update a Chrome Extension from Manifest Vo VA Step-by-Step Guide Using a Pomodoro Timer Example

Updating a Chrome extension from Manifest V2 to Manifest V3 is a critical step for developers, as Google has phased out support for Manifest V2. In this article, we’ll walk through the process of upgrading a Pomodoro Timer extension, originally built with Manifest V2, to the newer Manifest V3 standard.

My story

I had a Pomodoro Timer extension that I made 4 years ago for nothing and I got a notification from Google that I needed to update Manifest.

The original version of my Pomodoro Timer was something I designed myself, with a T-Rex roar as the end-of-cycle notification ?. It was quirky and fun, I was even surprised to see 24 people using it.

This is what it looked like:

My wife recently started learning design and since I need to update Manifest I asked her to freshen up the design. The result is at the end of the article. Spoiler: I think it turned out great.

Why Upgrade to Manifest V3?

Manifest V3 introduces several key changes aimed at enhancing privacy, security, and performance in Chrome extensions. These changes include:

• Service Workers: Background pages are replaced with service workers, which are more efficient because they don’t run continuously.
• Enhanced Security: Reduced permission scopes and the introduction of the declarativeNetRequest API to manage network requests.
• Improved Performance: By optimizing how extensions interact with browser resources, V3 ensures better resource management.

Step 1: Understanding the Core Differences

Before diving into the update, it’s important to understand the key changes between Manifest V2 and V3:

1. Background Scripts: In V2, background scripts ran continuously. In V3, these are replaced with service workers that run only when needed.
2. Permissions: Manifest V3 requires explicit declaration of all permissions, and certain permissions have been deprecated or replaced.
3. API Changes: Some APIs have been removed or replaced, and the messaging system between different components of the extension has been updated.

Step 2: Updating the Manifest File

Here’s how you would update the manifest.json file from V2 to V3 for a Pomodoro Timer extension:

Original Manifest V2 Example:

{
  "name": "Pomodoro Clock",
  "version": "1.1.0",
  "description": "Simple background timer for productivity",
  "manifest_version": 2,
  "permissions": ["storage"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/tomato16.png",
      "32": "img/tomato32.png",
      "48": "img/tomato48.png",
      "128": "img/tomato128.png"
    }
  },
  "icons": {
    "16": "img/tomato16.png",
    "32": "img/tomato32.png",
    "48": "img/tomato48.png",
    "128": "img/tomato128.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "options_page": "options.html"
}

Updated Manifest V3 Example:

{
  "name": "Pomodoro Timer & Focus Clock",
  "version": "2.0.1",
  "description": "Boost productivity with this simple Pomodoro timer. Focus on tasks, minimize distractions, and manage your time effectively.",
  "manifest_version": 3,
  "permissions": ["storage","notifications","alarms"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/tomato16.png",
      "32": "img/tomato32.png",
      "48": "img/tomato48.png",
      "128": "img/tomato128.png"
    }
  },
  "icons": {
    "16": "img/tomato16.png",
    "32": "img/tomato32.png",
    "48": "img/tomato48.png",
    "128": "img/tomato128.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

Key Changes in the Manifest:

Background Script:

• V2: "background": {"scripts": ["background.js"]}
• V3: "background": {"service_worker": "background.js"}

In V3, background scripts are replaced with service workers. Service workers only run when necessary, improving resource efficiency.

Action vs. Browser Action:

• V2: "browser_action": { ... }
• V3: "action": { ... }

browser_action has been replaced by action, which consolidates functionality and simplifies the manifest.

Step 3: Updating the Background Script to Use Service Workers

My extension used a simple setInterval() in background, with service worker this behavior will not work, because to save browser resources it runs only when needed.

In my case I had to modify the timer and store the timestamp in storage, use alarms to schedule the triggering code of the notification caller to run.

And of course used chrome's built-in notifications to send notifications to get rid of annoying t-rex rear. If I'm read by early users of my extension, I'm really sorry about that ?

There will not be a code example here as it is too specific.

Conclusion

Here's the result. I think it's pretty cool. Minimalistic and easy to use

The update was not that difficult, the main thing is to understand the difference between an old background script and a service worker, but be careful with Alarms, I even managed to crash Chrome a couple times while testing ?

Feel free to try the updated Pomodoro Timer & Focus Clock extension and good luck with updating yours!

The above is the detailed content of How to Update a Chrome Extension from Manifest Vo VA Step-by-Step Guide Using a Pomodoro Timer Example. For more information, please follow other related articles on the PHP Chinese website!