开发一个谷歌浏览器扩展 使其可以监听含有"https://login.taobao.com/member/login.jhtml?"字符串URL的响应,并且输出该URL的响应内容
时间: 2024-12-24 17:32:03 浏览: 5
JDBC.rar_JDBC购买商品_captcha.jhtml_jdbc_jdbc商品购买_jdbc的网上购物
要在Chrome浏览器中开发一个扩展,监听包含特定URL模式(如"HTTPS://LOGIN.TAOBAO.COM/MEMBER.LOGIN.JHTML?")的页面响应,并输出响应内容,你可以按照以下步骤进行:
1. **更新manifest.json**:
将manifest.json文件的`permissions`部分添加`webRequest`和`webResponse`权限,同时在`background`部分指定使用`contentScript`来注入脚本到目标页面:
```json
{
"name": "Taobao Login Monitor",
"version": "1.0",
"manifest_version": 3,
"description": "Monitors Taobao login page responses",
"permissions": [
"activeTab",
"webRequest",
"webResponse",
"<all_urls>"
],
"background": {
"service_worker": "background.js",
"content_scripts": [
{
"matches": ["https://login.taobao.com/member/login.jhtml*"],
"js": ["content.js"]
}
]
},
"action": {
"default_popup": "popup.html"
}
}
```
2. **创建content.js**:
在content.js文件中,监听网络请求,检查URL,并在符合条件时拦截并存储响应内容:
```javascript
// content.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (sender.tab && sender.tab.url.includes("login.jhtml")) {
chrome.webRequest.onCompleted.addListener(function(details) {
let responseContent = details.responseData;
// 对数据进行必要的解码,如果它是编码的
try {
responseContent = JSON.parse(responseContent);
} catch (e) {}
sendResponse({
url: details.url,
status: details.status,
responseContent: responseContent
});
}, { urls: ["<all_urls>"] }, ['response']);
}
});
```
在background.js中,你需要发送一个消息给content.js来开始监听:
```javascript
// background.js
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {}, function() {
console.log('Content script started listening.');
});
});
```
3. **popup.html**:
创建一个弹出窗口,接收从content.js传递的数据并在适当的地方展示:
```html
<!-- popup.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Taobao Login Monitor</title>
</head>
<body>
<h1>Recent Login Page Responses:</h1>
<pre id="response-pre"></pre>
<script>
window.addEventListener('message', function(event) {
if (event.data) {
const responseElement = document.getElementById('response-pre');
responseElement.textContent = `
URL: ${event.data.url}\n
Status: ${event.data.status}\n
Response Content: ${JSON.stringify(event.data.responseContent, null, 2)}
`;
}
});
</script>
</body>
</html>
```
现在,当用户访问登录页面时,extension会捕获响应并在popup.html中显示。注意,由于安全原因,某些网站可能不允许这种级别的访问,所以在实际开发中可能会遇到跨域问题。
阅读全文