The steps to create a Chrome extension include: Prepare the basic file structure, implement core functionality, load testing, and publishing to the app store. 1. The basic files include manifest.json (configuration), popup.html (interface) and background.js (background script), which can add icons and style sheets; 2. Use content script to manipulate page content, use chrome.runtime.sendMessage() to realize message communication between popup and background, and use chrome.storage to store data; 3. Turn on developer mode in http://m.miracleart.cn/link/029088a9cfa844b43f1cb39d3377aac6 to test, check manifest format, permissions and cross-domain issues; 4. Register Google developer account, package extensions and submit to Chrome App store review requires description, screenshots, and privacy policies.
Creating a Chrome extension is not difficult, especially if you already have some basic knowledge of front-end development (such as HTML, CSS, and JavaScript). The entire process can be divided into several key steps: building the basic structure, writing functional code, and packaging and publishing. As long as you have ideas and are willing to try it out, you can make your own extension.
1. Prepare the basic file structure
Chrome extensions are essentially a collection of web page resources, and the simplest structure requires only three files:
-
manifest.json : Extended core configuration file
-
popup.html : The interface that pops up when clicking the extension icon
-
background.js : A script run in the background, used to handle long-term tasks or listen to events
You can also add icons ( icon.png ), stylesheets and content scripts, etc. as needed.
manifest.json example:
{
"manifest_version": 3,
"name": "My first extension",
"version": "1.0",
"description": "This is an extended example for learning.",
"icons": {
"48": "icon.png"
},
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"background": {
"service_worker": "background.js"
},
"permissions": []
}
2. Implement the extended core functions
The extended functions can be very diverse, such as modifying page content, intercepting requests, managing tab pages, etc. You can provide a user interaction interface through popup and implement actual logic through background scripts.
Common features:
- Page content operation : Use content script to inject it into the current page to perform the operation.
- Message delivery : popup and background can communicate through
chrome.runtime.sendMessage() . - Store data : Use
chrome.storage to save user settings or temporary data.
For example, if you want to display a paragraph of text on the current page after clicking a button in popup, you can write it like this:
popup.html:
<!DOCTYPE html>
<html>
<body style="width: 200px; padding: 10px;">
<h3>Hello, expand! </h3>
<button id="changeBtn">Change page text</button>
<script src="popup.js"></script>
</body>
</html>
popup.js:
document.getElementById('changeBtn').addEventListener('click', () => {
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
chrome.scripting.executeScript({
target: {tabId: tabs[0].id},
func: changeText
});
});
});
function changeText() {
document.body.innerText = 'This text has been expanded and modified! ';
}
3. Load the extension and test
After completing initial development, you need to load the extension into the Chrome browser for testing.
The steps are as follows:
- Open http://m.miracleart.cn/link/029088a9cfa844b43f1cb39d3377aac6
- Turn on the "Developer Mode" in the upper right corner
- Click "Load the unzipped extension" and select your project folder
- Check whether the extension is working properly. Debugging can view background or popup logs through the console.
If you find abnormal functions, you can check it step by step:
- Is manifest.json format correct
- Is the permissions required to apply for complete
- Is there any cross-domain restriction issue?
4. Publish to Chrome Web Store (optional)
If you want others to use your extension, you can choose to publish it to the official Chrome store.
Need to prepare:
Descriptions, screenshots, privacy policy links and other contents are also required when submitting. The review is usually completed within a few hours.
Basically that's it. The entry barrier for Chrome extension development is not high, but there are many things you can do. Start with a small function and slowly expand your thinking, you can also make practical and interesting tools.
The above is the detailed content of How to create a Chrome extension. For more information, please follow other related articles on the PHP Chinese website!