Chrome Extension : Migrating to Manifest V3 from V2

Step for Migrating Manifest Version V2 to V3 

#Changing Manifest Version 

Update the Manifest Version 2 to 3 in manifest.json file.

//Manifest V2

"manifest_version" : 2 

//Manifest V3

"manifest_version" : 3

#Host Permissions

In MV2, We added all the permissions and hosts in permissions property. But in MV3, we need to provide the host permissions in a separate host_permissions property.  

//Manifest V2

"permissions : [

    "tabs",

    "scripting",

    "https://rajachandraan.blogspot.com/"

]

//Manifest V3

"permissions : [

    "tabs",

    "scripting"

],

"host_permissions" : [

    "https://rajachandraan.blogspot.com/"

]

Note : Don't need to add the content script match patterns inside host_permissions. That will be the same as V2.

#Content Security Policy

MV2 supports unsafe-eval for both extension and sandbox pages.

//Manifest V2

"content_security_policy" : "default-src *; script-src 'self' unsafe-eval; object-src 'self'"

MV3, doesn't supports unsafe-eval for extension pages. It's totally restricted. So we unable to use unsafe-eval for extension pages in MV3. But still we can use unsafe-eval for sandbox pages. 

Keep in mind, Sandbox pages doesn't supports chorme API's ( chrome.storage, chrome.scripting etc..). We need to pass the content/data to sandbox pages using postmessage().

//Manifest V3

"sandbox" :{

    "pages" : [

        "pages/popup.html"

     ]

}

"content_security_policy" {

    "extension_pages" : "default-src *; script-src 'self'; object-src 'self'"

    "sandbox" : "sandbox allow-scripts; script-src 'self' 'unsafe-eval'"

}

In the above example, popup.html supports unsafe-eval. But chrome extension API won't work.

#Action API

Both brower_action and page_action are different in MV2. In MV3, both actions are used within the action property.

//Manifest V2

{

    "browser_action" : { 

        "default_icon" : "icon.png",

        "default_title"  : "blogspot",

        "default_popup" : "pages/popup.html"

     }

    "page_action" : { ... }

}

chrome.browserAction.onClicked.addListener(tab => { console.log(tab) });

chrome.pageAction.onClicked.addListener(tab => { console.log(tab) });

//Manifest V3

{

    "action" : {

        "default_icon" : "icon.png",

        "default_title"  : "blogspot",

        "default_popup" : "pages/popup.html"

    }

}

chrome.action.onClicked.addListener(tab => { console.log(tab) });

#Web accessible resources

//Manifest V2

"web_accessible_resources" : [

    "payload.js",

    "widget.js",

    "index.html",

    "dasboard.html"

]

//Manifest V3 

"web_accessible_resources" : [{

    "resources" : [  "payload.js", "widget.js", "index.html", "dasboard.html" ],

    "matches" : ["https://*/*" , "http://*/*"]

    "extension_ids" : []

}]

In MV2, web accessible resources are accessible from any source. We can't control this. But in MV3, we can control this for limited hosts using matches.

#Remotely Hosted Code

In MV2, We can access and use files pulled from remote hosts/servers. But MV3, We can't access the remotely hosted code/files. We need to pack those remotely hosted files within extensions.

#Executing Scripts

//Manifest V2

chrome.tabs.executeScript({

  file: 'script.js'

});

//Manifest V3

chrome.scripting.executeScript({

  target: {tabId: tab.id},

  files: ['script.js']

});

 

Note : Don't forget to add scripting permission in manifest.json.

#Background Service Workers

MV2 Background pages are changed as a service worker in MV3. 

//Manifest V2

"background" : {

    "scripts" : ["background.js"]

}

//Manifest V3

"background" : {

    "service_worker" : "background.js"

}

Note : Service workers don't have access to DOM. So we can't have any DOM properties for service worker. It's also doesn't supports objects like window, cookie, localStorage etc. If you used these things in background.js, you need to think of a different way of handling.

If you completed the above all steps, Your extension is migrated to V3. I hope it's useful. If you have queries related to this migration, reach me with comments. I will help you with this. Thanks! Happy Coding!