Giter Club home page Giter Club logo

chrome-extension-v3-antd-react-template's Introduction

chrome-extension-v3-antd-react-template

Chrome Extensions Version 3.0

谷歌浏览器插件第三版API开发 源码模板。

使用了最新的工程化开发流程：

技术选型：

React 18
React Router V6
AntDesign 5
TypeScript
Chrome Extensions V3

Warning： 因为用的是v3版本的api, 所以Chrome版本必须大于97，否则不兼容。

预览图

预览图

使用方法

  1. 克隆项目：
git clone https://github.com/jsoncode/chrome-extension-v3-antd-react-template.git
  1. 进入到项目根目录
cd chrome-extension-v3-antd-react-template
  1. 安装依赖
yarn install
  1. 启动开发模式（会在根目录生成一个/build目录）
yarn devAndWatchPublic

编译和安装插件

发布编译：会在根目录生成一个/build目录和一个build.zip

yarn buildAndPack

  1. 打开浏览器插件管理页面

  2. 开启开发模式

  3. 加载已解压的扩展插件

    第一步

  4. 选择项目根目录下，刚生成的build目录，点击确定，即可安装成功。

    第二步

  5. 就可以在地址栏右侧看到安装好的插件，点击这里，就可以进入预览效果了。

    第三步

预览图

其他资料

Ant Design 文档

Chrome插件开发英文文档V3

Chrome插件开发中文文档V3

chrome-extension-v3-antd-react-template's People

Contributors

jsoncode avatar vsou avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

zhangbetty powhd lhzhou180606

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.