We Keep Coding

Chrome Extension: WebQL database is not appearing in Inspector

I am trying to create database and tables in background.js file of Chrome but somehow it's not being created. When I see in Chrome Inspector > Resources > WebSQL, I find nothing. Code is given below:
function fetchData(){
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost/php/fetch.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
// JSON.parse does not evaluate the attacker's scripts.
var resp = xhr.responseText;
if(resp != null) {
var json = JSON.parse(resp)
console.log(resp);
var data = json['data'];
if(data != null) {
openDatabase('documents', '1.0', 'my storage', 5*1024*1024, function (db) {
alert('Called'); //This is not being called.
});
//var dbConnection = openDbConnect();
//createTable(dbConnection);
//Code below is called
for(var a=0;a <= data.length;a++) {
alert(data[a].title);
}
}
}
}
}
xhr.send();
}
Update
I guess it's being created: My Extension ID is bkjajbjnoadlhnhmfekipifehbhgidpg
In ~/Library/Application Support/Google/Chrome/Default/databases I find:
chrome-extension_bkjajbjnoadlhnhmfekipifehbhgidpg_0
But it's weird I can't see it in Inspector.
Update #2
Turns out that like pages, WebSQL is not visible across Chrome. It shows Db to the page which is visited. Now I am getting no idea how to excess chrome related Db in Viewer.

To access the inspector for the background page of your app, go to Menu>Settings>Extensions and make sure it's in Developer Mode. It should have a link to inspect the background page of your app in there. It will open up in a new window.

Chrome: message content-script on runtime.onInstalled

I'm the maker of an addon called BeautifyTumblr which changes the apperance of Tumblr.
I wish for my Chrome extension to automatically detect when it has been updated and display changelog to the user. I use an event page with the chrome.runtime.onInstalled.addListener hook to detect when an update has occured, retrieve the changelog from a text file in the extension.. this all works fine, then when I want to forward it to my content script via chrome.tabs.sendmessage it just wont work, nothing ever happens, no errors no nothing. I'm stumped.
Any help would be much appreciated!
Event Page:
chrome.runtime.onInstalled.addListener(function (details) {
"use strict";
if (details.reason === "install") {
} else if (details.reason === "update") {
var thisVersion = chrome.runtime.getManifest().version, xmlDom, xmlhttp;
xmlDom = null;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", chrome.extension.getURL("changelog.txt"), false);
xmlhttp.send(null);
xmlDom = xmlhttp.responseText;
chrome.tabs.query({'url' : 'http://www.tumblr.com/*'}, function (tabs) {
if (tabs.length > 0) {
var mTab = tabs[0].id;
chrome.tabs.update(mTab, {active: true});
setTimeout(chrome.tabs.sendMessage(mTab, {beautifyTumblrUpdate: xmlDom}), 500);
} else {
chrome.tabs.create({'url' : 'http://www.tumblr.com/dashboard'}, function (tab) {
setTimeout(chrome.tabs.sendMessage(tab.id, {beautifyTumblrUpdate: xmlDom}), 500);
});
}
});
}
});
Relevant code in Content Script:
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
"use strict";
window.alert('test');
if (request.beautifyTumblrUpdate) {
window.alert(request.beautifyTumblrUpdate);
} else if (request.beautifyTumblrInstall) {
window.alert(request.beautifyTumblrInstall);
}
}
);

I am also seeing the same thing. I am not a 100% sure but I think this happens because chrome shuts off connection between background page and "old" content scripts the moment the extension is updated. There's more info here in this bug : https://code.google.com/p/chromium/issues/detail?id=168263

simple, use the following code in background,
chrome.runtime.onInstalled.addListener(function(details){
if(details.reason == "install"){
chrome.tabs.create({ url: chrome.extension.getURL('welcome.html')});
}
});

How to check for internet connection without having to refresh my whole page

I want the following function to be called every x seconds, so I don't have to refresh my page.
var rq = new XMLHttpRequest();
rq.open('GET', "SAME DOMAIN ADDRESS", true);
rq.onreadystatechange = function() {
if(rq.readyState === 4) {
if(rq.status === 200) {
clearTimeout(xmlHttpTimeout);
window.location.href = "Tracker.html"; // if internet connection found, redirect.
} else {
}
}
};
rq.send("");
var xmlHttpTimeout=setTimeout(ajaxTimeout,5000);
function ajaxTimeout(){
rq.abort();
// IF no internet connection found, call this whole javascript function/code AGAIN in 5 seconds! to check for internet connection
}
Basically, I want to check for internet connection without having to refresh my whole page - and if there is, then redirect to Tracker.html

Check if navigator.onLine is true or false.

The best approach is to use setTimeout:
function callMe() {
// Some Code
setTimeout(callMe, 1000);
}
callMe();
Your code will look like that:
var rq = new XMLHttpRequest();
rq.onreadystatechange = function() {
if(rq.readyState === 4) {
if(rq.status === 200) {
window.location.href = "Tracker.html"; // if internet connection found, redirect.
} else {
setTimeout(rq.send, 5000);
}
}
};
rq.send();
If you want to check if the client is connected you can also use the new online and offline events described here.

An ajax solution will only work on the same domain. However on the same domain you will probably not need to test whether the server is online. With navigator.onLine it will indicate whether the internet is accessible however still the appropriate server can be unreachable.
The trick is to try to load an image of the target server and on error then retry after 5 seconds. And when the image has been loaded successfully then a redirect could be done.
<html>
<header>
</header>
<body>
<script type="text/javascript">
var img = new Image();
var ping = function() { img.src = "http://www.somedomain.com/valid_image.jpg"; }
ping();
img.onerror = function(e) {
console.log('error');
setTimeout(function() {
ping();
}, 5000);
}
img.onload = function(e) {
console.log('YES');
window.location.href = "http://www.google.com";
}
</script>
</body>
</html>

login into the site with my javascript

i'm trying to login into the site with the following javascript. But, i'm loading only the complete page. I'm developing windows 8 app
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
document.getElementById("bt_login").addEventListener("click", login, false);
}
});
})();
function login() {
var xhrDiv = document.getElementById("xhrReport");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = dataLoaded;
xhr.open("POST", "http://www.160by2.com", true, <username>, <password>);
xhr.send();
function dataLoaded() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// OK
xhrDiv.innerHTML = window.toStaticHTML("response:" + xhr.responseText);
} else {
// not OK
xhrDiv.innerText = "failure";
}
}
};}
I want to dsiplay in xhrdiv.innerHTML as "LOGIN SUCCESS" or "LOGIN ERROR"
EDIT:
I tried the following code:
iframe = document.getElementById("ifra_op");
iframe.setAttribute("src", "http://www.160by2.com/index");
document.getElementById("op").appendChild(iframe);
iframe.contentWindow.document.getElementById("MobileNoLogin") = "<mobno>";
iframe.contentWindow.document.getElementById("LoginPassword") = "<pass>;
iframe.contentWindow.document.getElementsByName("LoginForm").click();
But, there is an error. It says "Javascript run time error:math is undefined"
"math" comes from the website. I don't know how to handle this. Also, the permission is denied. Why is that so?

You need to make sure you have a service (something like a web service) in the remote server to process the request.
In here what you can do is.
Create an iframe and set the src to 160by2;
Access the webpage using iframe.contentwindow, inject your code to fill up the forms and trigger the submit button.
Parse the received html to verify your login.
Use jquery , makes life easier.
var iframe = $("#ifra_op");
$(iframe).attr("src", "http://www.160by2.com/index");
$(iframe).attr("onload","submitForm();");
function submitForm(){
$(iframe.contentWindow.document).find("#MobileNoLogin").val("9999");
$(iframe.contentWindow.document).find("#LoginPassword").val("pass");
$('#button').click();
}

Ajax triggering body's onLoad event

My whole page is loading again whenever I make a ajax call to load a div.
I have noticed that 'body onload=init()' onload event is getting triggered on ajax response and all the initialization is happening again. I don't want that to happen.
Is there a way by which only div is loaded through ajax call.
<body onload="init()">
.....
.....
<div>...<b>More</b></div>
</body>
main.js
function saveView(arg){
if(arg=="more"){
ajaxGet(baseRef+"all.html", loadList);
}else{
ajaxGet(baseRef+"all-A.html", loadList);
}
function init(){
.....
}
function ajaxGet(url, responseHandler)
{
var page_request = false;
if (window.XMLHttpRequest && !(window.ActiveXObject && window.location.protocol == "file:")) {
// use this only if available, and not using IE on a local filesystem
page_request = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // older versions of IE, or IE on a local filesystem
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
}
}
}
else {
alert("Your browser does not support XMLHTTP.");
return false;
}
page_request.onreadystatechange=function() {
if(page_request.readyState==4) {
// on local machines the status for success is 0. on web servers it is 200
if(page_request.status==200 || page_request.status==0) {
responseHandler(page_request);
}
}
}
page_request.open('GET', url, true);
page_request.send(null);
}
function loadList(page_request){
document.getElementById("list").innerHTML=page_request.responseText;
Loaded = true;
try{
if(pLoaded)
doFilterStateChange1();
}catch(e)
{
}
setTimeout("restoreScrollTop()", 1000);
}

It is not ajax that is triggering onLoad event of body.
If you see the anchor tag, I haven't assigned any value to href="" which was causing the page to be loaded again. Removing it solved the problem.

We'd need to see your code to help, but when pages do things like reloading etc, it usually means their is a script error. Use firebug to check for errors, it might be hard to catch if it's refreshing quickly.