How can I update my outdated manifest v2 code to manifest v3 for my Google Chrome Extension?

Currently, I am developing an extension and using a template from a previous YouTube video that is based on manifest v2. However, I am implementing manifest v3 in my extension. Can anyone guide me on how to update this specific piece of code?

"background": {
    "service_worker":
        "popup.js",
        "persistent": true
},

Upon testing the extension in Chrome, I encountered the following error:

Failed to load extension
File: ~/Chrome extenions /BackgroundChanger
Error: The "background.persistent" key cannot be used with manifest_version 3. Use the "background.service_worker" key instead.
Could not load manifest.

I assumed that manifest v2 and v3 would have some similarities but seems like there are significant differences.

Answer №1

For more information on transitioning to the new extension model, check out this migration guide: https://developer.chrome.com/docs/extensions/mv3/mv3-migration/.

The issue you are facing is likely due to the presence of a scripts property within the background object. To resolve this, you should replace it with

"service_worker": "popup.js"
.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Export a list from R to Julia using JSON format

Imagine you have a list in R like this: x = list(a=1:3,b=8:20) You then save this to a JSON file on disk using the following code: library(jsonlite) cat(toJSON(x),file="f.json") Now, how can you read this JSON file using the Julia JSON package? Is it p ...

Enhancing Material-UI component [TreeView] with drag and drop functionality using react-dnd

I have encountered an issue with my TreeView implementation. Whenever I try to drag and drop a TreeItem, all of its child TreeItems move along with it. Is there a way to enable drag'n'drop functionality for just one TreeItem without affecting its ...

After the Parent Component has successfully mounted, the Child Component will render

I am currently working with a third party library that has a unique prop allowing the user to pass in a string which is used to retrieve a DOM element and return its bottom value. <Sticky bottomBoundary="#some-id"> <MyChildComponentMightBeANa ...

Is it possible to vertically displace an element within a CSS Grid cell?

Here is the code snippet: .grid-container { display: grid; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); ...

What is the proper way to structure a URL in JSON output?

When utilizing JSON output in my project, I encountered the following result: {"short_url":"http:\/\/urlhere\/fb\/37xzk"} However, the desired output should be formatted as follows: { "short_url":"http: //urlhere/fb/37xzk" } ...

Modifying website elements with JavaScript

Can someone assist me with getting a script to work on my website that will allow me to switch between four different sets of content using buttons labeled 1, 2, 3, and 4? I have tried using addClass and removeClass but cannot seem to get it right. Here i ...

Achieving proper layout in Material-UI Autocomplete by splitting long words

Exploring the Material-UI autocomplete feature for the first time has brought some challenges my way. I am working with usernames, which have a specific length limit but could exceed the space available in the autocomplete view. Upon examining the sandbox ...

Achieve vertical centering of items without relying on absolute positioning or flexbox

I am struggling to align three divs vertically without using position:absolute or flexbox, as they will affect other elements on the page that I cannot control. Here is the current code snippet: <div class="search-wrapper text-center " ...

Is there a way to display the background when the popover is visible and hide it when the popover is hidden?

How do I make the backdrop appear when the popover is displayed, and disappear when the popover is closed? $(function(){ var content = '<button class="btn btn-sm btn-default" onclick="location.href=\'/billing/\'">Pay Now ...

Is using setTimeout in a group of promises blocking in JavaScript?

Is it possible for multiple requests to be queued up and executed in sequence when calling the function func? The third promise within func includes a lengthy setTimeout that can run for as long as 3 days. Will additional calls to func trigger one after an ...

Display the data returned from a computed property PromiseResult using VueJS

After calculating the property shown below, it will output res, which is a Promise object. The reason I cannot place this script inside the created() or mounted() hook is due to the fact that this.selectedObject is null at that time. I am satisfied with t ...

Which is better for posting data via ajax: using JSON.stringify() or default URL encoding?

Is there a specific advantage to using JSON.stringify() when posting a complex object compared to allowing default url encoding with jQuery.ajax? The MVC WebApi I am utilizing is able to handle both types of requests without any issues, so the need to send ...

State of loading getServerSideProps in Next.js

Can we implement a loading state similar to when retrieving data on the client-side? I'm interested in having a loading state, maybe with a loading-skeleton like react-loading-skeleton On the client-side, we can achieve this by: import useSWR from & ...

Can someone explain why the color of a <select> element in Chrome is being influenced by the CSS property "font-family: inherit"? Here is an example

I've always been curious as to why the <select> element appears in different colors on various web pages. I've noticed that when the font-family:inherit css property affects the select element, it ends up looking blue! <!-- BLACK --> ...

Display the element only when the request sent with getJSON exceeds a certain threshold of time in milliseconds

Here's a snippet of my JavaScript code: surveyBusy.show(); $.getJSON(apiUrl + '/' + id) .done(function (data) { ... surveyBusy.hide(); }) .fail(function (jqXHR, textStatus, err) { ... surveyBusy. ...

The div is incorrect and causing the label and input to move in the wrong direction

Whenever I try to adjust the position of the current-grade-name-input, the entire grade-point-input moves along with it inexplicably. /* final grade calculator: (wanted-grade - (current-grade * (1 - final%))) / final% Ex: have a 80 an ...

Displaying data-table with only the values that are considered true

Right now, I am utilizing the AgReact table to exhibit data fetched from my endpoints. The data-table is functioning properly, however, it seems to be unable to display false values received from the endpoints on the table. Below are the snippets of my cod ...

Obtain asynchronous result from updating state in React

I am trying to achieve the following: myFunction = () => { this.setState( state => { const originalBar = state.bar; return { foo: "bar" }; }, () => ({ originalBar, newBar: state.foo }) //return this object ...

What could be the reason that my submenus are not appearing as expected?

I'm currently working on refining the navigation bar design for a website, but I've encountered a problem with the submenu functionality. It appears that only one submenu is visible while the others remain hidden. For example, when navigating to ...

Issue with error handling not being triggered when calling SAPUI5 function()

IBAN validation within a SAPUI5 Wizard is causing some issues for me. I am utilizing a functionImport on a V2 ODataModel (sap.ui.model.odata.v2.ODataModel) to perform this validation. Despite receiving a 202 status code, the request actually failed. Here ...