将编辑面板放在页面旁边——Ctrl+Alt+I、O、P
有时候你希望 JustZix 的编辑面板出现在页面旁边,而不是取代页面。你正在为 Wikipedia 编写规则,但同时想边输入边看 CSS 选择器命中真实元素。v3.2.4 起新增的三个快捷键——Ctrl+Alt+I、Ctrl+Alt+O、Ctrl+Alt+P——会在第二个浏览器窗口中打开面板,自动选中当前页面上首条生效的规则,并直接落在对应的选项卡上。
三个快捷键,三个选项卡
Ctrl+Alt+I——编辑面板的 CSS 选项卡。Ctrl+Alt+O——编辑面板的 JS 选项卡。Ctrl+Alt+P——编辑面板的 Actions 选项卡。
快捷键会在一个独立的浏览器窗口中打开面板(类型 normal,1200×850——在中等及更大的显示器上很舒适),而不是新建一个标签页。你可以把它放在页面旁边,也可以拖到第二台显示器上。
自动选中生效的规则
打开之后,面板会扫描你的规则树,找到当前页面上首条处于生效状态的规则(目录 / 分组 / 规则集的级联开关都已打开,URL 规则也匹配),并自动选中它。规则树会展开到该规则,所选的选项卡也会被激活——你可以立刻开始输入。
如果没有任何规则匹配,面板就会以空白状态打开,准备让你创建新规则。这是有意为之:你在 facebook.com 上,还没有任何规则——按 Ctrl+Alt+I,面板就以打开了 CSS 选项卡的空白状态出现,两次点击你就能创建第一条规则。
面板内按下同样的快捷键 = 切换选项卡
当面板窗口已经打开,并且你正处于规则层级(而不是仪表盘,也不是某个目录 / 分组的编辑器),按下同样的这三个组合键就会切换当前规则的选项卡:
Ctrl+Alt+I→ CSS 选项卡Ctrl+Alt+O→ JS 选项卡Ctrl+Alt+P→ Actions 选项卡
这种情况下快捷键不会再开第二个窗口——系统会聚焦到已有的窗口。如果你恰好在仪表盘,或正在编辑目录 / 分组,在面板里按下快捷键不会发生任何事(no-op),因为这里没有可切换的「当前选项卡」。
兼容所有键盘布局
快捷键的第一个版本是通过 e.key 匹配按键的。在波兰语 Programmers 布局下,这就成了问题:AltGr+O 会输出 ó,所以用右 Alt(= AltGr)按下的 Ctrl+Alt+O 会得到 e.key === 'ó',快捷键于是不会触发。I 和 P 在波兰语布局下没有 AltGr 变音字符,所以照常工作。
在 v3.2.5 中,我们把匹配改为基于 e.code(KeyI / KeyO / KeyP)——也就是物理按键,与布局和 AltGr 无关。这与我们在 AI 助手里使用的方式一致(e.code === 'Backslash')。无论是波兰语、德语、法语、俄语还是中文布局,快捷键的表现完全一致。
用例 1——在预览旁为 facebook.com 编写规则
你打开 facebook.com,按 Ctrl+Alt+I——第二个窗口里出现了面板,CSS 选项卡已经打开。你写好选择器、保存,看一眼 facebook.com——该元素消失了。你再看 facebook.com,显然还少了点什么,把焦点切到面板继续编辑。如果有两台显示器,这一切完全不需要 Alt-Tab——只有一台显示器时,把窗口拖到一半屏幕,以分屏方式工作即可。
用例 2——快速修改既有规则的 JS
你在 YouTube 上,站点更新后你的「YouTube:隐藏推荐」规则失效了。你按 Ctrl+Alt+O——第二个窗口直接打开,定位到你那条 YouTube 规则的 JS 选项卡(因为这是该标签页上唯一生效的规则)。你修好、保存,刷新第一个标签页——一切照常工作。完全不用在规则树里翻找。
用例 3——把第二台显示器当成常驻面板
如果你使用两台显示器:左边是浏览器,显示你正在访问的页面;右边专门留给 JustZix 面板。在左侧按 Ctrl+Alt+I/O/P,会在右侧打开或聚焦面板,并跳到对应的选项卡。这是一种类似 IDE 的工作流——开发面板常驻打开,但面对的是一个真实的、活生生的页面。
架构
背后的实现是这样的:content script 检测到快捷键后,把目标(快捷键类型 + 当前标签页 URL)发送给 background。background 检查面板窗口是否已经存在:
- 不存在 → 创建一个新窗口(
chrome.windows.create,类型normal,1200×850),并把待跳转信息写入chrome.storage.local.jzPendingEditNav。面板启动时会从 storage 读取目标,选好对应的规则和选项卡。 - 已存在 → 把窗口聚焦到前台(
chrome.windows.update focused:true),并通过 storage 传递目标。面板通过监听storage.onChanged做出响应。
这种方案是完全异步的,而且无需改动 options.js——它只是在启动时和 storage 变化时消费 _ruleEditorTab 与 jzPendingEditNav 而已。
另请参阅
- 页面内窗口——位于页面之内的开发者窗口
- JustZix 键盘快捷键——完整速查表——所有内置快捷键
- JS 规则现在能在 Facebook、X 和 GitHub 上工作——同样是「在页面旁边」的工作流
安装 JustZix——用一个快捷键,就把编辑器留在页面旁边。
为这篇文章评分
暂无评分 — 成为第一个。