Scribd
Upload
10 views

Creating a Google Chrome extension

Uploaded by

sarintest123
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

Creating a Google Chrome extension

Uploaded by

sarintest123
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Creating a Google Chrome extension involves several steps, including setting

up the extension manifest, creating HTML, CSS, and JavaScript files, and
testing your extension. Here's a basic guide to help you get started:

Step 1: Set Up Your Extension Folder


Create a new folder for your extension and navigate into it. This folder will
contain all the necessary files for your extension.

Step 2: Create the Manifest File (manifest.json)


Create a file named manifest.json in your extension folder. This file provides
information about your extension, such as its name, version, permissions,
and more. Here's a simple example:

jsonCopy code
{ "manifest_version": 2, "name": "My Extension", "version": "1.0", "description": "A
simple Chrome extension", "permissions": ["activeTab"], "browser_action": {
"default_icon": { "16": "images/icon16.png", "48": "images/icon48.png", "128":
"images/icon128.png" }, "default_popup": "popup.html" }, "icons": { "16":
"images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" },
"action": { "default_icon": { "16": "images/icon16.png", "48": "images/icon48.png",
"128": "images/icon128.png" }, "default_popup": "popup.html", "default_title": "Click to
activate the extension" }, "background": { "scripts": ["background.js"], "persistent":
false }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ],
"icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" } }

Step 3: Create HTML, CSS, and JS Files


 Create popup.html for the extension popup:
htmlCopy code
<!DOCTYPE html> <html> <head> <title> My Extension </title> <link rel="stylesheet"
type="text/css" href="popup.css"> </head> <body> <h1> Hello, Extension! </h1>
<script src="popup.js"></script> </body> </html>
 Create popup.css for styling:
cssCopy code
body { width : 200px ; height : 200px ; font-family : Arial, sans-serif; text-align : center;
margin : 0 ; padding : 10px ; }
 Create popup.js for popup behavior:
jsCopy code
document . addEventListener ( 'DOMContentLoaded' , function () {
document . querySelector ( 'h1' ). textContent = 'Hello, Popup!' ; });

Step 4: Load Your Extension


1. Open Google Chrome and go to chrome://extensions/.
2. Enable "Developer mode" in the top right.
3. Click "Load unpacked" and select your extension folder.

Step 5: Test Your Extension


Click on the extension icon in the Chrome toolbar to see your popup. Ensure
that your extension behaves as expected.

This is a basic example, and you can extend your extension's functionality by
adding more features, permissions, and background scripts. For more
information and advanced features, refer to the official Chrome extension
documentation.

You might also like