0

crossrider サイドパネルは単なる iframe です (js を挿入した html を使用できますが、ページの残りの部分との干渉を減らすために iframe を使用することに興味があります)。ブラウザ拡張機能と iframe の間のやり取りがまったくできません。

基本的な JS 通信ができない限り、サイドパネルに拡張機能を追加しても意味がありません。この場合、拡張機能を制御する iframe にいくつかのオプション、チェックボックスなどが必要です。このプラグインが存在するので、方法があるに違いないと思います。

理想的には、子 iframe にいくつかの基本的な入力処理 js を用意し、奇妙な保存/読み込みコマンドを送り返したいと考えています。答えは本当に何らかの形のメッセージ パッシングですか? もしそうなら、ここでどの API を使用すればよいですか?

これは関連していると思います: Accessing iframe from chrome extension

[編集]
OK、いくつか試してみました...

  1. 予想される使用法は、iframe の html コンテンツをどこかにホストすることです。ローカルであり、拡張機能の一部であることを考えると、少し奇妙です。一部のページをオフラインで表示したい場合はどうなりますか?? これはばかげているので、オプションとして却下します。ローカルで利用できるはずのものをホストしているリソースを無駄にするのはなぜですか。

  2. 別の方法は、サイドバーに表示される HTML を提供することです。この HTML は iframe に配置されないことに注意してください。CSS と JS が非常に分離されているため、iframe のアイデアが気に入っています。そのため、ページと拡張機能の間の干渉が最小限に抑えられます。

    htmlそこで、ID を使用して sidebar 属性を介して iframe を作成し、100 ミリ秒の遅延後に を使用してコンテンツを挿入しようとしましたmyiframe.contentWindow.document.open/writeln/close()。The operation is insecureこれは chrome では問題なく動作しますが、firefox ではセキュリティ エラー ( on )で失敗しますopen()。

  3. もう 1 つの方法は、srcURL を介して iframe コンテンツを提供することです (サイドバーの場合、属性にデータ アドレスを使用しurlます): URL ではなく、IFRAME ソースとしての Html コード。これは firefox では機能しますが、chrome では CORS エラーが発生しますThe frame requesting access has a protocol of "http", the frame being accessed has a protocol of "data". Protocols must match.。Warning: Blocked a frame with origin "http://localhost" from accessing a cross-origin frame. Function-name: appAPI.message.addListener

これらの CORS の問題は、本当にばかげていると思います。同じページに挿入された、同じ拡張機能からのすべてのコードです。クロスオリジンが起こっているわけではありません。私はいまいましいものを作成しました。オリジンを変更する力がある場合、そもそも安全ではないので、なぜわざわざ。

4

1 に答える 1

2

urlサイドバー プロパティを使用してサイドバーの HTML (つまり、ホストされている Web ページ) を読み込むと仮定すると、拡張機能のRun in Iframe機能を使用して、iframe 拡張機能と親ウィンドウの拡張機能の間で通信できます。

これを実現するには、まず拡張機能を iframe で実行できるようにします ( [設定] > [ Iframe で実行] )。次に、 extension.jsを使用してサイドバーを読み込み、メッセージを処理します。たとえば、次のコードは、識別btnSaveのボタンを持つページをロードします。

ホストされたWeb ページファイル:

<html>
<head>
</head>
<body>
  <div id="mySidebar">
    My sidebar form
    <br />
    <button id="btnSave">Save</button>
  </div>
</body>
</html>

extension.jsファイル:

appAPI.ready(function($) {
  // Check if running in iframe and the sidebar page loaded
  if (appAPI.dom.isIframe() && $('#mySidebar').length) {
    // Set click handler for button to send message to parent window
    $('#btnSave').click(function() {
      appAPI.message.toCurrentTabWindow({
        type:'save',
        data:'My save data'
      });
    });
    // End of Iframe code ... exit
    return;
  }

  // Parent window message listener
  appAPI.message.addListener(function(msg) {
    if (msg.type === 'save') {
      console.log('Extn:: Parent received data: ' +
        appAPI.JSON.stringify(msg.data));
    }
  });

  // Create the sidebar
  var sidebar = new appAPI.sidebar({
    position:'right',
    url: 'http://yourdomain.com/sidebar_page.html',
     title:{
      content:'Sidebar Title',
      close:true
    },
    opacity:1.0,
    width:'300px',
    height:'650px',
    preloader:true,
    sticky:true,
    slide:150,
    openAction:['click', 'mouseover'],
    closeAction:'click',
    theme:'default',
    scrollbars:false,
    openOnInstall:true,
    events:{
      onShow:function () {
        console.log("Extn:: Show sidebar event triggered");
      },
      onHide:function () {
        console.log("Extn:: Hide sidebar event triggered");
      }
    }
  });
});

ただし、html sidebar プロパティを使用してサイドバーの HTML をロードしている場合、このコンテキストでは拡張機能が実行されないため、このソリューションは機能しません。ただし、引用した StackOverflow スレッドで説明されているメソッドを利用して、親ウィンドウと通信できる場合があります (これはブラウザー固有のものです) 。これは、 CrossriderAPI イベントを使用して拡張機能と通信できます。

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

于 2013-12-15T11:28:32.707 に答える