Javascript 通过Chrome扩展上下文菜单将链接的URL传递给回调函数

我有一个Chrome扩展，它使用上下文菜单项触发一个函数。此菜单仅在用户右键单击指向特定文件类型的链接时显示。现在我的问题是我需要将链接的URL传递给一个函数。在

chrome.contextMenus.create（）

中的

“onclick”

参数中，我尝试将各种参数添加到回调函数中。我已尝试在回调中使用以下内容：

function(linkUrl) { onClickHandler(linkUrl); }
function({"info":["linkUrl"]}) { onClickHandler(linkUrl); }
function("info":["linkUrl"]) { onClickHandler(linkUrl); }
function() { onClicHandler(linkUrl); }
function({"info":["linkUrl"]}) { onClickHandler({"info":["linkUrl"]}); }
function() { onClickHandler({"info":["linkUrl"]}); }

我还尝试使用

chrome.contextMenus.onClicked.addListener（onClickHandler（linkUrl））

和

chrome.contextMenus.onClicked.addListener（onClickHandler（{“info”：[“linkUrl”]}）；

都没有成功。它总是返回

null

，

未定义的

，和

[对象对象]

。我如何传递链接的URL？API文档并没有详细说明。

哇，真是一团糟

您需要传递对该函数的引用，才能将其用作回调函数

// defines a function that takes 1 parameter and passes it to the handler
function(linkUrl) { onClickHandler(linkUrl); }
// syntax error - you  can only specify a parameter name
function({"info":["linkUrl"]}) { onClickHandler(linkUrl); }
// syntax error
function("info":["linkUrl"]) { onClickHandler(linkUrl); }
// linkUrl does not come from anywhere
function() { onClicHandler(linkUrl); }
// syntax error
function({"info":["linkUrl"]}) { onClickHandler({"info":["linkUrl"]}); }
// Passes a constant object {"info": ["linkUrl"]} to the handler
function() { onClickHandler({"info":["linkUrl"]}); }

// Passes the result of executing onClickHandler(linkUrl) as a function
//  (Which probably does not return a function, and linkUrl is undefined)
chrome.contextMenus.onClicked.addListener(onClickHandler(linkUrl));

// Passes the result of executing onClickHandler(obj) as a function
//  where obj is that constant object {"info": ["linkUrl"]}
chrome.contextMenus.onClicked.addListener(onClickHandler({"info":["linkUrl"]});

多少

---

您的第一次尝试最接近实际情况。但您必须了解会发生什么。让我们举一个例子。假设您有一个API异步返回一个非常特定形式的对象：

function myAwesomeAPICall(callback) {
  /* ... */
  callback({apples: n, oranges: m});
}

它需要一个函数来接收特定类型的对象并对其进行处理

function applesAndOranges(numApples, numOranges) {
  /* ... */
}

它需要两个数字。所以你不能这样做：

myAwesomeAPICall(applesAndOranges);

从那时起，

numaples

将成为一个对象，

numOranges

将是未定义的。您可以随意命名参数，但

myAwesomeAPICall

的结构不知道您的定义：它只会将想要的内容放在第一个参数中

因此，您需要一个函数，该函数接受一个对象，并将数字提供给您的处理程序

function callbackForAPI(obj) { // obj will have the required format
  applesAndOranges(obj.apples, obj.oranges);
}

myAwesomeAPICall(callbackForAPI);
// Note, it's not callbackForAPI() - that would be passing the result,
//  not the function itself

事实上，它根本不必是命名函数。匿名函数就可以：

myAwesomeAPICall(function(obj) {
  applesAndOranges(obj.apples, obj.oranges);
});

---

经验教训：API期望使用特定输入格式的回调

事实上，你可以这样说：

回调参数应该是如下所示的函数： 函数（对象信息，tabs.Tab选项卡）{…}； （以下是对象的说明

info

）

注意单词“应该是”。虽然不要求您使用传递的参数，但您可以只使用

info

，也可以不使用，但数据的预期格式如下所述

因此，最后：

chrome.contextMenus.onClicked.addListener(function(obj, tab) {
  onClickHandler(obj.linkUrl);
});

chrome.contextMenus.onClicked.addListener(function(obj, tab) {
  onClickHandler(obj.linkUrl);
});