ブラウザで強調表示するか、Chromeの別の拡張機能を作成します

私は長い間Notepad ++を使用してきました。選択したテキストフラグメントの自動検索と強調表示という優れた機能に非常に慣れています。







この機能は、プログラムのソースコードを分析するのに非常に役立ちます。目的の変数やメソッドに固執しようとして目を「洗う」必要がないため、自動的に強調表示されます。



さまざまなitリソースのブラウザーでソーステキストを表示する場合、このような強調表示の深刻な不足があります。 ブラウザ拡張機能を作成するというアイデアがありました。



それでは始めましょう。



まず、計画が必要です。

• マニフェスト
• スクリプト（.js）;
• スタイル（css）;
• アイコン（.png）;

マニフェスト（manifest.json）

{ "manifest_version": 2, "version": "0.1", "name": "Highlighter", "description": "Highlighter", "content_scripts": [ { "matches": [ "*://*/*" ], "css": ["highlighter.css"], "js": [ "highlighter.js" ], "run_at": "document_end" } ], "icons" : { "16" : "icon-16.png", "48" : "icon-48.png", "128" : "icon-128.png" }, "browser_action": { "default_title": "Highlighter", "default_icon" : "icon-32.png" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

マニフェストのすべてのパラメーターをここで詳しく説明するわけではありません。 私はいくつかの点だけを説明します。



manifest_version：2である必要があります。

run_at：document_end-ドキュメントをロードした後、写真をロードする前にhighlighter.jsスクリプトを実行します。

スクリプト（highlighter.js）

 var isHighlight = false; document.body.addEventListener('mousewheel', function () { var select = window.getSelection() + ''; if ((select == '') || (select.length > 110)) return; select = select.trim(); var html = document.body.innerHTML.split(select).join('<x>' + select + '</x>'); document.body.innerHTML = html; isHighlight = true; }, false); document.body.addEventListener('mousedown', function () { if (!isHighlight) return; //    -  var html = document.body.innerHTML.split('<x>').join(''); html = html.split('</x>').join(''); document.body.innerHTML = html; isHighlight = false; }, false);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このスクリプトでは、マウスホイールをスクロールするためとマウスボタンをクリックするための2つのイベントが処理されます。



イベントがトリガーされたら、マウスホイールをスクロールします。

• selectで選択したフラグメントを取得します。
• 選択があったかどうか、また、それが110を超えないかどうかを確認します（誰かが知っているなら知識が共有されているので、実験的に確立された理由は謎です）。
• 選択したフラグメントの処理を実行し、先頭と末尾のスペースを切り取ります。
• 選択したテンプレートによってページのテキスト内のすべてのフラグメントを検索し、タグXでラップします。
• バックライトを実装するフラグ（isHighlight）を設定します。

イベントがトリガーされたとき-マウスクリック：

• バックライトフラグが設定されているかどうかを確認します。
• Xタグからページのテキスト全体を消去します。
• バックライトフラグをリセットします。

ここではJQueryが使用されていないことを肉眼で確認できますが、最初は彼に助けを求めて、テキストの必要な断片を探すように強制しました。

 $(":contains(find)").html(...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、結局のところ、これはすべて非常に遅く、非効率的です。 生産性のために、「ネイティブ」メソッドの使用に専念することが決定されました。

スタイル（highlighter.css）

これらは、次のように、 Xタグでラップされたテキストのすべてのフラグメントを強調表示するという同じ目的を果たします。

 x{ background: lime; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アイコン

さて、最後。 これは、もちろん、アイコンの形の装飾であり、一般的にはそれらなしでも可能ですが、それらを使用することで多少なりとも楽しくなります。 どのアイコンを使用するかは、冒頭で説明したマニフェストファイルに登録されます。





128x128





48x48





32x32





16x16



完成したプロジェクトを含むGIthubへのリンクは、拡張機能をインストールし、Githubからローカルコンピューターにプロジェクトをダウンロードし、 ビルドフォルダーの内容をこのアドレスchrome：// extensions /のブラウザーウィンドウにドラッグします。



以上で、この記事がお役に立てば幸いです。

upd： 招待してくれたユーザーに感謝したい。それは私にとって大きな意味がある。ありがとう。

upd： DmitryK1は、余分なスペースの割り当てに関する推奨事項を修正しました。



upd：この拡張機能は完全なソフトウェア製品ではなく、最も控えめなニーズのみを満たすことができます。 誤解した場合は謝罪します。

アプリケーションの作成において、彼らは私を助けてくれました。

「Google Chrome用の独自の拡張機能を作成する」

グーグル