1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

見ている間だけホームページを書き換える方法【ブックマークレット】【拡張機能】

Last updated at Posted at 2024-10-22

概要

ホームページは自分では書き換えられないと思っていませんか?
もちろん、人の作ったホームページを書き換えることはできません。
ですが、見ている間だけであれば、一時的に書き換えることはできます。

見ている間だけ書き換える方法

3つの方法があります。

  • デベロッパーツール
  • ブックマークレット
  • ユーザースクリプト

デベロッパーツール

Chromeなどの、デベロッパーツールがあるブラウザでは、デベロッパーツールを利用することで、一時的に書き換えることができます。デバッグ用です。

メリット

手軽に書き換えることできます。

デメリット

手動の書き換えなので、スクリプトなどによる自動的な書き換えができません。
書き換えた内容が保存できません。

ブックマークレット

ブックマークレットとは、ブックマークから実行するスクリプトです。
ブックマークのURLにjavascript:から始まる1行のJavaScriptを入力して登録し、今見ているページでそのブックマークを開くと実行されます。
ページを書き換えるスクリプトならページを一時的に書き換えることができます。

ブックマークレットの作り方

1: 即時関数(アロー関数の形)を作ります。即時関数とは、宣言と同時に実行される関数です。アロー関数とは、(引数) => {文}という形の関数です。

(() => {
	
})();

2: JavaScriptを圧縮するツールを使って、1行に圧縮します。

(()=>{})();

3: 先頭にjavascript:を付けます。

javascript:(()=>{})();

5: 任意のページをブックマークし、そのブックマークを編集し、名前をブックマークレットの名前(区別しやすい名前がおすすめ)、URLに先ほどのJavaScriptを入力します。

ブックマークレットの実行方法

パソコン

作ったブックマークを開けばブックマークレットが実行されます。

スマホ

URLにブックマークレットの名前を入力します。するとブックマークレットが候補に表示されるので、それを押すと、ブックマークレットが実行されます。

メリット

ブックマークから実行できるので、ブックマーク機能があるブラウザであれば使えます。
スマホの標準ブラウザでも使えます。

デメリット

一時的に書き換えたいページに行くたびに毎回ブックマークレットを実行必要があります。
ブックマークレットを作るときに毎回圧縮する必要があります。

ユーザースクリプト

「Tampermonkey」というユーザースクリプト(任意のJavaScript)を実行する拡張機能があります。

ページを開いたら自動的にTampermonkeyに登録したユーザースクリプトが実行されます。ページを書き換えるスクリプトならページを一時的に書き換えることができます。

Tampermonkeyの使い方

新しいユーザースクリプトの作成

⊞を押すと新しいユーザースクリプトが作成されます。
初期のコードはこんな感じです。

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      2024-10-22
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();

上にユーザースクリプトの情報を書きます。

名前 説明
name ユーザースクリプトの名前
name:** 多言語でのユーザースクリプトの名前、name:enで英語
namespace 作成者のホームページ
version バージョン(更新日付など)
description ユーザースクリプトの説明
description:** 多言語でのユーザースクリプトの説明、description:enで英語
author 作成者の名前
match ユーザースクリプトを実行したいページ
icon ユーザースクリプトのアイコン、初期の「data:~」だと透明
grant 権限、特に必要ないならnone
license ライセンス、初期のコードにないので追記する必要がある
迷ったらMITでいいと思う

下に用意された即時関数の中に実行したい内容を入力します。

ユーザースクリプトの投稿

作ったユーザースクリプトはGreasy Forkというサイトに投稿できます。

投稿したユーザースクリプトを登録することもできます。

メリット

1度登録しておけば、ページを開いたらすぐに実行されるので、利用者は登録するだけでOKです。

デメリット

スマホの標準ブラウザ(iPhoneはSafari、AndroidはChrome)では拡張機能が使えません。スマホで拡張機能を使いたければ、拡張機能が使えるブラウザ(iPhoneはOrion、AndroidはKiwi Browser)を使う必要があります。

比較

デベロッパーツール ブックマークレット ユーザースクリプト
実行方法 手動で書き換える ブックマークを開く 自動実行
保存 できない できる できる
スマホの
標準ブラウザ
できない できる できない

例えば、このページはアイヌ語版ウィキペディア(試験版)のページの1つですが、今現在表記法が統一されていなく、無秩序な状態です。

1.png

アイヌ語には複数の表記法(ローマ字、カタカナ、キリル文字など)があります。
(ただし、カタカナ(アコㇿイタㇰ方式)はイがiとy、ウがuとw、ンがnとm、ッがtと子音の連続の区別ができないので他の文字に正確に変換できない)
だからアイヌ語版ウィキペディアにも中国語版、セルビア語版のような文字変換器がほしいところですが、今現在ありません。
だからこちらで変換器を用意し、利用者に登録してもらおうという話です。

この例では、こちらのCironnup(狐)というページを使います。

2.png

このページをカタカナにするとこうなります。

3.png

このページをキリル文字にするとこうなります。

4.png

ブックマークレット1(カタカナに変換)

このブックマークレットを実行すれば、カタカナに変換できます。

javascript:(()=>{var e,t="data-convert",a="true",i=[["á","a"],["í","i"],["ú","u"],["é","e"],["ó","o"],["(?<=\\w)[-=](?=\\w)",""],[", ?",""],["\\. ?",""],["! ?",""],["\\? ?",""],[" ?“",""],["” ?",""],[" ?‘",""],["’ ?",""],["a[hx]","aㇵ"],["i[hx]","iㇶ"],["u[hx]","uㇷ"],["e[hx]","eㇸ"],["o[hx]","oㇹ"],["ar","aㇻ"],["ir","iㇼ"],["ur","uㇽ"],["er","eㇾ"],["or","oㇿ"],["[hxㇵ-ㇹ](?=[hx])",""],["[hxㇵ-ㇹ]a",""],["[hxㇵ-ㇹ]i",""],["[hḣxㇵ-ㇹ]u",""],["[hxㇵ-ㇹ]e",""],["[hxㇵ-ㇹ]o",""],["[hx]",""],["[rㇻ-ㇿ](?=r)",""],["[rㇻ-ㇿ]a",""],["[rㇻ-ㇿ]i",""],["[rㇻ-ㇿ]u",""],["[rㇻ-ㇿ]e",""],["[rㇻ-ㇿ]o",""],["r",""],["k(?=k)",""],["ka",""],["ki",""],["ku",""],["ke",""],["ko",""],["k",""],["g(?=g)",""],["ga",""],["gi",""],["gu",""],["ge",""],["go",""],["g","ㇰ゙"],["(ts|ċ)a","ツァ"],["ċi","ツィ"],["(ts|ċ)e","ツェ"],["(ts|ċ)o","ツォ"],["(ts|ċ)u",""],["s(?=s)",""],["sa",""],["ṡi","スィ"],["su",""],["se",""],["so",""],["ş(?=ş)",""],["şa","シャ"],["şu","シュ"],["şe","シェ"],["şo","ショ"],["[sş]i",""],["d(?=d)",""],["dza","ヅァ"],["dżi","ヅィ"],["dze","ヅェ"],["dzo","ヅォ"],["dzu",""],["z(?=z)",""],["za",""],["żi","ズィ"],["zu",""],["ze",""],["zo",""],["dja","ヂャ"],["dju","ヂュ"],["dje","ヂェ"],["djo","ヂョ"],["d[jz]i",""],["j(?=j)",""],["ja","ジャ"],["ju","ジュ"],["je","ジェ"],["jo","ジョ"],["[jz]i",""],["ca","チャ"],["cu","チュ"],["ce","チェ"],["co","チョ"],["(ts|c)i",""],["(ts|ċ)",""],["",""],["[sş]",""],["","ッ゙"],["ż","ㇱ゙"],["d[jz]","ッ゙"],["[jz]","ㇱ゙"],["c",""],["ta",""],["ti","ティ"],["tu","トゥ"],["te",""],["to",""],["t",""],["da",""],["di","ディ"],["du","ドゥ"],["de",""],["do",""],["d","ッ゙"],["na",""],["ni",""],["nu",""],["ne",""],["no",""],["n",""],["m(?=[bmp])",""],["b(?=b)",""],["ba",""],["bi",""],["bu",""],["be",""],["bo",""],["b","ㇷ゙"],["p(?=p)",""],["pa",""],["pi",""],["pu",""],["pe",""],["po",""],["p","ㇷ゚"],["ma",""],["mi",""],["mu",""],["me",""],["mo",""],["m",""],["ya",""],["yu",""],["ye","イェ"],["yo",""],["yi?",""],["wa",""],["wi","ウィ"],["we","ウェ"],["wo","ウォ"],["wu?",""],["v(?=v)",""],["va","ヴァ"],["vi","ヴィ"],["ve","ヴェ"],["vo","ヴォ"],["vu",""],["v","ゥ゙"],["f(?=f)",""],["fa","ファ"],["fi","フィ"],["fe","フェ"],["fo","フォ"],["fu",""],["f",""],["a",""],["i",""],["u",""],["e",""],["o",""]];if(null!=(e=document.querySelectorAll('style,.mw-parser-output [lang]:not([lang^="ain"]),.mw-parser-output [lang]:not([lang^="ain"]) *,.mw-editsection *,.external,pre')))for(var r=0;r<e.length;r++)e[r].getAttribute(t)!=a&&e[r].setAttribute(t,a);if(null!=(e=document.querySelectorAll(".mw-parser-output *,#mw-panel-toc-list :nth-child(n+2) *,#firstHeading *,#catlinks ul *,.mw-prefixindex-list *,.mw-allpages-chunk *,.mw-category *"))){for(var r=0;r<e.length;r++)if(e[r].getAttribute(t)!=a&&(e[r].setAttribute(t,a),e[r].hasChildNodes())){var o=e=>{for(var t=e.split(" | "),a=0;a<i.length;a++)t[0]=t[0].replace(RegExp(i[a][0],"ig"),i[a][1]);return t.join(" | ")};if(0==e[r].childElementCount)e[r].textContent=o(e[r].textContent);else{var n=e[r],l=document.createTextNode("");n.replaceWith(l);for(var u=document.createDocumentFragment(),d=n.firstElementChild;null!=d;)d.replaceWith(document.createTextNode("\x1a")),u.appendChild(d),d=n.firstElementChild;var s=o(n.textContent).split("\x1a");n.textContent="",n.appendChild(document.createTextNode(s[0]));for(var h=1;h<s.length;h++)n.appendChild(u.firstElementChild),n.appendChild(document.createTextNode(s[h]));l.replaceWith(n)}}}})();

圧縮前のスクリプト

(() => {
	var convert_sign_attr = "data-convert";
	var convert_sign_value = "true";
	var separate = " | ";
	var replacement = "\x1a";

	var flag = "ig";
	var c = [
		["á", "a"],	["í", "i"],	["ú", "u"],	["é", "e"],	["ó", "o"],
		["(?<=\\w)[-=](?=\\w)", ""],
		[", ?", ""],	["\\. ?", ""],	["! ?", ""],	["\\? ?", ""],
		[" ?“", ""],	["” ?", ""],	[" ?‘", ""],	["’ ?", ""],
		["a[hx]", "aㇵ"],	["i[hx]", "iㇶ"],	["u[hx]", "uㇷ"],	["e[hx]", "eㇸ"],	["o[hx]", "oㇹ"],
		["ar", "aㇻ"],	["ir", "iㇼ"],	["ur", "uㇽ"],	["er", "eㇾ"],	["or", "oㇿ"],
		["[hxㇵ-ㇹ](?=[hx])", ""],	["[hxㇵ-ㇹ]a", ""],	["[hxㇵ-ㇹ]i", ""],	["[hḣxㇵ-ㇹ]u", ""],	["[hxㇵ-ㇹ]e", ""],	["[hxㇵ-ㇹ]o", ""],	["[hx]", ""],
		["[rㇻ-ㇿ](?=r)", ""],	["[rㇻ-ㇿ]a", ""],	["[rㇻ-ㇿ]i", ""],	["[rㇻ-ㇿ]u", ""],	["[rㇻ-ㇿ]e", ""],	["[rㇻ-ㇿ]o", ""],	["r", ""],
		["k(?=k)", ""],	["ka", ""],	["ki", ""],	["ku", ""],	["ke", ""],	["ko", ""],	["k", ""],
		["g(?=g)", ""],	["ga", ""],	["gi", ""],	["gu", ""],	["ge", ""],	["go", ""],	["g", "ㇰ゙"],
							["(ts|ċ)a","ツァ"],	["ċi","ツィ"],	["(ts|ċ)e","ツェ"],	["(ts|ċ)o","ツォ"],	["(ts|ċ)u",""],
		["s(?=s)", ""],	["sa", ""],	["ṡi", "スィ"],	["su", ""],	["se", ""],	["so", ""],
		["ş(?=ş)", ""],	["şa", "シャ"],	["şu", "シュ"],	["şe", "シェ"],	["şo", "ショ"],	["[sş]i", ""],
		["d(?=d)", ""],	["dza","ヅァ"],	["dżi","ヅィ"],	["dze","ヅェ"],	["dzo","ヅォ"],	["dzu",""],
		["z(?=z)", ""],	["za", ""],	["żi", "ズィ"],	["zu", ""],	["ze", ""],	["zo", ""],
							["dja","ヂャ"],	["dju","ヂュ"],	["dje","ヂェ"],	["djo","ヂョ"],	["d[jz]i",""],
		["j(?=j)", ""],	["ja", "ジャ"],	["ju", "ジュ"],	["je", "ジェ"],	["jo", "ジョ"],	["[jz]i", ""],
							["ca", "チャ"],	["cu", "チュ"],	["ce", "チェ"],	["co", "チョ"],	["(ts|c)i", ""],
		["(ts|ċ)",""],	["", ""],	["[sş]", ""],	["","ッ゙"],	["ż", "ㇱ゙"],	["d[jz]","ッ゙"],	["[jz]", "ㇱ゙"],	["c", ""],
							["ta", ""],	["ti", "ティ"],	["tu", "トゥ"],	["te", ""],	["to", ""],	["t", ""],
							["da", ""],	["di", "ディ"],	["du", "ドゥ"],	["de", ""],	["do", ""],	["d", "ッ゙"],
							["na", ""],	["ni", ""],	["nu", ""],	["ne", ""],	["no", ""],	["n", ""],
		["m(?=[bmp])", ""],
		["b(?=b)", ""],	["ba", ""],	["bi", ""],	["bu", ""],	["be", ""],	["bo", ""],	["b", "ㇷ゙"],
		["p(?=p)", ""],	["pa", ""],	["pi", ""],	["pu", ""],	["pe", ""],	["po", ""],	["p", "ㇷ゚"],
							["ma", ""],	["mi", ""],	["mu", ""],	["me", ""],	["mo", ""],	["m", ""],
							["ya", ""],	["yu", ""],	["ye", "イェ"],	["yo", ""],					["yi?", ""],
							["wa", ""],	["wi", "ウィ"],	["we", "ウェ"],	["wo", "ウォ"],					["wu?", ""],
		["v(?=v)", ""],	["va", "ヴァ"],	["vi", "ヴィ"],	["ve", "ヴェ"],	["vo", "ヴォ"],	["vu", ""],	["v", "ゥ゙"],
		["f(?=f)", ""],	["fa", "ファ"],	["fi", "フィ"],	["fe", "フェ"],	["fo", "フォ"],	["fu", ""],	["f", ""],
							["a", ""],	["i", ""],	["u", ""],	["e", ""],	["o", ""]
	];

	var a;
	a = document.querySelectorAll('style,.mw-parser-output [lang]:not([lang^="ain"]),.mw-parser-output [lang]:not([lang^="ain"]) *,.mw-editsection *,.external,pre');
	if (a != null) {
		for (var i = 0; i < a.length; i++) {
			if (a[i].getAttribute(convert_sign_attr) == convert_sign_value) continue;
			a[i].setAttribute(convert_sign_attr, convert_sign_value);
		}
	}

	a = document.querySelectorAll('.mw-parser-output *,#mw-panel-toc-list :nth-child(n+2) *,#firstHeading *,#catlinks ul *,.mw-prefixindex-list *,.mw-allpages-chunk *,.mw-category *');
	if (a == null) return;
	for (var i = 0; i < a.length; i++) {
		if (a[i].getAttribute(convert_sign_attr) == convert_sign_value) continue;
		a[i].setAttribute(convert_sign_attr, convert_sign_value);

		if (!(a[i].hasChildNodes())) continue;
		var h = (b) => {
			var s = b.split(separate);
			for (var j = 0; j < c.length; j++) {
				s[0] = s[0].replace(new RegExp(c[j][0], flag), c[j][1]);
			}
			return s.join(separate);
		}
		if (a[i].childElementCount == 0) {
			a[i].textContent = h(a[i].textContent);
		}
		else {
			var t = a[i];
			var p = document.createTextNode("");
			t.replaceWith(p);
			var r = document.createDocumentFragment();
			var e = t.firstElementChild;
			while (e != null) {
				e.replaceWith(document.createTextNode(replacement));
				r.appendChild(e);
				e = t.firstElementChild;
			}
			var ss = h(t.textContent).split(replacement);
			t.textContent = "";
			t.appendChild(document.createTextNode(ss[0]));
			for (var j = 1; j < ss.length; j++) {
				t.appendChild(r.firstElementChild);
				t.appendChild(document.createTextNode(ss[j]));
			}
			p.replaceWith(t);
		}
	}
})();

ブックマークレット2(キリル文字に変換)

このブックマークレットを実行すれば、キリル文字に変換できます。

javascript:(()=>{var e,t="data-convert",r="true",l=[["Á",""],["á",""],["Í",""],["í",""],["Ú",""],["ú",""],["É",""],["é",""],["Ó",""],["ó",""],["A","А"],["a","а"],["I","И"],["i","и"],["U","У"],["u","у"],["E","Э"],["e","э"],["O","О"],["o","о"],["K","К"],["k","к"],["G","Г"],["g","г"],["S","С"],["s","с"],["Z","З"],["z","з"],["","С̇"],["","с̇"],["Ż","З̇"],["ż","з̇"],["Ş","Ш"],["ş","ш"],["J","Ж"],["J","ж"],["C","Ч"],["c","ч"],["Ċ","Ц"],["ċ","ц"],["T","Т"],["t","т"],["D","Д"],["d","д"],["N","Н"],["n","н"],["","Х̇"],["","х̇"],["[HX]","Х"],["[hx]","х"],["P","П"],["p","п"],["B","Б"],["b","б"],["M","М"],["m","м"],["Y","Й"],["y","й"],["R","Р"],["r","р"],["W","Ў"],["w","ў"],["V","В"],["v","в"],["F","Ф"],["f","ф"]];if(null!=(e=document.querySelectorAll('style,.mw-parser-output [lang]:not([lang^="ain"]),.mw-parser-output [lang]:not([lang^="ain"]) *,.mw-editsection *,.external,pre')))for(var n=0;n<e.length;n++)e[n].getAttribute(t)!=r&&e[n].setAttribute(t,r);if(null!=(e=document.querySelectorAll(".mw-parser-output *,#mw-panel-toc-list :nth-child(n+2) *,#firstHeading *,#catlinks ul *,.mw-prefixindex-list *,.mw-allpages-chunk *,.mw-category *"))){for(var n=0;n<e.length;n++)if(e[n].getAttribute(t)!=r&&(e[n].setAttribute(t,r),e[n].hasChildNodes())){var a=e=>{for(var t=e.split(" | "),r=0;r<l.length;r++)t[0]=t[0].replace(RegExp(l[r][0],"g"),l[r][1]);return t.join(" | ")};if(0==e[n].childElementCount)e[n].textContent=a(e[n].textContent);else{var i=e[n],o=document.createTextNode("");i.replaceWith(o);for(var p=document.createDocumentFragment(),d=i.firstElementChild;null!=d;)d.replaceWith(document.createTextNode("\x1a")),p.appendChild(d),d=i.firstElementChild;var u=a(i.textContent).split("\x1a");i.textContent="",i.appendChild(document.createTextNode(u[0]));for(var c=1;c<u.length;c++)i.appendChild(p.firstElementChild),i.appendChild(document.createTextNode(u[c]));o.replaceWith(i)}}}})();

圧縮前のスクリプト

(() => {
	var convert_sign_attr = "data-convert";
	var convert_sign_value = "true";
	var separate = " | ";
	var replacement = "\x1a";

	var flag = "g";
	var c = [
		["Á", ""], ["á", ""], ["Í", ""], ["í", ""],
		["Ú", ""], ["ú", ""], ["É", ""], ["é", ""],
		["Ó", ""], ["ó", ""],
		["A", "А"], ["a", "а"], ["I", "И"], ["i", "и"],
		["U", "У"], ["u", "у"], ["E", "Э"], ["e", "э"],
		["O", "О"], ["o", "о"],
		["K", "К"], ["k", "к"], ["G", "Г"], ["g", "г"],
		["S", "С"], ["s", "с"], ["Z", "З"], ["z", "з"],
		["", "С̇"], ["", "с̇"], ["Ż", "З̇"], ["ż", "з̇"],
		["Ş", "Ш"], ["ş", "ш"], ["J", "Ж"], ["J", "ж"],
		["C", "Ч"], ["c", "ч"], ["Ċ", "Ц"], ["ċ", "ц"],
		["T", "Т"], ["t", "т"], ["D", "Д"], ["d", "д"],
		["N", "Н"], ["n", "н"],
		["", "Х̇"], ["", "х̇"], ["[HX]", "Х"], ["[hx]", "х"],
		["P", "П"], ["p", "п"], ["B", "Б"], ["b", "б"],
		["M", "М"], ["m", "м"],
		["Y", "Й"], ["y", "й"],
		["R", "Р"], ["r", "р"],
		["W", "Ў"], ["w", "ў"], ["V", "В"], ["v", "в"],
		["F", "Ф"], ["f", "ф"]
	];

	var a;
	a = document.querySelectorAll('style,.mw-parser-output [lang]:not([lang^="ain"]),.mw-parser-output [lang]:not([lang^="ain"]) *,.mw-editsection *,.external,pre');
	if (a != null) {
		for (var i = 0; i < a.length; i++) {
			if (a[i].getAttribute(convert_sign_attr) == convert_sign_value) continue;
			a[i].setAttribute(convert_sign_attr, convert_sign_value);
		}
	}

	a = document.querySelectorAll('.mw-parser-output *,#mw-panel-toc-list :nth-child(n+2) *,#firstHeading *,#catlinks ul *,.mw-prefixindex-list *,.mw-allpages-chunk *,.mw-category *');
	if (a == null) return;
	for (var i = 0; i < a.length; i++) {
		if (a[i].getAttribute(convert_sign_attr) == convert_sign_value) continue;
		a[i].setAttribute(convert_sign_attr, convert_sign_value);

		if (!(a[i].hasChildNodes())) continue;
		var h = (b) => {
			var s = b.split(separate);
			for (var j = 0; j < c.length; j++) {
				s[0] = s[0].replace(new RegExp(c[j][0], flag), c[j][1]);
			}
			return s.join(separate);
		}
		if (a[i].childElementCount == 0) {
			a[i].textContent = h(a[i].textContent);
		}
		else {
			var t = a[i];
			var p = document.createTextNode("");
			t.replaceWith(p);
			var r = document.createDocumentFragment();
			var e = t.firstElementChild;
			while (e != null) {
				e.replaceWith(document.createTextNode(replacement));
				r.appendChild(e);
				e = t.firstElementChild;
			}
			var ss = h(t.textContent).split(replacement);
			t.textContent = "";
			t.appendChild(document.createTextNode(ss[0]));
			for (var j = 1; j < ss.length; j++) {
				t.appendChild(r.firstElementChild);
				t.appendChild(document.createTextNode(ss[j]));
			}
			p.replaceWith(t);
		}
	}
})();

ユーザースクリプト

このユーザースクリプトを登録すれば、カタカナに変換できます。
設定でキリル文字にもできます。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?