firefox - 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;
}
推荐阅读
- android - 织物库中的格式错误的异常
- database - 在 .net-core 中处理数据库连接
- git - Gitlab Shell 错误从 10.5 更新到 10.6
- mysql - 字段列表中的列“lang_id”不明确
- python - 如何在用逗号分割后仅从python数据框中提取具有值的条目
- java - 错误:插件 zip 中缺少“elasticsearch”目录
- c# - 在满足条件时通过添加项目来创建列表
- groovy - Groovy - SoapUI - 如何将文件下载到特定路径
- performance - 为什么我无法在 Zabbix 中监控特定的 Windows 进程?
- python - 可以使用 PIL 显示/集成 numpy 数组吗?