All geek questions in one place

Can't javascript objects see each other? :: google chrome extension

I have two files

one is called stats.js

one name storage.html

in stats.js in contains

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

in storage.html I have

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

But I get

Uncaught TypeError: unable to call myFunc method from undefined

Refresh
Good, so this was a really simplified example.

The basics of this,

This is a chrome google extension, so you will see some code specific to this.

Here are the literal pages:

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>

When the extension is called, it calls popup.html

and the finished javascript document is activated.

Error checking the first run,

so it calls initialize()in background.html

But here an error occurs.

actual error

Uncaught TypeError: getMetaData undefined.

?

a script , statsapi.js.

Uncaught ReferenceError: .

, , var stats {}, , test(), :/

,

, ?

+3
3

, - - :

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>

hat.htm FF, IE6 Chrome , 'wtf'. , $is undefined, jQuery, , .

, , , . , - ?

+1

, . . background.html fire fox . , .

+1

, , js/statsapi.js script , , , 2 , script , chrome.extension.getBackgroundPage()

0

Source: https://habr.com/ru/post/1767140/

More articles:


All Articles