roxxie-proxy-u-prod 0.1.0

package/source/packages/cdp/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "chobitsu",
+  "version": "1.8.4",
+  "description": "Chrome devtools protocol JavaScript implementation",
+  "main": "dist/chobitsu.js",
+  "exports": {
+    ".": "./dist/chobitsu.js",
+    "./Chobitsu": "./dist/cjs/Chobitsu.js",
+    "./domains/*": "./dist/cjs/domains/*"
+  },
+  "files": [
+    "dist/*"
+  ],
+  "scripts": {
+    "ci": "npm run lint && npm test && npm run build && npm run es5",
+    "dev": "node script/build.js && concurrently \"tsc -w --inlineSourceMap\" \"webpack-dev-server --mode=development\"",
+    "build": "rm -rf dist && webpack --mode=development && node script/build.js",
+    "build:front_end": "cd devtools/devtools-frontend && gn gen out/Default --args=\"is_debug=false\" && autoninja -C out/Default",
+    "lint": "eslint src/**/*.ts",
+    "test": "karma start",
+    "es5": "es-check es5 dist/**/*.js",
+    "format": "lsla prettier \"src/**/*.ts\" \"*.{js,json}\" \"devtools/*.{js,html}\" \"test/*.js\" \"script/*.js\" --write",
+    "init:front_end": "cd devtools && rm -rf devtools-frontend && gclient sync --with_branch_heads --verbose"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/liriliri/chobitsu.git"
+  },
+  "keywords": [
+    "devtools"
+  ],
+  "author": "redhoodsu",
+  "license": "AGPL-3.0-only",
+  "bugs": {
+    "url": "https://github.com/liriliri/chobitsu/issues"
+  },
+  "homepage": "https://github.com/liriliri/chobitsu#readme",
+  "dependencies": {
+    "axios": "^0.27.2",
+    "core-js": "^3.26.1",
+    "devtools-protocol": "^0.0.1339468",
+    "html2canvas": "^1.4.1",
+    "licia": "^1.41.1",
+    "luna-dom-highlighter": "^1.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
+    "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
+    "@types/node": "^20.14.12",
+    "@typescript-eslint/eslint-plugin": "^8.9.0",
+    "@typescript-eslint/parser": "^8.9.0",
+    "babel-loader": "^8.2.5",
+    "concurrently": "^7.6.0",
+    "es-check": "^7.2.1",
+    "eslint": "^8.21.0",
+    "eslint-config-prettier": "^8.5.0",
+    "karma": "^6.3.19",
+    "karma-chai-plugins": "^0.9.0",
+    "karma-chrome-launcher": "^3.1.1",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
+    "karma-mocha": "^2.0.1",
+    "karma-webpack": "^5.0.1",
+    "mocha": "^8.0.1",
+    "raw-loader": "^4.0.2",
+    "ts-loader": "^7.0.5",
+    "tslint-config-prettier": "^1.18.0",
+    "typescript": "^5.2.2",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
+  }
+}

package/source/packages/cdp/script/build.js

@@ -0,0 +1,15 @@
+const fs = require('licia/fs')
+const promisify = require('licia/promisify')
+const mkdir = promisify(require('licia/mkdir'))
+const path = require('path')
+
+async function copyDefinition() {
+  const data = await fs.readFile(path.resolve(__dirname, '../src/index.d.ts'))
+  const dist = path.resolve(__dirname, '../dist')
+  if (!(await fs.exists(dist))) {
+    await mkdir(dist)
+  }
+  await fs.writeFile(path.resolve(dist, 'chobitsu.d.ts'), data)
+}
+
+copyDefinition()

package/source/packages/cdp/src/Chobitsu.ts

@@ -0,0 +1,110 @@
+import connector from './lib/connector'
+import noop from 'licia/noop'
+import uuid from 'licia/uuid'
+import each from 'licia/each'
+import Emitter from 'licia/Emitter'
+import { ErrorWithCode } from './lib/util'
+import types from 'licia/types'
+
+type OnMessage = (message: string) => void
+type DomainMethod = (...args: any[]) => any
+
+export default class Chobitsu {
+  private onMessage: OnMessage
+  private resolves: Map<string, (value?: any) => void> = new Map()
+  private domains: Map<string, { [index: string]: DomainMethod }> = new Map()
+  constructor() {
+    this.onMessage = noop
+    connector.on('message', (message: any) => {
+      const parsedMessage = JSON.parse(message)
+
+      const resolve = this.resolves.get(parsedMessage.id)
+      if (resolve) {
+        resolve(parsedMessage.result)
+      }
+
+      if (!parsedMessage.id) {
+        const [name, method] = parsedMessage.method.split('.')
+        const domain = this.domains.get(name)
+        if (domain) {
+          domain.emit(method, parsedMessage.params)
+        }
+      }
+
+      this.onMessage(message)
+    })
+  }
+  domain(name: string) {
+    return this.domains.get(name)
+  }
+  setOnMessage(onMessage: OnMessage) {
+    this.onMessage = onMessage
+  }
+  sendMessage(method: string, params: any = {}) {
+    const id = uuid()
+
+    this.sendRawMessage(
+      JSON.stringify({
+        id,
+        method,
+        params,
+      })
+    )
+
+    return new Promise(resolve => {
+      this.resolves.set(id, resolve)
+    })
+  }
+  async sendRawMessage(message: string) {
+    const parsedMessage = JSON.parse(message)
+
+    const { method, params, id } = parsedMessage
+
+    const resultMsg: any = {
+      id,
+    }
+
+    try {
+      resultMsg.result = await this.callMethod(method, params)
+    } catch (e) {
+      console.error(e);
+      if (e instanceof ErrorWithCode) {
+        resultMsg.error = {
+          message: e.message,
+          code: e.code,
+        }
+      } else if (e instanceof Error) {
+        resultMsg.error = {
+          message: e.message,
+        }
+      }
+    }
+
+    connector.emit('message', JSON.stringify(resultMsg))
+  }
+  register(name: string, methods: types.PlainObj<types.AnyFn>) {
+    const domains = this.domains
+
+    /* eslint-disable-next-line */
+    let domain = domains.get(name)!
+    if (!domain) {
+      domain = {}
+      Emitter.mixin(domain)
+    }
+    each(methods, (fn: any, method: string) => {
+      domain[method] = fn
+    })
+    domains.set(name, domain)
+  }
+  private async callMethod(method: string, params: any) {
+    const [domainName, methodName] = method.split('.')
+    const domain = this.domain(domainName)
+    if (domain) {
+      if (domain[methodName]) {
+        return domain[methodName](params) || {}
+      }
+    }
+
+    throw Error(`${method} unimplemented`)
+  }
+}

package/source/packages/cdp/src/domains/CSS.ts

@@ -0,0 +1,378 @@
+import { getNode, getNodeId } from '../lib/nodeManager'
+import * as stylesheet from '../lib/stylesheet'
+import map from 'licia/map'
+import last from 'licia/last'
+import each from 'licia/each'
+import trim from 'licia/trim'
+import selector from 'licia/selector'
+import startWith from 'licia/startWith'
+import concat from 'licia/concat'
+import escapeRegExp from 'licia/escapeRegExp'
+import connector from '../lib/connector'
+import mutationObserver from '../lib/mutationObserver'
+import { MAIN_FRAME_ID } from '../lib/constants'
+import Protocol from 'devtools-protocol'
+import CSS = Protocol.CSS
+
+let proxy = ''
+export function setProxy(params: any) {
+  proxy = params.proxy
+}
+
+export function enable() {
+  each(stylesheet.getStyleSheets(), (styleSheet: any) => {
+    if (styleSheet.styleSheetId) {
+      connector.trigger('CSS.styleSheetAdded', {
+        header: {
+          frameId: MAIN_FRAME_ID,
+          isInline: false,
+          styleSheetId: styleSheet.styleSheetId,
+          sourceURL: styleSheet.href || '',
+          startColumn: 0,
+          startLine: 0,
+          endColumn: 0,
+          endLine: 0,
+        },
+      })
+    }
+  })
+}
+
+export function getComputedStyleForNode(
+  params: CSS.GetComputedStyleForNodeRequest
+): CSS.GetComputedStyleForNodeResponse {
+  const node = getNode(params.nodeId)
+
+  const computedStyle: any = stylesheet.formatStyle(
+    window.getComputedStyle(node)
+  )
+
+  return {
+    computedStyle: toCssProperties(computedStyle),
+  }
+}
+
+export function getInlineStylesForNode(
+  params: CSS.GetInlineStylesForNodeRequest
+) {
+  const { nodeId } = params
+  const node = getNode(nodeId)
+  const { style } = node
+  const inlineStyle: any = {
+    shorthandEntries: [],
+    cssProperties: [],
+  }
+
+  if (style) {
+    const styleSheetId = stylesheet.getOrCreateInlineStyleSheetId(nodeId)
+    inlineStyle.styleSheetId = styleSheetId
+    const cssText = node.getAttribute('style') || ''
+    inlineStyle.cssText = cssText
+    inlineStyle.range = {
+      startLine: 0,
+      startColumn: 0,
+      endLine: getLineCount(cssText) - 1,
+      endColumn: last(cssText.split('\n')).length,
+    }
+    let cssPropertiesWithRange = toCssProperties(parseCssText(cssText))
+    cssPropertiesWithRange = map(cssPropertiesWithRange, ({ name, value }) => {
+      const { text, range } = getInlineStyleRange(name, value, cssText)
+
+      const ret: any = {
+        name,
+        value,
+        text,
+        range,
+      }
+
+      if (startWith(text, '/*')) {
+        ret.disabled = true
+      } else {
+        ret.disabled = false
+        ret.implicit = false
+        ret.parsedOk = style[name] !== ''
+      }
+
+      return ret
+    })
+    const parsedStyle = stylesheet.formatStyle(style)
+    each(cssPropertiesWithRange, ({ name }) => delete parsedStyle[name])
+    const cssPropertiesWithoutRange = toCssProperties(parsedStyle)
+
+    inlineStyle.shorthandEntries = getShorthandEntries(style)
+    inlineStyle.cssProperties = concat(
+      cssPropertiesWithRange,
+      cssPropertiesWithoutRange
+    )
+  }
+
+  return {
+    inlineStyle,
+  }
+}
+
+export function getMatchedStylesForNode(
+  params: CSS.GetMatchedStylesForNodeRequest
+): CSS.GetMatchedStylesForNodeResponse {
+  const node = getNode(params.nodeId)
+  const matchedCSSRules = stylesheet.getMatchedCssRules(node)
+
+  return {
+    matchedCSSRules: map(matchedCSSRules, matchedCSSRule =>
+      formatMatchedCssRule(node, matchedCSSRule)
+    ),
+    ...getInlineStylesForNode(params),
+  }
+}
+
+export function getBackgroundColors(
+  params: CSS.GetBackgroundColorsRequest
+): CSS.GetBackgroundColorsResponse {
+  const node = getNode(params.nodeId)
+
+  const computedStyle: any = stylesheet.formatStyle(
+    window.getComputedStyle(node)
+  )
+
+  return {
+    backgroundColors: [computedStyle['background-color']],
+    computedFontSize: computedStyle['font-size'],
+    computedFontWeight: computedStyle['font-weight'],
+  }
+}
+
+export async function getStyleSheetText(
+  params: CSS.GetStyleSheetTextRequest
+): Promise<CSS.GetStyleSheetTextResponse> {
+  const { styleSheetId } = params
+
+  const nodeId = stylesheet.getInlineStyleNodeId(styleSheetId)
+  let text = ''
+  if (nodeId) {
+    const node = getNode(nodeId)
+    text = node.getAttribute('style') || ''
+  } else {
+    text = await stylesheet.getStyleSheetText(styleSheetId, proxy)
+  }
+
+  return {
+    text,
+  }
+}
+
+export function setStyleTexts(
+  params: CSS.SetStyleTextsRequest
+): CSS.SetStyleTextsResponse {
+  const { edits } = params
+  const styles = map(edits, (edit: any) => {
+    const { styleSheetId, text, range } = edit
+    const nodeId = stylesheet.getInlineStyleNodeId(styleSheetId)
+    // Only allow to edit inline style
+    if (nodeId) {
+      const node = getNode(nodeId)
+      let cssText = node.getAttribute('style') || ''
+      const { start, end } = getPosFromRange(range, cssText)
+      cssText = cssText.slice(0, start) + text + cssText.slice(end)
+
+      node.setAttribute('style', cssText)
+      return getInlineStylesForNode({ nodeId }).inlineStyle
+    }
+
+    return { styleSheetId }
+  })
+
+  return {
+    styles,
+  }
+}
+
+function splitSelector(selectorText: string) {
+  const groups = selector.parse(selectorText)
+
+  return map(groups, group => trim(selector.stringify([group])))
+}
+
+function formatMatchedCssRule(node: any, matchedCssRule: any) {
+  const { selectorText }: { selectorText: string } = matchedCssRule
+  const selectors = splitSelector(selectorText)
+
+  const shorthandEntries = getShorthandEntries(matchedCssRule.style)
+  const style = stylesheet.formatStyle(matchedCssRule.style)
+
+  const rule: any = {
+    styleSheetId: matchedCssRule.styleSheetId,
+    selectorList: {
+      selectors: map(selectors, selector => ({ text: selector })),
+      text: selectorText,
+    },
+    style: {
+      cssProperties: toCssProperties(style),
+      shorthandEntries,
+    },
+  }
+
+  const matchingSelectors: number[] = []
+  each(selectors, (selector, idx) => {
+    if (stylesheet.matchesSelector(node, selector)) {
+      matchingSelectors.push(idx)
+    }
+  })
+
+  return {
+    matchingSelectors,
+    rule,
+  }
+}
+
+stylesheet.onStyleSheetAdded((styleSheet: any) => {
+  connector.trigger('CSS.styleSheetAdded', {
+    header: {
+      styleSheetId: styleSheet.styleSheetId,
+      sourceURL: '',
+      startColumn: 0,
+      startLine: 0,
+      endColumn: 0,
+      endLine: 0,
+    },
+  })
+})
+
+interface ICSSProperty {
+  name: string
+  value: string
+  disabled?: boolean
+  implicit?: boolean
+  parsedOk?: boolean
+  text?: string
+}
+
+function toCssProperties(style: any): ICSSProperty[] {
+  const cssProperties: any[] = []
+
+  each(style, (value: string, name: string) => {
+    cssProperties.push({
+      name,
+      value,
+    })
+  })
+
+  return cssProperties
+}
+
+function getLineCount(str: string) {
+  return str.split('\n').length
+}
+
+const shortHandNames = ['background', 'font', 'border', 'margin', 'padding']
+
+function getShorthandEntries(style: CSSStyleDeclaration) {
+  const ret: any[] = []
+
+  each(shortHandNames, name => {
+    const value = (style as any)[name]
+    if (value) {
+      ret.push({
+        name,
+        value,
+      })
+    }
+  })
+
+  return ret
+}
+
+function parseCssText(cssText: string) {
+  cssText = cssText.replace(/\/\*/g, '').replace(/\*\//g, '')
+  const properties = cssText.split(';')
+  const ret: any = {}
+
+  each(properties, property => {
+    property = trim(property)
+    if (!property) return
+    const colonPos = property.indexOf(':')
+    if (colonPos) {
+      const name = trim(property.slice(0, colonPos))
+      const value = trim(property.slice(colonPos + 1))
+      ret[name] = value
+    }
+  })
+
+  return ret
+}
+
+function getInlineStyleRange(name: string, value: string, cssText: string) {
+  const lines = cssText.split('\n')
+  let startLine = 0
+  let endLine = 0
+  let startColumn = 0
+  let endColumn = 0
+  let text = ''
+
+  const reg = new RegExp(
+    `(\\/\\*)?\\s*${escapeRegExp(name)}:\\s*${escapeRegExp(
+      value
+    )};?\\s*(\\*\\/)?`
+  )
+  for (let i = 0, len = lines.length; i < len; i++) {
+    const line = lines[i]
+    const match = line.match(reg)
+    if (match) {
+      text = match[0]
+      startLine = i
+      startColumn = match.index || 0
+      endLine = i
+      endColumn = startColumn + text.length
+      break
+    }
+  }
+
+  return {
+    range: {
+      startLine,
+      endLine,
+      startColumn,
+      endColumn,
+    },
+    text,
+  }
+}
+
+function getPosFromRange(range: any, cssText: string) {
+  const { startLine, startColumn, endLine, endColumn } = range
+  let start = 0
+  let end = 0
+
+  const lines = cssText.split('\n')
+  for (let i = 0; i <= endLine; i++) {
+    const line = lines[i] + 1
+    const len = line.length
+    if (i < startLine) {
+      start += len
+    } else if (i === startLine) {
+      start += startColumn
+    }
+    if (i < endLine) {
+      end += len
+    } else if (i === endLine) {
+      end += endColumn
+    }
+  }
+
+  return {
+    start,
+    end,
+  }
+}
+
+mutationObserver.on('attributes', (target: any, name: string) => {
+  const nodeId = getNodeId(target)
+  if (!nodeId) return
+  if (name !== 'style') return
+
+  const styleSheetId = stylesheet.getInlineStyleSheetId(nodeId)
+  if (styleSheetId) {
+    connector.trigger('CSS.styleSheetChanged', {
+      styleSheetId,
+    })
+  }
+})

package/source/packages/cdp/src/domains/CacheStorage.ts

@@ -0,0 +1,8 @@
+import Protocol from 'devtools-protocol'
+import CacheStorage = Protocol.CacheStorage
+
+export function requestCacheNames(): CacheStorage.RequestCacheNamesResponse {
+  return {
+    caches: [],
+  }
+}