ChatWorkでコードを連投されてカッとなってやりました。
平たくいうとこういうのです。
困ったことがあれば公式が対応する前に作ってしまえば良いんですよ。
作り方
解析
ChatWorkのwindowオブジェクトの中を見ているとTimeLineViewという見慣れないのがあります。
適当にブレイクポイントを貼ってタイムラインを更新するとrenderTimeLineというメソッドで止まってくれることがわかります。
renderTimeLine: function(a, b) {
a.html(b).find("._taskCompleteHide").each(function() {
var a = $(this);
a.find("._taskBody").height() >= 38 && a.append('<p class="_showMore showMore showMoreComplete">' + L.read_more + "</p>")
})
}
このrenderTimeLineの引数のaにはタイムラインの$element（Jqureyの要素オブジェクト）が、bには新しく更新するHTML文字列が入ります。
つまり、このメソッドにフックして引数のbを書き換えてやればタイムラインを好きに書き換えることができるという訳ですよ。
フック
TimeLineViewではprototypeを使ったクラスで使用しているので、prototypeの中のrenderTimeLineをスワップするとフックできます。
var renderTimeLine = TimeLineView.prototype.renderTimeLine;
TimeLineView.prototype.renderTimeLine = function (a, b) {
var b = $('<div></div>').html(b).find('div[id^="_messageId"]').each(function(i, e) {
// タイムラインを書き換える処理
});
renderTimeLine.apply(TimeLineView, [a, b]);
}
※Chromeのみで動作確認済み
これであとはタイムラインの書き換え処理を書くだけです。
タイムラインを書き換える
{code}{/code}という独自拡張したタグでシンタックスハイライトする例です。
事前にhilight.jsを読み込んでください。
// タイムライン中の{code}{/code}を書き換える（適当）
$el = $(e).find('.chatTimeLineMessageArea pre');
if ($el.length) {
$el.html($el.html().replace('{code}', '<code>').replace('{/code}', '</code>')).find('code').each(function(i, e) {hljs.highlightBlock(e)});
}
簡単ですね！！
例えばマークダウンを表示するとか、寿司を表示するのも同じようなやり方で作ることができます。
シンタックスハイライト Extension
実際に作ったChrome用のExtensionです。
適当に解凍して参考にしてください。
耐久テストとかしていないので、1日中使ったりすると重くなるかもしれません。気をつけてください。
同じような仕組みでメッセージを受け取ったらXHRでメッセージを飛ばすWebHookモドキも作れそうですね。
気が向いたらChatWorkから伺かにメッセージを飛ばしたいです。