如何为crossrider中的“appAPI.openURL”打开的html页面设置css答案

【问题标题】：how to set css for html page opened by 'appAPI.openURL' in crossrider如何为crossrider中的“appAPI.openURL”打开的html页面设置css
【发布时间】：2013-10-16 17:22:21
【问题描述】：

我正在使用 crossrider 创建扩展。在这个扩展中，我想用资源中的 html 打开一个新选项卡。它在新标签中的打开页面没有问题。现在我想在其中添加 js & css，以便在资源中使用。请帮助添加 css 和 js。

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>

【问题讨论】：

标签： css browser-extension crossrider

【解决方案1】：

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 的员工

【讨论】：

感谢您的快速回复！
有什么更新吗？这是 2 年前的事了，我似乎仍然受限于这种解决方法。
目前，此 API 方法没有进一步的更新。