360极速浏览器开发范例:从Hello World入门

im, 无色
im, 无色
im, 无色
884
文章
0
评论
2019年7月16日13:41:08 评论 437

这个指南会带领您完整的创建一个简单的应用(扩展)。这个应用(扩展)会在360浏览器极速版中增加一个按钮。当点击按钮时,显示一个自动生成的页面。这个按钮和页面看起来如下图:
360极速浏览器开发范例:从Hello World入门

创建并加载一个应用

在这一节中,将编写一个browser action应用,这个应用会在360浏览器极速版的工具栏上增加一个图标。

1.在磁盘上创建一个目录,用来放应用的代码和资源

2.在这个目录中,创建一个文本文件,命名为manifest.json,其内容为:

{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://api.flickr.com/"
]
}

3.把这个图标放到目录中:360极速浏览器开发范例:从Hello World入门

4.加载应用(扩展)

a)点击360极速浏览器开发范例:从Hello World入门图标,在菜单中选择工具〉扩展程序,这会打开扩展管理的页面

b)如果“开发人员模式”旁边有个“+”号,点击这个“+”号进入开发人员模式。“+”号会变成“-”号,同时会显示更多的按钮和信息

c)点击“载入正在开发的扩展程序…”按钮,会出现一个文件选择对话框

d)在对话框中,找到扩展目录并点击“确定”

如果应用(扩展)是正确的,它的图标就会显示在地址栏右侧,应用(扩展)的信息也会显示在扩展管理页面上,如下图所示:
360极速浏览器开发范例:从Hello World入门

向应用(扩展)中添加代码

在这一节,会给应用(扩展)增加一点功能

1.编辑manifest.json文件,增加下面的内容:

...
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
...

在应用(扩展)目录中,创建一个名为popup.html的文本文件,增加一些代码:CSS and JavaScript code for hello_world

2.回到扩展管理页面,点击“立即更新扩展程序”按钮,这时会重新加载修改后的应用(扩展)

3.点击应用(扩展)的图标,会弹出一个气泡窗口,显示popup.html文件的内容。样子如下:
360极速浏览器开发范例:从Hello World入门

如果看不到这个气泡,请严格按照上面的步骤重新做一遍。注意如果尝试加载应用(扩展)目录之外的任何html文件都会失败。

im, 无色
  • 本文由 发表于 2019年7月16日13:41:08
360极速浏览器开发:调试 360浏览器

360极速浏览器开发:调试

试 这个指南会向您介绍如何使用Chromium的内建开发工具进行应用(扩展)调试。 查看应用(扩展)信息 1.加载Hello World应用(扩展)。如果这个应用(扩展)正在运行中,你将在浏览器右边的...
360极速浏览器开发:综述 360浏览器

360极速浏览器开发:综述

综述 当读完了这个综述和入门之后,就可以开始创建应用(扩展)和WebApp了。 注意:WebApp是通过应用(扩展)的方式实现的,所以除非特别声明,本页所有内容都适用于WebApp。 基本概念 一个应...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: