Geekly Articles each Day

初めてのOpera拡張機能

エントリー

この記事では、最初のOperaエクステンションを作成する基本的な手順を説明します。 パネル上にボタンを作成します。クリックすると、ポップアップウィンドウが開き、「Hello World！」というメッセージが表示されます。 Operaの拡張機能は、一般的なオープンWeb標準を使用して記述されているため、Opera 11とテキストエディタまたはIDEのみで開始できます。

拡張機能の構成。

最初に、拡張機能を説明するメタデータを含む拡張機能構成ファイルを作成する必要があります。 これには、拡張機能の名前、作成者、および拡張機能マネージャーのアイコンに関する情報が含まれています。 Operaの拡張機能はW3C Widgets形式を使用します。これはOpera Widgetsでおなじみのものかもしれません。

構成ファイルのスケルトンを作成します。
<? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
  1. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
  2. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
  3. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
  4. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
  5. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
  6. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
  7. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
<? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .


config.xmlとして保存します。

拡張機能アイコンの作成

確かに、構成ファイルのアイコンの説明に気づきます。 示されたアイコンは、Extension ManagerおよびOperaの拡張サイトで使用されます。 64x64ピクセルのアイコンを作成することをお勧めします。

hello.pngアイコンファイルをダウンロードし、拡張フォルダーに保存します。

Operaパネルにボタンを追加する

拡張機能を構成したら、コードの記述を開始できます。 パネルに追加するボタンを作成します。 これは、次のコードを使用して実行できます。

  1. <！ doctype html >
  2. < html lang = "en" >
  3. < 頭 >
  4. < スクリプト >
  5. window.addEventListener（ "load" 、 function （）{
  6. var theButton;
  7. var ToolbarUIItemProperties = {
  8. タイトル： "Hello World" 、
  9. アイコン： "hello-button.png" 、
  10. popup：{
  11. href： "popup.html" 、
  12. 幅：110、
  13. 高さ：30
  14. }
  15. }
  16. theButton = opera.contexts.toolbar.createItem（ToolbarUIItemProperties）;
  17. opera.contexts.toolbar.addItem（theButton）;
  18. }、 false ）;
  19. </ スクリプト >
  20. </ 頭 >
  21. < 本体 >
  22. </ body >
  23. </ html >
*このソースコードは、 ソースコードハイライターで強調表示されました。


このファイルを拡張フォルダーにindex.htmlとして保存します。

Operaの拡張には、index.htmlファイルが必要です。 これは、UI要素を作成するスクリプトを含むHTMLテンプレートです。 このドキュメントの本文は使用されていません。

スクリプトは、いくつかのプロパティを持つパネル要素（ボタン）を作成します。 要素は、18x18ピクセルのアイコンで作成されます。 ボタンに関連付けられたポップアップウィンドウも、指定されたサイズで作成され、インターフェイスでファイルが示されます。

hello-button.pngファイルをダウンロードして、拡張フォルダーに保存します。

ポップアップを作成する

すでにボタンを作成し、ポップアップウィンドウのサイズを指定しているので、コンテンツを作成するだけです。 これは、指定された次元を持つ単なるHTMLドキュメントです。 HTML、CSS、JavaScript、または通常Webページで使用するその他のWebテクノロジーを使用できます。 これはHello Worldの例なので、このページを作成します。

  1. <！ doctype html >
  2. < html lang = "en" >
  3. < 頭 >
  4. < タイトル > Hello World！ </ タイトル >
  5. < スタイル >
  6. h1 {
  7. フォント：14px helvetica、arial、sans-serif。
  8. text-align：center;
  9. }
  10. </ スタイル >
  11. </ 頭 >
  12. < 本体 >
  13. < h1 > Hello World！ </ h1 >
  14. </ body >
  15. </ html >
*このソースコードは、 ソースコードハイライターで強調表示されました。


拡張フォルダーに、このファイルをpopup.htmlという名前で保存します。

拡張機能のパッキングとインストール

拡張機能の作成はほぼ完了です。 必要なことは、すべてのファイルをzipアーカイブにパックすることです。 その後、結果のファイルの名前をHelloExtension.oexに変更し（拡張子を.zipから.oexに変更することを忘れないでください）、完了です。

完成したHelloExtension拡張機能をダウンロードできます。

拡張機能をブラウザウィンドウにドラッグするだけで、インストールするかどうかを尋ねられます。 指定したアイコンとメタデータが表示されます。 任意のタブに切り替えて、パネルの新しいボタンをクリックしてみてください。

プロセスに慣れるまで、ボタンのさまざまなプロパティとポップアップウィンドウの内容を試してください。

Source: https://habr.com/ru/post/J106609/

More articles:


All Articles