请使用"manifest_version": 2,编写 教我开发一个针对https://einvoice.taobao.com/index?获取页面数据的谷歌浏览器扩展
时间: 2024-12-24 07:39:56 浏览: 4
在Google Chrome扩展中,如果你想要开发一个能抓取 https://einvoice.taobao.com/index 页面数据的扩展,特别是针对V2的manifest.json,你需要遵循以下步骤:
1. **创建manifest.json**:
```json
{
"manifest_version": 2,
"name": "Taobao Invoice Extractor",
"version": "1.0",
"description": "This extension retrieves data from Taobao invoices.",
"permissions": [
"activeTab", "https://einvoice.taobao.com/*"
],
"content_scripts": [
{
"matches": ["https://einvoice.taobao.com/index*"],
"js": ["content.js"],
"run_at": "document_end"
}
],
"browser_action": {
"default_popup": "popup.html"
},
"icons": {
"48": "icon.png"
}
}
```
- `permissions` 部分允许扩展访问 Taobao 的发票页面。
- `content_scripts` 部分定义了脚本将在页面加载完成后运行(`run_at: "document_end"`),并指定`content.js`作为处理文件。
2. **编写content.js**:
这个脚本需要利用像jQuery、Puppeteer (Node.js库) 或者 Cheerio (仅限于JavaScript)这样的库来解析HTML并提取所需的数据。这里是一个简单的示例,使用 Cheerio(假设HTML结构已知):
```javascript
// content.js
const $ = cheerio.load(window.document);
const invoiceData = $('div.invoice-data').text();
chrome.runtime.sendMessage({ invoiceData });
```
3. **添加popup.html**: 创建一个弹出窗口,显示抓取到的数据。这通常包含一个`<textarea>`元素,用于展示数据。
```html
<!-- popup.html -->
<html>
<body>
<h1>Invoice Data:</h1>
<textarea id="data-display"></textarea>
<script src="popup.js"></script>
</body>
</html>
```
4. **编写popup.js**:
这个文件会接收content script发送过来的数据,并将其显示在弹出窗口的文本框中。
```javascript
// popup.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
document.getElementById('data-display').value = request.invoiceData;
});
```
注意:实际开发过程中,由于网页结构可能会变化,为了保证长期稳定的数据提取,最好参考目标网站的文档,或者分析其公开的API(如果有)。
阅读全文