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

回答

相關問題