Skip to content

Commit dd97be0

Browse files
committed
feat: 添加油猴API的TypeScript类型定义支持
1. 安装@types/tampermonkey包提供官方类型定义\n2. 创建src/types/tampermonkey.d.ts实现自定义类型扩展\n3. 更新tsconfig.json,添加typeRoots配置\n4. 更新userscript-headers.js,添加必要的@grant声明
1 parent a92ee43 commit dd97be0

File tree

6 files changed

+131
-2
lines changed

6 files changed

+131
-2
lines changed

package-lock.json

Lines changed: 14 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"license": "MIT",
1515
"devDependencies": {
1616
"@types/node": "^22.13.1",
17+
"@types/tampermonkey": "^5.0.4",
1718
"@types/webpack": "^5.28.5",
1819
"ts-loader": "^9.5.2",
1920
"typescript": "^5.7.3",

src/types/README.md

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
# 油猴API的TypeScript类型定义
2+
3+
本项目已集成了油猴API的TypeScript类型定义,使您能够在开发过程中获得完整的类型检查和智能提示支持。
4+
5+
## 类型定义来源
6+
7+
类型定义通过以下方式提供:
8+
9+
1. `@types/tampermonkey` npm包 - 提供了官方的油猴API类型定义
10+
2. 本地类型扩展 - 在`src/types/tampermonkey.d.ts`文件中
11+
12+
## 如何使用
13+
14+
### 1. 在代码中使用油猴API
15+
16+
您可以直接在代码中使用油猴API,TypeScript将自动识别这些API的类型:
17+
18+
```typescript
19+
// 存储数据
20+
GM_setValue('key', 'value');
21+
22+
// 读取数据
23+
const value = GM_getValue('key', 'default');
24+
25+
// 注册菜单
26+
GM_registerMenuCommand('菜单项', () => {
27+
console.log('点击了菜单项');
28+
});
29+
30+
// 发送XHR请求
31+
GM_xmlhttpRequest({
32+
method: 'GET',
33+
url: 'https://example.com',
34+
onload: (response) => {
35+
console.log(response.responseText);
36+
}
37+
});
38+
```
39+
40+
### 2. 使用Promise风格的API (GM.*)
41+
42+
如果您更喜欢使用Promise风格的API,可以这样使用:
43+
44+
```typescript
45+
// 存储数据
46+
await GM.setValue('key', 'value');
47+
48+
// 读取数据
49+
const value = await GM.getValue('key', 'default');
50+
51+
// 注册菜单
52+
GM.registerMenuCommand('菜单项', () => {
53+
console.log('点击了菜单项');
54+
});
55+
```
56+
57+
### 3. 检查API可用性
58+
59+
由于油猴脚本可能在不同的环境中运行,建议在使用API前检查其可用性:
60+
61+
```typescript
62+
if (typeof GM_setValue !== 'undefined') {
63+
GM_setValue('key', 'value');
64+
} else if (typeof GM !== 'undefined' && GM.setValue) {
65+
await GM.setValue('key', 'value');
66+
} else {
67+
console.warn('GM存储API不可用');
68+
}
69+
```
70+
71+
## 示例代码
72+
73+
请查看 `src/gm_api_example/gm_api_usage.ts` 文件,其中包含了各种油猴API的使用示例。
74+
75+
## 注意事项
76+
77+
1. 确保在`userscript-headers.js`文件中添加了所需的`@grant`声明,否则相应的API将不可用。
78+
2. 如果您需要使用未在`@types/tampermonkey`中定义的API或自定义扩展,可以在`src/types/tampermonkey.d.ts`文件中添加自定义类型定义。

src/types/tampermonkey.d.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/// <reference types="tampermonkey" />
2+
3+
/**
4+
* 全局油猴API类型定义
5+
* 这个文件导出了所有油猴API的类型,使它们在项目中全局可用
6+
*/
7+
8+
// 重新导出tampermonkey包中的所有类型
9+
export {};
10+
11+
// 确保油猴API在全局范围内可用
12+
declare global {
13+
// 这里可以添加任何额外的自定义类型或扩展
14+
15+
/**
16+
* 自定义油猴API扩展示例
17+
* 如果您使用了某些特定的油猴API扩展或自定义函数,可以在这里定义
18+
*/
19+
// interface TampermonkeyExtensions {
20+
// customFunction(): void;
21+
// }
22+
}

tsconfig.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"compilerOptions": {
33
"target": "ES6",
44
"module": "ESNext",
5-
"lib": ["DOM", "ES6"],
5+
"lib": ["DOM", "ES6", "ES2015.Promise"],
66
"allowJs": true,
77
"checkJs": true,
88
"outDir": "./dist",
@@ -15,7 +15,8 @@
1515
"resolveJsonModule": true,
1616
"isolatedModules": true,
1717
"noEmit": false,
18-
"sourceMap": true
18+
"sourceMap": true,
19+
"typeRoots": ["./node_modules/@types", "./src/types"]
1920
},
2021
"include": ["src/**/*"],
2122
"exclude": ["node_modules"]

userscript-headers.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,17 @@
77
// @author ${author}
88
// @match *://*/*
99
// @run-at document-start
10+
// @grant GM_getValue
11+
// @grant GM_setValue
12+
// @grant GM_deleteValue
13+
// @grant GM_listValues
14+
// @grant GM_registerMenuCommand
15+
// @grant GM_unregisterMenuCommand
16+
// @grant GM_xmlhttpRequest
17+
// @grant GM.getValue
18+
// @grant GM.setValue
19+
// @grant GM.deleteValue
20+
// @grant GM.listValues
21+
// @grant GM.registerMenuCommand
22+
// @grant GM.xmlHttpRequest
1023
// ==/UserScript==

0 commit comments

Comments
 (0)