如何打开一个弹出窗口对话框时，点击上下文菜单在crossrider

How to open a popup window dialog box when clicked on the context menu in crossridder ?

本文关键字：上下文 crossrider 菜单 对话框 窗口 何打开 一个      更新时间：2023-09-26

我已经成功创建了一个扩展，我正在使用extension.js中的警报，当他单击上下文菜单时，向用户显示最终消息，但我想要使用js和html创建一个自定义的弹出窗口对话框，而不是javascript警报。

请帮助我怎么做。我的扩展适用于网页上的链接。当右键被点击时，它显示上下文菜单，当点击时，它抛出警告，但我想显示一个漂亮的弹出消息

关键是理解代码运行的范围。上下文菜单在后台作用域中运行，不能直接访问活动页面的DOM。因此，要实现一个解决方案，您必须将信息从后台作用域传递到扩展的页面作用域，并在该作用域中创建自定义弹出窗口或使用Crossrider的通知插件。

下面的例子演示了使用通知插件的实现:

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员工]

相关文章：