如何查询外部域,将其存储在chrome扩展名中,并将其调用以在popup.html中显示?

时间:2013-08-29 21:50:08

标签: javascript google-chrome-extension local-storage

当我在popup.html中加载https文件时,会造成很大的延迟。

为了解决这个问题,如何在background.js中添加一个函数,每次打开浏览器,获取版本号并将其存储在本地?

然后,一旦存储在本地,尝试获取此内部资源时没有延迟(而不是每次单击扩展弹出按钮时尝试加载外部https javascript文件)。

之后,如何在popup.html中调用所述内部资源?

概要
*如何在每个初始浏览器加载时获取远程文本值? *如何在本地存储该值?
*如何获取当前存储的数字以显示在popup.html中?

整个外部文件就是这样:

function myVersion1(){ return "1.0"; }

换句话说,我想在本地存储1.0的值,稍后在popup.html中调用。然后说我将外部文件中的数字更改为2.0,然后我希望扩展程序查询此内容并在下次用户打开浏览器时将当前存储的1.0更新为2.0。

2 个答案:

答案 0 :(得分:1)

您可以使用Chrome本地存储,您可以存储如下值:

chrome.storage.local.set({'foo': bar});

并像这样检索它:

chrome.storage.local.get('foo', function (result) {
    var foo = result['foo'];
    if(typeof foo === 'undefined') // not set
});

如果您这样做,则需要将其添加到清单文件中:

"permissions" : ["storage"],

答案 1 :(得分:0)

我远不是Chrome扩展专家,但我在第三方简单的基于远程HTTP的服务上遇到了类似的问题,我希望将其整合到Chrome扩展程序中。这可能有助于外部域查询部分,您可以将其与Matthew Riches的本地存储建议结合使用。

从我的popup.js中我向远程服务器添加了一个AJAX请求。如果需要,您可以在定时间隔内从background.js执行此操作。

var status = "http://192.168.1.28:8081/";
window.onload = function(){
$.ajax({
      type: 'GET',
      url: status,
      dataType: 'html',
      success: function(data) {
          try {
            // Do what you want with the data, like local storage, etc...
          } catch(e) {
            $('#status').text("Error: " + e.message);
            return;
          }
      }
});

}

但是,您需要在manifest.json中为远程服务器的域/ IP添加“权限”。如果您没有这样的AJAX请求将被视为跨域请求安全违规。例如通常情况下,您不会被允许从另一个域请求数据,例如www.google.com从www.mybadsite.com加载AJAX。

{
  "name": "Test",
  "version": "0",
  "background": {"page": "background.html"},
  "manifest_version": 2,
  "browser_action": {
    "default_title": "Test",
    "default_popup": "status.html",
    "icons": ["icon.png"],
    "default_icon": "icon.png"
  },
  "content_scripts": [ {
    "js": [ "jquery.js", "content.js" ],
    "css": ["customStyles.css"],
    "matches": [ "http://*"]
  }],
  "permissions": [
      "http://192.168.1.28/"
  ]
}

还有其他方法可以在内容脚本之间共享数据。您可以向DOM /文档添加事件侦听器,然后从正在运行的其他位置(例如background.js和popup.js)调度它。这是另一个SO帖子,其中有一个简单的例子:(请注意,它与外部查询无关,请参阅上面的注释以获取更多信息,或者搜索CORS)

How do I pass back data from a remote window to a chrome extension's background page?