Google Docs DocumentにCompact Viewを追加するユーザースクリプト -Google Chromeでgreasemonkey

Chrome javascript

今回もネットブックねたです。Google DocsのDocumentにはSpreadsheetにあるコンパクト表示がなくて不便だなあと思っていたので、Documentに同機能を追加するgreasemonkeyスクリプトを作ってみました。

また、画面の小さい場合FireFoxよりGoogle Chromeの方が見やすいのでChromeでgreasemonkeyスクリプトが動くかどうか調べてみたら、Google Chromeはバージョン4から、デフォルトでgreasemonkeyスクリプト(ユーザースクリプト)を拡張機能として登録できるようになってるんですね。
Firefox出し抜かれる。Greasemonkeyの作者が、Chromeにネイティブサポートを追加

本家の解説はこちらhttp://dev.chromium.org/developers/design-documents/user-scripts

Chromeでは、ユーザスクリプトは「<適当な名前>.user.js」という名前を付けます。
Chromeに登録するにはファイルのURLをアドレスバーに打ち込むか、登録されているものは拡張機能の一覧から選択できます。

以下はURLを直接打ち込んだ場合、下にツールバーが表示されるので[続行]をクリックします。

ダイアログで[インストール]をクリックすると、以下のように拡張機能としてユーザースクリプトがインストールされます。

greasemonkeyとChromeのユーザースクリプトは若干違いがあり、例えば、ユーザースクリプトを有効にするスクリプトを指定する@includeが、@matchになっていたりします。

今回作ったGoogle Docs Documentにコンパクトビューを追加するユーザースクリプはこんな感じです。

// ==UserScript==
// @name        Compact Google Docs
// @author      Hiroyuki Endoh
// @description Add compact mode to View menu.
// @match       http://docs.google.com/*
// ==/UserScript==

var menuBar = document.getElementById('guser').parentNode;
var titleBar = document.getElementById('docs-titlebar');

var open_close_menu = document.createElement('div');
open_close_menu.className = 'goog-menuitem goog-option';
open_close_menu.style.cursor = 'pointer';
var show_textNode = document.createTextNode('Normal view');
var hide_textNode = document.createTextNode('Compact view');
open_close_menu.appendChild(show_textNode);
open_close_menu.onclick = function(){
	if(titleBar.style.display != 'none'){
		menuBar.style.display = 'none';
		titleBar.style.display = 'none';
		open_close_menu.replaceChild(show_textNode,open_close_menu.firstChild);
	}else{
		menuBar.style.display = '';
		titleBar.style.display = '';
		open_close_menu.replaceChild(hide_textNode,open_close_menu.firstChild);
	}
}
var hideControl = document.getElementById('m-fullscreen');
hideControl.parentNode.insertBefore(open_close_menu,hideControl);
menuBar.style.display = 'none';
titleBar.style.display = 'none';

とりあえず、このコードをコピーしてWebサーバーにおけばすぐ使えます。
ちゃんと拡張機能に固めて公開できたら後ほど公開しようと思います。
ユーザースクリプトは、拡張機能としては扱えないんですね。
UserScripts.orgにアップして見たので、ご利用ください。
http://userscripts.org/scripts/source/78241.user.js

で、実際にの動きはこんな感じになります。

[Compace view]をクリックすると以下のように、メニューとタイトルバーが消えます。