Git Product home page Git Product logo

plink-plonk's Introduction

Plink Plonk

A minimal auditory debugger for web pages.

Installation

There are two possible ways to install this extension:

Easy way

From the Chrome Web Store - TBD / Waiting for the Chrome store review. Meanwhile, use the manual installation below

Manually or if you wish to contribute

Clone or download this project

Go to your extensions page: chrome://extensions/

Check the "Developer mode" box in the top right

Click on the "Load unpacked extension..." button from the dropdown and point it to the unzipped extension directory that you just downloaded/cloned.

Screenshot

Screenshot

Goal/Story

The original source code is over there. I didn't like the idea at first because I didn't find it useful, then another user (@SeriousM) suggested to make it trigger on network activity too.

That was more interesting. I did some research on this and figured it's possible, so I turned it into a Chrome extension.

Initially, I decided to leave out the dom event listener feature but it's been a while since I created a Chrome extension and I felt rusty. So the pragmatic programmer in me decided to start with this feature and then add the new one later.

As soon as it became an extension, I realized how useful this feature actually is... not for debugging, but for monitoring and maybe even reverse engineering. Not just your own website, but any website.

It was interesting to hear elements being created on my Quora reading list even though I wasn't doing anything. It was also interesting to hear the Plink Plonk go everytime the visibility of the typing indicator of the online Github editor toggled.

I'll be working on it every Sunday and will accept any useful pull request.

Features

  • Fires on every dom changes
  • Allows to quickly deactivate it instead of removing it from Chrome - TBD
  • Fires on every network request - TBD
  • Fires on every console log - TBD
  • Allows to select what to hear sound for (Network or Dom Changes or Console logs) - TBD
  • Allows to update delay and frequency on the fly - TBD
  • Allows to make it sound more futuristic (by making the pitch of a single oscillator longer) - TBD
  • Display a sticky pulsing circle on the page to provide sound visualization - TBD
  • Allows to select whether you want sound visualization - TBD
  • Port it to Firefox - TBD

TODO

  • Add a license
  • Investigate the AudioContext error about resuming/creating sound on user interaction
  • Create a better icon/logo

Credits

Props to the author of the original script: @tomhicks.

Icon and logo made with the elegant Pixlr tool. I could do better, but I was going fast.

If you have any questions, just send me a tweet. For improvement suggestions or bugs, open an issue with the appropriate tag. Pull requests are always welcome :)

Enjoy.

plink-plonk's People

Contributors

nickdotht avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

plink-plonk's Issues

Support for Firefox

Hi! I'm glad to be the spark that lead to this spin-off project!
A support for firefox is imho crucial as this extension also emphasises the understanding of privacy - especially the network-audio feature.

Do you have experience building firefox extensions?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.