如何在交叉點中的上下文菜單上單擊時打開彈出窗口對話框？

Question

我已經成功創建了一個擴展，並且我使用extension.js中的一個警報來向用戶顯示最終消息，當他單擊上下文菜單時，但我想要一個使用js和html而不是javascript創建的自定義彈出窗口對話框警報。

請幫我該怎麼做。我的擴展程序適用於網頁上的鏈接。當單擊右鍵時，它會顯示上下文菜單，單擊它時會引發警報，但我想顯示該消息的良好彈出窗口。

Answer 1

關鍵是瞭解您的代碼正在運行的scopes。 context menu在後臺作用域中運行，不能直接訪問活動頁面的DOM。因此，要實現一個解決方案，您必須從後臺範圍pass information到擴展的頁面範圍，並在該範圍內創建自定義彈出窗口或使用Crossrider's notification plugin。

下面的例子演示瞭如何使用通知插件實現：

extension.js：

appAPI.ready(function($) { 
    // Handler to receive messages 
    appAPI.message.addListener(function(msg) { 
    if (msg.type === 'show-notification') 
     showNotification(msg.notification); 
    }); 

    function showNotification(data) { 
    // You can replace the notifier with your own custom code 
    appAPI.notifier.show({ 
     'name':'my-notification-name', 
     'title':data.title, 
     'body':data.body, 
     'link':'http://example.com', 
     'theme':'default', 
     'position':'top-right', 
     'close':true, 
     'sticky':false, 
     'width':'400px', 
     'closeWhenClicked':true 
    }); 
    } 
}); 

重要：不要忘記添加通知插件到延期。

background.js：

appAPI.ready(function($) { 
    appAPI.contextMenu.add(
    "CustomMI", 
    "Custom menu item", 
    function (data) { 
     // Send message to active tab when context menu item selected 
     appAPI.message.toActiveTab({ 
     type: 'show-notification', 
     notification: { 
      title: 'Context Menu Item', 
      body: '<b>Veiwing page</b>: '+data.pageUrl 
     } 
     }); 
    }, ["all"] 
); 
}); 

[披露：我是一個Crossrider員工]