javascript对象无法看到对方? :: google chrome扩展程序

时间:2010-09-29 09:51:22

标签: javascript object google-chrome-extension

我有两个文件

一个名为stats.js

一个名为storage.html

in stats.js in contains

var stats = {
  myFunc : function() {
    //do something
  }
}

在storage.html中我有

<html>
<head>
<script src="stats.js"></script>
<script>
$(document).ready(function() {
   stats.myFunc(); 
});
</script>
</head>
</html>

但是我得到了

  

未捕获的TypeError:无法调用未定义的方法'myFunc'

<小时/> 的更新
好的,这是一个非常简化的例子。

它的基础是,

这是一个Google Chrome扩展程序,因此您会看到一些特定于此的代码。

以下是有关的文字页面:

Popup.html

<html>
    <head>
        <title>Extension</title>
        <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script src="js/popup.js"></script>
        <script src="js/statsapi.js"></script>
        <link type="text/css" rel="stylesheet" href="css/popup.css" />
    </head>
    <body>
        <div id="content">
        </div>
    </body>
</html>

popup.js

$(document).ready(function() {
    if(background.storage.get('firstRun') == null)
        background.initialize();

    if(background.storage.get('metaExpire') >= Date.parse(Date()))
        background.updateMeta();

    $('#content').append(read_object(stats.getMetaData()));
});

function read_object(object){
    var $obj = $('<div />');
    for(var o in object) {
        $obj.append(o+' : ');
        if(typeof(object[o]) == 'object' && object[o] != null)
            $obj.append(read_object(object[o]));
        else
            $obj.append(object[o]+'<br />');
    }
    return $obj;
}

的manifest.json

{
  "name": "Halo Reach: Stats",
  "description": "This extension allows you to keep track of your own, and your friends Halo Reach Stats.",
  "version": "1.0.0.1",
  "permissions": [
    "http://www.bungie.net/"
  ],
  "icons": { 
      "128": "images/logo/logo128.jpg",
      "64": "images/logo/logo64.jpg",
      "32": "images/logo/logo32.jpg",
      "16": "images/logo/logo16.jpg"
  },
  "browser_action": {
    "default_title": "Open Stats",
    "default_icon": "images/logo/logo32.jpg",
    "popup": "popup.html"
  },
  "background_page": "background.html"
}

statsapi.js

var background  = chrome.extension.getBackgroundPage();
var apikey      = background.storage.get('apikey');
var gamertage   = background.storage.get('gamertag');
var page        = '0';

var stats = {
    getMetaData : function() {
        var url = 'http://www.bungie.net/api/reach/reachapijson.svc/game/metadata/'+apikey;
        console.log(url);
        $.ajax({
            url: url,
            success: function(data) {
                return data;
            }
        });
    },

    meta : {
        read : function(param) {
            var meta = background.storage.get('metaData');
        }
    }
};

Background.html

<html>
    <head>
        <script src="js/statsapi.js"></script>
        <script>
            var storage = {
                set : function (key, value) {
                    window.localStorage.removeItem(key);
                    window.localStorage.setItem(key, value);
                },            
                get : function (key) {
                    return window.localStorage.getItem(key);
                },            
                clear : function () {
                    window.localStorage.clear();
                }
            };

            function updateMeta() {
                var meta = stats.getMetaData();
                if(meta['status'] == 0){
                    storage.set('metaData', JSON.stringify(meta));
                    storage.set('metaExpire', Date.parse(Date())+900000);
                }
            }

            function initialize() {
                storage.set('apikey', '***');
                storage.set('gamertag', 'The Hailwood');
                updateMeta();
            }
        </script>
    </head>
</html>

调用扩展程序时,会调用popup.html

并调用文档就绪的javascript。

首次检查失败,

所以它在background.html中调用initialize()

但这是发生错误的地方。

实际错误是

  

未捕获的TypeError:无法调用未定义的方法'getMetaData'。

那为什么不能看到统计类?

它不是一个脚本包含问题,好像我的statsapi.js的路径是错误的

  

未捕获的ReferenceError:未定义统计信息。

问题似乎与var stats {}一样,好像我有一个名为test()的函数我可以称之为罚款:/

嗯,

是否存在问题,因为它是外部样式表?

3 个答案:

答案 0 :(得分:1)

我怀疑错误位于其他地方 - 这些是我的例子:

mark@localhost:~/ccsite$ cat cat.js 
var stats = {
  myFunc : function() {
    alert('wtf');
  }
}


mark@localhost:~/ccsite$ cat hat.htm 
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script src="cat.js"></script>
<script>
$(document).ready(function() {
   stats.myFunc(); 
});
</script>
</head>
</html>

在FF,IE6或Chrome中查看hat.htm会生成警报“wtf”。正如所写,你得到$是未定义的,因为它当然不包括jQuery,所以我补充说。

所以,你的问题可能在其他地方。我假设这是一个简化的例子 - 你的页面还有什么?

答案 1 :(得分:1)

这是因为您的代码中存在一些语法错误。我有同样的问题。我在火狐中打开了我的background.html页面并启用了火焰插件。 Fire-bug控制台应该是我的错误,我修复了它现在正在运行。

答案 2 :(得分:0)

我怀疑是因为你在你的弹出窗口和后台页面都加入了js/statsapi.js脚本,所以当你在弹出窗口中有2个时,它会混淆你指的是哪个属性 - 一个包含在{{在调用script

后,1}}标记和从背景页面加载的另一个标记