rxliuli | 琉璃

// src/entrypoints/background.ts
browser.runtime.onMessage.addListener(
(
    message: {
      type: 'fetch'
      request: {
        url: string
      }
    },
    _sender,
    sendResponse,
  ) => {
if (message.type === 'fetch') {
// 这儿看起来非常“怪异”，但没办法，Chrome 就是这样定义的
fetch(message.request.url)
        .then((r) => r.blob())
        .then((b) => sendResponse(b))
return true
    }
  },
)

// src/entrypoints/content.ts
console.log(
'Hello content.',
await browser.runtime.sendMessage({
type: 'fetch',
request: {
url: 'https://placehold.co/200',
    },
  }),
)

app
  .use(async (c, next) => {
console.log('middleware 1 before')
await next()
console.log('middleware 1 after')
  })
  .use(async (c, next) => {
console.log('middleware 2 before')
await next()
console.log('middleware 2 after')
  })

fetch('https://api.github.com/users/rxliuli')
  .then((res) => res.json())
  .then((data) => console.log(data))

function interceptFetch(...middlewares: Middleware[]) {
const pureFetch = globalThis.fetch
  globalThis.fetch = async (input, init) => {
// 构造一个 Context，包含 request 和 response
const c: Context = {
req: new Request(input, init),
res: new Response(),
type: 'fetch',
    }
// 运行 middlewares，由于处理原始请求需要在“洋葱”最内层运行，所以处理原始请求实现为一个 middleware
await handleRequest(c, [
      ...middlewares,
async (context) => {
        context.res = await pureFetch(c.req)
      },
    ])
// 返回处理后的 response
return c.res
  }
}

// 以洋葱模型运行所有的 middlewares
async function handleRequest(context: Context, middlewares: Middleware[]) {
const compose = (i: number): Promise<void> => {
if (i >= middlewares.length) {
return Promise.resolve()
    }
return middlewares[i](context, () => compose(i + 1)) as Promise<void>
  }
await compose(0)
}

interceptFetch(
async (context, next) => {
console.log('fetch interceptor 1')
await next()
console.log('fetch interceptor 1 after')
  },
async (context, next) => {
console.log('fetch interceptor 2')
await next()
console.log('fetch interceptor 2 after')
  },
)
fetch('https://api.github.com/users/rxliuli')
  .then((res) => res.json())
  .then((data) => console.log(data))
// 输出
// fetch interceptor 1
// fetch interceptor 2
// fetch interceptor 1 after
// fetch interceptor 2 after
// {
//   "login": "rxliuli",
//   "id": 24560368,
//   "node_id": "MDQ6VXNlcjI0NTYwMzY4",
//   "avatar_url": "https://avatars.githubusercontent.com/u/24560368?v=4",
//   ...
// }

const xhr = new XMLHttpRequest()
xhr.open('GET', 'https://api.github.com/users/rxliuli')
xhr.onload = () => {
console.log(xhr.responseText)
}
xhr.send()

function interceptXhr(...middlewares: Middleware[]) {
const PureXhr = XMLHttpRequest
XMLHttpRequest = class extends PureXhr {
    #method: string = ''
    #url: string | URL = ''
    #body?: Document | XMLHttpRequestBodyInit | null
// 重写 open 方法，在调用原始 open 方法之后，仅记录参数
open(method: string, url: string) {
this.#method = method
this.#url = url
    }
// 保存所有事件监听器
    #listeners: [
string,
(this: XMLHttpRequest, ev: ProgressEvent) => any,
boolean,
    ][] = []
set onload(callback: (this: XMLHttpRequest, ev: ProgressEvent) => any) {
this.#listeners.push(['load', callback, false])
    }
// 重写 send 方法，在调用原始 send 方法之前，运行 middlewares
async send(body?: Document | XMLHttpRequestBodyInit | null) {
this.#body = body
const c: Context = {
req: new Request(this.#url, {
method: this.#method,
body: this.#body as any,
        }),
res: new Response(),
type: 'xhr',
      }
// 绑定注册的事件监听器
this.#listeners.forEach(([type, listener, once]) => {
super.addEventListener.apply(this, [type, listener as any, once])
      })
// 运行 middlewares
await handleRequest(c, [
        ...middlewares,
async (c) => {
super.addEventListener('load', () => {
// 设置响应
            c.res = new Response(this.responseText, { status: this.status })
          })
super.send.apply(this, [c.req.body as any])
        },
      ])
    }
  }
}

interceptXhr(async (c, next) => {
console.log('method', c.req.method, 'url', c.req.url)
await next()
console.log('json', await c.res.clone().json())
})
const xhr = new XMLHttpRequest()
xhr.open('GET', 'https://api.github.com/users/rxliuli')
xhr.onload = () => {
console.log(xhr.responseText)
}
xhr.send()
// 输出
// method GET url https://api.github.com/users/rxliuli
// json {
//   "login": "rxliuli",
//   "id": 24560368,
//   "node_id": "MDQ6VXNlcjI0NTYwMzY4",
//   "avatar_url": "https://avatars.githubusercontent.com/u/24560368?v=4",
//   ...
// }

browser.devtools.inspectedWindow.eval(`__zenfs__.readdir('/')`)

browser.devtools.inspectedWindow.eval(`await __zenfs__.promises.readdir('/')`)

browser.devtools.inspectedWindow.eval(
`await __zenfs__.promises.readFile('/test.png')`,
)

// entrypoints/main-content.ts
import { expose, windowEndpoint } from 'comlink'

export default defineUnlistedScript(() => {
const map = new Map<string, ArrayBuffer>()

interface IFS {
readFile: (path: string) => Promise<ArrayBuffer>
writeFile: (path: string, data: ArrayBuffer) => Promise<void>
readdir: (path: string) => Promise<string[]>
  }

expose(
    {
readFile: async (path: string) => {
return map.get(path) || new Uint8Array([1, 2, 3]).buffer
      },
writeFile: async (path: string, data: ArrayBuffer) => {
        map.set(path, data)
      },
readdir: async (path: string) => {
return Array.from(map.keys()).filter((p) => p.startsWith(path))
      },
    } as IFS,
windowEndpoint(
      (document.querySelector('#inject-iframe')! as HTMLIFrameElement)
        .contentWindow!,
    ),
  )
console.log('main-content')
})

// entrypoints/iframe/main.ts
import { expose, transfer, windowEndpoint, wrap } from 'comlink'

interface IFS {
readFile: (path: string) => Promise<ArrayBuffer>
writeFile: (path: string, data: ArrayBuffer) => Promise<void>
readdir: (path: string) => Promise<string[]>
}

async function main() {
const tabId = (await browser.tabs.getCurrent())!.id
if (!tabId) {
return
  }
const ipc = wrap<IFS>(windowEndpoint(globalThis.parent))
const bc = new BroadcastChannel(
`${browser.runtime.getManifest().name}-iframe-${tabId}`,
  )
expose(
    {
readFile: async (path: string) => {
const r = await ipc.readFile(path)
// 将 ArrayBuffer 通过 transfer 传递回 devtools-panel 中
return transfer(r, [r])
      },
writeFile: async (path: string, data: ArrayBuffer) => {
// 将 ArrayBuffer 通过 transfer 传递到 content-script 中
await ipc.writeFile(path, transfer(data, [data]))
      },
readdir: async (path: string) => {
console.log('readdir', path)
return await ipc.readdir(path)
      },
    } as IFS,
    bc,
  )

console.log('iframe main')
}

main()

// entrypoints/devtools-panel/main.ts
import { PublicPath } from 'wxt/browser'

async function injectScript() {
const includeIframe = await new Promise((resolve) => {
    browser.devtools.inspectedWindow.eval(
`!!document.querySelector('#inject-iframe')`,
(result) => {
resolve(result)
      },
    )
  })
if (includeIframe) {
return
  }
const tabId = browser.devtools.inspectedWindow.tabId
if (!tabId) {
return
  }
await browser.scripting.executeScript({
target: { tabId },
files: ['/isolation-content.js' as PublicPath],
world: 'ISOLATED',
  })
await browser.scripting.executeScript({
target: { tabId },
files: ['/main-content.js' as PublicPath],
world: 'MAIN',
  })
}

// entrypoints/isolation-content.ts
function createIframeUi() {
const wrapper = document.createElement('div')
  wrapper.style.height = '0'
  wrapper.style.width = '0'
const ifr = document.createElement('iframe')
  wrapper.appendChild(ifr)
  ifr.src = browser.runtime.getURL('/iframe.html')
  ifr.style.width = '0'
  ifr.style.height = '0'
  ifr.style.zIndex = '-9999'
  ifr.style.border = 'none'
  ifr.id = 'inject-iframe'
document.body.appendChild(wrapper)
return ifr
}

export default defineUnlistedScript(() => {
console.log('isolation-content', createIframeUi())
})

// entrypoints/iframe/main.ts
import { wrap } from 'comlink'

async function main() {
// Other code...
console.log('iframe main')
await wrap<{
onReady: () => void
  }>(bc).onReady()
}

main()

// entrypoints/devtools-panel/main.ts
async function main() {
await injectScript()
interface IFS {
readFile: (path: string) => Promise<ArrayBuffer>
writeFile: (path: string, data: ArrayBuffer) => Promise<void>
readdir: (path: string) => Promise<string[]>
  }
const tabId = browser.devtools.inspectedWindow.tabId
if (!tabId) {
return
  }
const bc = new BroadcastChannel(
`${browser.runtime.getManifest().name}-iframe-${tabId}`,
  )
await new Promise<void>((resolve) => expose({ onReady: resolve }, bc))
console.log('onReady')
// Test code...
const ipc = wrap<IFS>(bc)
const r = await ipc.readdir('/')
console.log(r)
const data = new Uint8Array([1, 2, 3]).buffer
await ipc.writeFile('/test.txt', transfer(data, [data]))
const r2 = await ipc.readFile('/test.txt')
console.log(r2)
}

main()