Javascript 带有数据库API接口的Chrome扩展

我想用从chrome中的本地数据库生成的锚列表更新div。这是非常简单的东西，但当我试图通过回调将数据添加到main.js文件时，所有内容都突然变得未定义。或者将数组长度设置为0。（实际上是18岁。）

最初，我尝试将其安装到一个新阵列中，并以这种方式将其传回

我是否需要在chrome manifest.json中指定一个设置，以允许与数据库API通信？我查过了，但我能找到的只是“无限存储”

代码如下：

    window.main = {};
window.main.classes = {};
(function(awe){
    awe.Data = function(opts){
      opts = opts || new Object();
      return this.init(opts);
    };
    awe.Data.prototype = {
        init:function(opts){
            var self = this;
            self.modified = true;

            var db = self.db = openDatabase("buddy","1.0","LocalDatabase",200000);
            db.transaction(function(tx){
                tx.executeSql("CREATE TABLE IF NOT EXISTS listing ( name TEXT UNIQUE, url TEXT UNIQUE)",[],function(tx,rs){
                    $.each(window.rr,function(index,item){
                        var i = "INSERT INTO listing (name,url)VALUES('"+item.name+"','"+item.url+"')";
                        tx.executeSql(i,[],null,null);
                    });
                },function(tx,error){

                });
            });
            self._load()
            return this;
        },
        add:function(item){
            var self = this;
            self.modified = true;
            self.db.transaction(function(tx){
                tx.executeSql("INSERT INTO listing (name,url)VALUES(?,?)",[item.name,item.url],function(tx,rs){
                    //console.log('success',tx,rs)
                },function(tx,error){
                    //console.log('error',error)
                })
            });
            self._load()
        },
        remove:function(item){
            var self = this;
            self.modified = true;
            self.db.transaction(function(tx){
                tx.executeSql("DELETE FROM listing where name='"+item.name+"'",[],function(tx,rs){
                    //console.log('success',tx,rs)
                },function(tx,error){
                    //console.log('error',tx,error);
                });
            });
            self._load()
        },
        _load:function(callback){
            var self = this;
            if(!self.modified)
                return;
            self.data = new Array();
            self.db.transaction(function(tx){
                tx.executeSql('SELECT name,url FROM listing',[],function(tx,rs){
                    console.log(callback)
                    for(var i = 0; i<rs.rows.length;i++)
                    {

                        callback(rs.rows.item(i).name,rs.rows.item(i).url)
                        // var row = rs.rows.item(i)
                        // var n = new Object()
                        // n['name'] = row['name'];
                        // n['url'] = row['url'];
                    }
                },function(tx,error){
                    //console.log('error',tx,error)
                })
            })
            self.modified = false
        },
        all:function(cb){
            this._load(cb)
        },
        toString:function(){
            return 'main.Database'
        }
    }
})(window.main.classes);

window.main={}；
window.main.classes={}；
（功能（awe）{
awe.Data=函数（opts）{
opts=opts | |新对象（）；
返回this.init（opts）；
};
awe.Data.prototype={
初始化：函数（opts）{
var self=这个；
self.modified=true；
var db=self.db=openDatabase（“buddy”、“1.0”、“LocalDatabase”，200000）；
数据库事务（功能（tx）{
tx.executeSql（“如果不存在创建表列表（名称文本唯一，url文本唯一）”，[]，函数（tx，rs）{
$.each（window.rr，函数（索引，项）{
var i=“插入列表（名称、url）值（“+item.name+”，“+item.url+”）”；
tx.executeSql（i，[]，null，null）；
});
}，功能（发送，错误）{
});
});
自加载（）
归还这个；
},
添加：功能（项目）{
var self=这个；
self.modified=true；
自数据库事务（功能（tx）{
tx.executeSql（“插入列表（名称，url）值（？，）”，[item.name，item.url]，函数（tx，rs）{
//console.log（'success'，tx，rs）
}，功能（发送，错误）{
//console.log（'error'，error）
})
});
自加载（）
},
删除：功能（项目）{
var self=这个；
self.modified=true；
自数据库事务（功能（tx）{
tx.executeSql（“从列表中删除，其中name='”+item.name+'”，[]，函数（tx，rs）{
//console.log（'success'，tx，rs）
}，功能（发送，错误）{
//console.log（'错误'，发送，错误）；
});
});
自加载（）
},
_加载：函数（回调）{
var self=这个；
如果（！self.modified）
回来
self.data=新数组（）；
自数据库事务（功能（tx）{
tx.executeSql（'从列表中选择名称、url'，[]，函数（tx、rs）{
console.log（回调）
对于（var i=0；i，通过查看上面的代码，我注意到您正在API中的每个函数末尾执行“self.\u load（）”。HTML5 SQL数据库是异步的，您永远无法保证结果。在这种情况下，我假设结果总是0或随机的，因为这是一个竞争条件

我在我的fb exporter扩展中做了类似的事情，请随意看看我是如何做到的

要解决这样的问题，您是否检查了Web检查器并查看后台页面中是否出现任何错误。我假设这都在后台页面中，嗯？尝试查看是否出现任何错误，如果没有，我相信您遇到了竞争条件。只需在回调中移动负载，它就会正确调用负载

关于
unlimited storage
manifest属性的第一个问题，在这种情况下，您不需要它，这不应该是问题所在。web数据库的限制是5MB（我记得，它可能已经更改），如果您使用大量数据操作，那么您就使用该属性

只要确保您可以保证
此.database.all在数据库初始化后运行

this.database.all(function(name,url){
       console.log('name','url')
       console.log(name,url)

       var data = []
       $.each(data,function(index,item){
           try{
               var node = $('<div > <a href="'+item.url+'">'+item.name + '</a></div>');
               self.content.append(node);
               node.unbind();
               node.bind('click',function(evt){
                   var t = $(evt.target).attr('href');
                   chrome.tabs.create({
                       "url":t
                   },function(evt){
                       self._tab_index = evt.index
                   });
               });
           }catch(e){
               console.log(e)
           }
       })    
   });