Chrome扩展存储自定义对象类型剥离原型方法

时间:2016-04-25 01:21:48

标签: javascript google-chrome-extension

我创建了一个我在扩展程序中使用的自定义对象。当我保存Group类型的对象(我的对象类型)然后将这些对象从存储中拉出时,似乎原型方法不再存在。现在我在文档中读到对象序列化为对象文字{},我似乎无法弄清楚如何将方法与对象保持一致。我已经提供了下面的小组课程的代码。当我尝试使用下面文件中的一个方法对从存储中检索的对象时,我得到一个错误,该函数不存在。我使用for循环遍历所有属性,对象具有name和urls属性。任何帮助将不胜感激!

Group.js:

// Create the Group class
var Group = function (name, urls) {
  this.name = name;
  this.urls = urls;
};

// Clears all urls from the group
Group.prototype.clearUrls = function () {
  this.urls = [];
};

// Adds the specified url to the group
Group.prototype.addUrl = function (url) {
  this.urls.append(url);
};

// Removes the specified url from the group
Group.prototype.removeUrl = function (url) {
  this.urls = this.urls.filter(function(_url){
    return url !== _url;
  });
};

// Renames the group
Group.prototype.rename = function (name) {
  this.name = name;
};

// Checks whether or not the group contains the specified url
// Returns either true or false
Group.prototype.containsUrl = function (url) {
  var contains = false;
  for (var i = 0; i < this.urls.length; i++) {
    if (this.urls[i] === url) {
      contains = true;
      break;
    }
  }
  return contains;
};

编辑:

这是background.js脚本,它显示了如何检索对象,以及稍后如何在脚本中调用它。它在收到addUrl消息并尝试在currentGroup上调用containsUrl()时失败。

// Global Variables
var currentGroup;
var groups = [];
var options = [];

// Short hand function to save the current data to storage
var saveData = function () {
  // Save default options, currrentGroup, and groups
  chrome.storage.sync.set({'options': options, 'currentGroup': currentGroup, 'groups': groups}, function() {
    if (chrome.runtime.lastError) {
      console.error("Could not save because: " + chrome.runtime.lastError);
    }
  });
}

// On start query for saved data to make sure data is current
chrome.storage.sync.get(function(items) {
  // Check if there are groups
  if (items['groups']) { // Set the groups
    groups = items['groups'];
  } else { // Create default group and add to list of groups
    currentGroup = new Group('default', []);
    groups = [currentGroup];
  }

  // Check for current group, if none set to first available group
  if (items['currentGroup']) {
    currentGroup = items['currentGroup'];
    console.log(Object.getOwnPropertyNames(currentGroup));
  } else {
    currentGroup = groups[0];
  }

  // Check for the options
  if (items['options']) {
    options = items['options'];
  } else {
    // No options, set the default options and save them
    options['overrideHomepages'] = true;
  }

  saveData();

  // After data has been fetched bring up the tabs
  chrome.tabs.query({'currentWindow': true}, function(tabs) {
    for (var i = 0; i < currentGroup.urls.length; i++) {
      if (options['overrideHomepages']) {
        if (tabs[i].url.length > 0) {
          chrome.tabs.update(tabs[0].id, {'url': currentGroup.urls[i]});
        } else {
          chrome.tabs.create({'url': currentGroup.urls[i]});
        }
      } else { // Don't override homepages or open tabs
        chrome.tabs.create({'url': currentGroup.urls[i]});
      }
      currentGroup.urls[i]
    }
  }); // End tabs.query

}); // End storage.sync.get

// Add message listener
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

  // If add url was sent
  if (request.message === 'addUrl') {
    console.log('Recieved message: ' + request.message);
    // Check if the group contains the url already
    if (currentGroup.containsUrl(sender.url) === false) {
      currentGroup.addUrl(sender.url);
      saveData();
      sendResponse({'message': 'Saved ' + sender.url});
    }
  }

  // If remove url was sent
  if (request.message === 'removeUrl') {
    // Check if the group contains the url
    if (currentGroup.containsUrl(sender.url)) {
      currentGroup.removeUrl(sender.url);
      saveData();
      sendResponse({'message': 'Removed ' + sender.url})
    }
  }
});

1 个答案:

答案 0 :(得分:1)

我相信目前chrome.storage仅用于保存键值项,不包括原型/函数。但是,我没有找到任何关于此的官方文档。

一种解决方法是使用Group.prototype.containsUrl.call(currentGroup, sender.url),它允许您通过指定containsUrl的上下文来调用"this"