如何编写插入新<a>使用onclick AJAX调用

How to write a Chrome extension that inserts new <a> with onclick AJAX calls?

本文关键字：使用 onclick AJAX 调用 gt 何编写 lt 插入      更新时间：2023-09-26

我一直在摆弄一个Chrome扩展，用一个对网络上下载服务器的替代调用来处理向文件插入/替换hrefs，以根据您的行为执行下载。我面临的挑战是，我似乎无法定义一个内容脚本Javascript函数，我可以将所有onclick事件分配给它。

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/"
  ]
}

我一直在搞的一个示例内容.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;
              }
          }
    });
}

我的queued函数在Chrome控制台中抛出一个"Uncaught ReferenceError:queue is not defined"。现在我知道了内容脚本是在一个"孤立的世界"中运行的，我现在知道了为什么排队是未定义的。

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

更新好吧，这就是我的想法。它是功能性的，但我真的不喜欢在每个元素上附加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.");
              }
        });
    });
});

这样做是最好的方式吗？谢谢

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

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

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

这是一个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.");
          }
    });
}
相关文章：