我正在构建Chrome扩展程序,可在扩展程序加载时创建上下文菜单列表。用户右键单击元素后,需要将其选择器从内容脚本传递到扩展JavaScript。 当发生右键单击并且内容脚本向扩展JavaScript发送消息以使用元素的选择器更新所有contextmenu项时,问题就开始了。由于Chrome扩展上下文菜单的更新方法是anyc,因此用户看不到包含上下文菜单项的元素扇区,只有在右键单击5-6次后才开始显示。
我很难找到一种快速的方法,但由于chrome.contextMenus.update API是异步的,需要为每个项目调用,因此需要很长时间才能完成。可以有一些其他的出路,以便根据点击第一次右键单击的元素动态创建或更新上下文菜单的项目意味着没有等待时间吗?
以下是我的代码概述:
扩展名js:
//Start Code for extension js
function GetAllAvailableCMCommands() {
//Format - [{"Command":__command,"AvailableContext":[__context],"CMItemType":__itemtype}]
var _c = "Command",
_a = "AvailableContext",
_ct = "CMItemType";
return [
{[_c]: "item1", [_a]: ["link"],[_ct]: null},
{[_c]: "item2", [_a]: ["link"],[_ct]: null},
{[_c]: "item3", [_a]: ["link"],[_ct]: null},
];
}
function CreateCM(type, id, title, contexts) {
chrome.contextMenus.create({
"type": !type ? "normal" : type,
"id": id,
"title": title,
"contexts": contexts
});
}
function UpdateCMItemTitle(id, newTitle) {
chrome.contextMenus.update(id, {
"title": newTitle
});
}
function UpdateCMItemsOnEleClkd(request, sendResponse) {
if (request.clickedEle && request.selector) {
var cm = GetAllAvailableCMCommands();
for (var i = 0; i < cm.length; i++) {
var json = cm[i];
if (Object.keys(json).length) {
var ac = json.AvailableContext;
if (ac.length) {
UpdateCMItemTitle(json.Command, json.Command + " " + request.selector);
}
}
}
sendResponse({
issuccess: true
});
}
}
var cm = GetAllAvailableCMCommands();
for (var j = 0; j < cm.length; j++) {
var json = cm[j];
if (Object.keys(json).length) {
var ac = json.AvailableContext;
if (ac.length) {
CreateCM(json.CMItemType, json.Command, json.Command, json.AvailableContext);
}
}
}
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.func) {
switch (request.func) {
case "UpdateCMItems":
UpdateCMItemsOnEleClkd(request, sendResponse);
break;
}
}
});
//End Code for extension js
内容脚本:
//Start Code for content script
document.addEventListener("mousedown", function(e) {
target = e.target;
selector = e.id; //assuming elements have an id attribute
var msg = {
"func": "UpdateCMItems",
"selector": selector,
};
chrome.runtime.sendMessage(msg, function(res) {
if (res.issuccess) {
console.log("context menu items for the current elements are updated");
}
});
}, false);
//End Code for content script
目的是查看上下文菜单项是否使用当前元素的ID进行更新。例如,如果右键单击id = txtLogin的输入框,则上下文菜单应显示
item1 id=txtLogin
item2 id=txtLogin
item3 id=txtLogin