CODEWITHSUNDEEP
javascriptjqueryajaxgoogle-chromegoogle-chrome-extension
Retador
Retador

Reputation: 223

Use ajax query in chrome extension

I am trying to build a chrome extension, that get's the age of the current domain opened, generate an opacity value by this age and apply this opacity value to an overlay that I want to place on top of the current page.

Here is my not working approach:

manifest.json

{
  "name": "overlay",
  "version": "0",
  "description": "art project",
  "background": {"page": "background.html"},
  "manifest_version": 2,
  "browser_action": {
  "name": "art project",
  "icons": ["icon.png"],
  "default_icon": "icon.png"
},
  "content_scripts": [ {
  "js": [ "jquery-2.1.4.min.js", "background.js"],
  "css": ["customStyles.css"],
  "matches": [ "http://*/*", "https://*/*"]
}]
}

background.js

var domain = location.hostname;

$.ajax({
  url: 'http://whois.webhosting.info/' + domain,
  type: 'GET',
  success: function(res) {

  // find table with class "body_text"
  $(res.responseText).find('table.body_text').appendTo('body');
  var creation_date = $(res.responseText).find('table.body_text > tbody > tr:nth-child(5) > td:nth-child(2)').html();

  var str = creation_date.split(/(\s+)/);

  // calculate the month number from month in string format
  var monthcalc = ( "JanFebMarAprMayJunJulAugSepOctNovDec".indexOf(str[0]) / 3 + 1 );

  // join the date
  var domainage = str[2] + " " + monthcalc + " " + str[1];

  // create the date
  var firstdate = new Date(domainage);

  var today = new Date();        
  var dayDiff = Math.ceil(today.getTime() - firstdate.getTime()) / (1000 * 60 * 60 * 24 * 365);
  var age = parseInt(dayDiff);
  $('#age').html(age+' years old');

  // calculate opacity of patina
  patinaOpacity = (dayDiff * 1.5) / 100;
  console.log(patinaOpacity);

  $("body").prepend('<div class="overlay">PATINA OVERLAY</div>');

  $(".patina-overlay").css({
    "z-index": "10000000000000", 
    "background": "black",
    "opacity": patinaOpacity,
    "position": "fixed",
    "width": "100%",
    "height": "100%",
    "pointer-events": "none",
  });

  }
});

The weird thing is, that this code works perfectly in a normal html document – but not when I implement it into a chrome extension. The Chrome Extensions Developer Tool always is showing me, that I have a syntax error in this line var str = creation_date.split(/(\s+)/; and i have no idea, what's wrong about it.

Upvotes: 0

Views: 84

Answers (1)

Xan
Xan

Reputation: 77523

While it's hard to tell exactly why your code is failing, it must be said that querying a Web WHOIS service will never end well.

Such services almost always have protections in place against repeated queries: you may be hitting a CAPTCHA or a similar defense. There's a reason there are no unlimited free WHOIS services/APIs around.

Then your code would fail to find the required element and since you don't check for that - break down somewhere further along.

Even putting that aside, cross-origin AJAX requires you to declare the address you're querying in the permissions field in the manifest. Though I suppose in this case it would not call the success function.

Another possibility is the very dubious operation $(res.responseText) to try and parse HTML. You are injecting foreign code - probably containing scripts - into the context of the current document. That's not a very good idea for data you don't control.

Upvotes: 1

Related Questions