2012-03-25 78 views
11

右クリックメニューで、ユーザーの操作に基づいて動的なオプションを作成しようとしています。ユーザーが何らかのテキストを選択して右クリックすると、「表示する」と表示されます。ユーザーが何らかのテキストを選択せず​​に右クリックした場合、オプションは "Select Some Text First"と表示され、グレー表示されます。私はこれをどのように達成するのだろうと思っていますか?Chrome拡張機能 - 動的右クリックメニュー

このオプションは、ユーザーがテキストを選択したときにのみ表示されるように現在持っています。私は2番目の要件を満たすためにそれを変更する方法がわかりません。

+0

が無効になって "いくつかのテキストを選択し、" オプションが混乱して持ちます。 text_is_が選択されているときに、単に "Display it"オプションを持たないのはなぜですか? – Bojangles

+1

デザインチームが決定したのはそれでした。私はただのチームのアマチュア開発者です:P – Jon

+0

私は彼らのロジックは、私たちの拡張機能を使用するためにいくつかのテキストを選択する必要があることをユーザーに知らせることだと思います。 – Jon

答えて

8

あなたはアウト項目をグレーカント... Chromeはのみに努力のビットに行ってきましたコンテキストメニュー項目を作り、私はtheresのノーアウト灰色のオプションを推測しない理由であるとき、その関連する表示されます。あなたのやり方は、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); 
+0

ありがとうございました。私はこれをデザインチームに持っていきます。 – Jon

+0

@Jon、 "Select some text"ではなく、 "Select entire page"をデフォルトのテキストにすることができます。また、「ページ全体を選択」をクリックすると、ページ全体が選択されます。 – Pacerier

6

私は、オリジナルのポストと同じことを達成するために探している、としました。いくつかのメッセージを渡して動作させることができます。それが悪い習慣であるかどうかにかかわらず、有効な(true/false)contextMenuプロパティを使用してコンテキストメニューオプションを残しましたが、グレー表示されました。

私はコンテキストメニューを作成しました。重要な特性はIDです。残りの部分は動的に変更されるため、ほとんど任意です。 content.js background.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); 

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