开发范例:从Hello World入门
这个指南会带领您完整的创建一个简单的扩展。这个扩展会在360安全浏览器中增加一个按钮。当点击按钮时,显示一个自动生成的页面。这个按钮和页面看起来如下图:
创建并加载一个扩展
在这一节中,将编写一个browser action扩展,这个扩展会在360安全浏览器的工具栏上增加一个图标。
1.在磁盘上创建一个目录,用来放扩展的代码和资源
2.在这个目录中,创建一个文本文件,命名为manifest.json,其内容为:
{ "manifest_version": 2, "name": "One-click Kittens", "description": "This extension demonstrates a browser action with kittens.", "version": "1.0", "permissions": [ "https://secure.flickr.com/" ], "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" } }
3.把这个图标放到目录中:
4.加载扩展
a)点击图标,在菜单中选择工具>扩展程序,这会打开扩展管理的页面
b)如果“开发人员模式”旁边有个“+”号,点击这个“+”号进入开发人员模式。“+”号会变成“-”号,同时会显示更多的按钮和信息
c)点击“载入正在开发的扩展程序…”按钮,会出现一个文件选择对话框
d)在对话框中,找到扩展目录并点击“确定”
如果扩展是正确的,它的图标就会显示在地址栏右侧,扩展的信息也会显示在扩展管理页面上,如下图所示:
向扩展中添加代码
在这一节,会给扩展增加一点功能
1.编辑manifest.json文件,增加下面的内容:
"browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }
在扩展目录中,创建一个名为popup.html的文本文件,增加一些代码:CSS and JavaScript code for hello_world
2.回到扩展管理页面,点击“立即更新扩展程序”按钮,这时会重新加载修改后的扩展
3.点击扩展的图标,会弹出一个气泡窗口,显示popup.html文件的内容。样子如下:
如果看不到这个气泡,请严格按照上面的步骤重新做一遍。注意如果尝试加载扩展目录之外的任何html文件都会失败。
教程:调试
内容导航
这个指南会向您介绍如何使用Chromium的内建开发工具进行扩展调试。
查看扩展信息
- 加载 Hello World 扩展。如果这个扩展正在运行中,你将在浏览器右边的地址栏上看到 Hello World 的图标。
如果这个扩展并未运行,你可以找到扩展文件,并且加载它们。如果你没有扩展文件,可以在这里下载它的zip文件,然后按创建扩展范例的方法加载它。 - 查看 Hello World 扩展的信息,你能看到扩展的名称、描述、扩展ID。
审查popup页面
- 如果脚本按钮没有被选中了,点击它。
- 点击控制台按钮(在开发者窗口的左下角,第二个按钮就是),这样你可以即看到代码,又看到控制台。
使用调试器
- 确认你能看到popup.html标签,它将显示20个“hello world”图片。
- 在控制台上,输入 location.reload(true) 重新加载这个页面:
> location.reload(true)
- 点击play/pause按钮后面的的按钮,可以步进到函数调用的上层,为了让页面完成加载,点击之前的第37行,禁用之前设置的断点,接着按下play/pause按钮继续执行。
小结
这个指南示范了简单的扩展调试,简单小结一下:
- 在扩展管理页面上(可通过 se://extensions-frame 或 chrome://extensions-frame 直接访问),找到扩展ID
- 查看扩展中的文件,使用类似这样的格式访问 chrome-extension://extensionId/filename
- 使用开发者工具设置脚本断点,单步调试,查看变量
- 使用控制台命令 location.reload(true) 来重新加载当前的调试页面