Tampermonkey
Tampermonkey 是一款流行的用户脚本管理器,它允许用户在各种主流浏览器上安装并运行所谓的“用户脚本”(user scripts)。用户脚本是小段的 JavaScript 代码,可以修改网页的功能和外观,增强浏览器的功能,或者自动化某些网页操作。Tampermonkey 使得管理和配置这些脚本变得非常方便。
![Tampermonkey](https://cdn.portal.levenx.com/levenx-world/R14657dkUQkk2yiF.png)
油猴脚本中用户脚本中的@include和@match有什么区别?
在用户脚本(如Tampermonkey或Greasemonkey脚本)中,`@include`和`@match`都是元数据块(Metadata Block)中用来指定脚本应当在哪些网页上运行的关键指令。虽然它们的功能相似,但是它们的匹配模式和精确度有所不同。
### @include
`@include`指令允许使用通配符来定义脚本应当运行的页面。这种方式提供了较大的灵活性,但相对来说,可能会因匹配过宽泛而导致脚本在不应运行的页面上运行。
**例子**:
```javascript
// ==UserScript==
// @name Example Script
// @include http://*example.com/*
// ==/UserScript==
```
在这个例子中,脚本将会在所有使用`http`协议访问`example.com`域名下的页面上运行,无论路径是什么。
### @match
与`@include`相比,`@match`提供了更为精确的URL匹配模式。它不支持通配符,但可以使用特定的URL模式匹配语法来精确定义脚本应运行的页面。
**例子**:
```javascript
// ==UserScript==
// @name Example Script
// @match http://*example.com/*
// ==/UserScript==
```
在此例中,`@match`同样指示脚本在访问`example.com`的页面上运行,但它使用的是更为标准化的模式匹配方式,更便于控制和避免误匹配。
### 总结
总的来说,`@include`提供了更高的灵活性,适用于那些需要广泛匹配的场景,而`@match`则提供了更高的精确性和标准化,适合需要精确控制脚本运行环境的场景。选择哪一种取决于具体的应用需求和对匹配控制的需求程度。在实际使用中,有些开发者会结合使用这两种指令,以利用各自的优点。
阅读 2 · 8月24日 17:28
如何使用Greasemonkey/Tampermonkey脚本更改类CSS?
如何使用Greasemonkey或Tampermonkey脚本来更改类CSS。
首先,为了更改一个网站的CSS样式,我们使用Greasemonkey(在Firefox浏览器中使用)或Tampermonkey(在Chrome浏览器中使用)这样的用户脚本管理器来添加或修改网页上的CSS规则。用户脚本允许我们在浏览器加载网页时运行自定义JavaScript代码,这样可以更改网页的外观和行为。
以下是使用Tampermonkey更改CSS类的一个基本步骤和示例:
### 1. 安装Tampermonkey插件
首先,您需要在Chrome浏览器中安装Tampermonkey扩展。这可以通过Chrome网上应用店免费下载和安装。
### 2. 创建新的用户脚本
安装完毕后,点击浏览器右上角的Tampermonkey图标,选择“添加新脚本...”。
### 3. 编写脚本来更改CSS
在脚本编辑页面,您可以输入类似以下的JavaScript代码来更改特定CSS类的样式:
```javascript
// ==UserScript==
// @name 更改网站样式示例
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 尝试更改网页的CSS样式
// @author 您的名字
// @match http://example.com/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// 添加或修改CSS规则
GM_addStyle('.your-class-name { background-color: red !important; color: white !important; }');
})();
```
在这个例子中,`@match`标签确保脚本只在特定网站上运行(如 http://example.com/*)。`GM_addStyle`函数用来添加新的CSS规则,这里将类名为 `your-class-name`的所有元素的背景色更改为红色,并设置文字颜色为白色。
### 4. 保存并测试脚本
保存您的脚本并访问匹配的网站来查看效果。如果一切设置正确,您应该能看到相应元素样式的变化。
使用Greasemonkey/Tampermonkey来更改CSS类可以非常灵活和强大,您可以根据需要调整和扩展上述基本步骤,例如添加更多的CSS规则或在不同的网站上使用不同的规则。希望这个答案对您有所帮助!如果有其他问题或需要更详细的解释,请随时提问。
阅读 2 · 8月24日 16:58
如何在浏览器外编辑Tampermonkey脚本
在浏览器外编辑Tampermonkey脚本可以通过以下几个步骤来实现:
### 1. 导出脚本
首先,您需要从Tampermonkey中导出您想要编辑的脚本。这可以通过Tampermonkey的仪表盘完成。
- 打开浏览器,点击Tampermonkey扩展图标。
- 选择“仪表盘”,在打开的页面中找到您想要编辑的脚本。
- 点击脚本旁边的“编辑”按钮(一般是笔的图标)。
- 在编辑界面,选择“文件”菜单,然后选择“导出”。您可以选择导出为`.zip`文件或者单个`.js`文件。
### 2. 使用外部编辑器编辑
将脚本导出后,您就可以使用任何文本编辑器来编辑这个`.js`文件了。比如:
- **Visual Studio Code**:功能强大,支持多种编程语言,有丰富的扩展库。
- **Sublime Text**:轻量级编辑器,启动速度快,界面简洁。
- **Notepad++**:免费编辑器,支持多种编程语言的语法高亮。
在编辑器中,您可以利用各种代码编辑功能,如语法高亮、代码补全、格式化等,来提高编码效率。
### 3. 导入脚本
编辑完成后,您需要将修改后的脚本重新导入到Tampermonkey中。
- 打开浏览器,进入到Tampermonkey的仪表盘。
- 点击“实用工具”选项卡。
- 在“文件”区域,点击“选择文件”,选择您编辑好的`.js`文件。
- 导入后,Tampermonkey会提示您确认脚本的安装或更新。
### 4. 测试脚本
导入脚本后,不要忘记在实际网页中测试脚本的功能是否正常。确保新的更改没有引入任何bug。
### 示例
假设您需要修改一个脚本,以在网页上自动填充日期信息。您可以在Sublime Text中打开脚本文件,修改相关的JavaScript代码,比如增加一个新的日期计算功能。然后按照上述步骤导入并测试脚本。
通过使用外部编辑器,您不仅可以利用更强大的代码编辑功能,还能更好地管理代码版本,特别是当脚本变得越来越复杂时。在团队协作的环境中,这种方法尤其有用。
阅读 3 · 8月24日 16:57
Tampermonkey 如何在谷歌搜索框中设置文本?
在使用Tampermonkey时,我们能通过编写一段 JavaScript 脚本来实现在 Google 搜索框中自动填充特定的文本。这种功能可以用于多种目的,比如测试、快速搜索固定词汇等。
### 步骤1:创建一个新脚本
首先,您需要在 Tampermonkey 扩展中创建一个新的用户脚本。可以点击浏览器扩展图标,选择“添加新脚本”。
### 步骤2:编写脚本
接下来,在脚本编辑器中编写以下 JavaScript 代码:
```javascript
// ==UserScript==
// @name Google Search Autofill
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://www.google.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 监听页面加载完成
window.addEventListener('load', function() {
// 选择 Google 搜索框
var searchInput = document.querySelector('input[name="q"]');
// 判断搜索框是否存在
if (searchInput) {
// 设置搜索框的值
searchInput.value = "Tampermonkey";
}
});
})();
```
这段脚本的主要工作是在页面加载完成后,寻找 Google 的搜索输入框(其 `name` 属性通常为 `"q"`),并设置其值为 `"Tampermonkey"`。
### 步骤3:保存并测试
保存脚本后,打开一个新的 Google 搜索页面,您应该看到搜索框自动被填充上了“Tampermonkey”。
### 特别注意
- 确保脚本在正确的 URL 下运行(如上述代码中的 `@match` 标签所示)。
- 考虑到谷歌可能会更新其页面结构,如果脚本突然不工作,可能需要检查并更新选择器或其他逻辑。
通过这种方式,您可以根据需要修改脚本,以实现在 Google 搜索框中自动设置不同的文本或进行其他操作。
阅读 23 · 7月21日 21:27
如何使用Tampermonkey重新加载另一个选项卡?
在使用Tampermonkey重新加载另一个浏览器标签页的情况中,基本上需要借助于浏览器提供的特定API来实现跨标签页的脚本运行。由于浏览器的安全策略,直接从一个标签页控制另一个标签页通常是受到限制的,但可以通过以下步骤来尝试实现:
### 1. 使用存储机制(localStorage 或 sessionStorage)
#### 步骤:
1. **设置监听器** 在每个标签页的Tampermonkey脚本中,添加事件监听器来监听存储变更。
```javascript
// 监听localStorage的变更
window.addEventListener('storage', function(e) {
if (e.key === 'reloadRequest') {
window.location.reload();
}
});
```
2. **发送重载信号** 在需要触发重载的标签页脚本中,通过更改存储的值来发送重载请求。
```javascript
// 发出重载请求
localStorage.setItem('reloadRequest', Date.now());
```
#### 示例场景:
假设你在使用Tampermonkey开发一个需要多标签协同工作的工具,比如在一个标签页中进行操作后需要自动刷新另一个标签页以更新数据。通过上述代码,当用户在一个标签页进行特定操作(比如点击一个按钮或提交表单)时,就可以触发其他所有监听此事件的标签页重新加载。
### 2. 使用浏览器扩展
由于Tampermonkey脚本运行在比较严格的沙盒环境中,他们没有直接操作其他标签的权限。如果需要更高级的控制,考虑开发一个浏览器扩展可能是更好的选择,因为扩展通常拥有更广泛的API来管理标签页。
#### 步骤:
1. 开发一个简单的浏览器扩展。
2. 使用扩展API来检测特定事件并执行标签页重载。
```javascript
chrome.tabs.reload(tabId);
```
#### 示例场景:
开发一个用于项目管理的工具,当用户在一个标签页中更新了项目状态后,需要其他所有与该项目相关的标签页自动刷新以显示最新状态。
### 结论:
由于浏览器和Tampermonkey的安全限制,直接从一个脚本控制另一个标签的能力是有限的。使用localStorage来实现跨标签通信是一种可行的方法,但在需求更复杂时,开发一个专门的浏览器扩展可能是更合适的解决方案。
阅读 14 · 7月21日 21:09
油猴脚本内如何检测用户脚本是否是从 Chrome 商店安装的?
首先,需要明确的是,油猴脚本(Tampermonkey)通常是通过油猴扩展来管理和运行的,而油猴扩展本身并不直接提供接口来判断一个脚本是否来自Chrome商店。但是,我们可以通过一些间接的方式来推断或检测。
### 技术方案
**1. 检查脚本的元数据:**
每个油猴脚本都会有一段元数据区域,这通常包含了脚本的来源、版本号等信息。虽然这个部分可以被脚本作者自定义,但如果规定从Chrome商店下载的脚本必须包含特定的标记或者链接,我们就可以通过解析这些元数据来判断脚本是否来自Chrome商店。
```javascript
// ==UserScript==
// @name 示例脚本
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 试一试
// @author 你的名字
// @match http://*/*
// @grant none
// @fromStore true
// ==/UserScript==
(function() {
'use strict';
if (GM_info.script.fromStore === 'true') {
console.log('这个脚本是从Chrome商店安装的');
} else {
console.log('这个脚本不是从Chrome商店安装的');
}
})();
```
**2. 使用浏览器API检查扩展来源:**
这种方法更复杂,需要脚本能够访问到浏览器的扩展API,例如 `chrome.management` API。通过这个API,我们可以获取到所有已安装扩展的详细信息,包括其来源信息。但是,这通常需要用户授予额外的权限,而且油猴脚本本身限制了一些API的使用。
**3. 服务器端验证:**
如果你有控制服务器的权限,你可以要求所有从Chrome商店安装的脚本在安装时进行一次服务器验证,服务器记录下所有验证过的脚本ID。之后,脚本在执行时可以向服务器发送请求,查询自身ID是否在验证列表中。
### 结论
由于油猴脚本的开放性和自定义性非常高,纯粹从脚本自身来确定其是否来自Chrome商店存在一定的困难和不确定性。通常,结合元数据标记和服务器端验证会是一个相对可行的方法。需要注意的是,这些方法都有可能被绕过,因此安全性和准确性不能完全保证。在实际应用中,可以根据具体情况选择最适合的方法。
阅读 39 · 6月27日 16:06
如何从 Chrome 控制台中使用Tampermoney API?
在Chrome控制台中使用Tampermonkey API主要涉及几个步骤,我将逐一进行说明。
首先,确保您已经在Chrome浏览器中安装了Tampermonkey扩展程序。Tampermonkey是一个流行的用户脚本管理器,通过它可以管理和运行所谓的用户脚本,这些脚本可以改变网页的行为和外观。
### 步骤 1: 安装Tampermonkey扩展
- 打开Chrome浏览器,前往Chrome网上应用店。
- 搜索“Tampermonkey”,找到它并点击“添加到Chrome”。
### 步骤 2: 创建新用户脚本
- 安装完毕后,点击浏览器右上角的Tampermonkey图标,选择“创建新脚本...”。
- 这将打开Tampermonkey的脚本编辑器。
### 步骤 3: 使用API编写脚本
- 在脚本编辑器中,您可以开始编写Javascript代码来使用Tampermonkey提供的API。例如,您可以使用`GM_xmlhttpRequest`来进行跨域请求,或者使用`GM_setValue`和`GM_getValue`来存储和检索数据。
例如,下面是一个简单的脚本,它使用`GM_xmlhttpRequest`来获取一个网页的内容并在控制台中打印出来:
```javascript
// ==UserScript==
// @name Example Script
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match *://*/*
// @grant GM_xmlhttpRequest
// ==/UserScript==
(function() {
'use strict';
GM_xmlhttpRequest({
method: "GET",
url: "https://example.com",
onload: function(response) {
console.log("Response from example.com: ", response.responseText);
}
});
})();
```
### 步骤 4: 保存并测试脚本
- 点击编辑器的“文件”菜单,选择“保存”。
- 打开一个新的标签页,访问匹配用户脚本中`@match`指令规定的URL模式的网站,检查控制台以确认脚本是否按预期工作。
### 注意事项
- 使用Tampermonkey API时,确保在脚本元数据区块(即头部注释中的`@grant`部分)正确声明了所需的API权限。
- 为确保安全和效率,避免在不必要的页面上运行脚本,这可以通过合理配置`@match`来实现。
通过上述步骤,您就可以在Chrome控制台中成功使用Tampermonkey API来增强您的浏览体验或进行页面调试。
阅读 25 · 6月27日 12:16
如何通过 Tampermonkey 在浏览器新标签中打开 link 链接?
在使用 Tampermonkey 脚本管理器实现在浏览器中新标签打开链接的功能时,首先需要确保已经在浏览器中安装了 Tampermonkey 扩展。接下来,可以按照以下步骤创建和使用一个简单的脚本来实现这一功能:
### 步骤 1: 安装 Tampermonkey
1. 打开浏览器(例如 Chrome)。
2. 访问 Chrome 网上应用店或其他浏览器的相应扩展商店。
3. 搜索 “Tampermonkey” 并选择添加到浏览器中。
4. 安装后,确保扩展程序已启用。
### 步骤 2: 创建新脚本
1. 单击浏览器右上角的 Tampermonkey 图标。
2. 选择 “创建新脚本...”。
3. 这将打开 Tampermonkey 的脚本编辑器。
### 步骤 3: 编写脚本
在脚本编辑器中,可以编写一个简单的脚本,使所有链接默认在新标签页中打开。以下是一个基本的脚本示例:
```javascript
// ==UserScript==
// @name Open Links in New Tab
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author Your Name
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 获取页面上所有的链接元素
var links = document.getElementsByTagName("a");
// 遍历每个链接,设置其 target 属性为 “_blank”
for (var i = 0; i < links.length; i++) {
links[i].target = "_blank";
}
})();
```
### 步骤 4: 保存并测试脚本
1. 在脚本编辑器中,点击“文件”菜单,然后选择“保存”。
2. 打开任何网页试试点击链接,如果链接在新标签页中打开,那么脚本工作正常。
### 示例说明
在这个脚本中,我们首先通过 `getElementsByTagName` 获取页面上所有的 `<a>` 元素(即链接)。然后,我们遍历这些链接,并将每个链接的 `target` 属性设置为 `_blank`。这意味着当点击这些链接时,它们将在新的浏览器标签中打开。
以上就是通过 Tampermonkey 在浏览器中自动设置链接在新标签页中打开的一个基本示例。这种方式可以非常方便地对所有网页生效,而不需要手动修改网页代码。
阅读 42 · 6月27日 12:16