[英]Chrome Extension - Dynamic Right-Click Menu
我試圖在右鍵單擊菜單中創建一個基於用戶操作動態的選項。 如果用戶選擇了一些文本,然后右鍵單擊,該選項將顯示“顯示它”。 如果用戶右鍵單擊而未選擇某些文本,則該選項將顯示“首先選擇一些文本”並顯示為灰色。 我想知道如何實現這一目標?
我目前擁有它,只有當用戶選擇了一些文本時才會出現該選項。 我不確定如何修改它以滿足我的第二個要求。
chrome.contextMenus.create ({
title:"Display It!", contexts:["selection"], onclick:function(info,tab) {
chrome.tabs.sendRequest(
tab.id,
{callFunction: "displaySidebar", info: info},
function(response) {console.log(response);}
);
}
});
你不能把一個項目弄清楚...... Chrome已經付出了一些努力,只有當它的相關時才會出現上下文菜單項,這就是為什么我猜這里沒有灰色選項。 你的方式與Chrome試圖實施的方式相悖,我認為你真的應該重新考慮你的方式。
這樣說,您可以使用chrome.contextMenus.update來更改菜單項。
以下代碼與您的方式一樣好(嚴肅地說,重新考慮這個想法)....
function selectedTrueOnClick(info, tab) {
chrome.tabs.sendRequest(
tab.id, {
callFunction: "displaySidebar",
info: info
}, function(response) {
console.log(response);
});
}
function selectedFalseOnClick(info, tab) {
//
}
var contextMenuID = chrome.contextMenus.create({
title: "Select some text",
contexts: ["all"],
onclick: selectedFalseOnClick
});
function contextMenuUpdate(selected) {
if (selected) chrome.contextMenus.update(contextMenuID, {
title: 'You selected "%s"',
contexts: ["all"],
onclick: selectedTrueOnClick
});
else chrome.contextMenus.update(contextMenuID, {
title: "Select some text",
contexts: ["all"],
onclick: selectedTrueOnClick
});
}
contextMenuUpdate(false);
我希望完成與原始帖子相同的操作,並且能夠使用一些消息傳遞使其工作。 無論是否是不好的做法,我都使用了enabled(true / false)contextMenu屬性來保留我的上下文菜單選項,但是顯示為灰色。
我創建了一個上下文菜單。 重要的財產是身份證。 剩下的幾乎是任意的,因為它會動態改變。
在content.js中
//This event listener will determine if the context menu should be updated
//based on if the right-button was clicked and if there is a selection or not
document.addEventListener("mousedown", function(event){
if (event.button !== 2) {
return false;
}
var selected = window.getSelection().toString();
if(event.button == 2 && selected != '') {
//get selected text and send request to bkgd page to create menu
chrome.extension.sendMessage({
'message': 'updateContextMenu',
'selection': true});
} else {
chrome.extension.sendMessage({
'message': 'updateContextMenu',
'selection': false});
}
}, true);
在background.js中:
//add a message listener that will modify the context menu however you see fit
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if (request.message == 'updateContextMenu') {
if (request.selection) {
chrome.contextMenus.update('contextMenuId',{
'title': 'New Title',
'enabled': true,
"contexts": ["all"],
'onclick': someFunction
});
} else {
chrome.contextMenus.update('contextMenuId',{
'title': 'Select some text first',
'enabled': false,
"contexts": ["all"]
});
}
} else {
sendResponse({});
}
});
//The original context menu. The important property is the id. The rest is mostly
//arbitrary because it will be changed dynamically by the listener above.
chrome.contextMenus.create({
'id': 'contextMenuId',
'enabled': false,
'title': 'Some Title',
"contexts": ["all"]
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.