Предоставить доступ к расширению Chrome для содержимого iframe

Я сделал расширение Chrome, которое загружает мою страницу с новой вкладкой с помощью моей страницы подписки на YouTube (я обошел проблему X-frame-options) и хочу выделить конкретный элемент документа, #content, если быть точным (это подписка). Вычитает ли это все, что есть :not(#content), или вырезать #content и положить его в другой <div>. Вот мой код:Предоставить доступ к расширению Chrome для содержимого iframe

Background.html

<html> 
    <head> 
     <script type="text/javascript" src="jquery-2.2.0.min.js"></script> 
     <script type="text/javascript" src="script.js"></script> 
     <script type="text/javascript" src="window.js"></script> 
    </head> 
    <body> 
     <iframe id="left" name="left"></iframe> 
     <div id="canvas"></div> 
    </body> 
</html>

Window.js

$(document).ready(function(){ 
    var $left = $('#left');  
    $left.on('load', function() { 
     $(this).contents().find('#content').clone().appendTo('#canvas'); 
    });  
    $left.attr('src', 'https://www.youtube.com/feed/subscriptions');  
});

script.js

chrome.webRequest.onHeadersReceived.addListener(
    function(info) { 
     var headers = info.responseHeaders; 
     for (var i = headers.length - 1; i >= 0; --i) { 
      var header = headers[i].name.toLowerCase(); 
      if (header == 'x-frame-options' || header == 'frame-options') { 
       headers.splice(i, 1); // Remove header 
      } 
     } 
     return { 
      responseHeaders: headers 
     }; 
    }, { 
     urls: ['*://*/*'], // Pattern to match all http(s) pages 
     types: ['sub_frame'] 
    }, ['blocking', 'responseHeaders'] 
);

manifest.json

{ 
    "manifest_version": 2, 
    "version": "1.0", 

    "background": "background.html", 

    "chrome_url_overrides" : { 
     "newtab": "background.html" 
    }, 
    "permissions": [ 
     "background", 
     "contextMenus", 
     "webRequest", 
     "webRequestBlocking", 
     "tabs", 
     "<all_urls>" 
    ] 
}

Как это прямо сейчас, загружает на YouTube, но я не могу ухватить документа в , как это вход ошибку:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 
'HTMLIFrameElement': Blocked a frame with origin "chrome-extension://ID" from 
accessing a frame with origin "https://www.youtube.com". The frame requesting 
access has a protocol of "chrome-extension", the frame being accessed has a 
protocol of "https". Protocols must match.

Я пытаюсь получить этот div#content, выделенный для удобства навигации с моей новой закладки. Я видел решения, которые предлагают использовать "all_frames":true в файле manifest.json, но это, похоже, не решает проблему. Есть идеи? Благодаря!

источник

2016-02-23 Kragalon

См. Также http://stackoverflow.com/q/8917593/32453 – rogerdpack

Из описания здесь и хрома связаны удлинительные вопросы вы спросили в эти дни, я хотел бы предложить вам узнать больше от Official Guide, так как кажется, вы смущены Event page и content scripts (вы должны знать all_frames применяться только к скриптам контента).

Взгляните на Same-origin Policy, и вы должны знать, что расширение Chrome не позволяет вам получить доступ к contentDocument iframe.

Поскольку ваша цель состоит в том, чтобы извлечь #content часть из YouTube, а затем добавить, что на холсте в новой вкладке, почему не

просто отправить AJAX запрос на YouTube
разобрать возвращаемый HTML ответ и извлечь #content часть
затем добавить его в холст

код выглядит следующим образом:

manifest.json

{ 
    "name": "Your extension name", 
    "manifest_version": 2, 
    "version": "1.0", 
    "chrome_url_overrides": { 
     "newtab": "newtab.html" 
    }, 
    "permissions": [ 
     "https://www.youtube.com/feed/subscriptions/*" 
    ] 
}

newtab.html

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
     <div id="canvas"></div> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript" src="script.js"></script> 
    </body> 
</html>

сценарий.JS

$.post("https://www.youtube.com/feed/subscriptions", function(html) { 
    $(html).find("#content").appendTo('#canvas'); 
});

Пожалуйста, обратите внимание, что исходное изображение в ЦСИ страницу YouTube выглядит src="//...", вы должны добавить правильный домен, прежде чем // в расширении хром. И youtube имеет много сценариев для загрузки, вам также нужно иметь дело с этой частью логики.

Последнее от не в последнюю очередь, я думаю, что лучший способ найти какой-то общественный 3 участника апи от YouTube, я не использовал его, но он кажется Youtube | Google Developer может помочь.

источник

2016-02-23 09:31:06

Спасибо! Я изучаю это. – Kragalon

Как я могу загрузить множество скриптов, которые есть у YouTube? Сейчас я пытаюсь загрузить страницу, а затем вырезать все, кроме '# content', и элементы с тегами' script' или 'link'. Тем не менее он по-прежнему загружается без укладки. Как я могу это решить? Кроме того, даже когда я пытаюсь загрузить запрос и НЕ вырезать что-либо, он загружается без применения стиля и без тегов 'body' или' html'. – Kragalon

Учитывая нагрузку, я предлагаю вам узнать больше о [Youtube | Google Developer] (https://developers.google.com/youtube/), а для подписки - [Реализация и миграция: Подписки] (https://developers.google.com/youtube/v3/guides/implementation/ подписки). –

Предоставить доступ к расширению Chrome для содержимого iframe

ответ

Смежные вопросы