我尝试编写一个 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/