我尝试编写一个chrome扩展名,从window
当前页面的对象中读取数据,打开一个新标签并在其中显示数据。
您知道一个简单的例子吗?
我当前的问题是我无法写入打开的标签页。
manifest.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);
})
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句