chrome插件:一个基于webpack + react的chrome 插件项目模板

在这里插入图片描述

项目结构

$ tree -L 1
.
├── README.md
├── node_modules             # npm依赖
├── package.json             # 详细依赖
├── pnpm-lock.yaml 
├── public                   # 里边包含dist,安装的时候安装这个目录即可
├── src                      # 源码文件
└── webpack.config.js        # webpack打包配置 

主要的文件

manifest.json

{"name": "GoodDev","manifest_version": 2,"version": "0.0.1","description": "前端开发元素快速定位的chrome插件","browser_action": {"default_icon": "icon.png","default_title": "GoodDev","default_popup": "dist/popup/popup.html"},"options_page": "dist/options/options.html","permissions": ["tabs", "activeTab", "storage"],"background": {"scripts": ["libs/webextension-polyfill.min.js", "dist/background/background.js"]},"content_scripts": [{"matches": ["http://*/*", "https://*/*"],"run_at": "document_idle","js": ["libs/jquery/jquery.min.js","libs/webextension-polyfill.min.js","dist/content/content.js"]}],"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

package.json

{"name": "good-dev","version": "1.0.0","description": "","main": "index.js","scripts": {"dev": "webpack watch --mode production","build": "webpack --mode production"},"keywords": [],"author": "","license": "ISC","dependencies": {"antd": "^5.8.6","react": "^18.2.0","react-dom": "^18.2.0"},"devDependencies": {"@babel/core": "^7.22.15","@babel/preset-react": "^7.22.15","babel-loader": "^9.1.3","copy-webpack-plugin": "^11.0.0","css-loader": "^6.8.1","style-loader": "^3.3.3","webextension-polyfill": "^0.10.0","webpack": "^5.88.2","webpack-cli": "^5.1.4","webpack-dev-server": "^4.15.1"}
}

完整项目结构

$ tree -I node_modules/
.
├── README.md
├── package.json
├── pnpm-lock.yaml
├── public
│   ├── icon.png
│   ├── index.html
│   ├── libs
│   │   ├── antd
│   │   │   ├── antd.min.js
│   │   │   └── reset.min.css
│   │   ├── dayjs
│   │   │   └── dayjs.min.js
│   │   ├── jquery
│   │   │   └── jquery.min.js
│   │   ├── react
│   │   │   ├── react-dom.production.min.js
│   │   │   └── react.production.min.js
│   │   └── webextension-polyfill.min.js
│   └── manifest.json
├── src
│   ├── background
│   │   └── background.js
│   ├── consts.js
│   ├── content
│   │   └── content.js
│   ├── options
│   │   ├── options.css
│   │   ├── options.html
│   │   └── options.js
│   ├── popup
│   │   ├── popup.css
│   │   ├── popup.html
│   │   └── popup.js
│   └── utils
│       ├── chrome-util.js
│       ├── copy-util.js
│       ├── dom-util.js
│       └── uuid-util.js
└── webpack.config.js

完整代码:https://github.com/mouday/good-dev/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/78242.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

postgre 12.11单实例安装文档

一 下载 访问https://www.postgresql.org/download/,点击左侧的‘source进行下载,一般选择bz2的安装包。 二 安装 这里安装12.11版本的postgre,数据目录路径为/data/server/pgdata,端口为5432. 2.1 安装依赖包 #安装 yum in…

linux后台开发面试题

网络 网络的字节序网络知识 tcp三次握手 各种细节 timewait状态tcp 与 udp 区别 概念 适用范围TCP四次挥手讲一下过程,最后一次ack如果客户端没收到怎么办,为什么挥手不能只有三次,为什么time_wait。对于socket编程,accept方法是…

C++信息学奥赛1171:大整数的因子

该程序是一个寻找能够整除输入数字的最小正整数的程序。下面是代码的逻辑解析&#xff1a; #include <iostream> #include <string> #include <cstring>using namespace std;int main() {string n; // 定义一个字符串变量nint fale 0; // 用于标记是否能…

Flask-SQLAlchemy 快速上手

原文地址: 在底部查看原文(阅读体验更好) 视频地址: BV1Hh4y1j7jM Flask-SQLAlchemy 是 flask 的一个拓展插件,专门添加对 SQLAlchemy 的支持(ORM,关系对象模型)。使用它可以在 flask 中使用对象直接与 SQLAlchemy 进行交互,大大简化了 SQLAlchemy 与 flask 结合使用的过…

HJ3 随机数

描述 明明生成了NN个1到500之间的随机整数。请你删去其中重复的数字&#xff0c;即相同的数字只保留一个&#xff0c;把其余相同的数去掉&#xff0c;然后再把这些数从小到大排序&#xff0c;按照排好的顺序输出。数据范围&#xff1a; 1≤n≤1000 &#xff0c;输入的数字大小…

企业形象片宣传片策划要从哪里展开

企业形象片宣传片是一种有效的营销工具&#xff0c;能够向潜在客户传达企业的核心价值观、品牌形象和产品服务。对于企业来说&#xff0c;一个成功的宣传片可以增加品牌知名度&#xff0c;提高销售额&#xff0c;并建立与客户的良好关系。然而&#xff0c;要想策划一部成功的企…

换行符转换

将\t\n、\n、多个\n\n\n...转换为\n\n。 import pandas as pd import re # 创建一个示例DataFrame data {msgText: [这是示例文本1&#xff0c;包含\t\n换行符,这是示例文本2&#xff0c;包含\n\n多个\n换行符,这是示例文本3&#xff0c;没有换行符]} df pd.DataFrame(data)…

题目:2833.距离原点最远的点

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;2833. 距离原点最远的点 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 遍历字符串&#xff0c;对 L&#xff0c;R 和 _ 字符计数。前两者计数结果之差的绝对值与 _ 字符的计数结果之和即为…

多语言开发(vant

参考&#xff1a;https://blog.csdn.net/qq_44649801/article/details/131878128?spm1001.2014.3001.5506 一、抛出字段对象A export default { } 二、引入汇总文件&#xff0c;&#xff08;主要的是 模块分割 汇总&#xff0c;对A 等的处理 export default { A&#xff0c;B,…

Redis RedLock算法和底层源码分析

Redlock红锁算法 官网地址&#xff1a;Distributed Locks with Redis | Redis 为什么要使用RedLock&#xff1f; 解释&#xff1a; 线程 1 首先获取锁成功&#xff0c;将键值对写入 redis 的 master 节点&#xff0c;在 redis 将该键值对同步到 slave 节点之前&#xff0c;mas…

使用 CSS 伪类的attr() 展示 tooltip

效果图: 使用场景: 使用React渲染后台返回的数据, 遍历以列表的形式展示, 可能简要字段内容需要鼠标放上去才显示的 可以借助DOM的自定义属性和CSS伪类的attr来实现 所有代码: <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-…

Navicat导入Excel数据顺序变了

项目场景&#xff1a; Navicat导入Excel数据 问题描述 从Excel表格中导入数据到数据库中。但是&#xff0c;在导入的过程中&#xff0c;我们常会发现数据顺序出现了问题&#xff0c;导致数据错位&#xff0c;给数据的处理带来了极大的麻烦。 原因分析&#xff1a; 这个问题的…

linux 在文件夹里搜索哪个文件包含一段内容

在 Linux 中&#xff0c;您可以使用 grep 命令来在文件夹里搜索包含特定内容的文件。grep 是一种强大的文本搜索工具&#xff0c;可以用于查找文件中包含特定字符串或正则表达式的行。 要在文件夹中搜索包含特定内容的文件&#xff0c;可以使用以下命令&#xff1a; grep -r …

vue2.X 中使用 echarts5.4.0实现项目进度甘特图

vue2.X 中使用 echarts5.4.0实现项目进度甘特图 效果图&#xff1a; 左侧都是名称&#xff0c;上面是时间&#xff0c;当中的内容是日志内容 组件&#xff1a; gantt.vue <template><div id"main" style"width: 100%; height: 100%"></…

【Java Web】利用Spring整合Redis,配置RedisTemplate

1. 在config中加入RedisConfig配置类 package com.nowcoder.community.config;import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.data.redis.connection.RedisConnectionFacto…

贪心算法 - 一点了解

贪心的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优。 刷题或者面试的时候&#xff0c;手动模拟一下感觉可以局部最优推出整体最优&#xff0c;而且想不到反例&#xff0c;那么就试一试贪心。 贪心算法一般分为如下四步&#xff1a; 将问题分解为若干个子问题找…

Ansys Zemax | 用于照明设计中的光源

本课程提供照明系统中光源的介绍&#xff0c;作为照明系统光源的信息中心。本课是照明学习路径的第二课。在这一课中&#xff0c;将描述照明系统中的各种光源类型以及如何这些使用光源。光源是照明系统的起点和支点&#xff0c;可以说是照明设计中最关键的部分。 简介&#xff…

华为云云耀云服务器L实例评测|基于云耀云服务器部署Samba服务

本实验将使用华为云云耀云服务器L实例&#xff0c;使用CentOS 7.9系统&#xff0c;搭建部署Samba服务器&#xff0c;并在本地Windows端进行访问。 文章目录 1、samba介绍2、环境准备3、安装samba软件包4、修改smb.conf配置文件5、添加访问samba的用户6、Windows下访问Samba服务…

使用 multiprocessing 多进程处理批量数据

示例代码 import multiprocessingdef process_data(data):# 这里是处理单个数据的过程return data * 2# 待处理的数据 data [1, 2, 3, 4, 5]def normal_func():# 普通处理方式result []for obj in data:result.append(process_data(obj)return resultdef parallel_func():# …

解释htop命令输出结果

htop是Linux系统下的一个进程监视器&#xff0c;可以显示当前系统中正在运行的进程的资源占用情况&#xff0c;包括CPU、内存、磁盘IO等。它具有以下特点&#xff1a; 友好的交互式界面&#xff1a;htop的界面比top更加友好、直观&#xff0c;支持鼠标操作&#xff0c;可以方便…