In the world of online shopping, price fluctuations can often be frustrating. The "JD Price Protection" plug-in automatically applies for JD Price Protection by regularly monitoring the price changes of purchased goods, and automatically applying for JD Price Protection at a reduced price, which has helped me save a lot of money.
As a front-end developer, this made me realize that handwriting a browser plugin is fun and rewarding.
So, I decided to try to do it myself and develop a simple QR code generator plugin, and you can also follow the steps below to implement the plugin you want.
1. Why handwrite browser plug-ins
There are many benefits of handwriting plugins, here are some detailed reasons:
1.1 Personalization
The handwriting plugin can be customized to meet individual needs. The plug-in features on the market may not exactly meet your needs, and developing the plug-in yourself can implement exactly what you want.
1.2. Solve specific problems
Sometimes, you may need a very specific feature that an existing plugin can't provide. Handwriting plugins can help you quickly solve these specific problems and increase productivity.
1.3 Enhanced Security
Security is an important consideration when using third-party plugins. Developing your own plugins ensures the security of your code and avoids potential privacy leaks or malicious behaviors.
1.4 Cost Savings
While many plugins are free, some premium features require payment. With the handwriting plugin, you can get these features for free while avoiding unnecessary expenses.
In conclusion, handwriting plug-ins not only bring technological growth, but also provide practical convenience and solutions in everyday life.
2. How to handwrite browser plug-ins
2.1 Understand the plugin directory structure
A Chrome extension typically contains the following files and directories:
my-qrcode-plugin/
│
├── manifest.json // 插件的配置文件，定义插件的基本信息、权限和功能。
├── background.js // 后台脚本，负责处理插件的逻辑，例如创建右键菜单。
├── popup.html // 插件的弹出页面，用户点击插件图标时显示。
├── popup.js // 插件的弹出页面，执行的脚本。
└── icons/ // 存放插件的图标，建议提供 16x16、48x48 和 128x128 像素的图标，不同大小的图标有不同的作用。
├── icon16.png
├── icon48.png
└── icon128.png
2.2 编写 manifest.json
manifest.json 是插件的核心配置文件：
{
"manifest_version": 3,
"name": "QR Code Generator",
"version": "1.0",
"permissions": ["contextMenus", "activeTab", "scripting"],
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
}
} 2.3 编写 background.js
background.js 负责插件后台的逻辑实现：
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: "generateQRCode",
title: "Generate QR Code",
contexts: ["page"]
});
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === "generateQRCode") {
const url = tab.url;
const apiUrl = `https://api.cl2wm.cn/api/qrcode/code?text=${url}&mhid=sELPDFnok80gPHovKdI`;
chrome.scripting.executeScript({
target: { tabId: tab.id },
func: showQRCode,
args: [apiUrl]
});
}
});
function showQRCode(apiUrl) {
const iframe = document.createElement('iframe');
iframe.style.position = 'fixed';
iframe.style.top = '50%';
iframe.style.left = '50%';
iframe.style.transform = 'translate(-50%, -50%)';
iframe.style.width = '500px';
iframe.style.height = '500px';
iframe.style.border = 'none';
iframe.style.zIndex = '1000'; // 确保在最上层
iframe.src = apiUrl;
document.body.appendChild(iframe);
setTimeout(() => {
iframe.remove();
}, 5000);
}
2.4 编写 popup.html
popup.html is the user interface of the plugin:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Generator</title>
<style>
body {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
#qrcode iframe {
width: 500px;
height: 500px;
border: none;
}
</style>
</head>
<body>
<div id="qrcode">
<iframe id="qrFrame" src=""></iframe>
</div>
<script src="popup.js"></script>
</body>
</html>
2.5 编写 popup.js
popup.js is the execution script of the user interface of the plugin:
document.addEventListener('DOMContentLoaded', function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
if (tabs.length === 0) {
console.error('No active tab found');
return;
}
const url = tabs[0].url;
const apiUrl = `https://api.cl2wm.cn/api/qrcode/code?text=${url}&mhid=sELPDFnok80gPHovKdI`;
const iframe = document.getElementById('qrFrame');
iframe.src = apiUrl;
});
});
2.6 Verify Plugin Functionality
To test Chrome plug-in functionality on your browser, you can do this by following these steps:
2.6.1. Loading Unpackaged Extensions
1. Open the Chrome browser.
2. Enter 'chrome://extensions/' to enter the extension management page.
3. Open "Developer Mode" in the top right corner.
4. Click on the "Load Unzipped Extension" button.
5.选择你的插件目录（my-qrcode-plugin）。
2.6.2. Verification Functions
1. In any web page, find the menu Generate QR Code by right-clicking the mouse, click the menu, the page generates a QR code, the mobile phone scans the QR code is the web page, and the QR code disappears after 5S to be regarded as verified.
Screenshot of the right-click menu:
QR code generation renderings:
2. Select the plug-in "Generate QR Code" in the upper right corner of the browser, and generate the corresponding QR code in the upper right corner of the web page.
Screenshot of the plug-in entrance in the upper right corner:
QR code renderings:
2.6.3. Real-time modification and refresh
1. After modifying the code in the developer tools, you can directly save and refresh the plugin or page to see the effect of the changes.
2. Update the plugin in the extension management page via the "Reload" button.
With these steps, you can efficiently test and debug the functionality of your Chrome extension in your browser.
三、 插件发布到 Chrome Web Store
The following steps are to publish Google Add-ons
1. 创建开发者账号: 前往 [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/developer/dashboard) 创建开发者账号。
2. Packaging Plugins: In the Chrome browser, go to the Extensions page, click "Package Extensions", and select the root directory of the plugin to package.
3. Upload the plugin: Log in to your developer account and upload the packaged '.zip' file.
4. Fill in the information: Fill in the details of the plugin, including name, description, screenshots, etc.
5. Pay the fee: Pay a one-time registration fee: $5.
6. Submit for review: Submit the plugin for review, and it can be published after the review is passed.
Since the blogger is shy in his pocket, he did not pay the fee, and all interested partners can try to publish their own plugins through the above steps, so that more people can see it.
IV. Summary
This article has triggered my personal thinking of exploring browser plug-ins through the convenience brought to me by the "JD Price Insurance" plug-in. By implementing a simple browser plug-in, it helps us to recognize, grasp and apply the basic principles of browser plug-ins. For more in-depth knowledge, we can learn through the official website.
Finally, the most important point:
Welcome to interact in the comment area, everyone will find bugs together.
Everyone is welcome to exchange and learn and grow together.