gpt4 book ai didi

google-chrome - 简单的 chrome 扩展程序打开新选项卡并显示页面中的数据

转载 作者:行者123 更新时间:2023-12-04 01:39:08 29 4
gpt4 key购买 nike

我尝试编写一个 chrome 扩展程序,从当前页面的 window 对象读取数据,打开一个新选项卡并在那里显示数据。

你知道一个简单的例子吗?

我目前的问题是无法写入打开的选项卡。

list .json

{
"manifest_version": 2,
"name": "Inspector",
"version": "0.1",
"permissions" : ["tabs"],
"content_scripts": [{
"matches": [
"<all_urls>"
],
"js": ["jquery-3.2.1.min.js", "content.js"]
}],
"browser_action": {
"default_icon": "icon.png",
"default_title": "Inspector"
},
"background": {
"scripts": ["background.js"]
}
}

content.js

将带有文档标题的消息发送到后台。

chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.message === "clicked_browser_action") {
chrome.runtime.sendMessage({
"message": "open_new_tab",
"title": document.title
});
}
}
);

background.js

接收标题并尝试将其写入打开的选项卡。

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

chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.message === "open_new_tab") {
chrome.tabs.create({
"url": "inspector.html"
}, (tab) => {
setTimeout(() => {
//use your message data here.
chrome.tabs.executeScript(tab.id, {code: "document.title = request.title"})
}, 3000)
})
}
}
)
});

inspector.html

空白页。

<html>
<head></head>
<body></body>
</html>

最佳答案

除了 manifest.json,您还需要 2 个脚本 - 内容脚本、后台脚本

过程将是:-

1)使用内容脚本从当前页面获取数据。

2) 使用您的数据通知后台,并作为来自内容脚本的消息传递。

3)在后台脚本中接收新消息并使用消息数据创建新标签。

例如- 从当前页面传递标题,并在新标签中设置。

内容脚本-

//send current window title to background js.
chrome.runtime.sendMessage({'title': window.title})

背景脚本-

//receive message
chrome.runtime.onMessage((message, sender) => {
chrome.tabs.create({url: 'NEW URL'}, (tab) => {
setTimeout(() => {
//use your message data here.
chrome.tabs.executeScript(tab.id, {code: "document.title = message.title"})
}, 3000);
})
});

关于google-chrome - 简单的 chrome 扩展程序打开新选项卡并显示页面中的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48189130/

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