如何在crossrider中设置由'appAPI.openURL'打开的html页面的css

我使用crossrider创建了扩展名。在这个扩展中，我想用资源中的html打开一个新选项卡。它在新标签中的开放页面没有问题。现在我想添加js & css，以便在资源中可用。请帮助添加css & js。如何在crossrider中设置由'appAPI.openURL'打开的html页面的css

代码background.js

appAPI.openURL({ 
    resourcePath: "troubleShooter.html", 
    where: "tab", 
    focus: true 
});

在troubleShooter.html

<html> 
    <head> 
     <link media="all" rel="stylesheet" type="text/css" href="css/ie.css" /> 
     <script type="text/javascript" src="js/ie.js"></script> 
    </head> 
    <body> 
    </body> 
</html>

来源

2013-10-16 Naveen Kumar

Crossrider最近推出的能力open a new tab with HTML from resources。但是，这些页面不能使用HTML中嵌入的链接和脚本标签直接访问其他资源文件。

虽然在它的早期版本中，HTML页面的功能之一是crossriderMain功能，该功能在页面准备就绪后运行。在此早期版本中，该功能支持以下Crossrider API：appAPI.db.async,appAPI.message和appAPI.request。

因此，即使在这种提前释放还没有一个直接方法资源CSS &脚本文件添加到资源的HTML页面，你可以解决方法由资源装载到异步本地数据库中的问题并使用标准jQuery将其应用到HTML页面。例如：

background.js：

appAPI.ready(function() { 
    // load resource file 'style.css' in to local database 
    appAPI.db.async.set('style-css', appAPI.resources.get('style.css')); 
    // load resource file 'script.js' in to local database 
    appAPI.db.async.set('script-js', appAPI.resources.get('script.js')); 

    // open resource html 
    appAPI.openURL({ 
    resourcePath: "troubleShooter.html", 
    where: "tab", 
    focus: true 
    }); 
});

troubleShooter.html：

<!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($) { 
    appAPI.db.async.get('style-css', function(rules) { 
    $('<style type="text/css">').text(rules).appendTo('head'); 
    }); 

    appAPI.db.async.get('script-js', function(code) { 
    // runs in the context of the extension 
    $.globalEval(code.replace('CONTEXT','EXTN')); 

    // Alternatively, run in context of page DOM 
    $('<script type="text/javascript">') 
     .html(code.replace('CONTEXT','PAGE DOM')).appendTo('head'); 
    }); 
} 
</script> 
</head> 
<body> 
<h1>Hello World</h1> 
</body> 
</html>

的style.css：

h1 {color:red;}

的script.js

console.log('CONTEXT:: script.js running');

免责声明：我是一个Crossrider员工

来源

2013-10-17 08:13:53 Shlomo

感谢您的快速反应！ –

有没有更新？这是2年前，我似乎仍然被限制在这种解决方法。 –

当前，此API方法没有更多更新。 – Shlomo

如何在crossrider中设置由'appAPI.openURL'打开的html页面的css

回答

相关问题