how to set css for html page opened by 'appAPI.openURL' in crossrider

Question

Crossrider recently introduced the ability to open a new tab with HTML from resources. However, such pages cannot directly access other resource file using link and script tags embedded in the HTML.

Though in it's early release, one of the features of the HTML page is the crossriderMain function that runs once the page is ready. In this early release, the function supports the following Crossrider APIs: appAPI.db.async, appAPI.message, and appAPI.request.

Hence, even though in this early release there isn't a direct method to add resource CSS & script files to the resource HTML page, you can workaround the issue by loading the resources into the asynchronous local database and applying it to the HTML page using standard jQuery. For example:

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');

Disclaimer: I am a Crossrider employee