如何获取javascript中的chrome选项卡源代码
How to get a chrome tab source code in javascript
我试图开发一个chrome扩展,我需要能够获得当前选项卡的源代码,所以我遵循chrome示例,我有三个文件:
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>
和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);
});
});
我通过在网上搜索来构建popup.js,我必须承认,我真的不知道sendMessage是如何准确工作的,也不知道doc是如何工作的,但我认为第二个参数询问源代码,它必须在函数响应的参数中返回,但它没有,这里是js日志:
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)
所以我得到了正确的选项卡,但我没有得到正确的响应表单sendMessage函数,有人可以解释为什么?谢谢
根据您的清单判断,您的sendMessage
没有任何侦听内容。
清单中没有定义内容脚本,因此页面中没有加载任何内容;弹出代码中没有executeScript
调用,因此不会从中加载任何内容。
因此,不需要处理您的消息,调用回调时会出现错误集。您的消息{action: "getHtml"}
并没有神奇的意义;您需要页面一侧的脚本来接收它并形成响应。
您需要的是一个内容脚本,它将为chrome.runtime.onMessage
添加一个监听器,用于处理您的请求。让我们称之为content.js
。然后你可以这样做:
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 */
});
});
相应content.js
的代码不在此问题的范围内。也可以看看架构概述,它很好地介绍了内容脚本的工作方式。
相关文章:
- document.open/document.write没有正确地清除chrome中的文档——这是chrome的错误吗
- 在firefox和chrome中的左侧显示iframe滚动条
- Chrome中的最小视口宽度
- chrome中的意外全局变量有解决方案吗
- chrome中的onmouseover(下拉选项标记)事件不起作用-php,javascript
- chrome中的Facebook JavaScript SDK Connect问题
- 动态(重新)创建iframe内容不会重置Chrome中的JS对象
- Chrome中的本地文件访问
- FF和Chrome中的 ftp:// 网页不会加载 file:// 脚本
- 直接导航到chrome中的页面时未加载Javascript脚本
- 在Chrome中的适当选项卡/窗口中打开URL
- 如何从 Chrome 中的文件输入中删除“未选择文件”工具提示
- Chrome 中的 JSX/JavaScript 语法
- Chrome 中的 JavaScript 问题
- Chrome 中的 Dropbox Chooser API 问题
- 在浏览器中 Chrome 中的 JSX 转换
- 未捕获的类型错误:无法调用方法'shift'Chrome中的Facebook JS库为null
- Chrome中的javascript getElementById错误
- 从谷歌chrome中的任何网页获取所有tel标签
- 让vs var在nodejs和chrome中的性能