How to get a chrome tab source code in javascript
Question
I try to develop a chrome extension and I need to be able to get the source code of the current tab, so I follow the chrome example and I have three files:
manifest.json:
{
"manifest_version": 2,
"name": "Source code getter",
"description": "This extension is a test to get current tab source code",
"version": "0.1",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs"
]
}
popup.html:
<!doctype html>
<html>
<head>
<title>Get source popup</title>
<style>
body {
min-width: 357px;
min-height: 357px;
overflow-x: hidden;
}
</style>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
and the popup.js
document.addEventListener('DOMContentLoaded', function() {
chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
var tab = tabs[0];
console.debug(tab.id);
var source = document.createElement("div");
chrome.tabs.sendMessage(tab.id, {action: "getHtml"}, function(response) {
console.debug(response.html);
if (response.html) {
source.textContent = response.html;
} else {
source.textContent = 'I did not get the source code.';
}
});
document.body.appendChild(source);
});
});
I build the popup.js by searching across the web and I must confess I don't really know how the sendMessage works exactly, also with the doc but I think the second parameter ask the source code wich must be return in the parameter of function response, but it doesn't, here are the JS log:
430 popup.js:4
> Error in event handler for (unknown): Cannot read property 'html' of undefined
> Stack trace: TypeError: Cannot read property 'html' of undefined
> at chrome-extension://boefdmhphdcngpckofecmjnihbgphmch/popup.js:7:35
> at disconnectListener (extensions::messaging:338:9)
> at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
> at EventImpl.dispatchToListener (extensions::event_bindings:397:22)
> at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
> at Event.publicClass.(anonymous function) [as dispatchToListener] (extensions::utils:93:26)
> at EventImpl.dispatch_ (extensions::event_bindings:379:35)
> at EventImpl.dispatch (extensions::event_bindings:403:17)
> at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
> at Event.publicClass.(anonymous function) [as dispatch] (extensions::utils:93:26)
so I got the right tab but i don't get a correct response form sendMessage function, someone can explain me why ? Thanks.
1 answers
solution1
0 2014-09-14 21:13:07
Judging from your manifest, you've got nothing listening for your sendMessage .
No content script defined in the manifest, so nothing loaded in the page; no executeScript calls in the popup code, so nothing gets loaded from there.
So, nothing to process your message, and the callback gets called with an error set. Your message {action: "getHtml"} does not magically mean anything; you need a script on the page's side to receive it and form a response.
What you need is a content script that will add a listener for chrome.runtime.onMessage , that will process your request. Let's call it content.js . Then you can do this:
chrome.tabs.executeScript({code: "content.js"}, function() {
if(chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
return;
}
chrome.tabs.sendMessage(tab.id, {action: "getHtml"}, function(response) {
/* process response */
});
});
Code for the appropriate content.js is outside the scope of this question. Have a look at the Architecture Overview too, it's a good introduction of how content scripts work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.