Webページのリンクが別タブで開かれるか表示するChrome拡張機能作った

はじめに

本記事は、Qiitaに投稿した記事を移行したものです。

Webページのリンクをクリックしたときに、新しいタブで開かれるのが嫌だったので、あらかじめ、新しいタブで開かれるのか知らせてくれるChrome拡張機能を作りました。

2017/07/01追記

公開しました!!
以下のリンクからインストールできます。
chrome.google.com

概要

マウスオーバー時にAnchorのinnerHTMLに [別タブ!!] と入れる。
仕組みはそれだけ。
f:id:sublimer:20200326213252p:plain
こんな感じ。

ソースコード

github.com

{
	"manifest_version": 2,
	"name": "Get href target",
	"version": "0.1",

	"description": "htmlページのhref要素のtargetを取得して新しいタブで開くか表示するChrome拡張機能",
	"icons": {
		"16": "icons/icon16.png",
		"48": "icons/icon48.png",
		"128": "icons/icon128.png"
	},

	"content_scripts": [
		{
			"matches": ["<all_urls>"],
			"js": ["app.js"],
			"run_at": "document_idle"
		}
	]
}
var a=document.getElementsByTagName('a');

for (var i = a.length - 1; i >= 0; i--) {
	a[i].onmouseover=function (e) {
		if(e.target.target==='_blank'){
			var beforetext=e.target.innerHTML;
			e.target.innerHTML+=' [別タブ!!] ';
			e.target.onmouseout=function () {
				e.target.innerHTML=beforetext;
			};
		}
	};
}

etElementsByTagNameでAnchorタグを全部取得し、それぞれにonmouseoveronmouseoutを設定する。
e.target.target_blankであれば別タブで開かれる。

最後に

意外と簡単に拡張機能が作れました。