More Related Content
Similar to Chrome扩展开发入门 (20)
Chrome扩展开发入门
- 6. manifest.json
{
"name": "My Extension", // 扩展名称
"version": "2.1", // 版本号
"description": "Gets information from Google.", // 描述
"icons": { "128": "icon_128.png" }, // 图标资源 16 24 32 48 96 128
"background_page": "bg.html", // 后台页面
"permissions": ["http://*.google.com/", "https://*.google.com/"], // 权限,安全
"browser_action": {
"default_title": "popup title", // 提示文字
"default_icon": "icon_19.png", // 按钮图标
"default_popup": "popup.html" // 弹出页面
}
}
- 7. Browser Actions
icon, tooltip, popup
在 manifest.json 中定义
动态调用: 'setIcon(), setTitle(), setPopup()'
Badge 扩展状态通知
最多 4 个字符,显示少量信息
调用: 'setBadgeText(), setBadgeBackgroundColor()'
"browser_action": {
"default_icon": "images/icon19.png", // optional
"default_title": "Google Mail", // optional; tooltip
"default_popup": "popup.html" // optional
},
- 8. Page Actions
与 Browser Actions 类似
但在特定页面生效
与 Browser Actions 配置互斥
"page_action": {
"default_icon": "icons/foo.png", // optional
"default_title": "Do action", // optional; shown in tooltip
"default_popup": "popup.html" // optional},
- 9. Option Pages
保存用户信息 , 使用习惯
数据存储 :cookie, localStorage, web database
Manifest.json
==========
"options_page": "options.html",
在页面中添加设置页按钮
=======================
chrome.tabs.create({ url: 'options.html'});
- 10. Background pages
后台运行的 HTML 页 (Active → Deactive)
可以理解为 WEB 应用的后端
负责与各视图页面交互 (MVC)
Manifest.json
==========
"options_page": "options.html",
交互
====
chrome.extension.getViews()
chrome.extension.getBackgroundPage()
- 13. Content Script 脚本加载
配置
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
按需加载
"permissions": ["tabs", "http://*/*"],
chrome.tabs.executeScript(null, {code:“document.body.bgColor='red''"});
chrome.tabs.executeScript(null, {file: "content_script.js"});
- 16. 资源
C h rom e 插件开发者帮助手册(在线版)
C h rom e 插件开发者帮助手册(离线版)
JQuery mustache