Opera/extensions/hello

来自开放百科 - 灰狐
跳转到: 导航, 搜索

创建你的第一个Opera Extension, Opera 11 开始支持扩展机制。

1、创建config.xml文件

 <?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="http://huihoo.com" email="[email protected]">Allen Long</author>
  	<icon src="hello.png"/>
 </widget>

2、创建extension图标,64×64大小,hello.png

3、加入按钮到Opera工具栏,创建index.html文件,创建18×18图标,hello-button.png

 <!doctype html>
 <html lang="en">
  <head>
    <script>
       window.addEventListener("load", function(){
        var theButton;
        var ToolbarUIItemProperties = {
          title: "Hello World",
          icon: "hello-button.png",
          popup: {
            href: "popup.html",
            width: 110,
            height: 30
          }
        }
        theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);
        opera.contexts.toolbar.addItem(theButton);
      }, false);
    </script>
  </head>
  <body>
  </body>
 </html>

4、创建显示内容,创建popup.html文件

 <!doctype html>
 <html lang="en">
  <head>
  	<title>Hello World!</title>
  	<style>
  		h1 {
  			font: 14px helvetica, arial, sans-serif;
  			text-align: center;
  		 }
  	</style>
  </head>
  <body>
  	<h1>Hello World!</h1>
  </body>
 </html> 


5、打包扩展

将所有文件打包成HelloExtension.zip 并重命名为 HelloExtension.oex

6、安装扩展

file://localhost/C:/extensions/HelloExtension.oex 或 http://192.168.1.100/HelloExtension.oex

7、使用扩展,看浏览器的右上角

8、体验

你现在就可以体验下,点击以下地址:http://demo.huihoo.com/opera/HelloExtension.oex

Comment-32x32.png

<discussion>characters_max=300</discussion>

分享您的观点
个人工具
名字空间

变换
操作
导航
工具箱