2

crossrider を使用して拡張機能を作成しています。この拡張機能では、リソースからの html で新しいタブを開きたいと考えています。問題なく新しいタブでページを開く。ここで、js と css を追加して、リソースで使用できるようにします。css と js の追加にご協力ください。

background.js のコード

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

困っているShooter.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 に埋め込まれた link タグや script タグを使用して他のリソース ファイルに直接アクセスすることはできません。

初期のリリースではありますが、HTML ページの機能の 1 つは、ページの準備が整うと実行されるcrossriderMain関数です。この初期リリースでは、この関数は次の Crossrider API をサポートしています: appAPI.db.async、appAPI.message、およびappAPI.request。

したがって、この初期のリリースでは、リソース CSS およびスクリプト ファイルをリソース HTML ページに直接追加する方法はありませんが、リソースを非同期ローカル データベースにロードし、それを HTML ページに適用することで問題を回避できます。標準のjQuery。例えば：

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

トラブルシューター.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');

免責事項：私はクロスライダーの従業員です

于 2013-10-17T08:13:53.813 に答える