拡張機能から動的に挿入されたIframeから現在のタブのDOMにアクセスし、iframeを更新するDOM

Question

各ページの上部にカスタムツールバーを追加する拡張機能を開発しています。これを行うには、私はtoolbar.htmlを拡張機能から注入しています。私は初心者であるため、現在のタブのDOM要素にどのようにアクセスできるか、および新しく追加されたiframeを現在のタブのDOMのデータで更新する方法についてはわかりません。ここで

は明らかである：回答（

1. 私は別のコンテンツスクリプトを使用する場合：

   { 
       "manifest_version": 2, 
   
       "name": "My Extension", 
       "description": "Extension to show custom toolbar", 
       "version": "1.0", 
   
       "browser_action": { 
       "default_icon": "icon.png", 
       "default_popup": "popup.html" 
       }, 
       "background":{ 
        "scripts":["background.js"] 
       }, 
       "content_scripts":[{ 
        "matches":["https://bitbucket.mycompany.com/*"], 
        "css":["styles.css"], 
        "js":["jquery.js","myscript.js"], 
        "all_frames":true 
       }], 
       "web_accessible_resources":[ 
        "toolbar.html", 
        "styles.css" 
       ] 
   } 
   

   コンテンツのスクリプトは、私の質問がありmyscript.js

   var url=chrome.extension.getURL('toolbar.html'); 
   var height='35px'; 
   var iframe="<iframe src='"+url+"' id='myCustomBar' style='height:"+height+"'></iframe>" 
   
   $('html').append(iframe); 
   
   $('body').css({ 
       'transform':'translateY('+height+')' 
   }); 
   

   ですここに： access iframe content from a chrome's extension content script）のiフレームには、どのようなURLが一致する必要がありますか？

2. 動的に挿入されたiframeから現在のタブのDOMにアクセスする他の方法はありますか？
3. https://bitbucket.*.comのようなURLパターンを持つすべてのURLでこの拡張機能を実行する必要があるとしたら、一致するものは何ですか？ iframe対応のsrcがデフォルトでにコンテンツスクリプトを注入することが許可されていないchrome-extensions://から始まるされているので

Answer 1

1. あなたは、そのiframeのために別々のコンテンツのスクリプトを使用することはできません。

2. あなたがtoolbar.jsと親コンテンツスクリプトの間を通過するメッセージを行うためにWindow.postMessageを使用し、その後、toolbar.htmlのためのスクリプトタグを含めることができます。

3. Match patternsによれば、'*'がホストにある場合は、最初の文字である必要があります。したがって、https://*.comのようなものを使用して、コード内の他の部分をチェックすることができます。