gpt4 book ai didi

javascript - Chrome 扩展;通过可以与文档交互的弹出窗口制作一个对话框?

转载 作者:行者123 更新时间:2023-11-30 20:22:36 25 4
gpt4 key购买 nike

我制作了一个小的 Chrome 扩展程序,可以为我自己自动化现场填充;目前我的文档上的 onkeydown 事件监听器正在运行,它运行在 content.js 文件中。

此外,我还有一个弹出菜单(带有 popup.html 和 popup.js),其中包含一些方便的链接。

我试图让弹出菜单中的链接之一创建一个小对话框(或弹出浏览器窗口),它本身将包含一些链接(可能在 html 页面上),当按下时,将填充一些打开文档的字段;类似于事件监听器的方式。

目前我有一个链接,在我的弹出窗口中,它只打开一个“弹出式”浏览器窗口,但我找不到如何让它访问打开它的文档。代码如下:

popup.js:

function newPopup(url) {
popupWindow = window.open(url,'popUpWindow','height=300,width=400,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}

var link;

window.onload = function(){
link = document.getElementById('templates');
link.addEventListener('click', continueScript);
}

function continueScript(){
newPopup('https://www.example-site.com/');
}

popup.html:

	<script src="popup.js"></script>
<li><a class="templates" id="templates" href="#"><i class="fa fa-wpforms"></i>Templates</a></li>

现场人口只是值(value)编辑原则的工作,如下所示:

function fillForms(summary, description) {
document.getElementById('example1').value = summary;
document.getElementById('example2').value = description;
document.getElementById('example2').focus();

}

感谢您的帮助!

最佳答案

这个目标完全可以通过 chrome 扩展消息实现。下面的示例显示了如何通过单击对话框窗口中的链接来更改文档的背景颜色。请确保您的 manifest.json 包含 activeTab 权限:

"permissions": [
"activeTab"
]

首先,创建一个 dialog.html 文件并将 popup.js 中的函数链接到它:

function continueScript(){
newPopup('dialog.html');
}

对话框.html:

<!doctype html>
<html>
<head>
<title>Dialog</title>
<script src="dialog.js"></script>
</head>
<body>
<a id="link" href="#">Change body color</a>
</body>
</html>

对话框.js:

window.onload = function() {
var link = document.getElementById('link');
link.addEventListener('click', () => {
// Get active tab.
chrome.tabs.query({active: true}, (activeTabs) => {
const tabId = activeTabs[0].id;
const message = {
backgroundColor: 'green'
};
const responseCallback = (responseMessage) => {
// do something with the response if any ...
};
// Send a message to the content script of the active tab.
chrome.tabs.sendMessage(tabId, message, {}, responseCallback);
});
});
};

然后在内容脚本中为消息添加一个监听器。

content.js:

window.onload = function() {
// Listen for a message from dialog.js and send a response if needed.
chrome.runtime.onMessage.addListener((message, sender, response) => {
// Do stuff in your document.
document.body.style.backgroundColor = message.backgroundColor;
});
};

与传递和填写字段值的方式相同。

引用资料:

popup window in Chrome extension

https://developer.chrome.com/extensions/tabs#method-query

https://developer.chrome.com/apps/runtime#event-onMessage

关于javascript - Chrome 扩展;通过可以与文档交互的弹出窗口制作一个对话框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51296953/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com