使用 Chrome 扩展上下文菜单将 link 的 URL 传递给回调函数

Question

我有一个 Chrome 扩展，它使用上下文菜单项来触发功能。此菜单仅在用户右键单击 link 特定文件类型时显示。现在我的问题是我需要将 link 的 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"]}); 但没有成功。它总是 returns null、undefined 和 [object Object]。如何传递 link 的 URL？ API 文档并没有详细介绍。

Answer 1

哇，好乱啊

您需要传递对函数的引用才能将其用作回调。相反..

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

Shotgun debugging多少?

您的第一次尝试最接近成功。但是你必须明白发生了什么。让我们举个例子。假设你有一个 API 那个 returns 异步的非常特定形式的对象：

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

它需要一个函数来接收特定类型的对象并对其进行处理。比如说，你有一个处理程序

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

需要 2 个数字。所以你不能这样做:

myAwesomeAPICall(applesAndOranges);

从此 numApples 将是一个对象，而 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);
});

经验教训：APIs 期待具有特定输入格式的回调。

其实the docs这样说：

chrome.contextMenus.onClicked.addListener(function callback)
The callback parameter should be a function that looks like this: function(object info, tabs.Tab tab) {...}; (description of object info follows)

注意单词 "should be"。虽然您不需要使用传递的参数，但您可以只使用 info，也可以不使用任何参数，但数据的预期格式如所描述的那样。

所以，最后：

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

使用 Chrome 扩展上下文菜单将 link 的 URL 传递给回调函数

Pass URL of link to callback function with Chrome Extension Context Menu

javascript

google-chrome

google-chrome-extension