人人都能手写的chrome插件,帮我省了1000多块钱

京东云开发者
• 阅读 289

在网购的世界里,价格波动常常让人感到无奈。《京东价保》插件通过定时监控已购商品价格变化,降价自动申请京东价格保护,帮我省下了不少钱。

作为一个前端开发工程师,这让我意识到,手写一个浏览器插件是一件很有趣且有意义的事。

于是,我决定尝试自己动手,开发一个简单的二维码生成器插件,各位小伙伴也可参考以下步骤实现自己想要的插件。

一、 为什么要手写浏览器插件

手写插件有许多好处,以下是一些详细的原因:

1.1 个性化定制

手写插件可以根据个人需求进行定制。市面上的插件功能可能不完全符合你的需求,而自己动手开发插件,可以精确地实现你想要的功能。

1.2. 解决特定问题

有时,你可能需要一个非常特定的功能,而现有的插件无法提供。手写插件可以帮助你快速解决这些特定问题,提高工作效率。

1.3 增强安全性

使用第三方插件时,安全性是一个重要的考虑因素。自己开发插件,可以确保代码的安全性,避免潜在的隐私泄露或恶意行为。

1.4 节省成本

虽然许多插件是免费的,但一些高级功能需要付费。通过手写插件,你可以免费获得这些功能,同时避免不必要的开支。

总之,手写插件不仅能带来技术上的成长,还能在日常生活中提供实际的便利和解决方案。

二、 如何手写浏览器插件

2.1 认识插件目录结构

一个 Chrome 插件通常包含以下文件和目录:

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 是插件的用户界面:

<!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 是插件的用户界面的执行脚本:

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 验证插件功能

在浏览器上测试 Chrome 插件功能,可以通过以下步骤进行:

2.6.1. 加载未打包的扩展

1.打开 Chrome 浏览器。

2.输入 chrome://extensions/ 进入扩展管理页面。

3.打开右上角的“开发者模式”。

4.点击“加载已解压的扩展程序”按钮。

5.选择你的插件目录(my-qrcode-plugin)。

2.6.2. 验证功能

  1. 在任意一个网页中, 通过鼠标右键找到菜单 Generate QR Code, 点击该菜单,页面生成一个二维码,手机扫描二维码即是该网页,5S后二维码消失视为验证通过。

右键菜单截图:



人人都能手写的chrome插件,帮我省了1000多块钱 

二维码生成效果图:

 人人都能手写的chrome插件,帮我省了1000多块钱

  1. 在浏览器右上角选择该插件《Generate QR Code》,在网页右上角生成对应的二维码,二维码不消失,视为验证通过。

右上角插件入口截图:

人人都能手写的chrome插件,帮我省了1000多块钱 

二维码效果图:

 人人都能手写的chrome插件,帮我省了1000多块钱 

2.6.3. 实时修改和刷新

1.在开发者工具中修改代码后,可以直接保存并刷新插件或页面以查看更改效果。

2.通过“重新加载”按钮在扩展管理页面中更新插件。

通过这些步骤,你可以在浏览器中高效地测试和调试 Chrome 插件的功能。

三、 插件发布到 Chrome Web Store

以下的发布谷歌插件的步骤

  1. 创建开发者账号: 前往 Chrome Web Store Developer Dashboard 创建开发者账号。

  2. 打包插件: 在 Chrome 浏览器中,进入扩展程序页面,点击“打包扩展程序”,选择插件的根目录进行打包。

  3. 上传插件: 登录开发者账号,上传打包后的 .zip 文件。

  4. 填写信息: 填写插件的详细信息,包括名称、描述、截图等。

  5. 支付费用: 支付一次性注册费用:5美元。

  6. 提交审核: 提交插件进行审核,审核通过后即可发布。

由于博主囊中羞涩, 就没有支付费用, 各位感兴趣的小伙伴可以通过以上步骤尝试去发布自己的插件,让更多的人看到。

四、 总结

本文通过《京东价保》插件给我带来的便利,引发了个人探索浏览器插件的思考。 通过实现一个简单的浏览器插件,帮助我们认识、掌握、应用浏览器插件的基本原理。更深入的知识咱们可以通过官网去学习。






最后,最重要的一点:

欢迎评论区互动, 大家一起来找bug。

欢迎大家交流学习,共同成长。

点赞
收藏
评论区
推荐文章
Karen110 Karen110
3年前
Python大佬手把手教你用开源【抢茅台脚本】实现抢茅台
大家好,我是明哥。12月我在朋友圈看到非常多的人开始在某东上抢茅台,抢到的话一瓶只要1499元,转手一卖就能净赚1000块钱,这简直就是白送钱的事嘛?就算不卖,自己囤着过个几年价格肯定又要上涨。像这种好事,我当然第一时间去体验了,抢了几天后,却抢了个寂寞。好在前两天看到有大佬在Github上开源了一个抢茅台的脚本(https://g
可莉 可莉
3年前
11款插件让你的Chrome成为全世界最好用的浏览器|Chrome插件推荐
文章来源:知乎收录于:风云社区(SCOEE)【提供mac软件下载】更多专题,可关注小编【磨人的小妖精】,查看我的文章,也可上【风云社区SCOEE】,查找和下载相关软件资源。(一)综合类:新买苹果电脑,mac系统中小白应该了解哪些东西?Mac新手必看教程—让你离熟练操作mac只差十分钟推荐几个Mac插件帮你提升工作效率Mac操作技
红橙Darren 红橙Darren
3年前
Android Studio插件开发之 - IOC注解生成器
1.概述上一期我们已经分享了。那么现在我们来动手写一个IOC注解生成器,有点类似于ButterKnife的插件一样自动给我们生成代码,在网上找了很多资料国内基本就在HelloWorld阶段,也有很多哥们向我反应插件的代码还是有点蒙B。代码方面能理解就理解,不理解也不强求,如果你能改一改别人已经写好的插件就最好了,实在不行我们干脆也别折腾了大不了不用,本文
徐小夕 徐小夕
3年前
30分钟开发一款抓取网站图片资源的浏览器插件
前言由于业务需求,笔者要为公司开发几款实用的浏览器插件,所以大致花了一天的时间,看完了谷歌浏览器插件开发文档,在这里特地总结一下经验,并通过一个实际案例来复盘插件开发的流程和注意事项.你将收获如何快速上手浏览器插件开发浏览器插件开发的核心概念浏览器插件的通信机制浏览器插件的数据存储浏览器插件的应用场景开发一款抓取网站图片资源
Stella981 Stella981
3年前
HackBar破解(谷歌、火狐)
1.谷歌打开Chrome插件列表,查看Hackbar的插件ID:djmoeo……,在文件搜索里搜这段字符,我这里用的是Everything。!(https://img2018.cnblogs.com/blog/1392192/201907/139219220190701125726213948998123.png)Everyth
Wesley13 Wesley13
3年前
MySQL多版本并发控制机制(MVCC)
MySQL多版本并发控制机制(MVCC)源码浅析前言作为一个数据库爱好者,自己动手写过简单的SQL解析器以及存储引擎,但感觉还是不够过瘾。<<事务处理概念与技术诚然讲的非常透彻,但只能提纲挈领,不能让你玩转某个真正的数据库。感谢cmake,能够让我在mac上用xcode去debugM
李异 李异
2年前
这4款插件让你的Chrome和edge浏览器更好用,提升你的使用体验
浏览器是大多数人每天都要打交道的东西,使用了这么久的浏览器,用过的插件也有不少。纵观我使用过的插件,给大家推荐4个我平时用得最多,我也猜想是大家都比较需要的功能的插件。一、Wetab新标签页平时我们一打开浏览器见到的就是新标签页,一个好看且方
京东云开发者 京东云开发者
2星期前
写一个Chrome浏览器插件
作者:京东工业焦丁一、什么是浏览器插件浏览器插件是依附于浏览器,用来拓展网页能力的程序。插件具有监听浏览器事件、获取和修改网页元素、拦截网络请求、添加快捷菜单等功能。使用浏览器插件可以实现很多有趣的功能。二、浏览器插件有哪些种类•以chromium为内核的
特立独行的猫 特立独行的猫
1星期前
HarmonyOS NEXT应用开发实战:十二、远场通信RCP简单好用的模块化封装
在进行HarmonyOS的应用开发中,我们常常需要进行网络通信。然而,原始的远场通信(RCP)使用方式较为繁琐,让人感到不够便捷。作为一位前期从事小程序开发的开发者,我深受小程序网络访问的简单性和便利性的吸引。因此,我决定在HarmonyOS中打造一个高效
京东云开发者 京东云开发者
13分钟前
自己写插件-实现时间戳自由
作者:京东科技张环受这篇文章启发,再加自己空闲时间学了一些前端的皮毛,以及实际工作需求,多种契机决定自己动手完成一个时间戳转换的谷歌插件。一、插件构思1、插件的使用方式:参考平常使用最高频的一个插件。它最提效的使用方式是在日志中选择一段字符串,然后右键选择