1

HTMLページ（つまり、ブラウザウィンドウで表示されているページ）内にiFrameを作成するChrome拡張機能を構築しています。

iFrame は、Chrome 拡張機能のコンテンツ スクリプトによって HTML ページに「挿入」されます。結果の HTML は次のようになります。

<html>
  <head>..</head>
  <body>..</body>
  <iframe id="myIframe">...</iframe>
</html>

コンテンツ スクリプトは、iFrame をメイン ページの DOM に追加した後、独自の DOM を操作して iframe にコンテンツを入力します。Zurb CSS を使用して、iframe コンテンツのスタイルを設定します。

そして、これはすべて正常に機能します。

私は今、Zurb Joyride を iframe のコンテンツに追加しようとしていますが、これで作業できません。

私のマニフェストの content_scripts 宣言は次のようになります。

"content_scripts": [{
    "matches":    ["*://*/*"],
    "js":         ["js/externalJS/jquery-2.1.4.min.js",
                   "js/externalJS/foundation.min.js",
                   "js/content_script.js"],
    "run_at":     "document_end"
}],

iframe 自体が Zurb スクリプトにアクセスする必要があると思われるため、foundation.min.js が拡張機能の一部としてマニフェストによって読み込まれるだけでなく、コンテンツ スクリプトも iframe 内に関連するタグを追加します (DOM を操作することによって) ）。私の理解では、iframe 内の重要な要素は次のとおりです。

  • Zurb JS ファイルのタグ
  • ジョイライドをアタッチするオブジェクト (id="testjoyride")
  • お遊びコンテンツそのもの
  • foundation() への初期化呼び出し

したがって、これを念頭に置いて、マニフェストの web_accessible_resources 宣言は次のようになります。

"web_accessible_resources": [

    "js/externalJS/jquery-2.1.4.min.js",
    "js/externalJS/vendor/modernizr.js",
    "js/externalJS/vendor/fastclick.js",
    "js/externalJS/foundation.min.js",
    "css/foundation.css",
    "css/app.css"
],

次に、コンテンツ スクリプトを使用して、iframe 内に次の HTML を作成します。

<iframe id="myIframe">
  <html>
    <head>

      <!-- the foundation style sheet (which works fine already) -->
      <link type="text/css" rel="stylesheet" href="chrome-extension://extension_id/css/foundation.css">

      <!-- the first two scripts -->
      <script src="chrome-extension://extension_id/js/externalJS/vendor/modernizr.js"></script>
      <script src="chrome-extension://extension_id/js/externalJS/jquery-2.1.4.min.js"></script>

    </head>

    <body>

      <!-- a test object to attach the joyride too -->
      <input type="submit" id="testjoyride">

      <!-- now the rest of the iframe content -->
      ... content ...

      <!-- the other two scripts -->
      <script src="chrome-extension://extension_id/js/externalJS/vendor/fastclick.js"></script>
      <script src="chrome-extension://extension_id/js/externalJS/foundation.min.js"></script>

      <!-- default joyride code from foundation.zurb.com -->
      <ol class="joyride-list" data-joyride="">  
        <li data-id="testjoyride" data-class="custom so-awesome" data-text="Next" data-prev-text="Prev">    
         <h4>Stop #1</h4>    
        </li>
        <li data-button="end" data-prev-text="Prev">
          <h4>Stop #3</h4>
        </li>
      </ol>

    </body>
  </html>
</iframe>

そして最後に、上記のすべてのコンテンツが iframe にアタッチされたら (もちろん、iframe は親ページの DOM にアタッチされます)、content_script からfoundation() を呼び出します。

次のように呼び出す必要があると思います: $(window.frames.myIframe.contentWindow.document).foundation('joyride', 'start');

つまり、親ページではなくiframeのドキュメント オブジェクトを渡します **

だから私はそれをすべてやりますが、何も起こりません。ジョイライドは表示されず、HTML は自動生成された出力に変換されません (ここで説明されているように)。

単純な HTML ページでテスト ケースを作成しましたが、うまくいきました。そのテスト ページを iframe に移動しようとすると、ジョイライドが機能しなくなりました。したがって、自信はありませんが、問題は Chrome 拡張機能ではなく iframe にあるのではないかと思います。

** 注: すべての DOM 操作の最後にこの呼び出しを配置し​​ます。作成した新しい HTML を iframe の DOM に追加した後、すべてのリスナーなどを作成した後、その時点までにスクリプトとジョイライドが「そこにある」はずです。ただし、foundation('joyride','start') への呼び出しの直前に alert() を貼り付けると、アラートの背後に空の iframe が表示され、アラートを閉じた後にのみ iframe が読み込まれます。それが重要なのか、アラートの奇妙な効果なのか、私にはわかりません。

4

1 に答える 1