# Directory Structure
```
├── .gitignore
├── extension
│ ├── .gitignore
│ ├── assets
│ │ ├── react.svg
│ │ └── tailwind.css
│ ├── calls.ts
│ ├── entrypoints
│ │ ├── background.ts
│ │ └── popup
│ │ ├── App.tsx
│ │ ├── index.html
│ │ └── main.tsx
│ ├── package.json
│ ├── public
│ │ ├── icon
│ │ │ ├── 128.png
│ │ │ ├── 16.png
│ │ │ ├── 32.png
│ │ │ ├── 48.png
│ │ │ └── 96.png
│ │ └── wxt.svg
│ ├── README.md
│ ├── storage.ts
│ ├── tsconfig.json
│ ├── utils
│ │ └── query.ts
│ └── wxt.config.ts
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── README.md
├── server
│ ├── .gitignore
│ ├── package.json
│ ├── src
│ │ ├── cli.ts
│ │ ├── main.ts
│ │ ├── tools.ts
│ │ └── ws.ts
│ └── tsconfig.json
└── shared
├── index.ts
└── package.json
```
# Files
--------------------------------------------------------------------------------
/server/.gitignore:
--------------------------------------------------------------------------------
```
1 | dist
2 |
```
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
```
1 | node_modules
2 | .DS_Store
3 | *.log
4 | .cursor
5 |
```
--------------------------------------------------------------------------------
/extension/.gitignore:
--------------------------------------------------------------------------------
```
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | .output
12 | stats.html
13 | stats-*.json
14 | .wxt
15 | web-ext.config.ts
16 |
17 | # Editor directories and files
18 | .vscode/*
19 | !.vscode/extensions.json
20 | .idea
21 | .DS_Store
22 | *.suo
23 | *.ntvs*
24 | *.njsproj
25 | *.sln
26 | *.sw?
27 |
```
--------------------------------------------------------------------------------
/extension/README.md:
--------------------------------------------------------------------------------
```markdown
1 | # WXT + React
2 |
3 | This template should help get you started developing with React in WXT.
4 |
```
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
```markdown
1 | # browser-mcp
2 |
3 | A browser extension and MCP server that allows you to interact with the browser you are using.
4 |
5 | 
6 |
7 | 
8 |
9 | ## Usage
10 |
11 | ```json
12 | {
13 | "mcpServers": {
14 | "playwright": {
15 | "command": "npx",
16 | "args": [
17 | "@djyde/mcp-browser@latest"
18 | ]
19 | }
20 | }
21 | }
22 | ```
23 |
24 | ## Tools
25 |
26 | All available tools are listed in `server/src/tools.ts`.
27 |
28 | ### `get_current_page_markdown`
29 |
30 | Get the markdown from current browser browsing page.
31 |
32 | example:
33 |
34 | ```
35 | Summarize the current page.
36 | ```
37 |
38 | ### `append_style`
39 |
40 | Append a css style to the current browser browsing page.
41 |
42 | example:
43 |
44 | ```
45 | Change the current page to dark mode.
46 | ```
47 |
48 | ### `history_search`
49 |
50 | Search the browser history.
51 |
52 | example:
53 |
54 | ```
55 | Search the browser history for "github".
56 | ```
57 |
58 | ## Roadmap
59 |
60 | - [ ] Publish the extension to extension store.
61 | - [ ] Write documentation.
62 | - [ ] Add more tools.
63 |
64 | ## Build
65 |
66 | ```bash
67 | pnpm i
68 | ```
69 |
70 | ### Extension
71 |
72 | ```bash
73 | cd extension
74 |
75 | # chrome
76 | npm run build
77 |
78 | # edge
79 | npm run build:edge
80 |
81 | # firefox
82 | npm run build:firefox
83 | ```
84 |
85 | After building, the extension will be in the `extension/.output` directory.
86 |
87 | ## Server
88 |
89 | ```bash
90 | cd server
91 |
92 | # dev
93 | npm run dev
94 |
95 | # build
96 | npm run build
97 | ```
98 |
99 | `server/dist/cli.js` is the MCP server entry.
100 |
101 | ## Contributing
102 |
103 | ### Add a new tool
104 |
105 | 1. Add the tool schema to the `tools` array in `server/src/tools.ts`.
106 | 2. Add a extension callable handler in `extension/calls.ts`.
107 | 3. Add a tool handler in `server/src/tools.ts`. Use the `call` function to call the extension handler.
108 |
109 | ## License
110 |
111 | AGPL-3.0-or-later
112 |
```
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
```json
1 | {
2 | "name": "browser-mcp-monorepo"
3 | }
```
--------------------------------------------------------------------------------
/extension/assets/tailwind.css:
--------------------------------------------------------------------------------
```css
1 | @import "tailwindcss";
2 | @plugin "daisyui";
```
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
```yaml
1 | packages:
2 | - 'extension'
3 | - 'server'
4 | - 'shared'
```
--------------------------------------------------------------------------------
/server/src/cli.ts:
--------------------------------------------------------------------------------
```typescript
1 | #!/usr/bin/env node
2 |
3 | import { main } from "./main.js";
4 |
5 | main();
6 |
```
--------------------------------------------------------------------------------
/shared/package.json:
--------------------------------------------------------------------------------
```json
1 | {
2 | "name": "@browser-mcp/shared",
3 | "version": "0.0.1",
4 | "main": "index.ts",
5 | "types": "index.ts"
6 | }
```
--------------------------------------------------------------------------------
/extension/tsconfig.json:
--------------------------------------------------------------------------------
```json
1 | {
2 | "extends": "./.wxt/tsconfig.json",
3 | "compilerOptions": {
4 | "allowImportingTsExtensions": true,
5 | "jsx": "react-jsx"
6 | }
7 | }
8 |
```
--------------------------------------------------------------------------------
/extension/entrypoints/popup/index.html:
--------------------------------------------------------------------------------
```html
1 | <!DOCTYPE html>
2 | <html>
3 | <head>
4 | <title>Browser MCP</title>
5 | <script type="module" src="./main.tsx"></script>
6 | </head>
7 |
8 | <body>
9 | <div id="root"></div>
10 | </body>
11 | </html>
```
--------------------------------------------------------------------------------
/extension/entrypoints/popup/main.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { QueryClientProvider } from "@tanstack/react-query"
2 | import ReactDOM from "react-dom/client"
3 | import { queryClient } from "@/utils/query"
4 | import { App } from "./App"
5 | import "@/assets/tailwind.css"
6 |
7 | const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
8 | root.render(
9 | <QueryClientProvider client={queryClient}>
10 | <App />
11 | </QueryClientProvider>
12 | )
```
--------------------------------------------------------------------------------
/shared/index.ts:
--------------------------------------------------------------------------------
```typescript
1 | export enum WSMethods {
2 | GetCurrentTabUrl = "get_current_tab_url",
3 | GetCurrentTabHtml = "get_current_tab_html",
4 | AppendStyle = "append_style",
5 | ListBookmarks = "list_bookmarks",
6 | HistorySearch = "history_search",
7 | }
8 |
9 | export type MethodResponse = {
10 | type: "response"
11 | id: string
12 | result: any
13 | error?: string
14 | }
15 |
16 | export type MethodCall = {
17 | type: "call"
18 | id: string
19 | method: WSMethods
20 | args: Record<string, any>
21 | }
```
--------------------------------------------------------------------------------
/extension/utils/query.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { ConnectStatus, connectStatusStorage } from "@/storage"
2 | import { QueryClient, useQuery } from "@tanstack/react-query"
3 |
4 | export const queryClient = new QueryClient()
5 |
6 | export const usePermissionsQuery = () => useQuery({
7 | queryKey: ["browser-permissions", "get-all"],
8 | queryFn: async () => {
9 | const permissions = await browser.permissions.getAll()
10 | return permissions
11 | },
12 | })
13 |
14 | export const useServerStatus = () => {
15 | const [status, setStatus] = useState<ConnectStatus>(ConnectStatus.Disconnected)
16 |
17 | async function init() {
18 | const initialStatus = await connectStatusStorage.getValue() ?? ConnectStatus.Disconnected
19 | setStatus(initialStatus)
20 | }
21 |
22 | useEffect(() => {
23 | init()
24 | const sub = connectStatusStorage.watch(value => {
25 | setStatus(value ?? ConnectStatus.Disconnected)
26 | })
27 |
28 | return () => {
29 | sub()
30 | }
31 | }, [])
32 |
33 | return status
34 | }
```
--------------------------------------------------------------------------------
/extension/wxt.config.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { defineConfig } from 'wxt';
2 | import tailwindcss from '@tailwindcss/vite'
3 |
4 | // See https://wxt.dev/api/config.html
5 | export default defineConfig({
6 | modules: ['@wxt-dev/module-react'],
7 | runner: {
8 | binaries: {
9 | edge: "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
10 | },
11 | chromiumArgs: ['--user-data-dir=./.wxt/chrome-data'],
12 | },
13 | manifest: {
14 | name: "Browser MCP",
15 | description: "A browser extension and MCP server that allows you to interact with the browser you are using.",
16 | permissions: [
17 | "activeTab",
18 | "scripting",
19 | "storage",
20 | ],
21 | optional_permissions: [
22 | "bookmarks",
23 | "history"
24 | ],
25 | minimum_chrome_version: '116',
26 | host_permissions: [
27 | "https://*/*",
28 | 'ws://localhost/*'
29 | ],
30 | action: {
31 |
32 | }
33 | },
34 | // @ts-expect-error
35 | vite: () => ({
36 | plugins: [
37 | tailwindcss(),
38 | ]
39 | })
40 | });
41 |
```
--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
```json
1 | {
2 | "name": "@djyde/browser-mcp",
3 | "version": "0.0.2",
4 | "private": false,
5 | "publishConfig": {
6 | "access": "public"
7 | },
8 | "scripts": {
9 | "dev": "tsup src/cli.ts --watch --format esm",
10 | "build": "tsup src/cli.ts --format esm",
11 | "prepublish": "npm run build"
12 | },
13 | "type": "module",
14 | "files": [
15 | "dist"
16 | ],
17 | "bin": {
18 | "browser-mcp": "./dist/cli.js"
19 | },
20 | "dependencies": {
21 | "@extractus/article-extractor": "^8.0.17",
22 | "@modelcontextprotocol/sdk": "^1.8.0",
23 | "@mozilla/readability": "^0.6.0",
24 | "defuddle": "^0.4.0",
25 | "jsdom": "^26.0.0",
26 | "nanoid": "^5.1.5",
27 | "rpc-websockets": "^10.0.0",
28 | "tsup": "^8.4.0",
29 | "turndown": "^7.2.0",
30 | "typescript": "^5.6.3",
31 | "ws": "^8.18.1",
32 | "zod": "^3.24.2"
33 | },
34 | "devDependencies": {
35 | "@browser-mcp/shared": "workspace:*",
36 | "@types/node": "^22.13.14",
37 | "@types/turndown": "^5.0.5",
38 | "@types/ws": "^8.18.0"
39 | }
40 | }
```
--------------------------------------------------------------------------------
/extension/storage.ts:
--------------------------------------------------------------------------------
```typescript
1 |
2 | export enum ConnectStatus {
3 | Disconnected = "disconnected",
4 | Connected = "connected",
5 | Connecting = "connecting",
6 | }
7 |
8 | export const connectStatusStorage = storage.defineItem<ConnectStatus>("local:connectStatus")
9 |
10 | connectStatusStorage.watch(value => {
11 | switch (value) {
12 | case ConnectStatus.Connected:
13 | browser.action.setBadgeBackgroundColor({ color: '#008800' }); // 深绿色背景
14 | browser.action.setBadgeText({ text: '✓' }); // 勾号
15 | browser.action.setBadgeTextColor({ color: '#ffffff' });
16 | break
17 | case ConnectStatus.Disconnected:
18 | browser.action.setBadgeBackgroundColor({ color: '#FF0000' }); // 红色背景
19 | browser.action.setBadgeText({ text: '✗' }); // 叉号
20 | browser.action.setBadgeTextColor({ color: '#ffffff' });
21 | break
22 | case ConnectStatus.Connecting:
23 | browser.action.setBadgeBackgroundColor({ color: '#FF8C00' }); // 深橙色背景
24 | browser.action.setBadgeText({ text: '...' }); // 省略号
25 | break
26 | }
27 | })
```
--------------------------------------------------------------------------------
/server/src/main.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { Server } from "@modelcontextprotocol/sdk/server/index.js";
2 | import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
3 | import { version } from '../package.json'
4 | import { CallToolRequestSchema, ListToolsRequestSchema } from "@modelcontextprotocol/sdk/types.js";
5 | import { tools, ToolHandler } from "./tools";
6 |
7 | // Create an MCP server
8 | const server = new Server({
9 | name: "Browser MCP",
10 | version,
11 | }, {
12 | capabilities: {
13 | resources: {},
14 | logging: {},
15 | tools: {}
16 | }
17 | });
18 |
19 | server.setRequestHandler(ListToolsRequestSchema, async () => {
20 | return {
21 | tools: tools
22 | }
23 | })
24 |
25 | server.setRequestHandler(CallToolRequestSchema, async (request) => {
26 | const toolHandler = new ToolHandler(server)
27 | return toolHandler[request.params.name](request.params.arguments)
28 | })
29 |
30 | export async function main() {
31 | // Start receiving messages on stdin and sending messages on stdout
32 | const transport = new StdioServerTransport();
33 | await server.connect(transport);
34 | }
35 |
```
--------------------------------------------------------------------------------
/extension/package.json:
--------------------------------------------------------------------------------
```json
1 | {
2 | "name": "browser-mcp",
3 | "description": "Browser MCP",
4 | "private": true,
5 | "version": "0.0.0",
6 | "type": "module",
7 | "scripts": {
8 | "dev": "wxt -b edge",
9 | "dev:firefox": "wxt -b firefox",
10 | "build": "wxt build",
11 | "build:edge": "wxt build -b edge",
12 | "build:firefox": "wxt build -b firefox --mv3",
13 | "zip": "wxt zip",
14 | "zip:firefox": "wxt zip -b firefox",
15 | "compile": "tsc --noEmit",
16 | "postinstall": "wxt prepare"
17 | },
18 | "dependencies": {
19 | "@browser-mcp/shared": "workspace:*",
20 | "@radix-ui/themes": "^3.2.1",
21 | "@tailwindcss/vite": "^4.1.3",
22 | "@tanstack/react-query": "^5.71.10",
23 | "@webext-core/proxy-service": "^1.2.1",
24 | "@wxt-dev/storage": "^1.1.1",
25 | "daisyui": "^5.0.12",
26 | "react": "^19.0.0",
27 | "react-dom": "^19.0.0",
28 | "tailwindcss": "^4.1.3"
29 | },
30 | "devDependencies": {
31 | "@types/react": "^19.0.1",
32 | "@types/react-dom": "^19.0.2",
33 | "@wxt-dev/module-react": "^1.1.2",
34 | "typescript": "^5.6.3",
35 | "wxt": "^0.19.29"
36 | }
37 | }
38 |
```
--------------------------------------------------------------------------------
/extension/public/wxt.svg:
--------------------------------------------------------------------------------
```
1 | <svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <g clip-path="url(#clip0_305_516)">
3 | <g clip-path="url(#clip1_305_516)">
4 | <path d="M49.0229 69.1875C54.1272 69.1875 58.265 65.0497 58.265 59.9454V50.7033H59.9454C65.0497 50.7033 69.1875 46.5655 69.1875 41.4612C69.1875 36.357 65.0497 32.2191 59.9454 32.2191H58.265V22.9771C58.265 17.8728 54.1272 13.735 49.0229 13.735H39.7809V12.0546C39.7809 6.95032 35.643 2.8125 30.5388 2.8125C25.4345 2.8125 21.2967 6.95032 21.2967 12.0546V13.735H12.0546C6.95032 13.735 2.8125 17.8728 2.8125 22.9771V32.2191H4.49288C9.59714 32.2191 13.735 36.357 13.735 41.4612C13.735 46.5655 9.59714 50.7033 4.49288 50.7033H2.8125V69.1875H21.2967V67.5071C21.2967 62.4029 25.4345 58.265 30.5388 58.265C35.643 58.265 39.7809 62.4029 39.7809 67.5071V69.1875H49.0229Z" stroke="#67D55E" stroke-width="5.625"/>
5 | </g>
6 | </g>
7 | <defs>
8 | <clipPath id="clip0_305_516">
9 | <rect width="72" height="72" fill="white"/>
10 | </clipPath>
11 | <clipPath id="clip1_305_516">
12 | <rect width="72" height="72" fill="white"/>
13 | </clipPath>
14 | </defs>
15 | </svg>
16 |
```
--------------------------------------------------------------------------------
/server/src/ws.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { MethodResponse } from '@browser-mcp/shared';
2 | import { randomUUID } from 'node:crypto';
3 | import WebSocket, { WebSocketServer } from 'ws';
4 |
5 | const PORT = 11223;
6 | let wss = new WebSocketServer({ port: PORT });
7 |
8 | let currentWS: WebSocket | null = null
9 |
10 | wss.on("connection", ws => {
11 | currentWS = ws
12 |
13 | // Handle client disconnection
14 | ws.on("close", () => {
15 | currentWS = null
16 | });
17 |
18 | // Handle connection errors
19 | ws.on("error", (error) => {
20 | try {
21 | ws.terminate();
22 | } catch (e) {
23 | }
24 | });
25 |
26 | ws.on('message', (message) => {
27 | })
28 | });
29 |
30 | // Handle server-level errors
31 | wss.on("error", (error) => {
32 | console.error("WebSocket server error:", error);
33 | });
34 |
35 | // Cleanup on server shutdown
36 | process.on("SIGTERM", () => {
37 | if (currentWS) {
38 | try {
39 | currentWS.terminate();
40 | } catch (e) {
41 | console.error("Error while terminating socket during shutdown:", e);
42 | }
43 | }
44 | wss.close();
45 | });
46 |
47 | export function call<T>(method: string, args: any) {
48 | return new Promise<T>((resolve, reject) => {
49 | if (!currentWS) {
50 | reject(new Error("No WebSocket connection"))
51 | return
52 | }
53 | const requestId = randomUUID()
54 | currentWS.send(JSON.stringify({
55 | type: "call",
56 | method,
57 | id: requestId,
58 | args
59 | }))
60 |
61 | currentWS.onmessage = (event) => {
62 | try {
63 | const data = JSON.parse(event.data.toString()) as MethodResponse
64 | if (data.type === "response" && data.id === requestId) {
65 | if (data.error) {
66 | reject(new Error(data.error))
67 | return
68 | }
69 | const result = data.result as T
70 | resolve(result)
71 | }
72 | } catch (error) {
73 | reject(new Error("Failed to call method"))
74 | }
75 | }
76 | })
77 | }
```
--------------------------------------------------------------------------------
/extension/calls.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { WSMethods } from "@browser-mcp/shared";
2 |
3 | export class CallHandler {
4 | constructor(private webSocket: WebSocket, private requestId: string) {
5 |
6 | }
7 |
8 | async sendResponse(result: any) {
9 | this.webSocket.send(JSON.stringify({
10 | type: "response",
11 | id: this.requestId,
12 | result,
13 | }))
14 | }
15 |
16 | async sendError(message: string) {
17 | this.webSocket.send(JSON.stringify({
18 | type: "response",
19 | id: this.requestId,
20 | error: message,
21 | }))
22 | }
23 |
24 | async handle(method: WSMethods, params: any) {
25 | if (this[method as keyof CallHandler]) {
26 | const methodFn = this[method as keyof CallHandler] as (this: this, args_0: any) => Promise<void>;
27 | await methodFn.call(this, params);
28 | } else {
29 | this.sendError(`Method ${method} not found`);
30 | }
31 | }
32 |
33 | async [WSMethods.GetCurrentTabUrl]() {
34 | const [tab] = await browser.tabs.query({
35 | active: true,
36 | })
37 | this.sendResponse(tab.url)
38 | }
39 |
40 | async [WSMethods.GetCurrentTabHtml]() {
41 | const [tab] = await browser.tabs.query({
42 | active: true,
43 | })
44 | const result = await browser.scripting.executeScript({
45 | target: {
46 | tabId: tab.id!,
47 | },
48 | func: () => {
49 | return {
50 | html: document.documentElement.outerHTML,
51 | }
52 | }
53 | })
54 | this.sendResponse({
55 | ...result[0].result!,
56 | url: tab.url,
57 | })
58 | }
59 |
60 | async [WSMethods.AppendStyle]({ css_string }: { css_string: string }) {
61 | const [tab] = await browser.tabs.query({
62 | active: true,
63 | })
64 | try {
65 | await browser.scripting.insertCSS({
66 | target: {
67 | tabId: tab.id!,
68 | },
69 | css: css_string,
70 | })
71 | this.sendResponse("Append style successfully")
72 | } catch (error) {
73 | this.sendError(`Failed to append style: ${error}`)
74 | }
75 | }
76 |
77 | async [WSMethods.HistorySearch]({ query }: { query: string }) {
78 | const checkPermission = await browser.permissions.contains({
79 | permissions: ["history"],
80 | })
81 | if (!checkPermission) {
82 | this.sendError("You need to grant history permission to use this feature")
83 | return
84 | }
85 | const history = await browser.history.search({
86 | text: query,
87 | endTime: Date.now(),
88 | startTime: Date.now() - 30 * 24 * 60 * 60 * 1000,
89 | })
90 | this.sendResponse(history)
91 | }
92 | }
93 |
```
--------------------------------------------------------------------------------
/extension/entrypoints/background.ts:
--------------------------------------------------------------------------------
```typescript
1 |
2 | import { WSMethods } from "@browser-mcp/shared";
3 | import { ConnectStatus, connectStatusStorage } from "../storage";
4 | import { CallHandler } from "@/calls";
5 |
6 |
7 | async function makeConnection() {
8 | let webSocket: WebSocket | null = null;
9 | const RETRY_INTERVAL = 5000
10 |
11 | await connectStatusStorage.setValue(ConnectStatus.Disconnected)
12 |
13 | browser.runtime.onMessage.addListener((msg: any) => {
14 | if (msg.type === "connect") {
15 | retryConnect()
16 | }
17 | })
18 |
19 | async function retryConnect() {
20 | if (webSocket) {
21 | webSocket.close()
22 | webSocket = null
23 | connectStatusStorage.setValue(ConnectStatus.Disconnected)
24 | }
25 | const retry = async () => {
26 | if (webSocket) {
27 | clearInterval(retryConnectIntervalId)
28 | return
29 | }
30 | connect()
31 | }
32 | retry()
33 | const retryConnectIntervalId = setInterval(retry, RETRY_INTERVAL)
34 |
35 | return () => {
36 | clearInterval(retryConnectIntervalId)
37 | }
38 | }
39 |
40 | async function connect() {
41 | webSocket = new WebSocket('ws://localhost:11223');
42 |
43 | connectStatusStorage.setValue(ConnectStatus.Connecting)
44 |
45 | webSocket.onopen = async (event) => {
46 | await connectStatusStorage.setValue(ConnectStatus.Connected)
47 | keepAlive()
48 | }
49 |
50 | webSocket.onclose = async (event) => {
51 | await connectStatusStorage.setValue(ConnectStatus.Disconnected)
52 | webSocket = null
53 | retryConnect()
54 | }
55 |
56 | webSocket.onerror = async (event) => {
57 | await connectStatusStorage.setValue(ConnectStatus.Disconnected)
58 | webSocket = null
59 | retryConnect()
60 | }
61 |
62 | webSocket.onmessage = async (event) => {
63 | let requestId: string | null = null
64 | try {
65 | const data = JSON.parse(event.data)
66 | requestId = data.id
67 | if (data.type === "call") {
68 | const method = data.method as WSMethods
69 | const callHandler = new CallHandler(webSocket!, requestId!)
70 | await callHandler.handle(method, data.args)
71 | }
72 | } catch (error) {
73 | if (requestId) {
74 | webSocket?.send(JSON.stringify({
75 | type: "response",
76 | id: requestId,
77 | error: error instanceof Error ? error.message : "Unknown error",
78 | }))
79 | }
80 | }
81 | }
82 | }
83 |
84 | function keepAlive() {
85 | const keepAliveIntervalId = setInterval(
86 | () => {
87 | if (webSocket) {
88 | webSocket.send(JSON.stringify({
89 | type: "keepalive",
90 | }));
91 | } else {
92 | clearInterval(keepAliveIntervalId);
93 | }
94 | },
95 | // Set the interval to 20 seconds to prevent the service worker from becoming inactive.
96 | 5 * 1000
97 | );
98 | }
99 |
100 | connect()
101 | }
102 |
103 | export default defineBackground(() => {
104 | makeConnection()
105 | });
106 |
```
--------------------------------------------------------------------------------
/server/src/tools.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { z } from "zod"
2 |
3 | import { WSMethods } from "@browser-mcp/shared"
4 | import { call } from "./ws"
5 | import { Server } from "@modelcontextprotocol/sdk/server/index.js"
6 | import { Readability } from "@mozilla/readability"
7 | import { JSDOM } from "jsdom"
8 | import Turndown from "turndown"
9 |
10 | export enum Tools {
11 | GetCurrentPageUrl = "get_current_page_url",
12 | GetCurrentPageMarkdown = "get_current_page_markdown",
13 | AppendStyle = "append_style",
14 | ListBookmarks = "list_bookmarks",
15 | HistorySearch = "history_search",
16 | }
17 |
18 | export const tools = [
19 | {
20 | name: Tools.GetCurrentPageUrl,
21 | description: "Get the URL from current browser browsing tab",
22 | inputSchema: {
23 | type: "object",
24 | properties: {},
25 | },
26 | },
27 | {
28 | name: Tools.GetCurrentPageMarkdown,
29 | description: "Get the markdown from current browser browsing page",
30 | inputSchema: {
31 | type: "object",
32 | properties: {},
33 | },
34 | },
35 | {
36 | name: Tools.AppendStyle,
37 | description: "Append a css style to the current browser browsing page",
38 | inputSchema: {
39 | type: "object",
40 | properties: {
41 | css_string: {
42 | type: "string",
43 | description: "The css style to append to the current browser browsing page",
44 | },
45 | },
46 | },
47 | },
48 | {
49 | name: Tools.HistorySearch,
50 | description: "Search the browser history",
51 | inputSchema: {
52 | type: "object",
53 | properties: {
54 | query: {
55 | type: "string",
56 | description: "A free-text query to the history service. Leave this empty to retrieve all pages.",
57 | },
58 | },
59 | },
60 | },
61 | ]
62 |
63 | export class ToolHandler {
64 | constructor(private server: Server) {
65 |
66 | }
67 |
68 | async [Tools.GetCurrentPageUrl]() {
69 | const url = await call<string>(WSMethods.GetCurrentTabUrl, {})
70 | return {
71 | content: [{
72 | type: "text",
73 | text: url
74 | }]
75 | }
76 | }
77 |
78 | async [Tools.GetCurrentPageMarkdown]() {
79 | const { html, url } = await call<{ html: string, url: string }>(WSMethods.GetCurrentTabHtml, {})
80 | const dom = new JSDOM(html, {
81 | url
82 | })
83 |
84 | const reader = new Readability(dom.window.document)
85 | const article = reader.parse()
86 |
87 | if (!article?.content) {
88 | throw new Error("Unable to extract content from page")
89 | }
90 |
91 | const turndown = new Turndown()
92 | const markdown = turndown.turndown(article.content!)
93 | return {
94 | content: [{
95 | type: "text",
96 | text: markdown
97 | }]
98 | }
99 | }
100 |
101 | async [Tools.AppendStyle]({ css_string }: { css_string: string }) {
102 | const result = await call(WSMethods.AppendStyle, { css_string })
103 | return {
104 | content: [{
105 | type: "text",
106 | text: "Style appended successfully"
107 | }]
108 | }
109 | }
110 |
111 | async [Tools.HistorySearch]({ query }: { query: string }) {
112 | const history = await call(WSMethods.HistorySearch, { query })
113 | return {
114 | content: [{
115 | type: "text",
116 | text: JSON.stringify(history, null, 2)
117 | }]
118 | }
119 | }
120 | }
121 |
```
--------------------------------------------------------------------------------
/extension/entrypoints/popup/App.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { ConnectStatus } from "@/storage"
2 | import { usePermissionsQuery, useServerStatus } from "@/utils/query"
3 | import { useMutation } from "@tanstack/react-query"
4 | import { version } from '../../../server/package.json'
5 |
6 | const permissionToggles = [
7 | {
8 | key: "bookmarks",
9 | label: "Bookmarks",
10 | description: "Access to browser bookmarks",
11 | },
12 | {
13 | key: "history",
14 | label: "History",
15 | description: "Access to browser history",
16 | },
17 |
18 | ]
19 |
20 | export const App = () => {
21 | const permissionsQuery = usePermissionsQuery()
22 | const serverStatus = useServerStatus()
23 |
24 | const statusClassName = {
25 | [ConnectStatus.Disconnected]: "status-error",
26 | [ConnectStatus.Connected]: "status-success",
27 | [ConnectStatus.Connecting]: "status-warning",
28 | }
29 |
30 | const permissions = permissionsQuery.data?.permissions || []
31 |
32 | const isEnabled = (permission: string) => {
33 | console.log(permission, permissions)
34 | return permissions.includes(permission)
35 | }
36 |
37 | const retryConnectMutation = useMutation({
38 | mutationFn: () => {
39 | return browser.runtime.sendMessage({
40 | type: "connect",
41 | })
42 | }
43 | })
44 |
45 | return <div className="w-[320px]">
46 | <div className="px-2 pt-2 mb-2 flex justify-between items-center">
47 | <h2 className="font-medium">Browser MCP</h2>
48 | <div className="text-xs text-gray-500">MPC Server Version: {version}</div>
49 | </div>
50 | <div className="">
51 | <div className="">
52 | <h3 className="bg-zinc-100 p-2">Status</h3>
53 | <div className="p-2 flex justify-between">
54 | <div className="flex items-center gap-1">
55 | <div className="inline-grid *:[grid-area:1/1]">
56 | <div className={`status ${statusClassName[serverStatus]} animate-ping`}></div>
57 | <div className={`status ${statusClassName[serverStatus]}`}></div>
58 | </div>
59 | {serverStatus}
60 | </div>
61 |
62 | <button type="button" onClick={() => retryConnectMutation.mutate()} className="btn btn-sm shadow-none">
63 | Re-connect
64 | </button>
65 | </div>
66 | </div>
67 | <div className="">
68 | <h3 className="bg-zinc-100 p-2">Permissions</h3>
69 | <div className="p-2">
70 | <div>
71 | {permissionToggles.map(toggle => {
72 | const checked = isEnabled(toggle.key)
73 | return (
74 | <div key={toggle.key} className="flex items-center justify-between gap-5 py-2 px-2 border-b border-gray-100 last:border-0">
75 | <input type="checkbox" onChange={async e => {
76 | const enabled = e.target.checked
77 | if (enabled) {
78 | await browser.permissions.request({
79 | permissions: [
80 | toggle.key as any
81 | ]
82 | })
83 | permissionsQuery.refetch()
84 | } else {
85 | await browser.permissions.remove({
86 | permissions: [
87 | toggle.key as any
88 | ]
89 | })
90 | permissionsQuery.refetch()
91 | }
92 | }} checked={checked} className="toggle toggle-sm" />
93 | <div className="flex-1">
94 | <div className="font-medium text-sm">{toggle.label}</div>
95 | <div className="text-xs text-gray-500">{toggle.description}</div>
96 | </div>
97 | </div>
98 | )
99 | })}
100 | </div>
101 | </div>
102 | </div>
103 | </div>
104 |
105 | </div>
106 | }
107 |
```
--------------------------------------------------------------------------------
/extension/assets/react.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
2 |
```
--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
```json
1 | {
2 | "compilerOptions": {
3 | /* Visit https://aka.ms/tsconfig to read more about this file */
4 |
5 | "resolveJsonModule": true,
6 | /* Projects */
7 | // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
8 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
9 | // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
10 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
11 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
12 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
13 |
14 | /* Language and Environment */
15 | "target": "esnext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
16 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
17 | // "jsx": "preserve", /* Specify what JSX code is generated. */
18 | // "libReplacement": true, /* Enable lib replacement. */
19 | // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
20 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
21 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
22 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
23 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
24 | // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
25 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
26 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
27 | // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
28 |
29 | /* Modules */
30 | "module": "commonjs", /* Specify what module code is generated. */
31 | // "rootDir": "./", /* Specify the root folder within your source files. */
32 | "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
33 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
34 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
35 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
36 | // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
37 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */
38 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
39 | // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
40 | // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
41 | // "rewriteRelativeImportExtensions": true, /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
42 | // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
43 | // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
44 | // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
45 | // "noUncheckedSideEffectImports": true, /* Check side effect imports. */
46 | // "resolveJsonModule": true, /* Enable importing .json files. */
47 | // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
48 | // "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
49 |
50 | /* JavaScript Support */
51 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
52 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
53 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
54 |
55 | /* Emit */
56 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
57 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */
58 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
59 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */
60 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
61 | // "noEmit": true, /* Disable emitting files from a compilation. */
62 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
63 | // "outDir": "./", /* Specify an output folder for all emitted files. */
64 | // "removeComments": true, /* Disable emitting comments. */
65 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
66 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
67 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
68 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
69 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
70 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
71 | // "newLine": "crlf", /* Set the newline character for emitting files. */
72 | // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
73 | // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
74 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
75 | // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
76 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */
77 |
78 | /* Interop Constraints */
79 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
80 | // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
81 | // "isolatedDeclarations": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
82 | // "erasableSyntaxOnly": true, /* Do not allow runtime constructs that are not part of ECMAScript. */
83 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
84 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
85 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
86 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
87 |
88 | /* Type Checking */
89 | // "strict": true, /* Enable all strict type-checking options. */
90 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
91 | "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
92 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
93 | // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
94 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
95 | // "strictBuiltinIteratorReturn": true, /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */
96 | // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
97 | // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
98 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
99 | // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
100 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
101 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
102 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
103 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
104 | // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
105 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
106 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
107 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
108 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
109 |
110 | /* Completeness */
111 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
112 | "skipLibCheck": true /* Skip type checking all .d.ts files. */
113 | }
114 | }
115 |
```