在 chrome 扩展中使用 ajax 查询答案

【问题标题】：Use ajax query in chrome extension在 chrome 扩展中使用 ajax 查询
【发布时间】：2015-05-19 14:30:21
【问题描述】：

我正在尝试构建一个 chrome 扩展，它获取当前打开的域的年龄，在这个年龄之前生成一个不透明度值，并将这个不透明度值应用于我想要放置在当前页面顶部的叠加层。

这是我不工作的方法：

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",
  });

  }
});

奇怪的是，这段代码在普通的 html 文档中可以完美运行——但当我将它实现到 chrome 扩展中时就不行了。 Chrome 扩展开发者工具总是向我显示，我在这一行 var str = creation_date.split(/(\s+)/; 中有语法错误，我不知道它有什么问题。

【问题讨论】：

你确定这是一个语法错误，还是像cannot read property split of undefined这样的运行时错误？
@Xan 是的，在我也遇到错误之前Uncaught TypeError: Cannot read property 'split' of undefined ...
您之前没有看到有关 CORRS 的消息吗？
@Braiam 你是什么意思？

标签： javascript jquery ajax google-chrome google-chrome-extension

【解决方案1】：

虽然很难准确说明您的代码失败的原因，但必须说查询 Web WHOIS 服务永远不会顺利结束。

此类服务几乎总是针对重复查询提供保护：您可能遇到了验证码或类似的防御措施。没有无限的免费 WHOIS 服务/API 是有原因的。

然后您的代码将无法找到所需的元素，并且由于您不检查该元素 - 进一步分解。

即使不考虑，跨域 AJAX 也要求您在清单的权限字段中声明要查询的地址。虽然我想在这种情况下它不会调用success 函数。

另一种可能性是 非常可疑 操作$(res.responseText) 尝试解析 HTML。您正在将外来代码（可能包含脚本）注入到当前文档的上下文中。对于您无法控制的数据，这不是一个好主意。

【讨论】：