Question

是否可以在浏览器扩展中的后台和内容脚本之间传输对象？

我希望我的后台脚本能够处理我的浏览器内存储。我的内容脚本应该跟踪用户交互并存储它们。因此，我计划使用单例模式来获取实例，如果我的“抽象”存储引擎来自后台脚本，以避免在用户记录交互时同步问题并同时通过浏览器扩展的UI管理他的数据。

我的第一次尝试看起来像这样：

后台脚本

var StorageEngine, _StorageEngine;

StorageEngine = (function() {
  var _instance;
  function StorageEngine() {}
  _instance = null;
  StorageEngine.getInstance = function() {
    return _instance != null ? _instance : _instance = new _StorageEngine;
  };
  return StorageEngine;
})();

_StorageEngine = (function() {
  function _StorageEngine() {}
  _StorageEngine.prototype.sayMyName = function(message) {
    return 'hello ' + message;
  };
  return _StorageEngine;
})();

内容脚本

(function() {
  kango.invokeAsync('StorageEngine.getInstance', function(val) {
    var asd;
    if (val) {
      debugger;
    }
    asd = val.sayMyName('Alice');
    return kango.console.log(asd);
  });
}).call(this);

val未定义，如果googles调试器值得信任，但函数sayMyName未定义，则它是一个对象。

Answer 1

Chrome扩展程序内容脚本位于isolated worlds，这意味着它们共享DOM，但具有单独的JavaScript 沙箱。

因此kango.invokeAsync函数和所有变量都无法访问content script。如果你想利用页面JS变量和函数定义内容脚本，就像这里一样。

var script = document.createElement('script'); // Create a Script Tag
script.src = chrome.extension.getURL("yourscript.js"); //Fetch the content script
script.onload = function () {
    this.parentNode.removeChild(this); //Remove script after script executed
};
(document.head || document.documentElement).appendChild(script); //ADD script tag 
                                                       //to head or Html element

您的代码在内容脚本和背景页面之间没有任何communication机制。为您的所有功能要求添加消息通信system。

参考文献：

Answer 2

由于浏览器的限制，您无法将函数从后台传递到内容脚本，因此只能传递JSON可序列化数据。

尝试以这种方式使用存储：

// background script
var storage = StorageEngine.getInstance();

// content script
kango.invokeAsync('storage.sayMyName', 'Alice', function(val) {
    kango.console.log(val);
});

如何在kango框架中在后台和内容脚本之间传输对象

2 个答案:

参考文献：