Question

如何在Crossrider扩展中编写弹出式HTML？

触发它的原因以及如何添加图像，例如，如果要在弹出窗口中显示带有某些文本的徽标，是否要离开extension.js，因为您将编写所有代码弹出HTML？

我在这里很困惑。

Answer 1

通常，可以通过几个简单的步骤创建Crossrider弹出窗口，如下所示：

在（设置＆gt;）浏览器按钮页面上，为您要支持的浏览器启用扩展程序按钮
在 background.js 文件中：
1. 使用appAPI.browserAction.setResourceIcon设置按钮图标（注意：不要忘记将图标添加到扩展程序的资源中）
2. 使用appAPI.browserAction.setPopup
  设置弹出式详细信息
  
  appAPI.browserAction.setPopup（{resourcePath：'popup.html'，height：300，width：300}）;
在步骤2.2中创建指定为 resourcePath 属性的模板弹出HTML。

在修改代码页面上，右键单击资源文件夹，指向创建，然后单击弹出，然后指定弹出文件的名称（例如 popup.html ）。

此时，只要单击扩展按钮，就会触发一个功能齐全的弹出按钮。

要自定义弹出窗口，只需将HTML，CSS和JS添加到 popup.html ，其方式与使用标准HTML标记添加远程资源的常规HTML页面类似。使用我们的弹出模板中定义的 crossriderMain 功能，从扩展程序的资源文件夹中添加文件。例如：

<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
    function crossriderMain($) {
        // Note: don't forget to add the files to the extension's resources
        // Load resource CSS
        appAPI.resources.includeCSS('style.css');
        // Load resource JS
        eval(appAPI.resources.get('script.js'));
        // Load resource image
        $('#myImg').attr('src', appAPI.resources.get('myImg.png'));
    }
</script>
</head>
<body>
Hello World!
<img id="myImg">
</body>
</html>

如果您在任何特定问题上需要任何帮助，请随时给我们的支持发送电子邮件（support@crossrider.com）。

[免责声明：我是Crossrider员工]

如何在Crossrider扩展中编写弹出式HTML？

1 个答案: