Need Help Display DOM Content For Google Chrome Extension - javascript

I am creating a Google Chrome Extension that uses a script that works perfectly well in Google Chrome's console.
However, I am trying to use this same script beyond just printing the information in console.
How would I be able to somehow create HTML elements that contain this information within the popup.html page? I know that this idea might have to use the callback function within
Here is my code:
manifest.json
{
"manifest_version": 2,
"name": "MR QC Auditor View",
"version": "1.0",
"description": "This Google Chrome extension shows Ad ID's for print ads, and then links to Ad Tagger for tagging corrections",
"icons": {
"128": "MRLogo128.png",
"48": "MRLogo48.png",
"16": "MRLogo16.png"
},
"browser_action":{
"default_icon": "MRLogo16.png",
"default_popup": "popup.html"
},
"permissions": [
"storage",
"tabs",
"activeTab"
]}
popup.html:
<!DOCTYPE html>
<html>
<head>
<title>MR QC Auditor View</title>
<script src="jquery-3.3.1.min.js">
</script>
<script src="popup.js">
</script>
</head>
<body>
<img src="MRLogo128.png"/>
<h1>Current Ad's Brand: <h1><span id="brandNameText"></span>
<h2>Link To Ad Tagger</h2><span>Link</span>
</body>
</html>
popup.js:
// Current Post To Look At:
// https://stackoverflow.com/questions/4532236/how-to-access-the-webpage-dom-rather-than-the-extension-page-dom
// Related Google + Group Post:
// https://groups.google.com/a/chromium.org/forum/#!topic/chromium-extensions/9Sue8JRwF_k
// Use chrome.runtime.onMessage()
// Documentation:
// https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript
// chrome.tabs.executeScript():
// https://developer.chrome.com/extensions/tabs#method-executeScript
/*
Old Code Block;
chrome.tabs.executeScript({file: 'jquery-3.3.1.min.js'}, function () { chrome.tabs.executeScript({code: 'var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); ', allFrames: true}, function(stuff){
chrome.runtime.sendMessage({greeting: "hello"}, function(){
// Call chrome.runtime.sendResponse()
// console.log("DOM Content Sent To Chrome Extension Webpage");
})
}}); });
*/
// Added an array called "adArray" that utilizes the .push() JavaScript array function
// I need to somehow add this to the popup.html page itself, look for the StackOverflow related pages.
chrome.tabs.executeScript({file: 'jquery-3.3.1.min.js'}, function (adArray) { chrome.tabs.executeScript({code: 'var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); var adArray = []; for (var i = 0; i<printAds.length; i++){console.log("Current Ad Id = " + $(printAds[i]).attr("data-adid")); adArray.push($(printAds[i]).attr("data-adid"))}', allFrames: true}); });
/*
Console Based Code That Works:
$("#ad-image printadviewable pointer").find("img").attr("data-adid");
var printAds = document.getElementsByClassName("ad-image printadviewable pointer");
for (var i = 0; i<printAds.length; i++){console.log("Current Ad Id = " + $(printAds[i]).attr("data-adid"));}
*/
// One Line Version For Code Dictionary Key
// 'var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); for (var i = 0; i<printAds.length; i++){console.log("Current Ad Id = " + $(printAds[i]).attr("data-adid"));}'

Related

Execute chrome extension on website after loading

I'm new to stackoverflow and even new to programming. I just started to learn to progam online and I am trying to make my first google extension.
(but because I am a complete newbie the code might also look terrible - and not efficient)
I want to make a google extension that hides/shows certain threads on a forum (related to facebook, instagram, twitter, ...) based on the values of check boxes in the popup.html of the google extension.
I have most of the code working.
If you click the google extension a pop up is shown and check boxes can be set. After hitting the 'instellingen bewaren' button these settings are saved to chrome.storage and implemented.
Also when you are on the forum and click the chrome extension the filtering of the threads is done based on your last settings.
The problem I have is that I want the filtering to be done alread when the forum page is loaded. I now always have to click the chrome extension icon to start the filtering. If I go to another page on the forum I need to click the extension again to start filtering again.
I have a feeling that all the things I am trying are resulting in the code to be executed after loading the popup.html instead of loading the forum page (at least that is what I conclude when I look at the console of both pages and perform some console.log commands).
Things I tried:
making a background.js file and using the command (also updated the manifest.json file): chrome.tabs.onUpdated.addListener
placing this in my content.js file:
document.addEventListener("DOMContentLoaded", filter);
or
chrome.tabs.onUpdated.addListener
or
window.
This is the current code:
manifest.json
{
"manifest_version": 2,
"name": " Schifters tool",
"permissions": [ "tabs", "activeTab", "storage" ],
"version": "0.1",
"icons": {
"128": "images/S-128.png",
"16": "images/S-16.png",
"48": "images/S-48.png"
},
"browser_action": {
"default_icon": "images/schifters.png",
"default_popup": "popup.html"
},
"description": " Schifters Tool",
"content_scripts": [
{
"matches": [
"https://schifters.be/viewforum.php*"
],
"js": ["content.js"]
}
]
}
popup.html
<!doctype html>
<html>
<head>
<title>Schifters Tool</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
<body>
<div class="modal-header">
<h1 class="logo">
Schifters Tool
<span href="https://schifters.be/index.php" class="version">(1.0.0)</span>
</h1>
</div>
<form>
<div class="activeerFilters">
<p>Geef aan welke posts verborgen moeten worden:</p>
</div>
</form>
<form>
<div class="filters">
<label for="facebook"><input id="facebook" type="checkbox" name="filtering"> Facebook wedstrijd</label>
</div>
</form>
<button id="save">Instellingen bewaren</button>
<div id="status"></div>
<script src="content.js"></script>
</body>
</html>
content.js
// Saves options to chrome.storage
function save_options() {
var facebook = document.getElementById('facebook').checked;
chrome.storage.sync.set({
facebookStatus: facebook,
}, function() {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Instellingen zijn bewaard';
setTimeout(function() {
status.textContent = '';
}, 750);
filterAlles();
});
}
// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
chrome.storage.sync.get({
facebookStatus: false,
}, function(items) {
document.getElementById('facebook').checked = items.facebookStatus;
// filtering of the threads
filterAlles();
});
}
function filterAlles() {
filterFacebook();
}
function filterFacebook() {
if(document.getElementById('facebook').checked) {
chrome.tabs.executeScript(null, {file: "verbergFacebook.js"});
} else {
chrome.tabs.executeScript(null, {file: "toonFacebook.js"});
}
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click', save_options);
toonFacebook.js
{
// place all posts in an Array
const topics = Array.from(document.querySelector('[class="forumbg"]').querySelectorAll('ul>li'));
// show facebook posts
for (var i = 0; i < topics.length; ++i) {
// console.log(topics[i].textContent);
if (topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]') !== null ){
console.log('ok')
topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]').parentNode.parentNode.style.display = "";
} else {
// console.log('nok')
}
}
}
verbergFacebook.js
{
// place all posts in an array
const topics = Array.from(document.querySelector('[class="forumbg"]').querySelectorAll('ul>li'));
// hide all facebook posts
for (var i = 0; i < topics.length; ++i) {
// console.log(topics[i].textContent);
if (topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]') !== null ){
console.log('ok')
topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]').parentNode.parentNode.style.display = "none";
} else {
// console.log('nok')
}
}
}
and like the last 2 js. files there a a lot of extra files. Each time one for hiding a certain type of threads and one for showing a certain type of threads.
Maybe it is not efficient to have this code in ~20 different files? But I couldn't get my checkbox values working in these .js files.?
I expect the chrome extension to filter the threads on the forum (based on the settings of the check boxes from last time) immediately after loading the forum page.
The filter option already works when the extension popup is shown or when you change checkbox settings and click the button on the popup.html page.
But this last function is a mystery for me :)
Thnx in advance!
I' have it working. (more ore less)
The setup is as follows:
Manifest.json
{
"manifest_version": 2,
"name": " Schifters tool",
"permissions": [ "tabs", "activeTab", "storage" ],
"version": "0.1.1",
"icons": {
"128": "images/Schifters.png",
"16": "images/Schifters-16x16.png",
"32": "images/schifters-32x32.png"
},
"browser_action": {
"default_icon": "images/schifters.png",
"default_popup": "popup.html"
},
"description": " Schifters Tool",
"content_scripts": [
{
"matches": [
"https://schifters.be/viewforum.php*"
],
"js": ["content.js", "popup.js"]
}
]
}
popup.html
<!doctype html>
<html>
<head>
<title>Schifters Tool</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
<body>
<div class="modal-header">
<h1 class="logo">
<img class="logo-icon" src="images/Schifters.png"> Schifters Tool
<span href="https://schifters.be/index.php" class="version">(0.1.1)</span>
</h1>
</div>
<form>
<div class="activeerFilters">
<p>Geef aan welke posts verborgen moeten worden:</p>
<p><label for="activeerFilters"><input id="activeerFilters" type="checkbox" name="activeerFiltering">Activeer de filter opties</label></p>
</div>
</form>
<form>
<div class="filters">
<label for="gespeeld"><input id="gespeeld" type="checkbox" name="filtering"> <img src="./images/GESPEELD.png" alt="GESPEELD"> GESPEELD</label>
<label for="facebook"><input id="facebook" type="checkbox" name="filtering"> <img src="./images/facebookWedstrijd.png" alt="Facebook wedstrijd"> Facebook wedstrijd</label>
</div>
</form>
<button id="save">Instellingen bewaren</button>
<div id="status"></div>
<script src="content.js"></script>
<script src="popup.js"></script>
</body>
</html>
content.js
var topics = Array.from(document.querySelector('[class="forumbg"]').querySelectorAll('ul>li'));
function filterAlles(){
chrome.storage.sync.get({
activeerFiltersStatus: false,
gespeeldStatus: false,
facebookStatus: false
}, function(items) {
console.log("we zitten in de loop van de nieuwe functie");
for (var i = 0; i < topics.length; ++i)
{
if ( items.activeerFiltersStatus &&
((topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]') !== null && items.facebookStatus) ||
(topics[i].querySelector('[title="Markering verwijderen"]') !== null && items.gespeeldStatus))
)
{
console.log('ok - we gaan filteren');
if (topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]') !== null){
topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]').parentNode.parentNode.style.display = "none";
}
if (topics[i].querySelector('[title="Markering verwijderen"]') !== null){
topics[i].querySelector('[title="Markering verwijderen"]').parentNode.parentNode.parentNode.parentNode.style.display = "none";
}
}
else
{
if (topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]') !== null){
topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]').parentNode.parentNode.style.display = "";
}
if (topics[i].querySelector('[title="Markering verwijderen"]') !== null){
topics[i].querySelector('[title="Markering verwijderen"]').parentNode.parentNode.parentNode.parentNode.style.display = "";
}
}
}} );
}
filterAlles();
(this is now correctly run when my forum page is loaded)
and only one other .js file this time
popup.js
// Saves options to chrome.storage
function save_options() {
var activeerFilters = document.getElementById('activeerFilters').checked;
var gespeeld = document.getElementById('gespeeld').checked;
var facebook = document.getElementById('facebook').checked;
chrome.storage.sync.set({
activeerFiltersStatus: activeerFilters,
gespeeldStatus: gespeeld,
facebookStatus: facebook
}, function() {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Instellingen zijn bewaard';
setTimeout(function() {
status.textContent = '';
}, 750);
// filterAlles();
chrome.tabs.executeScript(null, {file: "content.js"})
});
}
// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
chrome.storage.sync.get({
activeerFiltersStatus: false,
gespeeldStatus: false,
facebookStatus: false
}, function(items) {
document.getElementById('activeerFilters').checked = items.activeerFiltersStatus;
document.getElementById('gespeeld').checked = items.gespeeldStatus;
document.getElementById('facebook').checked = items.facebookStatus;
if(document.getElementById('activeerFilters').checked) {
document.getElementById("gespeeld").disabled = false;
document.getElementById('facebook').disabled = false;
} else {
document.getElementById("gespeeld").disabled = true;
document.getElementById('facebook').disabled = true;
}
});
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click', save_options);
var checkbox = document.getElementById("activeerFilters");
// Dit zorgt ervoor dat de checkboxen sensitief worden als je de 'activeer filters optie' selecteert
checkbox.addEventListener( 'change', function() {
if(this.checked) {
document.getElementById("gespeeld").disabled = false;
document.getElementById('facebook').disabled = false;
} else {
document.getElementById("gespeeld").disabled = true;
document.getElementById('facebook').disabled = true;
}
});
In this setup the threads are hidden when the page is loaded (based on the last settings of the check boxes in the popup.html file).
When settings are changed in the popup.html file then these changes are also applied.
So is seems to be working.
However I get some errors in console (and I don't know if this is an issue or not).
When I go to the console of the popup.html file I get this error:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at popup.js:48
it's referring to this line of code:
document.getElementById('save').addEventListener('click', save_options);
And that seems logical as the 'forum webpage' doesn't have the save button (that button is in the popup.html file).
Do I need to change anything in my code to avoid this? Or can I just ignore it?
The other error is in the popup.html console:
Uncaught TypeError: Cannot read property 'querySelectorAll' of null
at content.js:1
it's referring to this line of code:
var topics = Array.from(document.querySelector('[class="forumbg"]').querySelectorAll('ul>li'));
I think this is because the 'document.' should be changed to 'chrome.tabs.' when run from the popup.html page. But I find it strange that the forum threads are hidden correctly. How is it possible that this is working from the popup.html file if we can't placed the forum threads in an array.

Display Date and save it into a text file using Chrome Extension [duplicate]

This question already has answers here:
The Chrome extension popup is not working, click events are not handled
(2 answers)
How to fix chrome-extension inline JavaScript invocation error?
(3 answers)
Closed 5 years ago.
I am creating an extension that tracks the specific url and displays the date when that url is accessed then saves it into a text file. It works when I just run the page and script but when adding it to chrome it does nothing.
Manifest.json
{
"name": "Login Tracker",
"version": "0.1",
"manifest_version": 2,
"description": "A Chrome Extension that records the time that you log in",
"browser_action": {
"default_icon": "icon.png",
"default_title": "Login Tracker"
},
"permissions": ["tabs",
"background", "browsingData", "contextMenus", "downloads"
],
"background": {
"scripts": ["loginPage.js", "func.js"]
}
}
loginPage.html
<html>
<head>
<script type="text/javascript" src="func.js">
</script>
</head>
<body>
<h1>Login Tracker</h1>
<p id=demo></p>
<button type="button" onclick="myFunction()">Login</button>
</body>
</html>
func.js
function myFunction() {
var d = new Date();
document.getElementById("demo").innerHTML = d;
var textToSave = d;
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' +
encodeURI(textToSave);
hiddenElement.target = '_blank';
hiddenElement.download = d;
hiddenElement.click();
}
loginPage.js
chrome.browserAction.onClicked.addListener(function (activeTab) {
var newURL = "loginPage.html";
chrome.tabs.create({
url: newURL
});
});
Any idea why it does not do anything even just displaying the date? Its working when I view it in local but it does not do anything when being added to chrome. Any help will be appreciated.

extract text from pdf in chrome extensions

I am developing a chrome extensions. What i want to realize is that the popup can display the text from pdf. I have searched the PDF.js and write the following code in backgroud.js of chrome extensions to test:
‘use strict’;
var pdf = PDFJS.getDocument('http://www.pacer.gov/documents/pacermanual.pdf');
var pdf = PDFJS.getDocument('pacermanual.pdf');
pdf.then(function(pdf) {
var maxPages = pdf.pdfInfo.numPages;
for (var j = 1; j <= maxPages; j++) {
var page = pdf.getPage(j);
// the callback function - we create one per page
var processPageText = function processPageText(pageIndex) {
return function(pageData, content) {
return function(text) {
// bidiTexts has a property identifying whether this
// text is left-to-right or right-to-left
for (var i = 0; i < text.bidiTexts.length; i++) {
str += text.bidiTexts[i].str;
}
if (pageData.pageInfo.pageIndex ===
maxPages - 1) {
// later this will insert into an index
console.log(str);
}
}
}
}(j);
var processPage = function processPage(pageData) {
var content = pageData.getTextContent();
content.then(processPageText(pageData, content));
}
page.then(processPage);
}
});
The manifest is shown as follow:
{
"name": "englishhelper",
"version": "0.0.1",
"description": "",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"background":{
"script":["background.js","PDF.js"]
},
"browser_action":{
"default_icon":"icon_png",
"default_popup":"popup.html"
},
"manifest_version": 2
}
The popup.html is shown as follow:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="popup.css">
<title></title>
</head>
<body>
<script src="background.js"></script>
<script src="PDF.js"></script>
</body>
</html>
The console shows that "PDFJS is not defined". The "PDF.js" has been included in popup.html. Is it possible that chrome extension use PDF.js?
Wrong load order. (Do we have a canonical question for that?)
background.script or content_scripts[i].js key in the manifest is an array, in other words an ordered list.
Scripts are loaded and executed in the sequence defined there; you need to make sure libraries are loaded before they are used.
In your case, you need to swap them around:
"background":{
"script": ["PDF.js", "background.js"]
},
Same applies to the order of <script> tags in HTML, for instance in your popup.html

Simple chrome extension URL to send/show

I am trying to do something simple and somehow it does not work...
I am trying to build a simple chrome extension that when you click on it it is showing the URL of the TAB in a simple HTML. How can I do it? this is the code:
manifest.json
{
"name": "MY EXTENSION",
"version": "1.0",
"description": "the DESCRIPTION",
"browser_action": {
"default_icon": "icon.png",
"popup": "main.html"
},
"permissions": [
"tabs"
]
}
End of manifest.json
Main.html:
<html>
<head>
<title>my title</title>
<script src="jquery.json-2.3.min.js"></script>
<script type="text/javascript">
var pageUrl = null;
var pageTitle = null;
var Title1 = 'lala';
window.addEventListener("load", windowLoaded, false);
function windowLoaded() {
chrome.tabs.getSelected(null, function(tab) {
document.getElementById('currentLink').innerHTML = tab.url;
});
}
function get(){
chrome.tabs.getSelected(null, function(tab) {
pageUrl = tab.url;
pageTitle = tab.title;
$('#bkmk').attr('value',pageUrl);
$('#title').attr('value',pageTitle);
});
}
</script>
</head>
<body onload="get()">
<p id="currentLink">Loading ...</p>
<hr />
<ul id="savedLinks"></ul>
<tr><td align="right">Link (URL): </td><td><input id='bkmk' name='bkmk' type="text" value="" size="50">
<br><span style="color: red;"></span>
</td></tr>
<script>document.write($bkmk)</script>
</body>
</html>
=============
and I placed the jquery.json-2.3.min.js file in the same folder..
Anything I do I cannot make the HTML to show the URL..
Thanks!!
Elikd
It appers that you are using jQuery... but you don't have the jQuery library included in a <script src="..."></script> block anywhere. If you're using a local copy of jQuery, you need to include the jQuery library file in your extension directory and refer to its relative path in the extension relative to the HTML page (e.g., "jquery.min.js" if it's in the same folder or "lib/jquery.min.js" if it's in a folder called lib).
In the future, you can get a JavaScript console (with a list of errors) by right-clicking your browser action icon and selecting "Inspect popup". See Google's tutorial on debugging Chrome extensions for more information.

javascript objects cant see each other? :: google chrome extension

i have two files
one called stats.js
one called 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: Cannot call method 'myFunc' of undefined
Update
Ok so that was a really simplified example.
The basics of it are,
This is a google chrome extension, So you will see some code specific to that.
Here is the literal pages concerned:
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 invoked it calls popup.html
and the document ready javascript is invoked.
The check for first run fails,
so it calls initialize() in background.html
But this is where the error occurs.
the actual error is
Uncaught TypeError: Cannot call method 'getMetaData' of undefined.
So why can it not see the stats class?
its not a script include problem as if the path is wrong for the statsapi.js I get
Uncaught ReferenceError: stats is not defined.
The issue seems to be with the var stats {} as if under that I have a function called test() I can call that fine :/
Hmm,
is there an issue because it is an external stylesheet?
I suspect the error lies somewhere else - these are my examples:
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>
Viewing hat.htm in either FF, IE6 or Chrome produces the alert, 'wtf'. As written you'd get $ is undefined, since it's not including jQuery of course, so I added that.
So, your problems likely are elsewhere. I assume this is a simplified example - what else is going on in your page?
This is because there is some syntax error in your code. I had same problem. I opened my background.html page in fire fox with fire-bug plug-in enabled. Fire-bug console should me the error, I fixed and it is working now.
I have suspicions that it's because you include js/statsapi.js script into both your popup and background page, so it gets confused which stats you are referring to as you have 2 of them in the popup - one included through script tag and another one loaded from background page after you call chrome.extension.getBackgroundPage()

Categories