Menu
I try to write a chrome extension, reading data from the window object of the current page, opening a new tab and showing the data there.
Do you know a simple example for that?
My current problem is that I can't write to the opended tab.
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
Send a message with the document title to background.
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
Receives the title and try to write it to opended tab.
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
Empty page.
<html>
<head></head>
<body></body>
</html>
526
You would need 2 scripts for this - Content Script, Background Script, apart from manifest.json
Process would be :-
1)Fetch the data from current page using content script.
2)Notify Background with the your data and pass as a message from content script.
3)Receive a new message in background script and create new tab with the message data.
For e.g. - Pass title from current page, and set in new Tab.
Content Script -
//send current window title to background js.
chrome.runtime.sendMessage({'title': window.title})
Background Script -
//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);
})
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
