2011-06-28 64 views
0

我想用我在本地数据库中生成的锚点列表来更新div。这是非常简单的东西,但只要我尝试通过回调将数据添加到main.js文件,所有内容突然变得不确定。或者将数组长度设置为0.(当它真的是18时)。Chrome扩展与数据库API接口

最初,我尝试将它安装到一个新数组中并将其传回。

是否存在一个设置,我需要在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); 

和代码更新列表。

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) 
      } 
     })  
    }); 

回答

0

从上面的代码看,我注意到你正在执行“self._load()”在API中每个函数的末尾。 HTML5 SQL数据库是异步的,你永远不能保证结果。在这种情况下,我会假设结果将始终为0或随机,因为这将是一种竞争条件。

我已经做了我的FB-出口扩展类似的东西,随便怎么看我都做到了https://github.com/mohamedmansour/fb-exporter/blob/master/js/database.js

要解决的一个问题就是这样,你检查Web检查,看看是否在发生任何错误背景页面。我认为这是全部在后台页面呃?试着看看是否有错误发生,如果没有,我相信你遇到了一个竞争条件。只需在回调中移动负载,并且它应该正确调用负载。

关于您的第一个问题与unlimited storage清单属性,你不需要它在这种情况下,这不应该是问题。 Web数据库的限制是5MB(最后我记得,它可能已经改变),如果你使用大量的数据操作,那么你使用该属性。

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