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

【问题标题】：How to write the pop-up HTML in a Crossrider extension?如何在 Crossrider 扩展中编写弹出式 HTML？
【发布时间】：2013-08-11 01:07:52
【问题描述】：

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

什么触发它以及如何添加图像，例如，如果您想在弹出窗口中显示带有一些文本的徽标，您是否留下extension.js，因为您将在弹出窗口中编写所有代码-上HTML？

我在这里很困惑。

【问题讨论】：

标签： crossrider

【解决方案1】：

一般来说，Crossrider 弹窗只需几个简单的步骤即可创建，如下所示：

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

在编辑代码页面，右键点击Resources文件夹，指向创建，点击Popup，然后指定弹出文件的名称（例如 popup.html）。

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

要自定义您的弹出窗口，只需将 HTML、CSS 和 JS 添加到 popup.html 中，就像使用标准 HTML 标记添加远程资源的常规 HTML 页面一样。使用我们在弹出模板中定义的 crossriderMain 函数从您的扩展程序的 Resources 文件夹中添加文件。例如：

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

【讨论】：

所以您可以使用 jquery 修改弹出窗口中的内容，就像您通常在 dom 中所做的那样，例如，如果您打算返回正在执行的某事的进度？我在向弹出窗口添加图像时也遇到了问题，请尝试上面从您的示例中看到的内容。
正确，您可以在 crossriderMain 函数中使用 jquery 来操作 DOM。关于图片问题，如果您能提供您的代码并确认您已将图片上传到资源文件夹，我很乐意为您提供帮助。 [免责声明：我是 Crossrider 的员工]
如果您需要一个现场示例，您可以查看 Crossrider 的 Popup 演示：crossrider.com/apps/24802/ide