Hacking the Browser: Chrome Extension

I made a chrome extension that can show the cursor’s x,y position in real time: https://github.com/yining1023/WYSIWYGdebugTool

Because p5 is not based on svg, I can’t select any shape from DOM, so I tried rune.js examples.

I made the second chrome extension to select the svg element on the canvas and show their watch points, e.g. line(x1, y1, x2, y2), watch points are x1, y1, x2, y2.

Todo list:

About SVG:

  • Show the watch points’ coordinates.
  • Show all the watch points for basic shapes (circle, ellipse, rectangle, triangle, beizer)
  • Making watching points draggable on the canvas
  • Showing the changing coordinates