5分で作るOpera エクステンション
Opera11が発表されましたが、皆様いかがお過ごしでしょうか。
開発者でない人でも、簡単に作れるOpera エクステンション。
作成するファイルは僅か5つ。
・index.html
・background.js
・popup.html
・test.png
・config.xml
早速、作ってみましょう。
あと、圧縮ツール。zip圧縮出来るならば、何でも良いです。
次に、background.jsを作ります。
64*64のサイズでしたら何でも良いです。
良ければ、 これでも使ってください。
最後に、config.xmlを作ります。
間違えても、それらが入っているフォルダを圧縮しないようにしましょう。動かなくなります。
最後に拡張子をoexに変換すれば準備完了。
Opera11にドラッグ&ドロップする事でインストール出来ます。
アドレスバーの右側にアイコンがうまく表示されましたか?
アイコンをクリックすると、Hello! Opera Extensionsが表示されるはずです。
参考:Converting UserJS to Opera Extensions - Opera Developer Community
さぁ、貴方も今すぐOpera エクステンション開発をはじめよう!
Opera エクステンションがやって来るヤァ!ヤァ!ヤァ!
Opera11が発表されましたが、皆様いかがお過ごしでしょうか。
開発者でない人でも、簡単に作れるOpera エクステンション。
作成するファイルは僅か5つ。
・index.html
・background.js
・popup.html
・test.png
・config.xml
早速、作ってみましょう。
用意するもの
Opera 11あと、圧縮ツール。zip圧縮出来るならば、何でも良いです。
実際に作ってみよう
まず、index.htmlを作りましょう。<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>MyTest</title> <script charset="UTF-8" src="background.js" type="text/javascript"></script> </head> <body> </body> </html>
次に、background.jsを作ります。
(function(win){ win.addEventListener('load', function(){ var ToolbarUIItemProperties = { title: "test", icon: "test.png", popup: { href: "popup.html", width: 200, height: 200 } }; var btn = opera.contexts.toolbar.createItem(ToolbarUIItemProperties); opera.contexts.toolbar.addItem(btn); },false); })(window);次に、popup.htmlを作りましょう。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>description</title> <style type="text/css"> h1 { font-size : 16px; } </head> <body> <h1>Hello! Opera Extensions</h1> </body> </html>次に、test.pngファイルを適当に作ります。
64*64のサイズでしたら何でも良いです。
良ければ、 これでも使ってください。
最後に、config.xmlを作ります。
<?xml version="1.0" encoding="UTF-8"?> <widget xmlns="http://www.w3.org/ns/widgets"> <name>Opera ExtensionTest</name> <description>Opera Test</description> <author href="http://looxu.blogspot.com/">Arc Cosine</author> <icon src="test.png" /> </widget>これで必要なファイルは出来ました。
圧縮して、リネーム
index.html、popup.html、background.js、config.xml、test.pngを選択して圧縮します。間違えても、それらが入っているフォルダを圧縮しないようにしましょう。動かなくなります。
最後に拡張子をoexに変換すれば準備完了。
Opera11にドラッグ&ドロップする事でインストール出来ます。
アドレスバーの右側にアイコンがうまく表示されましたか?
アイコンをクリックすると、Hello! Opera Extensionsが表示されるはずです。
最後に
実際にWebページへの操作を実行するにはこの直下にincludesディレクトリを作ってUserScriptコードを書く必要があります、その辺は公式ドキュメントを御覧ください。参考:Converting UserJS to Opera Extensions - Opera Developer Community
さぁ、貴方も今すぐOpera エクステンション開発をはじめよう!
コメント
コメントを投稿