2

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

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

我在这里很困惑。

4

1 回答 1

11

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

  1. 在 (设置>)浏览器按钮页面上，为您要支持的浏览器启用扩展按钮

  2. 在background.js文件中：

    1. 使用appAPI.browserAction.setResourceIcon设置按钮图标（注意：不要忘记将图标添加到扩展的资源中）

    2. 使用appAPI.browserAction.setPopup设置弹出详细信息

      appAPI.browserAction.setPopup({resourcePath:'popup.html', height: 300, width: 300});

  3. 创建在步骤 2.2中指定为resourcePath属性的模板弹出 HTML。

    在Edit Code页面上，右键单击Resources文件夹，指向Create，单击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 的员工]

于 2013-08-11T08:12:40.660 回答