[已解决]浏览器插件咋写

wp231957

为谷歌写一个最简单的插件 ？？

最佳答案

月排行榜 / 总排行榜

FishC

2024-7-18 10:04:58

wp231957 发表于 2024-07-18 10:04
主域名一样（就是紧挨着HTTPS的） 这不算跨域吧

如果主域名相同，这确实不算跨域。在这种情况下，我们可以访问和操作 `iframe` 的内容。下面是一个如何从 `iframe` 中提取表格数据的示例：

1. // ==UserScript==
   
2. // @name         导出网页信息到文件
   
3. // @namespace    http://tampermonkey.net/
   
4. // @version      0.1
   
5. // @description  导出当前网页中的部分信息到CSV文件
   
6. // @author       wp231957
   
7. // @match        *://*/*
   
8. // @grant        none
   
9. // ==/UserScript==
   
10. 
    
11. (function() {
    
12.     'use strict';
    
13. 
    
14.     // 创建导出按钮
    
15.     const button = document.createElement('button');
    
16.     button.textContent = '导出表格数据';
    
17.     button.style.position = 'fixed';
    
18.     button.style.top = '10px';
    
19.     button.style.right = '10px';
    
20.     button.style.zIndex = 1000; // 确保按钮在其它元素之上
    
21.     document.body.appendChild(button);
    
22. 
    
23.     button.addEventListener('click', () => {
    
24.         // 获取 iframe 元素
    
25.         const iframe = document.getElementById('iframe0');
    
26. 
    
27.         if (!iframe) {
    
28.             alert('无法找到 iframe!');
    
29.             return;
    
30.         }
    
31. 
    
32.         // 尝试访问 iframe 内容
    
33.         const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    
34. 
    
35.         if (!iframeDoc) {
    
36.             alert('无法访问 iframe 的内容!');
    
37.             return;
    
38.         }
    
39. 
    
40.         const rows = Array.from(iframeDoc.querySelectorAll('table tbody tr'));
    
41.         alert('提取到的行数: ' + rows.length);
    
42. 
    
43.         // 找到你需要的表格和列，比如提取第1, 2, 3列（索引从0开始）
    
44.         const data = rows.map(row => {
    
45.             const cells = row.querySelectorAll('td');
    
46.             return [cells[0] ? cells[0].textContent : '', cells[1] ? cells[1].textContent : '', cells[2] ? cells[2].textContent : '']; // 提取第1, 2和第3列
    
47.         });
    
48. 
    
49.         // 将数据转换为CSV格式
    
50.         const csvContent = "data:text/csv;charset=utf-8," + data.map(e => e.join(",")).join("\n");
    
51. 
    
52.         // 创建下载链接
    
53.         const encodedUri = encodeURI(csvContent);
    
54.         const link = document.createElement("a");
    
55.         link.setAttribute("href", encodedUri);
    
56.         link.setAttribute("download", "table_data.csv");
    
57.         document.body.appendChild(link);
    
58. 
    
59.         // 点击下载链接
    
60.         link.click();
    
61. 
    
62.         // 清除下载链接
    
63.         document.body.removeChild(link);
    
64.     });
    
65. })();

复制代码

这段代码大致包含以下几个步骤：

1. **创建导出按钮**：创建按钮并添加到页面。
2. **按钮点击事件处理**：在点击按钮时进入事件处理器。
3. **获取 iframe 内容**：获取 `iframe` 元素，并尝试访问其内容。
4. **提取表格数据**：从 `iframe` 中提取目标表格的行和列数据。
5. **转换数据格式并下载**：将提取的数据转换成 CSV 格式，并自动下载。

在 `iframeDoc.querySelectorAll('table tbody tr')` 中，你可以根据实际情况调整选择器来准确定位需要提取的表格。希望这个脚本能够满足你的需求！如果有任何问题，欢迎继续交流！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC

写浏览器插件是一种很有趣的经历！下面我来教你如何为谷歌浏览器编写一个简单的插件。

首先，你需要创建一个文件夹来存放你的插件代码。随便给它取一个名字，比如"myExtension"。

然后，在该文件夹中创建一个名为"manifest.json"的文件。这个文件是必须的，它用来描述你的插件的各种属性和行为。填写如下内容：

1. {
   
2.   "manifest_version": 2,
   
3.   "name": "我的插件",
   
4.   "version": "1.0",
   
5.   "description": "这是一个简单的谷歌浏览器插件",
   
6.   "browser_action": {
   
7.     "default_icon": "icon.png"
   
8.   },
   
9.   "permissions": [
   
10.     "activeTab"
    
11.   ],
    
12.   "background": {
    
13.     "scripts": ["background.js"],
    
14.     "persistent": false
    
15.   },
    
16.   "manifest_version": 2
    
17. }

复制代码

在上面的代码中，你需要替换"name"字段的值为你自己的插件名称，同时将"default_icon"字段的值设为一个图片文件名，比如"icon.png"。此外，你还可以修改"description"字段为你想要的描述文字。

接下来，在同一目录下创建一个名为"icon.png"的图片文件，作为你插件的图标。

之后，在同一目录下创建一个名为"background.js"的JavaScript文件。这个文件将会作为你的插件的后台脚本运行。在里面编写代码来处理插件的逻辑，比如点击插件图标时的动作：

1. chrome.browserAction.onClicked.addListener(function(tab) {
   
2.   chrome.tabs.executeScript({
   
3.     code: 'document.body.style.backgroundColor="red";'
   
4.   });
   
5. });

复制代码

上述代码的作用是将当前网页的背景颜色更改为红色。

最后，打开谷歌浏览器，输入"chrome://extensions/"并回车进入扩展程序页面。在右上角将"开发者模式"开关打开，并点击"加载已解压的扩展程序"按钮，选择你创建的插件文件夹。

完成以上步骤后，你的插件就成功安装了！你可以在浏览器的右上角看到你的插件图标。当你点击图标时，插件会将当前网页的背景颜色更改为红色。

这只是最简单的一个例子，你可以根据自己的需求添加更多功能和样式。祝你写插件玩得开心！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

wp231957

FishC 发表于 2024-5-29 08:43
写浏览器插件是一种很有趣的经历！下面我来教你如何为谷歌浏览器编写一个简单的插件。

首先，你需要创建 ...

简单测试成功

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor="red";alert("hello");'
  });
});

这里的code 部分  如果是一个文件  或者几百行代码  该咋弄

FishC

wp231957 发表于 2024-05-29 09:40
简单测试成功

chrome.browserAction.onClicked.add ...

如果你的代码非常长或者复杂，可以将它放在单独的文件中，然后在background.js中通过引入该文件来执行。

首先，创建一个你想要放置代码的文件。比如，创建一个名为"contentScript.js"的文件，并将你的代码放在这个文件中。

接下来，在manifest.json文件中添加一个新的字段，将"contentScript.js"文件包含进来。修改manifest.json文件的"background"部分，让它变成下面这样：

"background": {
  "scripts": ["background.js", "contentScript.js"],
  "persistent": false
},

现在，你的background.js文件和contentScript.js文件都会被加载并执行。

在contentScript.js文件中，你可以编写你的大量或复杂的代码，不再需要将所有代码都放在background.js文件中。

注意，contentScript.js文件中的代码只能操作当前打开的网页，不能直接访问浏览器的API。如果你需要操作浏览器的API，你需要通过background.js文件来实现。

这样，你就可以将长、复杂的代码分离出来，让你的插件更加整洁和可维护。祝你编写插件的过程愉快！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

wp231957

FishC 发表于 2024-5-29 09:41
如果你的代码非常长或者复杂，可以将它放在单独的文件中，然后在background.js中通过引入该文件来执行 ...

注意，contentScript.js文件中的代码只能操作当前打开的网页，不能直接访问浏览器的API。如果你需要操作浏览器的API，你需要通过background.js文件来实现。


什么叫 浏览器的API  能否举个例子说明一下

FishC

wp231957 发表于 2024-05-29 09:53
注意，contentScript.js文件中的代码只能操作当前打开 ...

当我说到浏览器的API时，我指的是浏览器提供给插件开发者的一组接口和功能，可以用来与浏览器进行交互。它们允许你在插件中执行各种操作，比如修改网页内容、获取当前标签页信息、发送网络请求等。以下是一些浏览器API的例子：

1. chrome.tabs API: 这个API允许你与浏览器标签页进行交互，可以获取标签页的信息、操作标签页的URL、切换标签页等。例如，你可以使用chrome.tabs.create()方法创建一个新标签页，然后使用chrome.tabs.update()方法更新标签页的URL。

2. chrome.extension API: 这个API提供了一些用于扩展程序管理的功能，比如获取当前插件的信息、发送消息到其他插件等。例如，你可以使用chrome.extension.getURL()方法获取插件资源的URL，或者使用chrome.extension.sendMessage()方法与其他插件进行通信。

3. chrome.runtime API: 这个API提供了一些运行时的功能，比如获取插件的ID、注册监听器等。例如，你可以使用chrome.runtime.getURL()方法获取插件的根路径URL，或者使用chrome.runtime.onMessage()方法监听来自其他部分的消息。

这些只是浏览器API的几个例子，实际上还有很多其他的API可供使用。每个API都有自己的一组方法和属性，可以通过查阅相关文档来了解更多细节。在编写插件时，了解和使用这些API可以让你能够实现更加强大和灵活的功能。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

wp231957

FishC 发表于 2024-5-29 09:53
当我说到浏览器的API时，我指的是浏览器提供给插件开发者的一组接口和功能，可以用来与浏览器进行交互 ...

学了屠龙术  却发现 找不到龙
这个浏览器插件 都有哪些应用场景呢

FishC

wp231957 发表于 2024-05-31 10:03
学了屠龙术  却发现 找不到龙
这个浏览器插件 都有哪 ...

浏览器插件有非常广泛的应用场景，以下是一些常见的应用场景：

1. 广告拦截器：很多用户希望在浏览网页时不被烦扰的广告。你可以编写一个插件来拦截和过滤网页上的广告内容，提供更加清爽的浏览体验。

2. 笔记工具：有时候我们在网上阅读文章或者做研究时，希望能够快速记录一些重要的内容或者添加一些标签。你可以开发一个插件来实现这个功能，让用户能够方便地创建、保存和管理笔记。

3. 密码管理器：随着互联网的普及，我们需要记住越来越多的密码。一个密码管理器插件可以帮助用户安全地保存和管理他们的登录凭证，提供方便的自动填充功能，并保护用户的账号安全。

4. 下载扩展：改进浏览器的下载功能，提供更多选项和定制化的功能，比如自动重命名下载文件、下载速度监控等。

5. 视频下载器：许多视频网站没有提供下载功能。你可以编写一个插件来识别网页上的视频，并提供下载按钮，使用户能够轻松地将视频保存到本地。

6. 社交媒体增强：为社交媒体平台（如Facebook、Twitter）开发插件，提供额外的功能，比如在网页上直接分享内容、快速回复消息、隐藏某些动态等。

7. 搜索增强：改进搜索引擎的功能，提供自定义搜索选项、搜索建议、搜索历史记录等，从而提高用户的搜索效率。

这只是浏览器插件的一小部分应用场景，实际上还有很多其他的创意和需求可以通过插件来实现。无论是解决用户痛点，提供便利功能，还是改进浏览器的使用体验，插件都能够发挥巨大的作用。只要你有想法，就可以尝试开发一个适合自己的插件！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

liuhongrun2022

用tempermonkey可以写

wp231957

FishC 发表于 2024-5-29 09:41
如果你的代码非常长或者复杂，可以将它放在单独的文件中，然后在background.js中通过引入该文件来执行 ...

我在登录一个网站时  （这个网站不稳定 不适合使用selenium 啥的）  
我想导出当前页面的部分显示信息  导出到excel csv txt  一类的 都可
使用油猴（浏览器插件）能否实现

FishC

wp231957 发表于 2024-07-16 14:49
我在登录一个网站时  （这个网站不稳定 不适合使用sel ...

当然可以，使用油猴脚本（Tampermonkey）是一个很好的选择！它能够在特定的网页中注入并执行自定义的JavaScript代码。接下来，我们一步步讲解如何实现这个功能：

1. **安装Tampermonkey插件**：首先，如果你还没有安装的话，在你的谷歌浏览器中搜索并安装Tampermonkey插件。

2. **创建新脚本**：
   - 打开Tampermonkey插件，点击“仪表板”。
   - 在打开的页面中点击“新建脚本”按钮。

3. **编写脚本**：

在新打开的脚本编辑页面中，你可以看到自动生成的模板。我们需要修改该模板，添加我们的代码。例如：

1. // ==UserScript==
   
2. // @name         导出网页信息到CSV
   
3. // @namespace    http://tampermonkey.net/
   
4. // @version      0.1
   
5. // @description  导出特定网页信息到CSV文件
   
6. // @author       你的名字
   
7. // @match        https://www.example.com/*  // 替换为你目标网站的URL
   
8. // @grant        none
   
9. // ==/UserScript==
   
10. 
    
11. (function() {
    
12.     'use strict';
    
13. 
    
14.     // 这段代码会在页面加载完成后执行
    
15.     window.addEventListener('load', () => {
    
16.         // 找到你需要导出的信息，例如所有的<span>标签内容
    
17.         const data = Array.from(document.querySelectorAll('span'))
    
18.                           .map(span => span.textContent);
    
19. 
    
20.         // 将数据转换为CSV格式
    
21.         const csvContent = "data:text/csv;charset=utf-8,"
    
22.                            + data.join("\n");
    
23. 
    
24.         // 创建一个隐藏的链接元素，用于下载CSV文件
    
25.         const encodedUri = encodeURI(csvContent);
    
26.         const link = document.createElement("a");
    
27.         link.setAttribute("href", encodedUri);
    
28.         link.setAttribute("download", "export.csv");
    
29.         document.body.appendChild(link); // 必须将link添加到DOM中，否则不能触发click事件
    
30. 
    
31.         // 模拟用户点击下载
    
32.         link.click();
    
33. 
    
34.         // 移除链接元素
    
35.         document.body.removeChild(link);
    
36.     });
    
37. })();

复制代码

4. **保存并启用脚本**：点击“文件” > “保存”，然后确保该脚本在Tampermonkey仪表盘中已启用。

5. **测试脚本**：访问你指定的网站，当页面加载完成后，脚本会自动运行并将收集到的数据生成CSV文件，自动触发下载。

### 代码解释：
- `@match`：指定脚本将在何种URL下运行。你可以更改为你实际目标网站的URL。
- `window.addEventListener('load', () => { ... })`：确保脚本在页面完全加载后运行。
- `document.querySelectorAll('span')`：找到所有的`<span>`标签，这只是一个例子，你可以根据实际情况更改选择器。
- `Array.from(...).map(...)`：将所有找到的元素转换为文本内容数组。
- `data.join("\n")`：将数组转换为CSV格式的字符串。
- `encodeURI(csvContent)`：编码CSV内容，以确保下载链接有效。
- `document.createElement("a")`及后续代码：创建一个临时的下载链接，并模拟点击以触发文件下载。

希望这些步骤能帮到你，把网页信息导出为CSV文件就这么简单！如果还有其他疑问，别犹豫，尽管问我！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

wp231957

FishC 发表于 2024-7-16 14:50
当然可以，使用油猴脚本（Tampermonkey）是一个很好的选择！它能够在特定的网页中注入并执行自定义的Ja ...

有问题，第一个问题就不会
**安装Tampermonkey插件**：首先，如果你还没有安装的话，在你的谷歌浏览器中搜索并安装Tampermonkey插件。

虽然 我用的是谷歌，但是我想知道  其他浏览器 能否用  比如 360浏览器
即便是谷歌浏览器  我也不知道咋安装油猴

FishC

wp231957 发表于 2024-07-16 14:57
有问题，第一个问题就不会
**安装Tampermonkey插件** ...

哈哈，明白了，先来解决第一步的问题：如何在各种浏览器中安装Tampermonkey（油猴）插件。我们一步步来，不慌！

### 谷歌浏览器（Google Chrome）

1. **打开 Chrome 浏览器**。

2. **访问 Chrome 网上应用店**：
   - 在地址栏输入 `chrome://extensions` 并按回车键。
   - 点击左上角的“三条横线”图标，然后点击“打开 Chrome 网上应用店”。

3. **搜索 Tampermonkey**：
   - 在搜索栏中输入 “Tampermonkey”。
   - 找到结果中显示的 Tampermonkey 插件，并点击它。

4. **安装 Tampermonkey**：
   - 点击 “添加至 Chrome” 按钮。
   - 在弹出的对话框中点击 “添加扩展程序”。

到这里，Tampermonkey 插件就会被自动安装并启用。

### 360浏览器

360浏览器基于 Chromium 内核，因此也支持安装 Chrome 插件。

1. **打开 360 浏览器**。

2. **访问 Chrome 网上应用店**：
   - 在地址栏输入 `chrome://extensions` 并按回车键。
   - 点击页面底部的链接，访问 “Chrome 网上应用店”。

3. **搜索 Tampermonkey**：
   - 和在 Chrome 浏览器中类似，在搜索栏中输入 “Tampermonkey”。
   - 找到并点击插件。

4. **安装 Tampermonkey**：
   - 点击 “添加至 Chrome” 按钮。
   - 确认安装，点击 “添加扩展程序”。

360浏览器会下载安装 Tampermonkey 插件。

### 火狐浏览器（Firefox）

1. **打开 Firefox 浏览器**。

2. **访问 Firefox 附加组件网站**：
   - 在地址栏输入 `about:addons` 并按回车键。
   - 点击左侧的 “扩展”。

3. **搜索 Tampermonkey**：
   - 在右上角搜索栏中输入 “Tampermonkey”。
   - 找到结果中显示的 Tampermonkey 插件，并点击它。

4. **安装 Tampermonkey**：
   - 点击 “添加到 Firefox” 按钮。
   - 在弹出的对话框中点击 “添加”。

安装完成后，你可以在浏览器的扩展管理页面看到 Tampermonkey，并且在工具栏中会有一个油猴图标。

### Edge 浏览器

Microsoft Edge 基于 Chromium 内核，也可以安装 Chrome 扩展。

1. **打开 Edge 浏览器**。

2. **访问 Chrome 网上应用店**：
   - 在地址栏输入 `chrome://extensions` 并按回车键。
   - 允许从其他存储安装扩展，点击页面上的 “允许” 按钮，启用 “来自其他存储的扩展”。

3. **搜索 Tampermonkey**：
   - 同样在搜索栏中输入 “Tampermonkey”。
   - 找到并点击插件。

4. **安装 Tampermonkey**：
   - 点击 “添加到 Chrome” 按钮。
   - 确认安装，点击 “添加扩展程序”。

### 安装完成后的操作

不管你使用的是哪个浏览器，安装 Tampermonkey 后，你都可以通过点击浏览器工具栏（通常在右上角）上的油猴图标来管理和创建脚本。

好啦，完成这几步，你就成了油猴插件的小主人啦！现在你可以继续用之前提供的代码编写自己的脚本，愉快地导出网页信息了。如果还有其他问题，随时找我，这里是您的技术小帮手！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

wp231957

FishC 发表于 2024-7-16 14:57
哈哈，明白了，先来解决第一步的问题：如何在各种浏览器中安装Tampermonkey（油猴）插件。我们一步步来 ...

我的网络  无法访问 chromewebstore.google.com   
所以  谷歌浏览器的 插件 可否下载后  安装

FishC

wp231957 发表于 2024-07-16 15:01
我的网络  无法访问 chromewebstore.google.com   
...

如果你无法直接访问Chrome Web Store，仍然可以通过手动下载插件文件的方式来安装Tampermonkey。以下是具体步骤：

### 手动安装Tampermonkey插件到谷歌浏览器

1. **下载Tampermonkey插件文件**：
   - 首先，找到一个可信赖的网站，比如[Chrome Extension Downloader](https://chrome-extension-downloader.com/)，或者通过在搜索引擎中搜索“Tampermonkey Chrome extension download”找到其他下载站点。
   - 在下载插件时，确保下载的文件是以`.crx`结尾的Chrome插件文件。

2. **安装Tampermonkey插件**：
   - 打开谷歌浏览器。
   - 在地址栏中输入 `chrome://extensions/` 进入插件管理页面。
   - 将下载好的`.crx`文件直接拖放到这个页面中。

3. **确认安装**：
   - 确认弹出的安装提示，选择“添加扩展程序”进行安装。

这样就可以手动安装Tampermonkey插件到你的谷歌浏览器中了。对于其他浏览器，例如360浏览器，则需要找到适合该浏览器的类似插件管理界面，进行相应的插件安装步骤。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

wp231957

FishC 发表于 2024-7-16 15:01
如果你无法直接访问Chrome Web Store，仍然可以通过手动下载插件文件的方式来安装Tampermonkey。以下是 ...

CRX 已经下载成功
但是 无法在谷歌浏览器上安装
提示如下：
无法从该网站 添加应用  扩展程序 和用户脚本

FishC

wp231957 发表于 2024-07-16 15:10
CRX 已经下载成功
但是 无法在谷歌浏览器上安装
提 ...

看来你已经成功下载了Tampermonkey的CRX文件，但遇到了安装问题。别担心，我们可以通过开发者模式绕过这一限制来手动安装。以下是具体步骤：

### 开发者模式手动安装插件

1. **打开Chrome浏览器**。

2. **进入扩展程序页面**：
   - 在地址栏输入`chrome://extensions/`，然后按Enter键。
   - 也可以点击右上角的三个点（菜单图标），选择“更多工具” > “扩展程序”。

3. **开启开发者模式**：
   - 在扩展程序页面的右上角，有一个“开发者模式”的开关，将其打开。

4. **将CRX文件拖入扩展程序页面**：
   - 找到你下载好的Tampermonkey CRX文件（通常在你的下载文件夹中）。
   - 直接将该文件拖动到扩展程序页面，这时Chrome会询问你是否要安装该扩展程序。

5. **确认安装**：
   - 点击“添加扩展程序”，完成安装。

现在，你应该可以在浏览器右上角看到Tampermonkey的图标了。

### 安装Tampermonkey到其他浏览器

#### 360浏览器（极速模式）

1. **打开360浏览器**。

2. **进入扩展程序管理页面**：
   - 点击右上角的菜单按钮（通常是“三条横线”或“三个点”图标）。
   - 选择“工具” > “扩展管理”。

3. **开启开发者模式**：
   - 在扩展管理页面的底部，有一个“开发者模式”的开关，将其打开。

4. **将CRX文件拖入扩展管理页面**：
   - 同样，找到你下载的Tampermonkey CRX文件。
   - 直接将文件拖动到扩展管理页面，浏览器会弹出安装提示。

5. **确认安装**：
   - 点击“添加扩展”，完成安装。

通过这些步骤，你就可以在不同的浏览器上手动安装Tampermonkey插件了。接下来，我们可以继续编写并运行你的脚本了！希望这些步骤能够帮助到你。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

wp231957

FishC 发表于 2024-7-16 15:11
看来你已经成功下载了Tampermonkey的CRX文件，但遇到了安装问题。别担心，我们可以通过开发者模式绕过 ...

嗯，这个搞定了，但是我看网上信息  那个拥有一双眼睛的 篡改猴  是独立显示在网页上的
而我这个 页面只显示了一个扩展图标  需要点击这个扩展  才能看到篡改猴

FishC

wp231957 发表于 2024-07-16 15:17
嗯，这个搞定了，但是我看网上信息  那个拥有一双眼睛 ...

哈哈，你说的“拥有一双眼睛的篡改猴”可能指的是Tampermonkey图标。新安装后，Tampermonkey会显示在浏览器的扩展栏上。要看到并管理你的脚本，需要点击这个图标。

不过别担心，虽然它显示在扩展图标中，但功能其实都是一样的。接下来，我们来写一个简单的脚本，实现你之前提到的导出网页信息的功能。

### 使用Tampermonkey导出网页信息

1. **创建一个新的脚本**：
   - 点击浏览器右上角的Tampermonkey图标。
   - 选择“添加新脚本”。
   - 这会打开Tampermonkey的脚本编辑器。

2. **编写脚本**：

1. // ==UserScript==
   
2. // @name         导出网页信息到文件
   
3. // @namespace    http://tampermonkey.net/
   
4. // @version      0.1
   
5. // @description  导出当前网页中的部分信息到CSV文件
   
6. // @author       你的名字
   
7. // @match        *://*/*
   
8. // @grant        none
   
9. // ==/UserScript==
   
10. 
    
11. (function() {
    
12.     'use strict';
    
13. 
    
14.     // 你想要导出的数据
    
15.     const data = [['姓名', '年龄'], ['张三', 30], ['李四', 25]];
    
16. 
    
17.     // 将数据转换为CSV格式
    
18.     const csvContent = data.map(e => e.join(',')).join('\n');
    
19. 
    
20.     // 创建一个下载链接并点击它以下载CSV文件
    
21.     const downloadLink = document.createElement('a');
    
22.     downloadLink.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent);
    
23.     downloadLink.download = 'data.csv';
    
24.     document.body.appendChild(downloadLink);
    
25.     downloadLink.click();
    
26.     document.body.removeChild(downloadLink);
    
27. })();

复制代码

3. **保存并启用脚本**：
   - 在Tampermonkey编辑器中编辑你的脚本，然后点击“文件”->“保存”或直接使用快捷键`Ctrl + S`保存。
   - 确保脚本是启用状态（图标应该是绿色）。

4. **测试脚本**：
   - 打开或刷新任意网页，你该脚本会自动运行，并触发下载CSV文件。

### 其他浏览器

对于其他浏览器，比如360浏览器，它们通常也有支持油猴脚本的插件。你可以照样搜索“Tampermonkey 360浏览器”并安装使用，操作步骤与上面类似。

祝你脚本愉快！ 如果有任何问题，随时找我！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

wp231957

FishC 发表于 2024-7-16 15:17
哈哈，你说的“拥有一双眼睛的篡改猴”可能指的是Tampermonkey图标。新安装后，Tampermonkey会显示在浏 ...

要是提取表格里面的内容  比如  td标签下的
这两句代码 该如何修改呢

// 找到你需要导出的信息，例如所有的<span>标签内容
        const data = Array.from(document.querySelectorAll('span'))
                          .map(span => span.textContent);

    // 将数据转换为CSV格式
       const csvContent = "data:text/csv;charset=utf-8,"
                           + data.join("\n");