Clever Geek Handbook

スクリーンショットの例として、Firefoxの拡張機能開発、または私の最初の経験

Linux用phpでシステムスクリプトという記事を書いた後、スクリーンショットを書き、 「Yandexディスクに自動的にアップロードする機能を備えた、自分のスクリプトに関連付けられた拡張機能を作成しない理由」を考えました。書き始めます。



画像



ここに小さなボタンとYandexディスクのスクリーンショットがあります。これは、数時間で書かれたプロトタイプの拡張機能の結果です。 カットの下での作成のプロセスについて...



注意：これはアプリケーションの最初のバージョンです。将来、前の記事のスクリプトはスクリーンショットとして機能します...



私が開発した拡張機能のファイル構造は次のとおりです。



構造
-chrome.manifest

-install.rdf

-コンテンツ

---- browserOverlay.js

---- browserOverlay.xul

---- options.xul

-肌

---- browserOverlay.css



ここで、ファイルchrome.manifestおよびinstall.rdfに興味があります。 chrome.manifestには、プロジェクト構造の説明が含まれています。



chrome.manifest 
content xulphpsrc content/ skin xulphpsrc classic/1.0 skin/ overlay chrome://browser/content/browser.xul chrome://xulphpsrc/content/browserOverlay.xul


クロムマニフェストの最初の2行には、データタイプ、パッケージ名、パッケージファイルへのパスが含まれます。



3行目は、いわゆるオーバーレイ（表面層）を登録します。 このレイヤーは既存のレイヤーの上に配置され、ブラウザーにコントロールを追加します。



install.rdfファイルは、追加する拡張機能に関する情報を含むインストールマニフェストです。



install.rdf 
 <?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:id>phpsrc@phpsrc.ru</em:id> <em:name>xulphpsrc</em:name> <em:description>PHP screenshoter extensions!</em:description> <em:version>0.1</em:version> <em:optionsURL>chrome://xulphpsrc/content/options.xul</em:optionsURL> <em:creator>Naumov</em:creator> <em:type>2</em:type> <!-- Mozilla Firefox --> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>4.0</em:minVersion> <em:maxVersion>10.*</em:maxVersion> </Description> </em:targetApplication> </Description> </RDF>


ご覧の通り。 識別子、アプリケーション名、バージョン、作成者、アプリケーションタイプ、設定パネルURLなどが含まれます。 情報。



すべてが非常に明白であるため、このファイルに注目する価値はないと思います。 1つのオプションoptionsURLのみを解析できます。これは、拡張機能設定につながるURLです。設定は、options.xulファイルによって記述されます。



options.xul 
 <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow id="xulphpsrc-prefs" title="phpsrc api yandex settings" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="phpsrc_api_set" label="PHPsrc setting api yandex"> <preferences> <preference id="phpsrc_login" name="extensions.xulphpsrc.login" type="string"/> </preferences> <preferences> <preference id="phpsrc_pass" name="extensions.xulphpsrc.pass" type="string"/> </preferences> <hbox align="center"> <label control="phpsrc_login_label" value=" : "/> <textbox preference="phpsrc_login" id="phpsrc_login_label" maxlength="40"/> <label control="phpsrc_pass_label" value=" : "/> <textbox preference="phpsrc_pass" id="phpsrc_pass_label" maxlength="40"/> </hbox> </prefpane> </prefwindow>


このファイルでは、ログインとパスワードの合計2つのフィールドについて説明しました。 「extensions.xulphpsrc.login」および「extensions.xulphpsrc.pass」という名前に注意してください。これらには一種のツリー構造が含まれており、レコードの総量からそれらを取得する方が便利です。また、キーの一意性の特定の保証があります...



次に、browserOverlay.xulファイルを検討します。



browserOverlay.xul 
 <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="chrome://global/skin/" ?> <?xml-stylesheet type="text/css" href="chrome://xulphpsrc/skin/browserOverlay.css" ?> <overlay id="xulphpsrc-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="chrome://xulphpsrc/content/browserOverlay.js" /> <toolbar> <hbox> <toolbarbutton id="xulphpsrc-button" class="button-screen" label="" tooltiptext="" oncommand="XULPHPsrcChrome.BrowserOverlay.makeScreen(event);"/> </hbox> </toolbar> </overlay>


彼は何をしていますか？ 2つのbrowserOverlay.cssファイルbrowserOverlay.jsが含まれ、ツールバーとその上に「スクリーンショット」ボタンのみが作成されます。







すべてのアプリケーションロジックはbrowserOverlay.jsに埋め込まれています



browserOverlay.js 
 /** * XULPHPsrcChrome namespace. */ if ("undefined" == typeof(XULPHPsrcChrome)) { var XULPHPsrcChrome = {}; } /** * Controls the browser overlay. */ XULPHPsrcChrome.BrowserOverlay = { /** * craete screen shot by rect * @param aEvent */ makeScreen: function (aEvent) { var date = new Date(); var fileScreen = date.getTime().toString() + '_screen.png'; var args = ["-s", "/tmp/" + fileScreen]; this.systemRequest( '/usr/bin/scrot', args ); this.uploadToYandex(fileScreen); }, /** * analog php system * @param shell * @param args */ systemRequest: function (shell, args) { var file = Components.classes["@mozilla.org/file/local;1"] .createInstance(Components.interfaces.nsIFile); file.initWithPath(shell); var process = Components.classes["@mozilla.org/process/util;1"] .createInstance(Components.interfaces.nsIProcess); process.init(file); process.run(true, args, args.length); }, /** * upload screen to yandex * @param name */ uploadToYandex: function (name) { var xml = '<propertyupdate xmlns="DAV:"><set><prop><public_url xmlns="urn:yandex:disk:meta">true</public_url></prop></set></propertyupdate>'; var auth = this.getPreference().login + ':' + this.getPreference().pass; this.systemRequest('/usr/bin/curl', [ '-s', '--user', auth, '-T', '/tmp/' + name, '-X', 'PUT', 'https://webdav.yandex.ru' ]); this.systemRequest('/usr/bin/curl', [ '-s', '--user', auth, '-d', xml, '-X', 'PROPPATCH', 'https://webdav.yandex.ru/' + name ]); alert(" "); }, /** * get system configuration * @returns {{login: *, pass: *}} */ getPreference: function () { var prefs = Components.classes["@mozilla.org/preferences-service;1"] .getService(Components.interfaces.nsIPrefService); var myPrefs = prefs.getBranch("extensions.xulphpsrc."); return { login: myPrefs.getCharPref('login'), pass: myPrefs.getCharPref('pass') } } };


このファイルをもう少し詳しく分析しますが、これは簡単であり、2つのアクションのみを実行します。スクリーンショットを撮り、yandexディスクにアップロードします。 彼はcrotシステムユーティリティを呼び出してスクリーンショットを撮り、curlを使用して結果をダウンロードします。 「スクリーンショット」ボタンの「クリック」ハンドラーは、makeScreenメソッドを設定します。 



  /** * craete screen shot by rect * @param aEvent */ makeScreen: function (aEvent) { var date = new Date(); var fileScreen = date.getTime().toString() + '_screen.png'; var args = ["-s", "/tmp/" + fileScreen]; this.systemRequest( '/usr/bin/scrot', args ); this.uploadToYandex(fileScreen); },


これは、アプリケーションへのエントリポイントです。ここでは、将来のスクリーンショットの名前が作成され、Linuxプログラム、scrotという呼び出しが行われます。 マウスで画面の領域を選択して写真を撮った後、プログラムは次のuploadToYandexメソッドに進み、アップロードのためにファイル名を転送します。 



  /** * upload screen to yandex * @param name */ uploadToYandex: function (name) { var xml = '<propertyupdate xmlns="DAV:"><set><prop><public_url xmlns="urn:yandex:disk:meta">true</public_url></prop></set></propertyupdate>'; var auth = this.getPreference().login + ':' + this.getPreference().pass; this.systemRequest('/usr/bin/curl', [ '-s', '--user', auth, '-T', '/tmp/' + name, '-X', 'PUT', 'https://webdav.yandex.ru' ]); this.systemRequest('/usr/bin/curl', [ '-s', '--user', auth, '-d', xml, '-X', 'PROPPATCH', 'https://webdav.yandex.ru/' + name ]); alert(" "); },


このメソッドでは、ご覧のとおり、異常なものは何もありません。yandex.diskでcurlを使用して2つの要求を作成し、1つは作成されたファイルをロードし、もう1つはそれを発行します。 コメントをくれたlexoreにありがとう。 最後に、スクリーンショットが保存されたという通知を受け取ります。



さて、拡張機能をインストールする方法はありますか？ 開発のために、フォルダ内のアプリケーション名の下にファイルを作成するだけです。 



 ~/.mozilla/firefox/[id].[user]/extensions/


idは識別子、[user]はfirefoxユーザーです。たとえば、次のようになります。 



 ~/.mozilla/firefox/pta4nm6g.default/extensions/phpsrc@phpsrc.ru


そして、拡張ファイルがあるディレクトリへのパスを含む：〜/ extensions / phpsrc /（たとえば、私は持っています）。



最後に、firefoxの拡張機能の署名検証をオフにする必要があります。 これを行うには、アドレスconfigに移動して、xpinstall.signatures.requiredオプションを見つけ、falseに設定します。







Firefoxを再起動すると完了です...拡張機能を構成し、アドオンにアクセスして拡張機能を探し、構成ボタンをクリックし、yandexのユーザー名とパスワードを入力すると完了です。ボタンをクリックしてスクリーンショットを撮ってください...



結論：初めてFirefoxの拡張機能を書いたとき、記事を書くのに時間がかかりました。 これは将来このアプリケーションの最初のバージョンであり、この分野でphpを使用する方向で開発する計画があります。 すべてのスクリーンショットは、開発された拡張機能によって作成されます。 ご清聴ありがとうございました。



UPD： githubリポジトリ


More articles:


All Articles