Chrome拡張 Google+™ nav+ を更新しました。 今回も、ちょこっと便利になる気がする機能。 Google+の投稿の上部にラインが引かれ、公開範囲によって色が変わります。 Google+は投稿ごとに誰までに公開するかを変更できますが、[限定公開][一般公開]と書かれているものの、文字ではいかんせん区別がつきにくい。 実はデフォルトの状態でも[限定公開]の投稿にマウスオーバーすると、さりげなく文字色を変えてアピってきます。
一般公開をマウスオーバーしたとき
一般公開をマウスオーバーしたとき
限定公開をマウスオーバーしたとき
限定公開をマウスオーバーしたとき
ちょっとさりげなさすぎたのでChrome拡張機能で変更してみました。
公開範囲で色分け
公開範囲で色分け
一般公開が緑色、友だちの友だちまでが水色、限定公開が青色、コミュニティが黄色(うぐいす色?)の色になります。 色分けされて使いやすさが向上するかといえばどちらとも言えない。。。(´・ω・`)微妙やったで・・・。

内部処理的な話

色を変えるところの実装はスタイルシートだけでやっています。 JavaScriptでオプションでこの機能が有効になった時に、このCSSを読み込んでるだけの簡単設計。
span[role=button].Q9:before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 2px;
    background:#53a840;
}
セレクターに公開範囲の文字のある要素のclassを記述して、擬似要素を挿入してラインをスッと。