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

2022-05-09 11:05:25 +08:00
 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 项目直接转成 油猴脚本

当然有什么用的不舒适的地方可以直接指出
4609 次点击
所在节点    分享创造
52 条回复
lisongeee
2022-08-19 18:44:36 +08:00
?k=v#hashaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
wxf666
2022-08-19 19:08:06 +08:00
测试 # 后跟 base64

#base64

测试主机名后直接跟 base64

https://sinaimg.cn/base64

https://wx3.sinaimg.cn/base64
wxf666
2022-08-19 19:10:21 +08:00
这是直接吃掉微博图片了吗

测试主机名后跟两个 base64

https://sinaimg.cn/base64/base64

https://wx3.sinaimg.cn/base64/base64
lisongeee
2022-08-19 19:40:33 +08:00
测试把 base64 放在 basename 上,这是错误的图片链接

lisongeee
2022-08-19 19:44:39 +08:00
@wxf666

还有一个方法就是把 base64 放在 `wx3.sinaimg.cn/mw2000/${base64Str}.jpg` 这样

然后 v2 会自己把这个链接转图片,好处是 源信息传递出去了

坏处是在外部视角你发的这条评论 底部会显示一个裂开的图片,具体效果是这样

wxf666
2022-08-19 20:30:59 +08:00
@lisongeee 要不,用点零宽字符啥的?*(但零宽字符太少了)*

或者,引入压缩库?*(感觉短文本压缩效率应该也不理想)*

那摸清会吃掉哪些字符*(如行首空格,连续空格)*,提前用零宽字符代替?
lisongeee
2022-08-22 10:24:06 +08:00
lisongeee
2022-08-22 10:24:21 +08:00
lisongeee
2022-08-22 10:24:35 +08:00
lisongeee
2022-08-22 10:25:49 +08:00
lisongeee
2022-08-22 10:27:08 +08:00
lisongeee
2022-08-22 10:27:50 +08:00
lisongeee
2022-08-22 10:28:07 +08:00
lisongeee
2022-08-22 10:32:34 +08:00
lisongeee
2022-08-22 10:32:51 +08:00
lisongeee
2022-08-22 10:33:14 +08:00
lisongeee
2022-08-22 11:12:44 +08:00
```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`;
});
```
lisongeee
2022-08-22 11:26:38 +08:00
lisongeee
2022-08-22 11:33:27 +08:00
@wxf666

我尝试使用 ·https://wx3.sinaimg.cn/base62/ xxx .jpg` 去保存信息,但是一旦使用次数过多,v2 便会提醒不要在评论中包含外链,所以用图片保存信息不太行
lisongeee
2022-08-22 15:56:23 +08:00
# 代码高亮及其自动格式化测试

## 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;
}
}
```

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/851687

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX