Chrome插件开发学习心得（三）之传值

上面主要介绍了mainfest.json文件，其中有两个对象，browser_action中的dafault_popup和background这两个html文件，这两个都是用来写逻辑，这两者有什么区别呢。

dafault_popup这个是在浏览器右上角弹窗显示，这个只有在鼠标点击标题栏中图表才会触发，只触发一次。

background这个会在浏览器启动时开始运行，常驻内存，直到浏览器关闭或者disable插件代码才结束运行。如定时运行某个功能或者记数可以用这个，注意这个一直在运行，可能会出现内存泄露的问题，拖慢浏览器，所以避免使用这个。

一：传值

这时候就会想到，一般使用会结合两者一起使用，这时候就需要考虑传值问题。这时候我们可以在background中定义全局变量和方法，使用chrome.extension.getBackgroundPage()方法读取修改background中的参数和方法

    var bg = chrome.extension.getBackgroundPage();
    bg.name = "stack";  //给background中增加参数
    bg.getName(); //调用background中的getName方法
    bg.name; //调用background中的参数

二：永久存储数据

注意，不管是default_popup还是background定义的值，都会出现一种情况，当浏览器关闭时，数据都没了，这时候问题来了，如果我需要存储一个永久的数据怎么办。我们可以使用html5的本地存储功能，localStorage对象。 localStorage对象可以想象成cookie，虽然不怎么恰当。这个总共有三个方法，用于读，写和删除健的值。

localStorage中提供了三个方法，分别是localStorage.getItem("key")用于读取数据，localStorage.setItem("key",value)用于添加数据，localStorage.removeItem("key")用于删除数据。

localStorage.setItem('main', "hello  world!");
localStorage.getItem('main');
localStorage.removeItem('main');

三：图标显示

除了这些，有时候你会看到图标上有数字，例如下面的数字

chrome.browserAction.setBadgeText({text: "1"});
chrome.browserAction.setBadgeBackgroundColor({color: [190, 190, 190, 230]});

这样，第一个是设置图标上文字内容，这里只支持四位字母或数字，这个可以放比如未处理消息数量。第二个是设置文字的背景颜色，不设置默认是红色，代码中给的颜色是灰色。