Javascript 如何编写插入新内容的Chrome扩展<；a>；使用onclick-AJAX调用？

我一直在摆弄一个Chrome扩展插件来处理向文件插入/替换HREF的问题，它可以调用我网络上的下载服务器，在你的计算机上执行下载。我面临的挑战是，我似乎无法定义一个可以分配所有onclick事件的内容脚本Javascript函数

manifest.json

 {
  "name": "Test",
  "version": "0",
  "background": {
      "scripts": ["background.js"]
  },
  "manifest_version": 2,
  "browser_action": {
    "default_title": "Status",
    "default_popup": "status.html",
    "icons": ["icon.png"],
    "default_icon": "icon.png"
  },
  "content_scripts": [ {
    "js": [ "jquery.js", "content.js" ],
    "css": ["customStyles.css"],
    "matches": [ "http://*"]
  }],
  "permissions": [
      "http://192.168.1.28/"
  ]
}

我一直在处理的一个示例content.js：

$('.rRow1,.rRow2 .subject').find('a:first').each(function() {
    $(this).after("&nbsp;<a class='headerlink' href='#' onclick='queue(this);'>[Queue]</a>");
});

var queue = "http://192.168.1.28:8081/adddownload.req?URL=";
function queue(le) {
    var link = $(le).attr('href');
    alert("Queuing: " + link);
    $.ajax({
          type: 'GET',
          url: queue,
          dataType: 'html',
          success: function(data) {
              try {
                console.log(data);
              } catch(e) {
                alert("Error: " + e.message);
                return;
              }
          }
    });
}

$（'.rRow1.rRow2.subject'）。查找（'a:first'）。每个（函数（）{
$（此）。在（“”）之后；
});
变量队列=”http://192.168.1.28:8081/adddownload.req?URL=";
函数队列（le）{
var link=$（le.attr（'href'）；
警报（“排队：+链接”）；
$.ajax({
键入：“GET”，
url:队列，
数据类型：“html”，
成功：功能（数据）{
试一试{
控制台日志（数据）；
}捕获（e）{
警报（“错误：+e.message”）；
返回；
}
}
});
}

我的排队函数在Chrome控制台中抛出一个“未捕获引用错误：未定义队列”。现在我明白了内容脚本是在一个“孤立的世界”中运行的，我现在知道了为什么队列是未定义的

我有点迷茫的是实现所需功能的方法。我是否应该在后台处理ajax调用，并从内容脚本发布消息？我还尝试在每个新插入的元素上添加addEventListener，但没有成功

更新 好的，这是我想到的。它是功能性的，但我真的不喜欢在每个元素上附加Ajax代码的新副本。如果我有一种引用单个函数的方法来完成这项工作，它将更加高效。有什么建议吗

$('.rRow1,.rRow2 .subject').find('a:first').each(function() {
    $(this).after("&nbsp;<a class='dlqueue' href='#'>[Queue]</a>");
    var link = $(this).attr('href');
    $(this).next().click(function() {
        $.ajax({
              type: 'GET',
              url: "http://192.168.1.28:8081/adddownload.req?URL="+encodeURIComponent(link),
              dataType: 'html',
              success: function(data) {
                console.log("Download queued.");
              }
        });
    });
});

$（'.rRow1.rRow2.subject'）。查找（'a:first'）。每个（函数（）{
$（此）。在（“”）之后；
var link=$（this.attr（'href'）；
$（this）.next（）。单击（function（））{
$.ajax({
键入：“GET”，
url:“http://192.168.1.28:8081/adddownload.req?URL=“+组件（链接），
数据类型：“html”，
成功：功能（数据）{
log（“下载排队”）；
}
});
});
});

---

这是做这种事情的最好方式吗？谢谢

好的，我自己回答这个问题。感谢abraham指出一个变量，函数名是相同的。这是个问题，但不是真正的问题

DOM无法调用内容脚本中定义的函数。内容脚本可以将函数分配给DOM，但它将存在于DOM中，而不是内容脚本中。例如：

$(this).after("&nbsp;<a class='headerlink' href='#' onclick='queue(this);'>[Queue]</a>");

$（this.），在（“”）之后；

这是一个DOM元素，onclick正在调用一个只存在于内容脚本中但无法从DOM访问的函数。相反，我需要将函数分配给内容脚本中的DOM对象。以下是更新后的工作示例：

$('.rRow1,.rRow2 .subject').find('a:first').each(function() {
    //$(this).after("&nbsp;<a class='dlqueue' href='#' onclick='queue(this);'>[Queue]</a>");
    var el = this;
    $(el).after("&nbsp;<a class='test' href='#'>[Queue]</a>");
    $(el).next().click(function() {
        queue(el);
    });
});

var endpoint = "http://192.168.1.28:8081/adddownload.req?URL=";
var username = "test";
var password = "test";
function queue(el) {
    var link = $(el).attr('href');
    $.ajax({
          type: 'GET',
          url: endpoint+link,
          dataType: 'html',
          username: username,
          password: password,
          success: function(data) {
            console.log("Download queued.");
          }
    });
}

$（'.rRow1.rRow2.subject'）。查找（'a:first'）。每个（函数（）{
//$（此）。在（“”）之后；
var el=这个；
$（el）.在（“”）之后；
$（el）.next（）。单击（函数（））{
排队（el）；
});
});
变量端点=”http://192.168.1.28:8081/adddownload.req?URL=";
var username=“test”；
var password=“test”；
功能队列（el）{
var link=$（el.attr（'href'）；
$.ajax({
键入：“GET”，
url:端点+链接，
数据类型：“html”，
用户名：用户名，
密码：密码，
成功：功能（数据）{
log（“下载排队”）；
}
});
}

您可以在content.js中定义所需的任何函数和变量，并且可以按预期使用content.js访问这些函数和变量。看起来您遇到了问题，因为您使用相同的名称定义了url变量和函数。天哪。就这样。你知道，我从popup.js中提取了这个函数，在那里我将var命名为不同的名称，并且没有考虑在这里重命名它。我昨晚很晚才摆弄这个。。。谢谢无法重新编辑我的答复，但这是一个问题，但不是问题所在。您可以将内容脚本中的函数附加到DOM中的元素，但不能从DOM中调用内容脚本中的函数，这就是我在第一个示例中所做的。啊，是的，一般来说，您应该避免像onclick属性这样的内联javascript。