Greasemonkey で特定のリンクをハイライト

1. 特定のリンクを目立たせたい

条件を指定して、一致したリンクをハイライトして目立たせたい。ただし、

1. 条件は、正規表現で指定。
2. 除外条件も設定できること。

デフォルトでは、開いているページのホスト名ではじまるリンクのみをハイライトする。

 

2. 使い方

前提： Greasemonkey がインストールしてあること。

こちらをクリックしてインストール → highlight_link.user.js

 

3. 実装方法

リンクを目立たせるために、DOM 要素の style プロパティを設定する。

CSS – MDC には、Gecko1.8+ DOM において、要素の style プロパティで設定できる項目の一覧がある。

The following is a list of the CSS properties that are supported in the Gecko 1.8+ DOM and accessible by means of the style property on elements.

style プロパティを設定するとき、同じ要素に対して複数のプロパティを設定する。この場合、JavaScript の with – MDC を使うと書きやすい。

要素の反復については、「JavaScript における 3 つの for 文」を参照。

 

4. 実装

使い方は、

• `INCLUDE_REGEXP’ に、 ハイライトしたい A タグの src に含まれる文字列を正規表現で指定する。
• `EXCLUDE_REGEXP’ に、 ハイライトしたくない A タグの src に含まれる文字列を正規表現で指定する。 (省略可)

// ==UserScript==
// @name           highlight link
// @namespace      http://jutememo.blogspot.com/
// @description    特定のリンクを目立たせる
// @include        http://*
// ==/UserScript==

(function() {
 // 対象にしたい a タグの src に含まれる文字列を正規表現で指定
 var INCLUDE_REGEXP = "^" + location.protocol + "//" + 
          location.hostname + ".*()";
 // 除外したい a タグの src に含まれる文字列を正規表現で指定
 var EXCLUDE_REGEXP = "";
 
 // 指定された要素を目立つようにする
 // cf. CSS - MDC 
 function highlightElem(e){
  with(e.style){
   backgroundColor = "#fcc"
   borderWidth = "1px";
   borderColor = "#f00";
   borderStyle = "solid";
   borderWidth = "3px";
//   fontSize = "large";
  }
 }
 // リンクを除外するための正規表現オブジェクトを生成
 function createExcludeRegExp(){
  return EXCLUDE_REGEXP ? new RegExp(EXCLUDE_REGEXP) : null;
 }
 function highlight(re, notRe){
  var anchors = document.getElementsByTagName("a");
  for (var i = 0; i < anchors.length; i++){
   href = anchors[i].href;
   if (!href.match(re) || href.match(notRe)) continue;
   highlightElem(anchors[i]);
  } 
 }
 
 highlight(new RegExp(INCLUDE_REGEXP), createExcludeRegExp())
})();