Расширение Firefox: показывать iframe по URL - PullRequest
Новая
       12

Расширение Firefox: показывать iframe по URL

0 голосов
/ 05 июля 2019

Я хочу написать расширение для Firefox, я написал HTML-страницу с iframe, как показано ниже: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
    <div style="height: 200px; width: 300px;" id="wrapper">
        <iframe src="http://example.com" style="height:200px;width:300px"></iframe>
    </div>
</body>
</html>

Это работает для меня, но я хочу изменить URL-адрес iframe по URL-адресу currnet, когда пользователь нажимаетна значке расширения получите текущий URL-адрес и измените источник iframe или удалите старый iframe и новый внутренний iframe с новым URL-адресом, например http://example.com/google.com

Как я могу создать это?

1 Ответ

1 голос
/ 06 июля 2019

когда пользователь нажимает на значок расширения

Вы имеете в виду значок browserAction или значок PageAction?
Есть разница.
Также есть разница, если всплывающее окно установлено в manifest.json (автоматически) или через прослушиватель событий.

Пример HTML на основе вашего примера: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
  <div style="height: 200px; width: 300px;" id="wrapper">
      <iframe src="" style="height:200px;width:300px"></iframe>
  </div>
  <script src="popup.js"></script>
</body>
</html>

Пример popup.js

// run the function
setIframe();

async function setIframe() {

  // get the active tab
  const tabs = await browser.tabs.query({currentWindow: true, active: true});

  // make the URL based on url of the tab i.e. tabs[0].url
  const url = ...... // do whatever

  // set iframe to that url 
  document.querySelector('iframe').src = url;
}
...