Chrome插件开发之二: 添砖加瓦

冷不防 2022-09-27 00:30 166阅读 0赞

## 1. 关于Background.html ##

popup.html中定义的Javascript变量会在popup.html页面关闭时被释放，那么如何保存一些一直需要使用的变量呢？这就是background.html的作用，background.html页面中定义的javascript变量会在Chrome浏览器生命期中一直存在，可以把需要一直存在的数据保存在这里。  
  
那么我们如何在background.html中保持popup.html页面中的数据呢？可以这么写，先在background.html中定义好变量，例如以下保存用户登录信息的变量

var global\_email = ""; var global\_passwd = "";

然后在popup.html中用以下方式来引用这些变量，可以改变或者读取变量的值

var bgpg = chrome.extension.getBackgroundPage(); bgpg.global\_email = "somebody@domain.com"; bgpg.global\_passwd = "password";

## 2. 将数据保存在磁盘 ##

Chrome本身没有提供用于保存变量的值的接口，不过可以通过Javascript操作Cookie保存数据，另外还有一种更加方便的保存数据方式，那就是使用HTML5的localStorage功能保存数据，这也是Chrome插件开发手册中推荐的方式，例如我们希望保存刚才在background.html中定义的用户登录信息，只需要执行以下代码即可

localStorage\['email'\] = golbal\_email; localStorage\['passwd'\] = global\_passwd;

这样就算关闭了Chrome浏览器，用户的登录数据还是一样不会丢失，下次启动Chrome浏览器时，只需要执行以下代码就又可以获取这些登录数据了

global\_email = localStorage\['email'\]; global\_passwd = localStorage\['passwd'\];

## 3. 插件图标右下角的数字 ##

经常可以看见某些插件会在插件图标的右下角显示数字，可以很直观的看到一些信息，还是非常有用的，Chrome插件开发文档称这个数字为badge，可以翻译成徽章的意思。  
如果想为自己的Chrome添加这个badge，可以使用以下代码

// 在插件图标的右下角显示数字3 chrome.browserAction.setBadgeText(\{text: ‘3’\});

有了上面介绍的这些功能，插件能提供的服务就又进了一步，好了，今天的分享就到这里，下次再介绍Chrome插件开发的其它内容。