什么才是开发油猴脚本最好的体验

[lisongeee]

我发现现有的辅助油猴脚本开发的体验都一言难尽

比如需要手动配置 UserScript ，我为什么不能自动配置自动在浏览器打开呢，配置更改的时候也自动在浏览器打开

还有 @require 的配置，我为什么不能在插件里配置库的 cdn 链接，然后自动注入 UserScript 。而且这个是随打包的版本确定的，不是静态的

还有开发时热重载的体验，我想要类似开发 vue/react 项目的正常体验，大多数操作只需要局部刷新，不需要刷新宿主页面

因此为了实现这些良好的体验，我开发了一个 vite 插件

https://github.com/lisonge/vite-plugin-monkey/blob/main/README_zh.md

得益于 vite 明确区分了 server 和 build 的良好架构，

只要稍做配置，你甚至能将现有的 vue/react 项目直接转成 油猴脚本

当然有什么用的不舒适的地方可以直接指出

[statumer]

看着很棒啊

[lisongeee]

@statumer
哈哈谢谢，有空可以用一下，最近在 mo🐟，想改进一下这个插件，奈何用的人比较少

[golangLover]

你这 TS definition 写的好仔细啊。赞一个

[yunser]

刚好最近想要写一个 UserScript ，试用了一下。体验非常好，以后就用这个了。

[lyxeno]

已 star,有空试用一下

[xujiahui]

虽然没开发过油猴脚本，但是这个项目看着很不错，以后学习下

[Johnming]

感觉很棒，可以试试

[lisongeee]

更新了一下，优化了一些问题

[lisongeee]

更新了一下，又优化了一些问题，目前正在完善 GM_api 的类型注释和 让其支持 esm 引入

<https://github.com/lisonge/vite-plugin-monkey>

[lisongeee]

更新：现在支持使用 esm 使用 GM_api

[lisongeee]

测试
https://github.com/lisonge/src/raw/main/img/Snipaste_2022-08-18_11-43-07.png

[lisongeee]

测试
https://github.com/lisonge/src/raw/main/img/Snipaste_2022-08-18_11-43-07.png?k

[lisongeee]

测试

https://github.com/lisonge/src/raw/main/img/Snipaste_2022-08-18_11-43-07.png?k=v#hash

[lisongeee]

# 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==

[lisongeee]

# 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=

[lisongeee]

# vite-plugin-monkey

<p>
<a href="https://www.npmjs.com/package/vite-plugin-monkey"><img src="https://img.shields.io/npm/v/vite-plugin-monkey.svg" alt="npm package"></a>
<a href="https://github.com/lisonge/vite-plugin-monkey/releases/"><img src="https://img.shields.io/node/v/vite-plugin-monkey.svg" alt="node compatibility"></a>
</p>

[README](README.md) | [中文文档](README_zh.md)

vite plugin server and build \*.user.js for [Tampermonkey]( https://www.tampermonkey.net/) and [Violentmonkey]( https://violentmonkey.github.io/) and [Greasemonkey]( https://www.greasespot.net/)

## feature

- support Tampermonkey and Violentmonkey and Greasemonkey
- inject userscript comment to build bundle
- auto open \*.user.js in default browser when userscript change
- external cdn url inject to userscript @require
- use GM_api by ESM import with type hints
- when vite preview, auto open browser install dist.user.js
- full typescript support and vite feature


https://i.songe.li/1x1.png#IyB2aXRlLXBsdWdpbi1tb25rZXkKCjxwPgogIDxhIGhyZWY9Imh0dHBzOi8vd3d3Lm5wbWpzLmNvbS9wYWNrYWdlL3ZpdGUtcGx1Z2luLW1vbmtleSI+PGltZyBzcmM9Imh0dHBzOi8vaW1nLnNoaWVsZHMuaW8vbnBtL3Yvdml0ZS1wbHVnaW4tbW9ua2V5LnN2ZyIgYWx0PSJucG0gcGFja2FnZSI+PC9hPgogIDxhIGhyZWY9Imh0dHBzOi8vZ2l0aHViLmNvbS9saXNvbmdlL3ZpdGUtcGx1Z2luLW1vbmtleS9yZWxlYXNlcy8iPjxpbWcgc3JjPSJodHRwczovL2ltZy5zaGllbGRzLmlvL25vZGUvdi92aXRlLXBsdWdpbi1tb25rZXkuc3ZnIiBhbHQ9Im5vZGUgY29tcGF0aWJpbGl0eSI+PC9hPgo8L3A+CgpbUkVBRE1FXShSRUFETUUubWQpIHwgW+S4reaWh+aWh+aho10oUkVBRE1FX3poLm1kKQoKdml0ZSBwbHVnaW4gc2VydmVyIGFuZCBidWlsZCBcKi51c2VyLmpzIGZvciBbVGFtcGVybW9ua2V5XShodHRwczovL3d3dy50YW1wZXJtb25rZXkubmV0LykgYW5kIFtWaW9sZW50bW9ua2V5XShodHRwczovL3Zpb2xlbnRtb25rZXkuZ2l0aHViLmlvLykgYW5kIFtHcmVhc2Vtb25rZXldKGh0dHBzOi8vd3d3LmdyZWFzZXNwb3QubmV0LykKCiMjIGZlYXR1cmUKCi0gc3VwcG9ydCBUYW1wZXJtb25rZXkgYW5kIFZpb2xlbnRtb25rZXkgYW5kIEdyZWFzZW1vbmtleQotIGluamVjdCB1c2Vyc2NyaXB0IGNvbW1lbnQgdG8gYnVpbGQgYnVuZGxlCi0gYXV0byBvcGVuIFwqLnVzZXIuanMgaW4gZGVmYXVsdCBicm93c2VyIHdoZW4gdXNlcnNjcmlwdCBjaGFuZ2UKLSBleHRlcm5hbCBjZG4gdXJsIGluamVjdCB0byB1c2Vyc2NyaXB0IEByZXF1aXJlCi0gdXNlIEdNX2FwaSBieSBFU00gaW1wb3J0IHdpdGggdHlwZSBoaW50cwotIHdoZW4gdml0ZSBwcmV2aWV3LCBhdXRvIG9wZW4gYnJvd3NlciBpbnN0YWxsIGRpc3QudXNlci5qcwotIGZ1bGwgdHlwZXNjcmlwdCBzdXBwb3J0IGFuZCB2aXRlIGZlYXR1cmU=

[lisongeee]

# 标题 1
<script>
console.log('hello world')
</script>
https://i.songe.li/1x1.png#IyDmoIfpopgxCjxzY3JpcHQ+CiAgY29uc29sZS5sb2coJ2hlbGxvIHdvcmxkJykKPC9zY3JpcHQ+

[lisongeee]

测试艾特别人
@lisongeee

```html
<script> console.log('hello world') </script>
```
https://i.songe.li/1x1.png#5rWL6K+V6Im+54m55Yir5Lq6CkBsaXNvbmdlZWUgCgpgYGBodG1sCjxzY3JpcHQ+IGNvbnNvbGUubG9nKCdoZWxsbyB3b3JsZCcpIDwvc2NyaXB0PgpgYGA=

[lisongeee]

测试 `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);
});
})();

```

[lisongeee]

测试微博图床链接是否会被 v2 转成图片

>