2

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

background.js 中的代码

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

麻烦射手.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>
4

1 回答 1

2

Crossrider 最近引入了从资源中打开带有 HTML 的新选项卡的功能。但是，此类页面无法使用嵌入在 HTML 中的链接和脚本标签直接访问其他资源文件。

尽管在它的早期版本中，HTML 页面的特性之一是在页面准备好后运行的crossriderMain函数。在这个早期版本中，该函数支持以下 Crossrider API：appAPI.db.async、appAPI.message和appAPI.request。

因此，即使在这个早期版本中没有直接的方法将资源 CSS 和脚本文件添加到资源 HTML 页面，您可以通过将资源加载到异步本地数据库并将其应用到 HTML 页面来解决此问题标准的 jQuery。例如：

背景.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
  });
});

麻烦射手.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>

样式.css：

h1 {color:red;}

脚本.js

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

免责声明：我是 Crossrider 的员工

于 2013-10-17T08:13:53.813 回答