Here's an example of a small Google Chrome extension that displays a "Hello, World!" message when the extension icon is clicked.
A new folder for your extension and name it "HelloWorldExtension".
Inside the root folder, create a new file named manifest.json and add the following content:
{
"manifest_version": 3,
"name": "Hello Extension",
"version": "1.0",
"description": "A simple Hello World! extension",
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
},
"action": {
"default_title": "Send Greeting",
"default_icon": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
},
"default_popup": "popup.html"
},
"permissions": ["activeTab", "scripting"],
"background": {
"service_worker": "background.js"
}
}
In Chrome extensions, a background script is a central part of an extension’s architecture. It runs in the background and can handle events, perform tasks in the background, and manage the extension’s state.
With Manifest V3, background scripts have been replaced by service workers, which are more efficient because they don’t run continuously but can be woken up by events.
Example of background.js as a Service Worker in Manifest V3:
// background.js
// Listen for messages from other parts of the extension (e.g., popup or content scripts)
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === 'GREETING') {
console.log('Received greeting:', message.greeting);
sendResponse({ response: 'Hello from the background script!' });
return true; // Indicates that the response is sent asynchronously
}
});
// Example of handling an event
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (changeInfo.status === 'complete' && tab.active) {
console.log('Tab updated:', tab);
}
});- Event handling: Listening for events that occur in the browser (e.g., tab updates, browser actions).
- Persistent state: Maintaining state or data that should persist between different parts of the extension.
- Communication: Facilitating communication between different parts of the extension (e.g., content scripts, popup scripts).
document.addEventListener('DOMContentLoaded', function () {
const greetingButton = document.getElementById('greetButton');
greetingButton.addEventListener('click', () => {
chrome.runtime.sendMessage({ type: 'GREETING', greeting: 'Hello, background!' }, (response) => {
if (chrome.runtime.lastError) {
console.error('Error:', chrome.runtime.lastError);
alert('Error communicating with background script');
return;
}
alert('Response from background: ' + response.response);
});
});
});<!DOCTYPE html>
<html>
<head>
<title>Popup</title>
<style>
body {
width: 200px;
padding: 20px;
font-family: Arial, sans-serif;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<button id="greetButton">Send Greeting</button>
</body>
</html>You can create a basic icon or download one. For this example, we've included a simple green icon with the letter "H". The icon should be 128x128 pixels and saved as icon.png in the root folder.
9. The extension should now appear in the list of installed extensions. You can click on the extension icon to see the greeting button, and clicking the button will display an alert with the response from the background script.
That's it! You've created a basic Google Chrome extension. Feel free to modify the code and experiment with different functionalities. Remember to reload the extension on the chrome://extensions page whenever you make changes to the code.