Code Monkey home page Code Monkey logo

zhubai-toolbox's Introduction

竹白工具箱 🧰

竹白(zhubai.love)创作者与阅读者的浏览器扩展、油猴脚本,包括详情页显示文章目录,详情页显示网站目录大纲(TOC),订阅者信息导出,Markdown 编辑器等功能。更多功能欢迎交流。

欢迎订阅我的《好工具周刊》

竹白没有官方的交流社区,大家有什么问题,欢迎来这里交流。

功能

  • 详情页左侧栏显示文章目录 ✅
  • 详情页右侧栏显示网站目录大纲(TOC) ✅
  • 订阅者信息导出 ✅
  • Markdown 编辑器 (Comming soon)

截图

  • 详情页左侧栏显示文章目录,详情页右侧栏显示网站目录大纲(TOC)、工具栏

zhubai-toolbox-screenshots-03.png

  • 订阅者信息导出

zhubai-toolbox-screenshots-01.png


zhubai-toolbox-screenshots-02.png

保存订阅者数据到文件里,定期(每周)备份。推荐使用 git 管理这些文件,可以看到数据变更记录。

如果文件上传到 GitHub/GitLab 等平台,因为涉及隐私数据,一定设置 repository 为 private。

Installation

Development

This extension/userscript is built from Browser Extension Starter and Userscript Starter

Features

  • One codebase for Chrome extesions, Firefox addons, Userscripts, Bookmarklets and simple JavaScript modules
  • Live-reload and React HMR
  • Plasmo - The Browser Extension Framework
  • esbuild - Bundler
  • React
  • TypeScript
  • Prettier - Code Formatter
  • XO - JavaScript/TypeScript linter

Showcases

How To Make A New Extension

  1. Fork this starter repo, and rename repo to your extension name

  2. Clone your repo

  3. Install dependencies

pnpm install
# or
npm install

Getting Started

First, run the development server:

pnpm dev
# or
npm run dev

Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: build/chrome-mv3-dev.

You can start editing the popup by modifying popup.tsx. It should auto-update as you make changes. To add an options page, simply add a options.tsx file to the root of the project, with a react component default exported. Likewise to add a content page, add a content.ts file to the root of the project, importing some module and do some logic, then reload the extension on your browser.

For further guidance, visit our Documentation

Making production build

Run the following:

pnpm build
# or
npm run build

This should create a production bundle for your extension, ready to be zipped and published to the stores.

Submit to the webstores

The easiest way to deploy your Plasmo extension is to use the built-in bpp GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow this setup instruction and you should be on your way for automated submission!

License

Copyright (c) 2023 Pipecraft. Licensed under the MIT License.

>_

Pipecraft UTags DTO BestXTools

zhubai-toolbox's People

Contributors

pipecraftnet avatar

Stargazers

不游 avatar Ivone avatar  avatar Benjamin Franklin avatar Jerry.Z avatar Fei Zhao avatar 三秋十李Sergio avatar JasperMalik avatar  avatar  avatar  avatar Ding Yi avatar  avatar

Watchers

 avatar

Forkers

sanhuhong

zhubai-toolbox's Issues

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.