Доступ к элементам внутри фрейма в расширении Google Chrome

Question

Я разрабатываю расширение Chrome, когда пользователь нажимает на кнопку действия браузера, должна открыться новая вкладка, где экран должен быть разделен с помощью фреймов. Внутри фреймов у меня есть текстовое поле, а также iframe. Текстовое поле будет действовать как строка URL-адреса, когда пользователь вводит URL-адрес в текстовое поле, я обновляю содержимое iframe.

Вот моя настоящая проблема: когда пользователь нажимает на любую ссылку внутри iframe, мне нужно обновить строку URL, но я не могу добавить прослушиватель событий для ссылок внутри iframe, проблема в том, что я не могу получить доступ к элементу внутри iframe, я получаю сообщение об ошибке "Небезопасная попытка JavaScript получить доступ к URL ...... из фрейма ....".

Эта страница является вкладкой расширения Chrome, если это другая страница, я мог бы внедрить скрипт содержимого, чтобы добавить прослушиватель событий во фрейм, поэтому я не могу использовать скрипт контента здесь.

Вещи, которые я пытался, но не работал: я) В manifest.json я добавил разрешение как «разрешения»: [ «Вкладка», «http:///", «https:///" ] но не сработало. ii) пробовал --allow-file-access-from-files в браузере Chrome, но не работал

Answer 1

Вам не нужно вставлять скрипты в html-файлы внутри расширения. Из них вы сможете получить доступ к API Chrome. * Из скриптов страниц.

При этом, если iframe и фрейм с текстовым полем находятся в разных доменах, вы не можете получить доступ к одному из другого, так как безопасность межсайтовых сценариев предотвращает это.

Мне нужно увидеть больше HTML-файла, который у вас уже есть, но вы могли бы сделать что-то вроде этого ...

На вкладке расширения (которая содержит текстовое поле):

chrome.extension.onRequest.addListener(function (response) {
   if (response.type === "urlUpdate") {
      document.getElementById("addressBar").value = response.url;
   }
});

На фоновой странице:

chrome.extension.onRequest.addListener(function(request, sender) {
   if (request.type === "urlUpdate") {
      chrome.tabs.sendRequest(sender.tab.id, {type: "urlUpdate", url: request.url});
   }
});

Наконец, скрипт контента, который нужно запустить на http://* и https://*. Убедитесь, что у вас есть это в вашем манифесте (добавьте его в существующий список скриптов содержимого):

"content_scripts": [
   {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["address.js"],
      "all_frames": true
   }
 ];

важно , чтобы all_frames был установлен на true, чтобы скрипт запускался в iframe.

Тогда у вас будет это в address.js:

if (window.top !== window) {
   chrome.extension.sendRequest({type: "urlUpdate", url: location.href});
}

По сути, проверка window.top должна избегать путаницы, только отправляя сообщение об обновлении URL-адреса изнутри фреймов. Вам может потребоваться дополнительная фильтрация, чтобы не запускать ее на других страницах, которые вам не нужны.

Это не проверено, но я вполне уверен, что такое решение подойдет.

Answer 2

На самом деле, исходя из ответа, который дал @abraham, я думаю, вы могли бы сделать это.

На вкладке расширения (с адресной строкой):

window.addEventListener("message", function(msg) {
   document.getElementById("addressBar").value = msg.data;
}, false);

В address.js:

if (window.top !== window) {
   window.top.postMessage(location.href, chrome.extension.getURL(""));
}

На фоновой странице вам ничего не понадобится.

Answer 3

Вы можете использовать сценарий содержимого , чтобы в качестве прослушивателя событий щелчка и когда пользователь нажимает на новую ссылку, используйте window.postMessage , чтобы передать новый URL-адрес из iframe.