feat: ポップアップに前後のハイライト数を表示

次のようにすることでハイライトのポップアップとして前後のハイライト数（↑前の数↓後の数）を表示するようにした。
* o_custom_rangeのプロパティn_counterにハイライトが重なる場合も含むハイライトの初期連番を割り振る。
* ハイライト済の文字列に重なる文字列でハイライトをしたときハイライトしない場合があることを関数count_highlightsで調整してo_custom_range_valuesのプロパティn_counter2にハイライトの最終連番を割り振る。

閉じるボタンをクリックしたときに関数start_re_highlightを呼んでハイライトを更新するようにした。
ダブルクリックしたときキーワード全体を選択するようにした。
webpackとMakeBookmarklet.jsなどを使ってFirefoxをサポートするようにした。
VSCodeの型チェック機能を有効にして修正した。
ハイライト色を3つ追加。
リファクタリング、スタイルとコメントとREADME更新。

Author: querykuma

.eslintrc.js

@@ -106,7 +106,7 @@ module.exports = {
         "max-lines": "off",
         "max-lines-per-function": "off",
         "max-nested-callbacks": "error",
-        "max-params": ["error", 4],
+        "max-params": ["error", 5],
         "max-statements": "off",
         "max-statements-per-line": "off",
         "multiline-comment-style": "off",
@@ -240,7 +240,12 @@ module.exports = {
         "padding-line-between-statements": "error",
         "prefer-arrow-callback": "off",
         "prefer-const": "error",
-        "prefer-destructuring": "off",
+        "prefer-destructuring": [
+            "error", {
+                "object": true,
+                "array": false
+            }
+        ],
         "prefer-numeric-literals": "error",
         "prefer-object-spread": "error",
         "prefer-promise-reject-errors": "error",

.gitignore

@@ -0,0 +1,2 @@
+Web/
+package-lock.json

MakeBookmarklet.js

@@ -0,0 +1,57 @@
+const fs = require('fs');
+
+class MakeBookmarklet {
+	static o_defaultOptions = {
+		"f_encodeURIComponent": false
+	};
+
+	constructor(o_options) {
+		this.o_options = {
+			...MakeBookmarklet.o_defaultOptions,
+			...o_options
+		};
+	}
+
+	apply(compiler) {
+		const s_pluginName = MakeBookmarklet.name;
+
+		compiler.hooks.assetEmitted.tap(s_pluginName, (s_filename, o_info) => {
+			const s_targetPath = o_info.targetPath;
+			if (!s_targetPath.match(/\.js$/u)) {
+				console.log(`${s_filename} は.jsではありません。`);
+				return;
+			}
+
+			const s_content = o_info.content.toString('utf8');
+
+			if (!s_content.match(/^\(\(\)=>\{.*\}\)\(\);$/u)) {
+				console.log(`${s_filename} の中身が予期されない形をしています。`);
+				return;
+			}
+
+			const s_content2
+				= this.o_options.f_encodeURIComponent
+					? `javascript:${encodeURIComponent(s_content)}`
+					: `javascript:${s_content}`;
+
+			fs.stat(s_targetPath, (err, stats) => {
+				if (err) { throw err; }
+				if (!stats.isFile()) {
+					console.log(`${s_filename} はファイルではありません。`);
+					return;
+				}
+
+				fs.unlink(s_targetPath, (err2) => {
+					if (err2) { throw err2; }
+
+					fs.writeFile(s_targetPath, s_content2, 'utf8', (err3) => {
+						if (err3) { throw err3; }
+						console.log(`${s_filename} をbookmarkletにしました。`);
+					});
+				});
+			});
+		});
+	}
+}
+
+module.exports = MakeBookmarklet;

README.md

@@ -1,33 +1,45 @@
 # Highlight Selection
 
-HTMLタグを超えて、選択範囲をキーワードとして、ウェブページをハイライトするブックマークレット及び拡張機能です。
+HTMLタグを超えて、選択範囲をキーワードとしてハイライトするブックマークレット及び拡張機能です。
 
 ## 機能
 
-- 選択範囲をキーワードとして、複数の出現箇所をハイライトします。その際、HTMLタグを超えて選択範囲を選択できます。
-- マウスホバーで×アイコンが出てハイライトを削除できます。
-- 30種類以上のハイライトを順番に使用できます。
+- 選択範囲をキーワードとして複数の出現箇所をハイライトします。その際、HTMLタグを超えて選択範囲を選択できます。
+- ハイライトのマウスホバーで現れる×アイコンをクリックすることでハイライトを削除できます。
+- 30種類以上のハイライトを使用できます。
+- ハイライトしたキーワードの出現数や前後の数（↑前の数↓後の数）をキーワードのポップアップで表示します。
 
 ## ブックマークレット版と拡張機能版の違い
 
 ブックマークレット版は、拡張機能が動作しないChromeウェブストア上でも動作します。
 
-拡張機能版は、選択範囲がフレーム内であっても動作します。拡張機能版は、選択範囲の右クリックメニューに選択項目を追加します。
+拡張機能版は、選択範囲がフレーム内であっても動作します。
 
 ## インストール方法
+### Google Chrome
+ブックマークレット版は、ブックマークのURL欄に[JavaScript](https://raw.githubusercontent.com/querykuma/HighlightSelection/main/highlight_selection_bookmark_min.js)の中身を貼り付けてください。
 
-ブックマークレット版は、ブックマークのURL欄に[JavaScript](https://raw.githubusercontent.com/querykuma/HighlightSelection/main/highlight_selection_bookmark.js)を貼り付けてください。
+拡張機能版は、「その他のツール」から「拡張機能」(chrome://extensions/)を開き、デベロッパーモードにして、「パッケージ化されていない拡張機能を読み込む」を押して、フォルダーを選択してください。
+
+### Firefox
+ブックマークレット版は、ブックマークのURL欄に[JavaScript](https://raw.githubusercontent.com/querykuma/HighlightSelection/main/highlight_selection_bookmark_min.js)の中身を貼り付けてください。Firefoxではサイズ制限に引っかかるので、webpackなどでサイズ縮小する必要がありました。
+
+拡張機能版は、次のようにしてください。
+
+1. manifest.jsonの中身をmanifest_firefox.jsonで置き換える。
+1. アドオンマネージャー(about:addons)で「アドオンをデバッグ」を選ぶ。
+1. 「一時的なアドオンを読み込む」でmanifest.jsonを選ぶ。
 
-拡張機能版は、「その他のツール」から「拡張機能」を開き(chrome://extensions/)、デベロッパーモードにして、「パッケージ化されていない拡張機能を読み込む」を押下して、フォルダーを選択してください。
 
 ## 使い方
 
-ブックマークレット版は、選択範囲を選択して、ブックマークレットを開くことで起動します。
+ブックマークレット版は、選択範囲を選択してからブックマークレットを開くことで起動します。
 
-拡張機能版は、選択範囲を右クリックしてから、ショートカットキーHで選択項目が選択されて、起動します。
+拡張機能版は、選択範囲を右クリックしてから「選択範囲のキーワードをハイライト」（ショートカットキーのH）を選ぶことで起動します。
 
 ## 動作環境
 
 - Google Chrome
+- Firefox