emacs-moz-controller: 查看网页源代码

emacs-moz-controller 新添加了个功能: 简单配置一下 Firefox 之后, 在 Emacs 中按 C-c m u 来查看当前页面的源代码.

1 说明

  • moz-controller 相关的代码已经 push 到 Github (b94d496), 直接更新一下就可以了.
  • 想用 Emacs 来看代码的话, 参考 2.2.
  • 用 KeySnail 插件的话, Firefox 中默认的 View Page Source 的快捷键 C-u 会被覆盖, 可以绑定到 C-c C-u, 参考 issue#1462.3

2 Hack 记录

2.1 Emacs 控制 Firefox “View Page Source”

这个问题我在 KeySnail 的 Github repo 上开过 issue, 但是没人回答, 还是靠自己吧.

各种搜索引擎搜索了一阵子, 没得到什么有用的信息.

“A voice echoed: READ THE SOURCE, LUKE” ( 脑袋中突然蹦出来的, 见 维基Learn to Read the Source, Luke)

hg clone firefox 的源码 ( hg 是源码管理软件 Mercurial 的命令. 那天问了一下同事, Mercurial 是汞, 而汞的化学符号是 Hg), 竟然有2.5G.

在源码里 ag ( 一个搜索工具) “view page source”, 得到两个结果:

browser/metro/locales/en-US/chrome/browser.dtd:22:41:<!ENTITY appbarViewPageSource.label    "View page source">
browser/locales/en-US/chrome/browser/browser.dtd:419:40:<!ENTITY viewPageSourceCmd.label      "View Page Source">

然后 ag “viewPageSourceCmd.label”, 得到:

browser/base/content/browser-context.inc:366:25:                label="&viewPageSourceCmd.label;"

进去看一下:

<menuitem id="context-viewsource"
          label="&viewPageSourceCmd.label;"
          accesskey="&viewPageSourceCmd.accesskey;"
          oncommand="BrowserViewSourceOfDocument(gContextMenu.browser.contentDocument);"
          observes="isImage"/>

command 感觉应该是 BrowserViewSourceOfDocument(gContextMenu.browser.contentDocument)

但是在 MozRepl 里运行 BrowserViewSourceOfDocument(gContextMenu.browser.contentDocument), 返回的是:

!!! TypeError: gContextMenu is null

然后试错几回 ( MozRepl 没有补全, 比较难受), 最后发现下面这个可以用:

BrowserViewSourceOfDocument(gBrowser.contentDocument);

2.2 用 emacsclient 浏览代码

又想直接在 Emacs 中看代码, 这应该是个比较”普遍”的需求, 搜了一下, 跟着这篇文章 http://grok.lsu.edu/Article.aspx?articleId=12278 搞定了.

先进 about:config , 然后做两个修改:

  • view_source.editor.external => true
  • view_source.editor.path => /usr/local/bin/emacsclient (emacsclient 的路径)

2.3 Firefox 快捷键

因为 Firefox 里边装了 Keysnail, C-u 被覆盖了. 现在知道了 View Page Source 的”源代码”, 我应该可以用 Keysnail 给它另外定义一个快捷键.

打开 .keysnail , 加入:

key.setGlobalKey(['C-c', 'C-u'], function (ev) {
    BrowserViewSourceOfDocument(gContextMenu.browser.contentDocument);
}, 'View page source', false);

keysnail 重新加载配置文件, 按 C-c C-u, 没效果.

gContextMenu.browser 换成 gBrowser 试试:

key.setGlobalKey(['C-c', 'C-u'], function (ev) {
    BrowserViewSourceOfDocument(gBrowser.contentDocument);
}, 'View page source', false);

再重载, 还是没效果.

.keysnail 中上下翻看, 发现有些地方用的是 getBrowser() , 试试这个:

key.setGlobalKey(['C-c', 'C-u'], function (ev) {
    BrowserViewSourceOfDocument(getBrowser().contentDocument);
}, 'View page source', false);

重载, C-c C-u, 源代码在 Emacs 中打开, 可以了!

2.4 加入到 moz-controller

defun-moz-controller-command 这个 macro 定义一个新命令:

(defun-moz-controller-command moz-controller-view-page-source ()
  "View current page source code."
  "BrowserViewSourceOfDocument(gBrowser.contentDocument);"
  )

然后在 keymap 里加一个快捷键:

(define-key moz-controller-map (kbd "C-c m u") 'moz-controller-view-page-source)

全部的 diff:

diff --git a/moz-controller.el b/moz-controller.el
index 72d8121..09876f6 100644
--- a/moz-controller.el
+++ b/moz-controller.el
@@ -111,6 +111,11 @@ BODY: the desired JavaScript expression, as a string."
   "getBrowser().mTabContainer.advanceSelectedTab(1, true);"
   )

+(defun-moz-controller-command moz-controller-view-page-source ()
+  "View current page source code."
+  "BrowserViewSourceOfDocument(gBrowser.contentDocument);"
+  )
+
 (unless moz-controller-mode-map
   (setq moz-controller-mode-map
         (let ((moz-controller-map (make-sparse-keymap)))
@@ -123,6 +128,7 @@ BODY: the desired JavaScript expression, as a string."
           (define-key moz-controller-map (kbd "C-c m +") 'moz-controller-zoom-in)
           (define-key moz-controller-map (kbd "C-c m -") 'moz-controller-zoom-out)
           (define-key moz-controller-map (kbd "C-c m 0") 'moz-controller-zoom-reset)
+          (define-key moz-controller-map (kbd "C-c m u") 'moz-controller-view-page-source)
           moz-controller-map)))

 ;;;###autoload

在 README 里说明一下, push 到 Github 上.

善, happy hacking!

One thought on “emacs-moz-controller: 查看网页源代码