gpt4 book ai didi

javascript - Webextension 登录特定页面并一键继续子页面

转载 作者:行者123 更新时间:2023-11-27 22:44:48 28 4
gpt4 key购买 nike

我正在处理弹出窗口、内容脚本和后台脚本的组合。不幸的是,我在其中选择的任何沟通都未能达到我想要的结果。

我需要在浏览器菜单中开发带有图标/弹出窗口的网络扩展。单击后,它将打开专用菜单,其中包含弹出窗口中的项目。当我点击弹出某些项目时..选项卡应该打开,并且应该转到某个 URL 进行登录(通过带参数的 URL 或 POST)并转到子页面(特定于弹出项目文本)。

我尝试了弹出窗口和背景脚本之间、背景脚本和内容脚本之间等消息传递的多种组合......但它对我来说从来没有奏效。我还遇到了请求同步的问题,因为虽然我登录了(通过 windows.open),但我可以执行进一步的子页面加载。

你们知道这是如何运作的吗?最好有一些简短的例子?我只使用了标准 JavaScript。

我的第一次尝试:

ma​​nifest.json

{
"description": "test",
"manifest_version": 2,
"name": "extensiontest",
"version": "1.0",
"homepage_url": "https://xxxx.com",
"icons": {
"32": "beasts-32.png"
},


"applications": {
"gecko": {
"id": "testid@sss.com",
"strict_min_version": "45.0"
}
},

"content_scripts":
[
{
"matches": ["<all_urls>"],
"run_at": "document_end",
"js": ["content.js"]
}
],

"browser_action":
{
"default_icon": "popup.png",
"default_popup":"popup.html"
},

"background":
{
"scripts": ["background.js"]
},

"permissions":
[
"tabs","storage"
]
}

popup.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="links.css"/>
</head>
<script src="popup.js"></script>
<body>
<ul>
<li><a id="bQuote" href="#">Quote</a></li>
<li><a id="bSend" href="#">Send</a></li>
</ul>
</body></html>

popup.js

function goQuote() {

chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, {"message": "Quote"});
});

// Generic Log In link
window.open("Login-link","targetname");

}

function goSend() {

chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, {"message": "Send"});
});

// Generic Log In link
window.open("Login-link","targetname");

}


document.addEventListener("DOMContentLoaded", function() {
document.getElementById("bQuote").addEventListener("click", goQuote);
document.getElementById("bSend").addEventListener("click", goSend);
});

content.js

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if( request.message === "Quote" ) {

// Subpage link with same target name
window.open("supbpage-link1","targetname");
}
if( request.message === "Send" ) {
// Subpage link with same target name
window.open("supbpage-link2","targetname");
}
}
);

最佳答案

您需要一个后台脚本来编排事情。

popup.js 中,使用 chrome.runtime.sendMessage() 在点击事件上将消息发送到 background.js

background.js中:

  1. chrome.runtime.onMessage()popup.js 捕获消息
  2. chrome.tabs.create() 打开登录页面并记住选项卡 ID;
  3. chrome.webNavigation.onCompleted.addEventListener() 用于检测选项卡已加载(您需要一个带有您记住的 tabIdframeId === 0 的事件);
  4. chrome.tabs.executeScript() 在该选项卡上注入(inject) content.js 来填充表单并提交;
  5. chrome.webNavigation.onCompleted.addEventListener() 再次检测选项卡已加载;
  6. chrome.tabs.update() 导航到所需的子页面;
  7. 清理。

请记住,任何时候都可能出错:用户可能会中断页面​​加载、凭据可能错误、网络连接可能消失等。:)

关于javascript - Webextension 登录特定页面并一键继续子页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38479561/

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