
ロースタート
すぐに予約したい:次のすべてはFF4でのみ機能します。 Mozillaの同僚は、
appversion>=4.0
という形式の推奨麺を書くよりも、ブラウザーの両方のバージョンに対して2つの拡張機能を作成する方が簡単になるようにAPIを再設計しました。
だから。
まず、将来の拡張のスケルトンを作成します。 彼らは私たちの面倒を見てくれたので、助けを求めてください。 単純な型に記入し、完成したスケルトンをダウンロードします。 この例では、セットアップダイアログなしで、ツールバーにボタンが1つしかない拡張機能を選択しました。 ジェネレーターが私たちのためにしたことは次のとおりです。

アイコンの描画方法がわからないので、メインの作業を行うサービスから借ります(上記のスクリーンショットでは、既に
skin
フォルダーに追加しています)。 それでは、この一連のファイルを使用して次に何をすべきでしょうか?
まず、
/chrome/locale/en-US/overlay.dtd
ファイルのボタンの表記とツールチップを
/chrome/locale/en-US/overlay.dtd
ます。
<!ENTITY typographToolbarButton.label "Typo!"> <!ENTITY typographToolbarButton.tooltip "Proceed typography of selected text against Lebedev's tool">
次に、デフォルトでロールバックされたアイコンをアイコンに置き換えます。
pushd chrome/skin && mv favicon.png toolbar-button.png && popd
今では、押すことに対する反応を書き換えるだけです。
いくつかのコード
タイポグラフを次のように使用すると便利です。入力フィールド(
textarea
)にフォーカスがあり、そこにテキストがハイライトされている場合、それを
textarea
します。 テキストが選択されていない場合、クリップボードの内容を入力します。 まあ、フォーカスが他のどこかにある場合-私たちは何もしません:-)。 したがって、クリップボードの操作方法を学ぶ必要があります(これは最も重要な部分です)。
さあ、始めましょう。 これらの編集はすべて
/chrome/content/overlay.js
ファイルに
/chrome/content/overlay.js
ます。
私はこの魔法をMDNの腸のどこかで掘りました:
var getClipboard = function (flavor) { if (!flavor || flavor == "") flavor = "text/unicode"; var trans = Components.classes["@mozilla.org/widget/transferable;1"] .createInstance(Components.interfaces.nsITransferable); var clip = Components.classes["@mozilla.org/widget/clipboard;1"] .getService(Components.interfaces.nsIClipboard); if (!clip || !trans) return ''; trans.addDataFlavor(flavor); clip.getData(trans, clip.kGlobalClipboard); var str = new Object(); var strLength = new Object(); try { trans.getTransferData(flavor, str, strLength); if (str) str = str.value.QueryInterface(Components.interfaces.nsISupportsString); } catch (e) { // it's OK, skipping str = null; } return str ? str.data.substring(0, strLength.value / 2) : ''; }
クリップボードの内容、または空の文字列を返します。 ここでコメントすることは何もないようです。
また、入力フォーカスをキャッチする必要があります(このコードは、その些細さのため、舞台裏に残しておきます)。
最後に、テキストを印刷サービスに送信する必要があります。
typo : function () { var focused = document.commandDispatcher.focusedElement; if (!focused || focused.tagName.toLowerCase() != 'textarea') { return; } if (focused.selectionStart != focused.selectionEnd ) { text = focused.value.substring(focused.selectionStart, focused.selectionEnd); } else { text = getClipboard(); } text = text.replace (/&/g, '&'); text = text.replace (/</g, '<'); text = text.replace (/>/g, '>'); var xmlRequest = '<?xml version="1.0" encoding="UTF-8"?>' + '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' + 'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ' + 'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">' + '<soap:Body>' + '<ProcessText xmlns="http://typograf.artlebedev.ru/webservices/">' + '<text>' + text + '</text>' + '<entityType>' + 3 + '</entityType>' + '<useBr>' + 0 + '</useBr>' + '<useP>' + 0 + '</useP>' + '</ProcessText>' + '</soap:Body>' + '</soap:Envelope>'; var req = new XMLHttpRequest(); req.open('POST', 'http://typograf.artlebedev.ru/webservices/typograf.asmx', true); req.onreadystatechange = function (aEvt) { if (req.readyState == 4) { if (req.status == 200) { var response = req.responseText; var re = /<ProcessTextResult>\s*((.|\n)*?)\s*<\/ProcessTextResult>/m; response = re.exec (response); response = RegExp.$1; response = response.replace (/>/g, '>'); response = response.replace (/</g, '<'); response = response.replace (/&/g, '&'); insertText(response, focused); } else { // smth went wrong — just skip it } } }; req.send(xmlRequest); }
実際、それがすべてです。 ボタンが押されたイベントハンドラから
typo
関数を呼び出すことは残ります。
onToolbarButtonCommand: function(e) { typograph.typo(); }
そして、これらすべてのジャンクをアーカイブにパックします。
#!/bin/bash if [ -e build ]; then rm -rf build; fi mkdir -p build cp -r install.rdf chrome.manifest chrome defaults build pushd build/chrome >/dev/null && zip -r typograph.jar content/* skin/* locale/* && popd >/dev/null || echo 'Unable to produce jar :-(\n' pushd build && zip -r typograph-4.0.xpi install.rdf chrome.manifest chrome/* defaults/* && popd >/dev/null || echo 'Unable to produce .xpi :-(\n' if [ -e dist ]; then rm -rf dist; fi mkdir -p dist cp build/typograph-4.0.xpi dist/
サンプルコード全体と結果として生じる拡張を人々に伝えることができます。 XPIは拡張ファイルです。zipで解凍すると、コード自体が内部にあります。