popup.html

<style>
  ul,ol {
  padding:0;
  margin:0;
  }
li {
  list-style: none;
  padding:3px;
  margin:0;
}
.hudson-highlight .positive {
  font-weight: bold;
  font-size: 25px;
  background-color: #27ae1d;
}
.hudson-highlight .negative {
  font-weight: bold;
  font-size: 25px;
  background-color: #ae1d1d;
}
.hudson-highlight .warn {
  font-weight: bold;
  font-size: 25px;
  background-color: #d04919;
}
.hudson-highlight .highlight {
  font-weight: bold;
  font-size: 25px;
  background-color: #d48e06;
  color: #000;
}

</style>
<div class="hudson-highlight">
<ol>
  <li><input type="text" id="k1" value="cannot,negative"/></li>
  <li><input type="text" id="k2" value="done,positive"/></li>
  <li><input type="text" id="k3" value="without errors,positive"/></li>
  <li><input type="text" id="k4" value="error,negative"/></li>
  <li><input type="text" id="k5" value="failure,negative"/></li>
  <li><input type="text" id="k6" value="rpms,highlight"/></li>
  <li><input type="text" id="k7" value="running,positive"/></li>
  <li><input type="text" id="k8" value="success,positive"/></li>
  <li><input type="text" id="k9" value="warning,warn"/></li>
  <li><input type="text" id="k10" value="wrong,negative"/></li>
</ol>
<div style="width:115px">
    <button id="button">Highlight</button>
</div>
<p>Legend</p>
<ul>
  <li class="positive">positive</li>
  <li class="negative">negative</li>
  <li class="warn">warn</li>
  <li class="highlight">highlight</li>
</ul>
</div>
<script type="text/javascript" src="popup.js"></script>