RT，这个算不算是😧，Vibe Coding？🤔
上午在coding页面的时候遇到一个挺烦人😡的事情：css 转內联样式。
在 Marketplace 找了一圈也没特别心仪的插件。
不是没有，而是没遇到心仪的。
主要问题是：
- 功能杂七杂八，不够纯粹
- 很久没人维护
- 名字取的不感冒😷，蹭热度
我就喜欢那种能将一个事情做到极致，又很纯粹的东西。
可惜，nothing。
突然想到，自己非常喜欢的工具🔧，PopClip。
它挺适合解决这个问题：选中一段css，然后转换成内联样式。
说干就干，立马派 ChatGPT 干活。
一开始，先询问“popclip 有类似的插件吗？”
ChatGPT 提示我，可以自己做一个PopClip扩展。
想了想，觉得可以，当作一个实验。
经过数轮验证和提示词修改，终于完成成品，效果还蛮理想。
Look Here👀👇
代码如下：
-
新建 CSS2JS.popclipext 文件夹。
-
创建 Config.yaml
name: CSS to JS Object
identifier: com.richie.css2js
description: Convert CSS to JavaScript style object
icon: code
actions:
- title: CSS→JS
icon: code
requirements: [text]
# PopClip 2025 官方 Shell Script Action 写法
shell script file: css2js.py
interpreter: python3
stdin: text
after: paste-result
- 再创建 css2js.py
#!/usr/bin/env python3
import sys
text = sys.stdin.read()
lines = [l.strip() for l in text.splitlines() if ':' in l]
entries = []
for line in lines:
line = line.rstrip(';')
if ':' not in line:
continue
prop, val = line.split(':', 1)
prop = prop.strip()
val = val.strip()
parts = prop.split('-')
camel = parts[0] + ''.join(p.capitalize() for p in parts[1:])
entries.append(f" {camel}: '{val}'")
print("{")
print(",\n".join(entries))
print("}")
- 赋予脚本可执行权限
chmod +x css2js.py
- 双击即可完成安装。
PopClip 插件支持2种扩展类型：
- Package(当前是这种方式)
- Snippet 脚本，选中一段代码，然后出现安装提示🔔。如下：
刚开始是使用第一种方式开发，看起来很简单，但始终报错运行不起来。
后面改成第二种方式，一次就跑起来了。
使用 ChatGPT 开发这个插件，也遇到一些比较头疼🤕的问题：
“ChatGPT 提供的代码始终无法运行。”
后来，我意识到问题所在：“它的训练数据可能过时了”。
因此，我改变了提示词，结果一目了然✌️。
.png){kind=icon}
Select Language