white-space: pre-line; word-wrap: break-word; {name: 'BelongMyClue', params: {isTips: true}} {path:'/one/log',query:{num:123}} }
{
"manifest_version": 2, // 目前只能为数字2(必需)
"name": "查看我的IP", // 插件名字(必需)
"version": "1.0", // 插件版本(必需) 值最多可以是由三个圆点分为四段的版本号,每段数字不能大于65535 且不能以0 开头(可以是0)
"description": "查看我的电脑当前的公网IP", // 插件详情
"icons": { // 扩展相关图标文件的位置
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"browser_action": { // 指定扩展的图标放在Chrome 的工具栏中
"default_icon": { // 相应图标文件的位置
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "查看我的IP", // 当用户鼠标悬停于扩展图标上所显示的文字
"default_popup": "popup.html" // 当用户单击扩展图标时所显示页面的文件位置
},
"page_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "Extension Title",
"default_popup": "popup.html"
},
"background": { // 可以使扩展常驻后台
"scripts": ["*.js"], // 如果指定了scripts 属性,则Chrome 会在扩展启动时自动创建一个包含所有指定脚本的页面
"page":["*.html"], // 作为后台页面运行
"persisten": blo // 常驻后台的方式——当其值为true 时,表示扩展将一直在后台运行;当其值为false 时,表示扩展在后台按需运行
},
"content_scripts": [ //前台页面用到的文件配置,可以多个
{
"matches": ["*://*/*"], //定义在什么地址下加载
"css": ["mystyles.css"], //要加载的css
"js": ["jquery.js", "myscript.js"] //要加载的js
}
],
"options_page": "options.html", // 指定应用右键菜单里设定'选项'的页面
"permissions": ["*://*/*"], // 权限:URL正则告诉chrome允许跨域的地址,'contextMenus'添加页面右键菜单,'notifications'桌面提醒功能,'cookies'管理cookies
同时要声明需管理cookies所在的域
"web_accessible_resources": ["images/*.png"]
}
/************************* Browser Actions 接口(只在popup页面打开时可以调用) *************************/
chrome.browserAction.setIcon({ // 动态更改扩展的图标
path:imagePath, // imagePath为图片在扩展根目录下的相对位置
imageData:imageData, // 值可以是imageData,也可以是对象。imageData 是图片的像素数据,可以通过HTML 的canvas 标签获取到
tabld:'' // 限定了浏览哪个标签页时,图标将被更改
},callback); // 当chrome.browserAction.setIcon 方法执行成功后,callback 指定的函数将被运行。此函数没有可接收的回调结果
chrome.browserAction.setTitle({ // 动态更改扩展的标题
title: 'This is a new title'
});
chrome.browserAction.setBadgeBackgroundColor({
color: '#0000FF'
});
chrome.browserAction.setBadgeText({
text: 'Dog'
});
/************************* Browser Actions 接口(只在popup页面打开时可以调用) *************************/
Page Actions 与Browser Actions 非常类似,除了Page Actions 没有badge 外,其他Browser Actions 所有的方法Page Actions 都有,
它还具有独有的show和hide 方法
chrome.pageAction.show(integer tabId);
chrome.pageAction.hide(integer tabId);
/************************* 扩展页面间相互通信 *************************/
Chrome 提供的大部分API 是不支持在content_scripts 中运行的, 但runtime.sendMessage 和runtime.onMessage 可以在content_scripts 中运行,所以扩展的其他页面也可以同content_scripts 相互通信。
chrome.runtime.sendMessage('***',function(callObj){ do some thing }); // 前台向后台转递信息和callBackFn,callBackFn可以接收后台返回的信息并处理
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){ // 后台接收到前台传递的信息做处理,执行回调并返回信息
if(message == '***'){
do some thing;
sendResponse('other***');
}
})
runtime.connect
runtime.onConnect
API地址:http://developer.chrome.com/extensions/extension
/*************************** 储存数据 ***************************/
Chrome 扩展使用以下三种方法中的一种来储存数据:
1、使用HTML5 的localStorage;
首先localStorage 是基于域名的,而content_scripts 是注入到用户当前浏览页面中的,如果content_scripts 直接读取localStorage,所读取到的数据是用户当前浏览页面所在域中的。所以通常的解决办法是content_scripts 通过runtime.sendMessage 和background 通信,由background 读写扩展所在域(通常是chrome-extension://extension-id/)的localStorage,然后再传递给content_scripts。
2、使用Chrome 提供的存储API;
使用Chrome 存储API 必须要在Manifest 的permissions 中声明"storage",之后才有权限调用。Chrome 存储API 提供了2 种储存区域,分别是sync 和local。两种储存区域的区别在于,sync 储存的区域会根据用户当前在Chrome 上登陆的Google 账户自动同步数据,当无可用网络连接可用时,sync 区域对数据的读写和local 区域对数据的读写行为一致。(具体看Chrome扩展及应用开发第2.6节)
3、使用Web SQL Database。
关于Web SQL Database 的资料可以参考http://www.w3.org/TR/webdatabase/
/*************************** 右键菜单 ***************************/
Chrome 提供了三种方法操作右键菜单,分别是create、update 和remove,对应于创建、更新和移除操作。
右键菜单提供了4 种类型:
1、普通菜单'normal',
2、单选菜单'radio',
3、复选菜单'checkbox',
4、分割线'separator'
chrome.contextMenus.create({
'type': 'radio', // 菜单类型
'title': 'Menu B', // 菜单显示内容
'id': 'b', // id,必需,绑定点击事件用
'contexts':['page'], // 定义的右键菜单在何时显示(可选,默认page):all\page\frame\selection\link\editable\image\video\audio\launcher (launcher只对Chrome 应用有效)
'checked': true, // 单选或多选用到,是否选中
'parentId': 'a', // 子菜单用到,父级type要是'normal'
'onclick':fn // 点击后调用函数
})
chrome.contextMenus.update(id,{ //更新id对应的右键菜单
'title':'.....'
});
chrome.contextMenus.update(id); //移除id对应的右键菜单
例子:chrome_extensions_and_apps_programming-master\chrome_extensions_and_apps_programming-master\google_translate
/*************************** 桌面提醒 ***************************/
// 具体使用看https://jingyan.baidu.com/article/25648fc1a1ebcc9190fd005a.html
// "permissions"里要添加"notifications"
chrome.notifications.create('',{
type: "list",
title: "桌面提醒",
message: "msg",
iconUrl: "images/icon48.png",
items: [
{ title: "1.", message: "下班了"},
{ title: "2.", message: "吃饭了."},
{ title: "3.", message: "中奖了."}
]
},function(id){
})
/*************************** Cookies ***************************/
如果想要管理所有的Cookies 可以声明如下权限:
"permissions": [
"cookies",
"<all_urls>"
]
请注意,除非必要,否则请不要如此声明权限,这会提示此扩展可以访问所有网络资源,给用户带来不安。
//取cookies
chrome.cookies.get({ //单个
url: 'https://github.com',
name: 'dotcom_user'
}, function(cookie){
console.log(cookie.value);
});
chrome.cookies.getAll({}, function(cookies){ //全部
console.log(cookies);
});
//设置cookies
chrome.cookies.set({
'url':'http://github.com/test_cookie',
'name':'TEST',
'value':'foo',
'secure':false,
'httpOnly':false
}, function(cookie){
console.log(cookie);
});
//删除Cookie。remove 方法可以删除指定url、name 和storeId 的Cookie。
chrome.cookies.remove({
url: 'http://www.google.com',
name: '_ga'
}, function(result){
console.log(result);
});
//获取全部的Cookie store
chrome.cookies.getAllCookieStores(function(store){
console.log(store)
})
//onChanged事件监控Cookie的设置和删除行为
chrome.cookies.onChanged.addListener(function(changeInfo){
console.log(changeInfo); //changeInfo 包含三个属性:
removed,是否是删除行为;
cookie,被设置或删除的cookie对象;
cause,Cookie 变化的原因,可能的值包括evicted、expired、explicit、expired_overwrite和overwrite。
})
插件源码在本地位置 C:\Users\Lenovo\AppData\Local\Google\Chrome\User Data\Default\Extensions (win7)
进度:4.2
chrome.extensions(plugin) API: https://developer.chrome.com/extensions/devguide
https://chrome.google.com/webstore/search/megabonus
https://chrome.google.com/webstore/detail/ali-reviews-aliexpress-re/bbaogjaeflnjolejjcpceoapngapnbaj
https://chrome.google.com/webstore/search/aliexpress%20pictures%20and%20images