diff --git a/docs/guide/chrome/Readme.md b/docs/guide/chrome/Readme.md new file mode 100644 index 0000000..97bcd49 --- /dev/null +++ b/docs/guide/chrome/Readme.md @@ -0,0 +1,10 @@ +# chrome 插件 + +## 插件组成 + +- background scripts 后台脚本 +- content scripts 内容脚本 +- options page 选项页面 +- UI elements UI 元素 +- 各种逻辑文件 +- manifest.json diff --git a/docs/guide/chrome/demo1/background.js b/docs/guide/chrome/demo1/background.js new file mode 100644 index 0000000..661a125 --- /dev/null +++ b/docs/guide/chrome/demo1/background.js @@ -0,0 +1,8 @@ +let color = '#3aa757'; + +chrome.runtime.onInstalled.addListener(() => { + chrome.storage.sync.set({ color }); + console.log("🚀 ~ file: background.js:5 ~ chrome.runtime.onInstalled.addListener ~ color:", color) + + console.log('Default background color set to %cgreen', `color: ${color}`); +}) \ No newline at end of file diff --git a/docs/guide/chrome/demo1/button.css b/docs/guide/chrome/demo1/button.css new file mode 100644 index 0000000..0ebf8f8 --- /dev/null +++ b/docs/guide/chrome/demo1/button.css @@ -0,0 +1,12 @@ +button{ + height:30px; + width:30px; + outline:none; + margin:10px; + border:none; + border-radius:2px; +} +buton.current{ + box-shadow:0 0 0 2px white, + 0 0 0 4px black; +} \ No newline at end of file diff --git a/docs/guide/chrome/demo1/icons/128.png b/docs/guide/chrome/demo1/icons/128.png new file mode 100644 index 0000000..c3f6975 Binary files /dev/null and b/docs/guide/chrome/demo1/icons/128.png differ diff --git a/docs/guide/chrome/demo1/icons/32.png b/docs/guide/chrome/demo1/icons/32.png new file mode 100644 index 0000000..24e728c Binary files /dev/null and b/docs/guide/chrome/demo1/icons/32.png differ diff --git a/docs/guide/chrome/demo1/icons/512.png b/docs/guide/chrome/demo1/icons/512.png new file mode 100644 index 0000000..ea0dd17 Binary files /dev/null and b/docs/guide/chrome/demo1/icons/512.png differ diff --git a/docs/guide/chrome/demo1/icons/72.png b/docs/guide/chrome/demo1/icons/72.png new file mode 100644 index 0000000..1cbac06 Binary files /dev/null and b/docs/guide/chrome/demo1/icons/72.png differ diff --git a/docs/guide/chrome/demo1/icons2/128.png b/docs/guide/chrome/demo1/icons2/128.png new file mode 100644 index 0000000..ab68e2b Binary files /dev/null and b/docs/guide/chrome/demo1/icons2/128.png differ diff --git a/docs/guide/chrome/demo1/icons2/16.png b/docs/guide/chrome/demo1/icons2/16.png new file mode 100644 index 0000000..4582c7a Binary files /dev/null and b/docs/guide/chrome/demo1/icons2/16.png differ diff --git a/docs/guide/chrome/demo1/icons2/19.png b/docs/guide/chrome/demo1/icons2/19.png new file mode 100644 index 0000000..f2f9884 Binary files /dev/null and b/docs/guide/chrome/demo1/icons2/19.png differ diff --git a/docs/guide/chrome/demo1/icons2/48.png b/docs/guide/chrome/demo1/icons2/48.png new file mode 100644 index 0000000..373cb3f Binary files /dev/null and b/docs/guide/chrome/demo1/icons2/48.png differ diff --git a/docs/guide/chrome/demo1/manifest.json b/docs/guide/chrome/demo1/manifest.json new file mode 100644 index 0000000..b4edbe2 --- /dev/null +++ b/docs/guide/chrome/demo1/manifest.json @@ -0,0 +1,25 @@ +{ + "name": "Demo1", + "description": "A simple demo cion", + "version": "1.0", + "manifest_version": 3, + "background": { + "service_worker": "background.js" + }, + "permissions": [ + "storage", + "activeTab", + "scripting" + ], + "action": { + "default_popup": "popup.html", + "default_icon": { + "32": "icons/32.png" + } + }, + "options_page": "options.html", + "icons": { + "32": "icons/32.png", + "512": "icons/512.png" + } +} \ No newline at end of file diff --git a/docs/guide/chrome/demo1/options.html b/docs/guide/chrome/demo1/options.html new file mode 100644 index 0000000..7c27133 --- /dev/null +++ b/docs/guide/chrome/demo1/options.html @@ -0,0 +1,15 @@ + + + + + + Document + + +
+
+

选择一个不同的背景颜色

+
+ + + \ No newline at end of file diff --git a/docs/guide/chrome/demo1/options.js b/docs/guide/chrome/demo1/options.js new file mode 100644 index 0000000..85aeaf2 --- /dev/null +++ b/docs/guide/chrome/demo1/options.js @@ -0,0 +1,14 @@ +let page = document.getElementById('buttonDiv') +let selectedClassName = 'current' +const presetButtonColors = ["#3aa757", "#e8453c", "#f9bb2d", "#4688f1"] + + +function handleButtonClick(event) { + let current = event.target.parentElement.querySelector(`.${selectedClassName}`) + if (current && current !== event.target) { + current.classList.remove(selectedClassName) + } + let color = event.target.dataset.color + event.target.classList.add(selectedClassName); + chrome.storage.sync.set({ color }) +} \ No newline at end of file diff --git a/docs/guide/chrome/demo1/popup.html b/docs/guide/chrome/demo1/popup.html new file mode 100644 index 0000000..314eeb3 --- /dev/null +++ b/docs/guide/chrome/demo1/popup.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/docs/guide/chrome/demo1/popup.js b/docs/guide/chrome/demo1/popup.js new file mode 100644 index 0000000..93723cf --- /dev/null +++ b/docs/guide/chrome/demo1/popup.js @@ -0,0 +1,32 @@ + +let changeColor = document.getElementById('changeColor') + +// chrome.storage.sync.get('color', ({ color }) => { +// changeColor.style.backgroundColor = color + +// }) + + + +// let changeColor = document.getElementById('changeColor') +changeColor.addEventListener('click', async () => { + let [tab] = await chrome.tabs.query({ active: true, currentWindow: true }) + + chrome.scripting.executeScript({ + target: { tabId: tab.id }, + function: setPageBackgroundColor + }) +}) + +function setPageBackgroundColor() { + chrome.storage.sync.get('color', ({ color }) => { + debugger + document.body.style.backgroundColor = color + }) +} + + +// chrome.storage.sync.get('color', ({ color }) => { +// changeColor.style.backgroundColor = color + +// }) \ No newline at end of file diff --git a/docs/guide/main.md b/docs/guide/main.md index 5fec519..e025241 100644 --- a/docs/guide/main.md +++ b/docs/guide/main.md @@ -10,9 +10,6 @@ 这是默认主题内置的 `` 组件 [[toc]] --> - - - ## TODO - [ ] 学习 sass @@ -37,16 +34,18 @@ - [] [头像生成1](https://kfs479.smartapps.cn/pages/blogdetail/blogdetail?id=3311880&_swebfr=1&_swebFromHost=baiduboxapp) [头像生成2](https://www.cnblogs.com/blueVictory/p/15457894.html) [github头像生成3](https://github.com/YMAndroid/photoDemo) -- [x] [chrome调试](https://blog.openreplay.com/ +- [x] [chrome调试](https://blog.openreplay.com/) - [] [](https://blog.openreplay.com/15-devtool-secrets-for-javascript-developers) -how-to-use-chrome-as-a-code-editor-and-debugger) +how-to-use-chrome-as-a-code-editor-and-debugger) + +- [] [gasp](https://blog.csdn.net/changbb/article/details/131675810) - [] [emmet](https://docs.emmet.io/actions/expand-abbreviation/) - [] [ssh 登陆android](https://www.jianshu.com/p/c65773acce48) - [] [android作为服务器](https://lbrito1.github.io/blog/2020/02/repurposing-android.html) - [] [temir VUE开发命令行工具](https://github.com/webfansplz/temir/blob/main/README.zh-CN.md) - [] [神经网络](https://tensorflow.google.cn/js/tutorials?hl=zh-cn) -- [][nestjs](https://docs.nestjs.cn/9/introduction) +- [] [nestjs](https://docs.nestjs.cn/9/introduction) - [] [knexjs](https://knexjs.org/) - [] [Koa RESTfual API 实战](https://www.bookstack.cn/read/koa-todo-api/%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83.md) - [] [jest](https://jestjs.io/zh-Hans/) @@ -282,16 +281,12 @@ var htmlSTring = http://[fe80::461c:a8ff:fe2a:accf%2]:3911/1ed680d5-6138-4608-a269-8840850a96f9 - - ## 项目模版 - [vue3 + setup + ts， vw + rem等来搭建的移动端项目](https://github.com/cll123456/template-varlet-v3-ts) - [vue3 企业端项目](https://vvbin.cn/doc-next/) - - ## 免费的软件 ### 桌面软件 @@ -299,13 +294,14 @@ http://[fe80::461c:a8ff:fe2a:accf%2]:3911/1ed680d5-6138-4608-a269-8840850a96f9 ### 加速工具 - [Steam](https://steampp.net/) - + #### 办公 + - [WPS](https://www.wps.cn/) office的替代品 - [snipaste](https://www.snipaste.com/)截图工具 -- #### 开发 + - [git](https://git-scm.com/) - [Visual Studio Code](https://code.visualstudio.com/) - 插件 @@ -321,28 +317,20 @@ http://[fe80::461c:a8ff:fe2a:accf%2]:3911/1ed680d5-6138-4608-a269-8840850a96f9 - Prettier - code Formatter - auto Import - indent-rainbow - - open in browser + - open in browser - code Runner - 生成的代码 codeium.com - [PostMan](https://www.postman.com/) - [oh my zsh](https://ohmyz.sh/) -- [asdf](https://asdf-vm.com/) +- [asdf](https://asdf-vm.com/) - [iTerm2](https://iterm2.com/) - [https://dber.tech/] 开源免费的设计数据库的web应用，可以导出sql - - - - ### 数据库 -#### 图形化界面 -- [DBeaver](https://dbeaver.io/) - - - - +#### 图形化界面 +- [DBeaver](https://dbeaver.io/) diff --git a/docs/guide/tools.md b/docs/guide/tools.md index f5f0582..1084a93 100644 --- a/docs/guide/tools.md +++ b/docs/guide/tools.md @@ -1,32 +1,30 @@ # 工具集🔧 - - [学习单词的好工具](https://qwerty.cooleryue.cn/gallery) - ## 图片相关 - - [图片美化](https://devtool.tech/image-share) - - [SVG 图片库](https://svgsilh.com/) - - [像素图片](https://dotown.maeda-design-room.net/) - - [Tinypng 压缩图片](https://tinypng.com/) - - [智图 压缩](https://zhitu.isux.us/) - - [up up to you 生产举牌小人图片](http://upuptoyou.com/) - - [生成文字云图片](https://wordart.com/create) - - [网页编辑图片工具](https://nhnent.github.io/tui.image-editor/latest/) - - [免费商用的插画](https://illlustrations.co/) - - [1000多个 svg icons](https://iconoir.com/) - - [自动扣图](https://bgsub.cn/webapp/) +- [图片美化](https://devtool.tech/image-share) +- [SVG 图片库](https://svgsilh.com/) +- [像素图片](https://dotown.maeda-design-room.net/) +- [Tinypng 压缩图片](https://tinypng.com/) +- [智图 压缩](https://zhitu.isux.us/) +- [up up to you 生产举牌小人图片](http://upuptoyou.com/) +- [生成文字云图片](https://wordart.com/create) +- [网页编辑图片工具](https://nhnent.github.io/tui.image-editor/latest/) +- [免费商用的插画](https://illlustrations.co/) +- [1000多个 svg icons](https://iconoir.com/) +- [自动扣图](https://bgsub.cn/webapp/) +- [文字描述生成图片](https://drawing-prompt.com/en#generate-image) ## js/css - - [显示浏览器可以收集的所有用户设备信息](https://www.deviceinfo.me/) - - [正则表达式可视化编辑器](https://github.com/Bowen7/regex-vis) - - [网站](https://regex-vis.com/) - - [BPMN, DMN and Forms.](https://bpmn.io/) - +- [显示浏览器可以收集的所有用户设备信息](https://www.deviceinfo.me/) +- [正则表达式可视化编辑器](https://github.com/Bowen7/regex-vis) +- [网站](https://regex-vis.com/) +- [BPMN, DMN and Forms.](https://bpmn.io/) - ## 博客 +## 博客 - [美团技术团队](https://tech.meituan.com/) - [朱嘉伟](http://buzhundong.com/) @@ -37,10 +35,12 @@ - [前端工程化三十八讲](https://q.shanyue.tech/engineering/) - [博客推荐](https://liujiacai.net/podcast/) - ## 软件 + - [打造一个高效的开发终端](https://zhuanlan.zhihu.com/p/438124776) - [asdf](http://asdf-vm.com/zh-hans/) 管理多个运行环境版本的简单命令行工具 - [bilibili视频下载工具](https://github.com/sansui-orz/bilibili2local) + +- [打字的方式记单次](https://dazi.kedaoi.cn/) diff --git a/docs/nestjs/index.md b/docs/nestjs/index.md new file mode 100644 index 0000000..80b4a42 --- /dev/null +++ b/docs/nestjs/index.md @@ -0,0 +1,36 @@ +# nestjs cli + +## 安装 + +```bash +npm install -g @nestjs/cli +``` + +## 创建项目 + +```bash +nest new myapp +``` + +### 项目 src 目录 + +```sh +. +├── app.controller.spec.ts +├── app.controller.ts +├── app.module.ts +├── app.service.ts +└── main.ts +``` + +1、`main.ts` 入口文件主文件，类似 vue 的 main.ts. 通过 NestFactory.create() 方法创建一个应用实例。app.listen(3000) 监听一个端口 +2、`app.controller.ts` 路由文件 +3、`app.service.ts` 服务文件，编写业务逻辑 +4、`app.module.ts` 模块文件 + +## nestjs cli 常用命令 + +```sh +# 查看 nestjs cli 所有命令 +nest --help +```