这是一个创建于 964 天前的主题，其中的信息可能已经有所发展或是发生改变。
我发现现有的辅助油猴脚本开发的体验都一言难尽
比如需要手动配置 UserScript ，我为什么不能自动配置自动在浏览器打开呢，配置更改的时候也自动在浏览器打开
还有 @require 的配置，我为什么不能在插件里配置库的 cdn 链接，然后自动注入 UserScript 。而且这个是随打包的版本确定的，不是静态的
还有开发时热重载的体验，我想要类似开发 vue/react 项目的正常体验，大多数操作只需要局部刷新，不需要刷新宿主页面
因此为了实现这些良好的体验，我开发了一个 vite 插件
https://github.com/lisonge/vite-plugin-monkey/blob/main/README_zh.md
得益于 vite 明确区分了 server 和 build 的良好架构，
只要稍做配置，你甚至能将现有的 vue/react 项目直接转成 油猴脚本
当然有什么用的不舒适的地方可以直接指出
比如需要手动配置 UserScript ，我为什么不能自动配置自动在浏览器打开呢，配置更改的时候也自动在浏览器打开
还有 @require 的配置，我为什么不能在插件里配置库的 cdn 链接，然后自动注入 UserScript 。而且这个是随打包的版本确定的，不是静态的
还有开发时热重载的体验，我想要类似开发 vue/react 项目的正常体验，大多数操作只需要局部刷新，不需要刷新宿主页面
因此为了实现这些良好的体验，我开发了一个 vite 插件
https://github.com/lisonge/vite-plugin-monkey/blob/main/README_zh.md
得益于 vite 明确区分了 server 和 build 的良好架构，
只要稍做配置，你甚至能将现有的 vue/react 项目直接转成 油猴脚本
当然有什么用的不舒适的地方可以直接指出
52 条回复 • 2023-05-23 12:58:21 +08:00
 |
1
statumer 2022-05-09 11:43:54 +08:00 via iPhone
看着很棒啊
|
 |
3
golangLover 2022-05-09 12:34:55 +08:00
你这 TS definition 写的好仔细啊。赞一个
|
 |
4
yunser 2022-05-09 12:56:27 +08:00
刚好最近想要写一个 UserScript ，试用了一下。体验非常好，以后就用这个了。
|
 |
5
lyxeno 2022-05-09 13:33:41 +08:00
已 star,有空试用一下
|
 |
6
xujiahui 2022-05-09 13:53:40 +08:00
虽然没开发过油猴脚本，但是这个项目看着很不错，以后学习下
|
 |
7
Johnming 2022-05-10 11:09:05 +08:00
感觉很棒，可以试试
|
 |
8
lisongeee OP 更新了一下，优化了一些问题
|
|
9
lisongeee OP |
|
10
lisongeee OP 更新：现在支持使用 esm 使用 GM_api
|
|
11
lisongeee OP |
|
12
lisongeee OP |
|
13
lisongeee OP |
|
14
lisongeee OP # H1
## H2 ```jsx var foo = function (bar) { return bar++; }; console.log(foo(5)); const d = (<div>hello</div>) ``` https://i.songe.li/1x1.png#IyBIMQojIyBIMgpgYGBqc3gKdmFyIGZvbyA9IGZ1bmN0aW9uIChiYXIpIHsKcmV0dXJuIGJhcisrOwp9Owpjb25zb2xlLmxvZyhmb28oNSkpOwpjb25zdCBkID0gKDxkaXY+aGVsbG88L2Rpdj4pCmBgYA== |
|
15
lisongeee OP # H1
## H2 ```jsx var foo = function (bar) { return bar++; }; console.log(foo(5)); const d = (<div>hello</div>) ``` https://i.songe.li/1x1.png#IyBIMQojIyBIMgpgYGBqc3gKdmFyIGZvbyA9IGZ1bmN0aW9uIChiYXIpIHsKICAgIHJldHVybiBiYXIrKzsKfTsKY29uc29sZS5sb2coZm9vKDUpKTsKY29uc3QgZCA9ICg8ZGl2PmhlbGxvPC9kaXY+KQpgYGA= |
|
17
lisongeee OP # 标题 1
<script> console.log('hello world') </script> https://i.songe.li/1x1.png#IyDmoIfpopgxCjxzY3JpcHQ+CiAgY29uc29sZS5sb2coJ2hlbGxvIHdvcmxkJykKPC9zY3JpcHQ+ |
|
18
lisongeee OP 测试艾特别人
@lisongeee ```html <script> console.log('hello world') </script> ``` https://i.songe.li/1x1.png#5rWL6K+V6Im+54m55Yir5Lq6CkBsaXNvbmdlZWUgCgpgYGBodG1sCjxzY3JpcHQ+IGNvbnNvbGUubG9nKCdoZWxsbyB3b3JsZCcpIDwvc2NyaXB0PgpgYGA= |
|
19
lisongeee OP 测试 `tab` 缩进是否会被去掉
```ts (() => { const blankReg = /[\n\r]+/g; Array.from( document.querySelectorAll<HTMLElement>('div.reply_content') ).forEach((div) => { const mdText = div.innerText; const article = document.createElement('article'); article.classList.add('markdown-body'); article.innerHTML = 'markdownItInstance.render(mdText)'; if ( article.innerText.replace(blankReg, '') == mdText.replace(blankReg, '') ) { // 渲染后无变化不执行替换 return; } article.style.width = '100%'; div.innerHTML = ''; div.classList.add('v2ex-comment-markdown'); div.appendChild(article); }); })(); ``` |
|
20
lisongeee OP 测试微博图床链接是否会被 v2 转成图片
>  |
|
21
lisongeee OP ?k=v#hashaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa |
 |
22
wxf666 2022-08-19 19:08:06 +08:00
|
#base64 |
23
wxf666 2022-08-19 19:10:21 +08:00
|
|
24
lisongeee OP 测试把 base64 放在 basename 上，这是错误的图片链接
 |
|
25
lisongeee OP @wxf666
还有一个方法就是把 base64 放在 `wx3.sinaimg.cn/mw2000/${base64Str}.jpg` 这样 然后 v2 会自己把这个链接转图片，好处是 源信息传递出去了 坏处是在外部视角你发的这条评论 底部会显示一个裂开的图片，具体效果是这样  |
|
26
wxf666 2022-08-19 20:30:59 +08:00
|
|
27
lisongeee OP |
|
28
lisongeee OP |
|
29
lisongeee OP |
|
30
lisongeee OP |
|
31
lisongeee OP |
|
32
lisongeee OP |
|
33
lisongeee OP  |
|
34
lisongeee OP |
|
35
lisongeee OP  |
|
36
lisongeee OP  |
|
37
lisongeee OP ```ts
const mdCodeReg = /```.+?```/g; const replyForm = document.querySelector<HTMLFormElement>(`#reply-box form`)!; const textarea = replyForm.querySelector('textarea')!; replyForm.addEventListener('submit', () => { if (!mdCodeReg.test(textarea.value)) { return; } textarea.value += '\n' + `https://wx3.sinaimg.cn/base62/${base62.encode( tec.encode(textarea.value) )}.jpg`; }); ``` |
|
38
lisongeee OP |
|
39
lisongeee OP @wxf666
我尝试使用 ·https://wx3.sinaimg.cn/base62/ xxx .jpg` 去保存信息，但是一旦使用次数过多，v2 便会提醒不要在评论中包含外链，所以用图片保存信息不太行 |
|
40
lisongeee OP # 代码高亮及其自动格式化测试
## js ```js const markdownItInstance = markdownit({ highlight(str, lang) { lang = lang.toLowerCase(); if (lang2parser[lang]) { console.log({ str, lang }); try { str = prettier.format(str, { parser: lang2parser[lang], plugins, }); } catch {} } if (lang && hljs.getLanguage(lang)) { try { return hljs.highlight(str, { language: lang }).value; } catch (__) {} } return ''; }, }); ``` ## ts ```ts const plugins: Plugin[] = [ parserBabel, parserYaml, parserHtml, parserPostcss, parserJava, ]; const lang2parser: Record<string, BuiltInParserName | string> = { js: 'babel', jsx: 'babel', ts: 'babel-ts', tsx: 'babel-ts', json: 'json', json5: 'json5', yaml: 'yaml', html: 'html', vue: 'vue', scss: 'scss', css: 'css', less: 'less', java: 'java', }; ``` ## Java ```java public class HelloWorld { public static void main(String[] args) {System.out.println("Hello World!");;;;;} @Override public String toString() { return "Hello World"; } public int sum(int argument1,int argument2,int argument3,int argument4,int argument5 ) { return argument1+argument2+ argument3 +argument4 + argument5; } } ``` |
|
41
wxf666 2022-08-22 22:10:55 +08:00
@lisongeee 我觉得在行首 /多个空白字符间，加入零宽字符，是可取的。如：
> <零宽><空格><零宽><空格><零宽><空格><零宽><空格>return<空格>'ok' 插件去掉 <零宽> 后，就能让代码渲染器正常工作了 优点： 1. <空格>应该不会被 v 站 吃掉 2. 对于未装插件的人而言，视觉上没有影响 3. 额外占用的空间不多 缺点： 1. 未装插件的人，直接复制代码，会有<零宽>阻碍正常运行，但又肉眼不可见，可能找不到问题所在？ |
|
42
lisongeee OP @wxf666
v1.1.0 更新日志 由于 V2EX 会删除评论代码缩进, 因此插件会自动格式化代码, 支持的语言有 js/jsx/ts/tsx/json/json5/html/vue/scss/css/less/java |
 |
43
ltkun 2022-08-23 15:49:06 +08:00
### 帅气的 OP!
|
 |
44
duanluan 2022-09-23 17:00:37 +08:00
有没有交流群或者什么的
|
|
46
duanluan 2022-09-23 17:20:39 +08:00
@lisongeee issues 提使用上的疑问总感觉有点突兀，搞个交流群也适合快速反馈想法、问题，也方便新手更快入门，就坚持使用下来了。
|
|
47
lisongeee OP 谢谢，你说的交流群我感觉更适合 app 这种较大型项目，我这个插件并没有很多功能，我觉得文档和例子已经很详细
不过我刚刚把项目的 [discussions]( https://github.com/lisonge/vite-plugin-monkey/discussions) 打开了，不想用 issues 可以用这个 其实我仔细思考了一下，觉得你说的还是挺有道理的，但我是个咸鱼懒狗，对交流群这种兴趣不大，抱歉 |
|
48
duanluan 2022-09-23 17:38:45 +08:00
就是你回复过我的主题，你也看到了我那个仓库是一个 webpack 底下有多个 tampermonkey 项目，然后还有公共的 utils 目录，同时设置了别名，以供这三个项目调用，但是用 vite 的话我就不太清楚要怎么搞了，不太好迁移。
|
|
49
lisongeee OP @duanluan
> 就是你回复过我的主题，你也看到了我那个仓库是一个 webpack 底下有多个 tampermonkey 项目，然后还有公共的 utils 目录，同时设置了别名，以供这三个项目调用，但是用 vite 的话我就不太清楚要怎么搞了，不太好迁移。 我认为 `单个仓库里有多个油猴脚本的项目结构` 其实很适合 我这个插件使用的 pnpm [monorepo]( https://juejin.cn/post/6944877410827370504) ，这个和用 vite 还是 webpack 构建没有关系。 vue/vite/element/react 以及很多知名的框架都是这种 monorepo 结构，评论篇幅太小不好展开说 至于你说的 `不太好迁移` ，如果你乐意，我可以帮你迁移并发起 pulls |
|
51
lisongeee OP |
 |
52
marvincible 2023-05-23 12:58:21 +08:00
mark ，我也开发了好几个自用的油猴脚本了，每次都是从 0 开始，甚至 ui 都是纯 js 撸，太 low 了
|
Select Language