以前のBexfトピック-拡張機能を作成するためのフレームワークで、私は続編を書くことを約束しました。 Bexfで書かれた拡張機能が公開され、これを記念してOperaの拡張機能のテーマを継続することにしました。
記事：拡張アーキテクチャー、BexfでHabra Meter（以降HM）を記述するプロセスの興味深い点、拡張機能の公開。
建築
拡張機能のトピックを勉強して、私は多くのソースを調べましたが、通常はそれぞれが異なるアーキテクチャを持っています。 もちろん、アーキテクチャはすべての人のビジネスです。以下に私のバージョンを示します（HMファイルアーキテクチャ）。
/ images/ // , font.png icon-18.png icon-64.png includes/ // . , vendors/ // Bexf.js jquery-1.4.4.min.js jquery.flot-0.6.min.js css/ // CSS style.css js/ // JS options.js popup.js Widget.js config.xml // . . index.html // . . options.html // . popup.html //
標準のファイルとフォルダー
include /フォルダーには、Operaの特定のページに接続し、拡張機能とやり取りできる.js / .cssファイルが含まれます。 各スクリプトはGreasemonkey形式のUserScriptです。
// ==UserScript==
// @name --
// @namespace --
// @description --
// @author --
// @include mediafire.com*
// @include http://*.mediafire.com/*
// ==/UserScript==
//
HMにはプラグインスクリプトがありません。
config.xml-拡張設定。 形式の説明については詳しく説明しません。すべてはすでにこちらで詳しく説明されていますwww.opera.com/docs/apis/extensions/configxmlresourceguide
index.html-拡張機能を初期化するインデックスファイル（名前は変更可能）
options.html-オプションが利用可能な場合、Operaは拡張機能設定を有効にします。 オプションは、ポップアップなどのコンテンツのhtmlページです。
スペル拡張
さらに、すべてのささいなことを説明するのではなく、主要な点のみを説明します。 コードは公開されているので、すべて自分で確認できます。
索引
このファイルにはビューがないため、本文に何かを埋め込みCSSを含めることは意味がありません。 私の場合、スクリプトにはBexf.jsとWidget.js（メインHMスクリプト）が含まれます。 ウィジェットは、initメソッドを使用して拡張機能を初期化します。
init: function () { var self = this; this.font = new global.Image(); this.font.src = "images/font.png"; this.icon = new global.Image(); this.icon.src = "images/icon-18.png"; this.icon.onload = function () { self.button = $.createButton(self._buttonInitOptions) .addToPanel(); self.requestUpdates(); self.initTimer(); }; }
このメソッドは、必要なリソース（スプライトフォント（font.png）とボタンテンプレート（icon-18.png））をさらに結び付けます。 ボタンを初期化し、すぐに更新し、更新タイマーを開始します。
このプロジェクトでは、カルマと評価を表示するためにボタンの画像を動的に変更する必要があり、さらに、画像をキャンバスに作成する必要がありました。 問題がありました：画像は最大18x18であるため、標準フォントは完全に判読できません（原則として、現在のフォントは実際には光りません）-3x5：0-9スプライトフォント、AF、およびfontDemensionsのすべての文字パラメーターを描いたコンマ/ドットを作成しました。 index.htmlにはビューはありませんが、ドキュメントはありますが、キャンバスを介してアイコンを動的に生成し、canvas.toDataURL（）を介してデータを取得できることが判明しました。 以下は、レンダリングを担当する2つのメソッドです。
_drawText: function (ctx, x, y, text) { text = text.split(''); for (var i = 0, c = text.length, g; i < c; i+= 1) { g = this.fontDemensions[text[i]]; ctx.drawImage(this.font, gx, gy, gw, gh, x, y, gw, gh); x += gw; } }, drawIcon: function (karma, rating) { karma += ''; rating += ''; var canvas = document.createElement('canvas'); // Create an empty canvas element canvas.setAttribute('width', '18px'); canvas.setAttribute('height', '18px'); // Copy the image contents to the canvas var ctx = canvas.getContext("2d"), offset; ctx.drawImage(this.icon, 0, 0); // Draw karma offset = 8 - (2 * karma.length) + (karma.indexOf('.') >= 0 ? 2 : 0) + (karma.indexOf(',') >= 0 ? 2 : 0); this._drawText(ctx, offset, 2, karma); // Draw rating offset = 8 - (2 * rating.length) + (rating.indexOf('.') >= 0 ? 2 : 0) + (rating.indexOf(',') >= 0 ? 2 : 0); this._drawText(ctx, offset, 11, rating); return canvas.toDataURL(); }
オプションウィンドウを閉じた後、ボタンを更新します（mbユーザーが変更されました）
$.disconnect(function () { Widget.requestUpdates.call(Widget); Widget.initTimer.call(Widget); });
Widget.jsにはこれ以上面白いものはありません。 残るのは、ハブユーザーページの解析（クロスドメインXHR）、その月の統計情報の収集、およびその他の実用的な方法です。
オプション
options.html-任意のコンテンツの通常のhtmlファイル。widget.preferences（Bexf.opt）-個人拡張データを管理することを前提としています。
ファイルにはデフォルトの構造があります（すべてのフィールドがマークされています）。 ただし、そのロジックは単純です。初期化中に値をフォームフィールドにロードし、「保存」ボタンが押されると、widget.preferencesにデータを返します。
ポップアップ
popup.html-任意のコンテンツ（ただしサイズが制限されている）の通常のhtmlファイルには任意の名前を付けることができ、ボタンはポップアップを制御します。 ポップアップの数に制限はありません。 ポップアップは、開かれるたびに初期化されます（すべてのコードを実行します）。 HMの場合、ポップアップには過去30日間のユーザーパラメーターを変更するためのスケジュールが含まれています。 グラフは、jQuery Flotを使用してキャンバスに描画されます（最初のバージョンでは、Google Chart APIが描画されましたが、GC APIにアクセスするのは私だけではありません）。 ポップアップスクリプトは、Bexf.opt（ 'stat'）に格納されている統計データ（widget.preferencesがDOMStorageオブジェクトであり、その値はオブジェクトにできないため）を解析し、jQuery Flotが理解できる形式で再作成します。 これ以上面白いものはありません。
テスト中
Opera開発者は私たちのことを考えていたので、拡張機能をテストするのは非常に簡単です。ブラウザにconfig.xmlを投げると、拡張機能はデバッグモードで接続されます。通常の拡張機能のようにOpera拡張機能マネージャーで luganskが書いたように、 「Dragonflyはまだそれらを使用できません（エラー）」が、opera.postErrorメソッドは機能し、その結果はエラーコンソール（Ctrl + Shift + O）で表示できます。Dragonflyは、拡張機能からopera.postErrorをまだ使用できません。
転記
1.拡張機能をテストする必要があります
2. Operaアカウントを作成します（すべてのサービス用です） -my.opera.com/community/signup
3.タイトル、短い説明、詳細な説明を思い付く
4.少なくとも1つのスクリーンショットを作成します
5. 64x64（必須）18x18（ボタンがある場合）アイコンを描く
6.拡張機能のバージョン、たとえば1.0を考え出します。
7.拡張子を.oexにパックします-名前を変更した.zip
すべての準備が整ったら、 addons.opera.com / developer / extensions / uploadダウンロードウィザードの指示に従って、ログインして拡張機能をダウンロードします。
拡張機能をダウンロードすると、モデレートされ（1〜2日）、その後ダウンロードできるようになります。 更新された拡張機能もモデレートされています（1〜2日）。 また、頻繁にバージョンを変更するモデレーターについては、拡張機能の優先順位が下がるという意見があります。
addons.opera.com/developer/guidelinesの公開の詳細
読む
一般的な拡張機能のトピックwww.opera.com/addons/extensions/develop
config.xmlの形式www.opera.com/docs/apis/extensions/configxmlresourceguide
Dev.opera.com/articles/view/opera-extensions-developer-workflow開発モード
拡張API www.opera.com/docs/apis/extensions
Bexf-HM habrahabr.ru/blogs/opera/111461を記述するために使用されるフレームワーク
dev.opera.com/articles/view/hands-on-building-an-opera-extension拡張機能を作成する別の例
Operaのドック翻訳とSonicGD habuserの例： メッセージング 、 Windows 、 UserJS 、 Operaの最初の拡張機能 、 ボタン、バッジ、ポップアップ
HMの公式バージョン（モデレート）は、オペラaddons.opera.com/addons/extensions/details/habra-meterのすべての拡張機能の中にあります。
この記事に記載されている最新バージョンのアーキテクチャは、 browser-extensions-framework.googlecode.com / files / habra-meter-1.1.1.oex （名前は.zipに変更されています）からダウンロードできます。
ご質問にお答えできることを嬉しく思います。 今、私は思う、Operaの拡張機能の問題はハブで完全に開示されています。
PS Habra Meterを置かないでください-カルマを常に観察すると精神疾患につながります。 これは、Bexfフレームワークの概念拡張の証明です