Certainly! Here’s an example of a simple Chrome extension using the Manifest V3 structure
manifest.json:
{
"manifest_version": 3,
"name": "My Chrome Extension",
"version": "1.0",
"description": "A simple Chrome extension",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
},
"permissions": [
"activeTab"
]
}
Code language: JSON / JSON with Comments (json)icon16.png, icon48.png, icon128.png: These are icons of different sizes (16×16, 48×48, and 128×128 pixels) for your extension.
popup.html:
<!DOCTYPE html>
<html>
<head>
<title>My Chrome Extension</title>
<style>
body {
width: 200px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Hello, Chrome Extension!</h1>
</body>
</html>
Code language: HTML, XML (xml)- Save the files in the directory you created.
- Open Google Chrome and go to
chrome://extensions - Enable “Developer mode” using the toggle switch in the upper right corner.
- Click on “Load unpacked” and select the directory containing your extension files.
- Your extension should now appear in the list of installed extensions with a browser action button.
When you click the browser action button, the popup.html file will open in a small popup window displaying the “Hello, Chrome Extension!” message.
Please note that Manifest V3 introduces some changes and restrictions compared to Manifest V2. It’s recommended to refer to the Chrome Extension documentation for more details on using Manifest V3 and additional features and APIs you may want to utilize: https://developer.chrome.com/docs/extensions/mv3/intro/
Remember to customize the extension according to your requirements and explore the available APIs to add more functionality to your extension.