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

Question

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

Kni*_*hts 2 crossrider

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

我在这里很困惑.

Answer 1

Shl*_*omo 11

通常,可以通过几个简单的步骤创建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 .

在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>

Run Code Online (Sandbox Code Playgroud)

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

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

归档时间：	12 年，2 月前
查看次数：	2449 次
最近记录：	12 年，2 月前