Firefox扩展名:通过URL显示Iframe

我想为firefox写一个扩展名，我写了一个带有iframe的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="http://example.com" style="height:200px;width:300px"></iframe>
    </div>
</body>
</html>

它对我有用，但是我想通过Currnet URL更改IFRAME URL，当用户单击扩展图标时，获取当前URL并更改iFrame源或删除旧的iframe和内部新的iframe，带有新URL，例如http://example.com/google.com

如何创建这个？

当用户单击扩展图标
时

您是指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;
}

相关内容

最新更新

热门标签：