【chrome插件开发⼆】chrome常⽤语法汇总
在上⼀节我们⼿写了第⼀个chrome插件，接下来我们来看 chrome插件零基础⼊门 专栏的第⼆篇⽂章，chrome常⽤语法汇总：
⽬录
2 storage⽤法
对数据进⾏存储，我们使⽤⼀个预算管理的例⼦来进⾏学习，我们每⼀次消费的时候，将以前消费的总⾦额和本次消费的⾦额进⾏相加，然后把总⾦额存储到浏览器当中，下⼀次我们进⾏消费的时候，同样将以前的⾦额取出，然后进⾏相加，再向浏览器中进⾏存储
popup.html
<body >
<h2>总⾦额：<span id="total"></span></h2>
<h2>本次使⽤：<input type="text" id="amount"></h2>
鱼肚
<input type="submit" id="add" value="添加">
</body>
效果如图所⽰：
接下来进⾏逻辑的开发
现在manifest.json⽂件中加⼊storage的权限
"permission": [
"storage"
]
然后在popup.js⽂件中进⾏逻辑代码的编写
edonkey
chrome.('total',function(budget){
$('#total').al);
});
$('#add').click(function(){
// 1. 从浏览器中获取存储的⾦额
// 第⼀个参数是获取数据的key，可以是⼀个也可以是两个
// 第⼆个参数是获取到数据之后的回调函数，参数是我们获取的对象
chrome.('total',function(budget){
var totalAmount = 0;
al){
totalAmount = al);
}
// 2. 将本次⾦额加到总⾦额并存储
var amount = $('#amount').val();
if(amount){
totalAmount += parFloat(amount);
chrome.storage.sync.t({'total':totalAmount});
}
// 3. 更新显⽰ui
$('#total').text(totalAmount);
$('#amount').val('');
});
})
})
3 options配置的⽤法
options主要⽤来设置插件的参数，⽐如上⾯storage⾥的预算管理的例⼦，我们可以⾸先对预算的使⽤⾦额的上限进⾏设置，当我们的消费⾦额达到该上限时，
⾸先在manifest⾥添加options_page的页⾯
"options_page": "options.html"
接下来我们来写options.html
茶道图片<body>
<h1>预算管理选项</h1>
<h2>预算限制：<input type="text" id="limit"></h2>
<input type="submit" id="tLimit" value="保存限制">
<input type="submit" id="retTotal" value="清除总⾦额">
</body>
之后写options.js⽂件
chrome.('limit',function(budget){
$('#limit').val(budget.limit);
})
$('#tLimit').click(function(){
var limit = $('#limit').val();
if(limit){
// 这是个异步
chrome.storage.sync.t({'limit':limit},function(){
clo();
})
}
});
$('#retTotal').click(function(){
chrome.storage.sync.t({'total':0});
});
});
在popup.html⽂件中添加限制⾦额标签
<body >
<h2>总⾦额：<span id="total"></span></h2>
<h2>限制⾦额：<span id="limit"></span></h2>
<h2>本次使⽤：<input type="text" id="amount"></h2>
<input type="submit" id="add" value="添加">
</body>
在popup.js⽂件中添加限制⾦额
chrome.('total','limit',function(budget){
$('#total').al);
$('#total').text(budge.limit);
});
4 消息通知 notifications
主要是⽤来实现通知，在电脑桌⾯的右⼩⾓位置出现弹框，来提⽰⽤户相关消息。接下来我们来实现当⾦额超过预算限制的时候弹出弹框实现通知
⾸先在manifest⾥对权限 permissions 进⾏添加
"permissions":[
"storage",
"notifications"
],
接下来接下来到 popup.js ⽂件中编写弹窗信息
⾸先把‘limit’传进去，来到options.js⾥，从浏览器获取存储的⾦额是，把 limit 传进来
// 1. 从浏览器中获取存储的⾦额,
// 把 limit 传进来
chrome.('total','limit',function(budget){
var totalAmount = 0;
...
}
然后在存储⾦额的时候进⾏判断，如果总⾦额⼤于限额，弹出弹框
// 2. 将本次⾦额加到总⾦额并存储
var amount = $('#amount').val();
if(amount){
totalAmount += parFloat(amount);
chrome.storage.sync.t({'total':totalAmount},function(){
// 在存储总⾦额的时候传⼊回调函数进⾏判断，
神秘访客
if(totalAmount > parFloat(budget.limit)){
/
/ 先设置弹窗的基本信息
var notifyOptions = {
// type 有四种类型，basic,image,simple,list
type: 'basic',
title: '⾦额超出限制',
iconUrl: 'img/logo.png',
message: '您消费的总⾦额已经超出上限'
}
// 接下来来⽣成弹窗, 传⼊两个参数，
// 第⼀个是弹窗的id，⾃⼰设置，第⼆个是刚才写好的弹窗内容
}
});
}
来查看下效果！
接下来我们来完善这个通知，当总⾦额清零的时候也能显⽰通知，
来到options.js⽂件中，当总⾦额为0时，弹出弹框，⽅式和上述相同
$('#retTotal').click(function(){
chrome.storage.sync.t({'total':0},function(){
// 当总⾦额为0的时候，设置弹窗
// 先设置弹窗的基本信息
var notifyOptions = {
// type 有四种类型，basic,image,simple,list
type: 'basic',
title: '提⽰',
iconUrl: 'img/logo.png',
message: '您的消费总⾦额已清零'
边充电边玩手机对电池有影响吗}
});
});
查看下效果：
5 contextMenus
contextMenus 也就是右键菜单，⽐如我们在某个商品购物页⾯，选中⼀个商品价格，点击⿏标右键，弹出选项卡，可以选择添加消费⾦额到总预算中，进⾏记账。这次我们进⾏操作的页⾯是普通的⽹页，不是之前做的插件的页⾯（popup.html，options.html），所以它的代码是运⾏在后台的，也就是 background，这和之前是不同的。接下来我们看下如何实现：
重阳节绘画⾸先还是在manifest⾥，添加上 contextMenus 权限
"permissions":[
"storage",
"notifications",
"contextMenus"
],
然后对我们的后台进⾏⼀个声明，也就是 background ，background 需要设置两个属性，第⼀个是sc
ripts：就是我们后台运⾏的js代码，写在这⾥；第⼆个属性 persistent ，这个属性是，在后台⼀直触发true，还是点击⽤到的时候才触发 fal，这⾥我们设置 fal
"background":{
"scripts": ["js/eventPage.js"],
"persistent": fal
},
接下来我们来写 eventPage.js ⽂件
// 1. 创建contextMenus
// 1.1 先对右键菜单的属性进⾏⼀些设置
var contextMenu = {
id: "addAmount", // id 是唯⼀的标识
title: "添加消费",
// 触发情景，也就是什么情况下，菜单会显⽰
// lection 是指，选中⽂字点击右键才会触发
// 还有其他的选项，⽐如 page，点击页⾯触发；video 选中图⽚视⾳频会触发等
contexts: ["lection"],
}
// 1.2 接着创建选项卡
// 2. 为contextMenus 添加点击事件的监听
// uItemId : 被点击的菜单选项卡id
// clickData.lectionText: 选中的内容、
/
返老还童什么意思>大骨头怎么炖好吃
/ 先判断选项卡的id是否相符合，并且选择内容不为空，也就是有选择内容
uItemId == "addAmount" && clickData.lectionText){
var amount = parFloat(clickData.lectionText);
...
}
然后把存储⾦额的代码直接从 popup.js ⽂件⾥复制过来
