Code Monkey home page Code Monkey logo

chatgpt-web's Introduction

网页定制油猴插件

一、简介

这是一个定制网页的油猴脚本插件相关代码,最终效果如下:

二、使用方式

油猴插件下载地址: https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

本文油猴脚本: https://greasyfork.org/zh-CN/scripts/467425- 网页定制-chatgpt版(即对应drawIframe.js)

内容

ChatGPT网页: https://chatgpt-echo.zeabur.app/

通过安装油猴插件,再添加脚本代码,即可在每个网页中内嵌一个ChatGPT助手(需要输入自己的API_KEY,可查看ChatGPT注册攻略: https://km.woa.com/articles/show/571403?kmref=search&from_page=1&no=2 ,也可关注微信公众号秋博士,付费获取访问密码或者代注册ChatGPT账号)。

三、目录结构

1、drawIframe.js

编写了插件的交互逻辑及样式:网页右下角的按钮,点击可以弹出内嵌的ChatGPT网站iframe,内嵌的iframe项目地址为:https://github.com/zyqq/ChatGPT-Next-Web

2、autoUpdate.js

放在油猴插件中的代码,会自动更新drawIframe.js中的代码。用于公共仓库。

2、autoUpdatePrivate.js

放在油猴插件中的代码,会自动更新drawIframe.js中的代码,用于私有仓库,去仓库中生成accessToken,更新到代码中。

token

最后将其复制到油猴插件中即可。

四、功能点

  • ✅ ChatGPT交互

    • 自定义prompt与角色
    • 支持Midjourney出图
  • ✅ 支持搜索同时也询问ChatGPT

  • ✅ 网页内容阅读总结

  • ✅ 选中文本

    • 摘要
    • 语法
    • 解释
    • 解释代码
    • 重写
    • 翻译
  • ✅ 油猴脚本助手(已生成prompt模板,待完善30%)

    • 案例
    • 用户需求精确引导
  • ✅ 兼容

    • 禁止iframe的网站兼容处理
    • 提供直接跳转网页按钮
  • ✅ 插件市场

    • 用户生成的油猴脚本,点击运行后自动保存插件配置,自动打开
    • 推荐其他插件

五、本地测试

  • 1、本地启动:ChatGPT-Tampermonkey

  • 2、新增 drawIframe.js 油猴脚本,将domain改为:http://localhost:3000/#/

  • 3、修改 drawIframe.js 则编辑油猴脚本,手动复制粘贴;修改ChatGPT聊天室则会自动更新

六、开发协作

  • 从 main 新建分支,命名规范为:[name]/[feature|fix]/[修改点]
  • 提 mr 到 main

油猴脚本代码会自动更新拉取 drawIframe.js 代码

七、联系方式

微信公众号关注:秋博士,可获取访问密码

QQ群:151805744

捐赠(15米即可联系qq群主代注册ChatGPT,5米获取访问密码):

chatgpt-web's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

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.