Migrating Extension to Manifest v3 - google-chrome-extension

I want to Migrate My Chrome extension from manifest version 2 to version 3 because in near future Google will remove MV2 extension from their store. For now My extension Manifest code is like this.
{
"browser_action": {
"default_icon": "img/icon_active.png",
"default_popup": "html/popup.html",
"default_title": "Title here"
},
"description": "description here",
"icons": {
"128": "img/icon_128.png",
"16": "img/icon_16.png"
},
"manifest_version": 2,
"name": "Title here",
"version": "1.0.1"
}
popup.js file look like this
$(document).on("click", ".copy-me", function(ev) {
var $body = document.getElementsByTagName('body')[0];
var rel = $(this).attr("rel");
var text = $("#"+rel).text();
var $tempInput = document.createElement("INPUT");
$body.appendChild($tempInput);
$tempInput.setAttribute("value", text)
$tempInput.select();
document.execCommand("copy");
$body.removeChild($tempInput);
});

Chrome Manifest v2 extensions deprecation timeline
On January 17, 2022: Chrome Web Store no longer accepts new Manifest V2 extensions, however, developers will be allowed to push updates to them.
In January 2023: Manifest V2 extensions will stop working and won’t run in Chrome, developers may not be able to push updates to them even with enterprise policy.
Offical Resource
I suggest you read the Google Chrome Offical Migration Article.
If you don't want to spend your time on this, I suggest Extension Manifest Converter which is a tool that open-source and developed by Google.
According to the README file, the tool has limitations:
This tool aims to simplify the MV3 conversion; it does not fully automate the process. Only search and replace changes are applied to .js files.
This tool does not:
update any service worker code that relies on a DOM
I tried the tool and it gives me the below output:
{
"description": "description here",
"icons": {
"128": "img/icon_128.png",
"16": "img/icon_16.png"
},
"manifest_version": 3,
"name": "Title here",
"version": "1.0.1",
"action": {
"default_icon": "img/icon_active.png",
"default_popup": "html/popup.html",
"default_title": "Title here"
},
"content_security_policy": {}
}
In your case manifest.json changed but nothing changed in popup.js.

Related

Is there a way to fix a broken manifest file?

I am trying to create a google chrome extension. Below is the code of the manifest file.
{
//Required
"manifest_verion": 2,
"name": "File to BASE64 Converter"
"version": "1.0",
//Recommended
"description": "Created By Eric Pan",
"icons": {
"128": "favicon.png"
},
//Type of action: Browser,Page, or none
"browser_action": {
"default_title" "An Application Developed By Eric Pan"
"default_popup": "popup.html"
},
}
All google tells me is that there is an error in line 3, but I can't find the solution. If you could help, that would be great!

How to Log to Console from Chrome Extension?

Given a Chrome extension that sets up a browser_action based on a default_icon click, how can that extension print to the console? For example, say my manifest.json includes this:
{
"name": "Testing",
"version": "1.0",
"browser_action": {
"default_popup": "testing.html",
"default_icon": "icon.png"
},
"manifest_version": 2
}
and my testing.html loads a <script> with some Javascript:
console.log("WHY DON'T I SEE THIS??");
Why doesn't this print anything to the console? And how might I go about getting something printed to the console?

Chrome extension "version error"

So I was testing out chrome extensions and learning how to use them but I get the same error when I upload my code... It says
Failed to load extension from: ~\Desktop\chromeExtension
The 'manifest_version' key must be present and set to 2 (without quotes). See developer.chrome.com/extensions/manifestVersion.html for details.
I have a manifest.json file and icon.png file
manifest.json:
{
"name": "Hello World!",
"version": 2,
"description": "My first Chrome extension.",
"browser_action": {
"default_icon": "icon.png"
}
}
icon.png:
Can anyone tell me what I did wrong? I uploaded my chrome extension at the chrome://extension page, hit the developer mode button, pressed load unpacked extension, and then opened a file called chromeExtension containing the manifest.json and icon.png. Any ideas on how to fix the error?
You need to set the manifest_version, not just the version. The version key is simply the version of your extension:
{
"name": "Hello World!",
"version": "1.0",
"manifest_version": 2,
"description": "My first Chrome extension.",
"browser_action": {
"default_icon": "icon.png"
}
}

Chrome extension - Notification just work in apache

I already configured my chrome extension to send notification like this:
I have a button that has a event that call createNotification. But the button just send notification if I'm running the extension on apache.
What I'm doing wrong?
Is equal that example http://jsbin.com/ziwod/1/edit?html,js,output
And for me this example just work when I click in "Run with JS".
This is my manifest
{
"name": "EXTENSION EXAMPLE",
"version": "0.0.1",
"manifest_version": 2,
"description" : "This extension is...",
"icons": { "16": "icons/16x16.png", "48": "icons/48x48.png", "128": "icons/128x128.png" },
"omnibox": { "keyword" : "example" },
"browser_action": {
"default_icon": {
"19": "icons/19x19.png",
"38": "icons/38x38.png"
},
"default_title": "Launcher",
"default_popup": "browseraction/popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions" : ["notifications"],
"options_page" : "notification.html",
"chrome_url_overrides" : {
"newtab": "newtab/newtab.html"
},
"devtools_page": "devtools/devtools.html"
}
This is my notification.html http://codepen.io/anon/pen/VYWQwB
From your html file and the manifest file of "manifest_version": 2 is that Content Security Policy is enabled by default. And Chrome developers chose to be strict about it and always disallow inline JavaScript code - only code placed in an external JavaScript file is allowed to execute (to prevent Cross-Site Scripting vulnerabilities in extensions). So <button onclick="notifyMe()"> is not allowed in your html file. onclick attribute is an inline script. You should assign an ID attribute instead: <button id="button">.

How to open my Chrome Extension in new Tab?

Hi I have found other similiar questions on stackoverflow but none of them solved the purpose.
I want my chrome extension/app to be opened in a full tab like how POSTMAN extension is opened.
My manifest.json
{
"name": "Sample App",
"manifest_version": 2,
"version": "0.0.1",
"app": {
"background": {
"scripts": ["main.js"]
}
},
"icons": { "128": "icon.png" },
"permissions" : ["tabs" ]
}
My main.js (alias for background.js)
chrome.app.runtime.onLaunched.addListener(function() {
chrome.tabs.create({'url': chrome.extension.getURL('index.html')}, function(tab) {
alert("Hi");
});
});
index.html is the file i want to load on opening the new tab.
My first time responding here on stackoverflow, please be gentle...
I discovered that it's much easier to add "launch" : { "local_path" : "index.html" } within the manifest.json file. See my sample manifest file below.
{
"manifest_version" : 2,
"name": "Hello World!",
"description": "My first Chrome App.",
"version": "0.1",
"app": {
"launch" : {
"local_path" : "index.html"
}
},
"icons": { "16": "icon.png" }
}
Keep in mind that this example is very basic, it has been stripped of some unnecessary information such as a background script but it should accomplish what you want.
http://developer.chrome.com/apps/first_app.html
chrome.app.runtime.onLaunched is only for Chrome apps, not extensions. The code for your background page will automatically run when the Chrome browser starts, so you can start directly with chrome.tabs.create(...).
Also, you need to include index.html and any resource included in your extension that the page will use in a web_accesible_resources section in your manifest.

Resources