{"id":15080632,"url":"https://github.com/liteobject/simple-google-chrome-extension","last_synced_at":"2026-02-06T21:32:51.965Z","repository":{"id":205712357,"uuid":"714894333","full_name":"LiteObject/simple-google-chrome-extension","owner":"LiteObject","description":"A simple google chrome extension","archived":false,"fork":false,"pushed_at":"2024-07-13T03:18:54.000Z","size":11,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-16T20:07:14.056Z","etag":null,"topics":["browser-extension","chrome","chrome-extension","css","google-chrome","html","jaavscript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiteObject.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-11-06T04:01:58.000Z","updated_at":"2024-10-10T11:17:51.000Z","dependencies_parsed_at":"2023-11-06T05:26:59.667Z","dependency_job_id":"d0bd80a3-27a1-4ea4-99ec-2aa5e4bcea63","html_url":"https://github.com/LiteObject/simple-google-chrome-extension","commit_stats":null,"previous_names":["liteobject/simple-google-chrome-extension"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiteObject%2Fsimple-google-chrome-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiteObject%2Fsimple-google-chrome-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiteObject%2Fsimple-google-chrome-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiteObject%2Fsimple-google-chrome-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiteObject","download_url":"https://codeload.github.com/LiteObject/simple-google-chrome-extension/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242179252,"owners_count":20084940,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser-extension","chrome","chrome-extension","css","google-chrome","html","jaavscript"],"created_at":"2024-09-25T05:04:00.831Z","updated_at":"2026-02-06T21:32:51.958Z","avatar_url":"https://github.com/LiteObject.png","language":"JavaScript","readme":"# A Simple Google Chrome Extension\n\nHere's an example of a small Google Chrome extension that displays a \"Hello, World!\" message when the extension icon is clicked.\n\n### 1. Create a project folder\n\nA new folder for your extension and name it \"HelloWorldExtension\".\n\n### 2. Add a `manifest.json` file\n\nInside the root folder, create a new file named `manifest.json` and add the following content:\n\n```json\n{\n  \"manifest_version\": 3,\n  \"name\": \"Hello Extension\",\n  \"version\": \"1.0\",\n  \"description\": \"A simple Hello World! extension\",\n  \"icons\": {\n      \"16\": \"icon.png\",\n      \"48\": \"icon.png\",\n      \"128\": \"icon.png\"\n  },\n  \"action\": {\n      \"default_title\": \"Send Greeting\",\n      \"default_icon\": {\n          \"16\": \"icon.png\",\n          \"48\": \"icon.png\",\n          \"128\": \"icon.png\"\n      },\n      \"default_popup\": \"popup.html\"\n  },\n  \"permissions\": [\"activeTab\", \"scripting\"],\n  \"background\": {\n      \"service_worker\": \"background.js\"\n  }\n}\n\n```\n### 3. Add a `background.js` file.\nIn 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.\n\nWith 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.\n\nExample of `background.js` as a Service Worker in Manifest V3:\n\n```javascript\n// background.js\n\n// Listen for messages from other parts of the extension (e.g., popup or content scripts)\nchrome.runtime.onMessage.addListener((message, sender, sendResponse) =\u003e {\n    if (message.type === 'GREETING') {        \n        console.log('Received greeting:', message.greeting);\n        sendResponse({ response: 'Hello from the background script!' });\n        return true; // Indicates that the response is sent asynchronously\n    }\n});\n\n// Example of handling an event\nchrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) =\u003e {\n    if (changeInfo.status === 'complete' \u0026\u0026 tab.active) {\n        console.log('Tab updated:', tab);\n    }\n});\n\n```\n#### When to Use a Background Script/Service Worker\n- **Event handling**: Listening for events that occur in the browser (e.g., tab updates, browser actions).\n- **Persistent state**: Maintaining state or data that should persist between different parts of the extension.\n- **Communication**: Facilitating communication between different parts of the extension (e.g., content scripts, popup scripts).\n\n### 4. Create a new file named \"popup.js\" and add the following content:\n\n```javascript\ndocument.addEventListener('DOMContentLoaded', function () {\n    const greetingButton = document.getElementById('greetButton');\n\n    greetingButton.addEventListener('click', () =\u003e {\n        chrome.runtime.sendMessage({ type: 'GREETING', greeting: 'Hello, background!' }, (response) =\u003e {\n            if (chrome.runtime.lastError) {\n                console.error('Error:', chrome.runtime.lastError);\n                alert('Error communicating with background script');\n                return;\n            }\n            alert('Response from background: ' + response.response);\n        });\n    });\n});\n\n```\n\n### 5. Create a new file named `popup.html` and add the following content:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003ePopup\u003c/title\u003e\n    \u003cstyle\u003e\n        body {\n            width: 200px;\n            padding: 20px;\n            font-family: Arial, sans-serif;\n        }\n        button {\n            width: 100%;\n            padding: 10px;\n            background-color: #4CAF50;\n            color: white;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n        }\n        button:hover {\n            background-color: #45a049;\n        }\n    \u003c/style\u003e\n    \u003cscript src=\"popup.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cbutton id=\"greetButton\"\u003eSend Greeting\u003c/button\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n### 5. Create a simple icon file\n\nYou 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.\n\n### 6. Open Google Chrome and navigate to [chrome://extensions](chrome://extensions/).\n\n### 7. Enable _Developer mode_ by toggling the switch in the top right corner.\n\n### 8. Click on _Load unpacked_ and select the \"HelloWorldExtension\" folder.\n\n### 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.\n\nThat'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.\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliteobject%2Fsimple-google-chrome-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliteobject%2Fsimple-google-chrome-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliteobject%2Fsimple-google-chrome-extension/lists"}