dhilipkmr

/* Ripple */
[ripple] {
  position: relative;
  overflow: hidden;
}
[ripple] .ripple--container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

dhilipkmr

.btn {
  margin: 50px auto;
  border-radius: 25px;
  background-color: #5300e8;
  box-shadow: 0 2px 4px 0 #888888;
  display: inline-block;
  padding: 15px 50px;
  color: #ffffff;
}
.center {

dhilipkmr

<div class="ripple">
  Click Me
  <div class="rippleContainer">
    <span><span>
  </div>
</div>

dhilipkmr

const {React} = window;
const {ReactDOM} = window;

class Ripple extends React.Component {
  constructor(props) {
    super(props);
  }

  callCleanUp(cleanup, delay) {
      var bounce;

dhilipkmr

render() {
    const {children= null, classes = "", onClickHandler = null} = this.props;
    return (
        <div ref="targetElement" className={'ripple ' + classes} onClick={onClickHandler}>
            {children}
            <div className="rippleContainer" onMouseDown={this.showRipple} onMouseUp={this.callCleanUp(this.cleanUp, 2000)}>
                {this.renderRippleSpan()}
            </div>
        </div>
    );

dhilipkmr

showRipple = (e) => {
    const rippleContainer = e.currentTarget;
    const size = rippleContainer.offsetWidth;
    const pos = rippleContainer.getBoundingClientRect();
    const x = e.pageX - pos.x - (size / 2);
    const y = e.pageY - pos.y - (size / 2);
    const spanStyles = { top: y + 'px', left: x + 'px', height: size + 'px', width: size + 'px' };
    const count = this.state.count + 1;
    this.setState({
      spanStyles: {...this.state.spanStyles, [count] : spanStyles},

dhilipkmr

cleanUp = () => {
  const initialState = this.initializeState();
  this.setState({ ...initialState });
}

callCleanUp = (cleanup, delay) => {
  return function() {
    clearTimeout(this.bounce);
    this.bounce = setTimeout(() => {
      cleanup();

dhilipkmr

{
  "manifest_version": 2,
  "name": "IMDB Ratings",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": [ "<all_urls>" ],
      "js": ["content.js"]
    }
  ],

dhilipkmr

/* clicking the addon icon */
chrome.browserAction.onClicked.addListener(buttonClicked);
function buttonClicked(tab) {
  var msg = {
    type: 'clickResponse',
    buttonClicked: true
  }
  chrome.tabs.sendMessage(tab.id, msg);
};

dhilipkmr

chrome.runtime.onMessage.addListener(hasGotMessage);
function hasGotMessage(response, sender, sendResponse) {
  switch (response.type) {
    case 'clickResponse':
      window.sessionStorage.setItem('_imdbRaterEnabled', "1");
      listenToMouseover();
      break;
  }
}