何が隠されているか、どのようにさらに良くなるかを見る

かなり前のことですが、jQueryを初めて知ったとき、ページ上のどの要素がイベントにどのようなイベントに関連付けられているかを示すツールが必要でした。 その瞬間、私はそのようなものを見つけることができませんでした。 私が非常に一生懸命探していたと言うわけではありませんが、FireBugも後で登場したDragonflyもそのような機能を持っていませんでした。



定期的にこの考えを思い出しましたが、Googleを一目見ただけでは何もおもしろくありませんでした。 最近まで。



1月に、このトピックに興味深いものが登場するかどうかをもう一度確認したいときに、 Allan Jardineが作成したすばらしいVisual Event 2ブックマークレットを見つけました。 ブックマークレットは時計のように機能しましたが、軟膏には小さなが不快なハエが2頭ありました。



Operaを使用し、ツールバーのすべてのブックマークレットに同じアイコンがあります。 。 このようなブックマークをいくつか追加して、それらの間を移動することは非常に不快になります。 2番目の不愉快な瞬間-ブックマークレットは開発者のサイトからすべてのコードをロードしたため、小さくなりましたが遅延しました。



そのため、Operaブラウザの拡張機能としてブックマークレットを配置することが決定されました。 さらに、私は長い間Opera Extension APIについて知りたいと思っていました。 ここに最もせっかちな拡張ページへのリンクがあります 。 猫にお願いします。猫は、ブックマークレットをOperaの拡張機能に変換するすべての段階、私が遭遇した問題、およびそれらを解決する方法を説明しています。

これは何のためですか？

まず、最後に何が起こったのかを紹介したいと思います。 拡張機能をインストールした後

視覚イベント Operaツールバーに新しいボタンが表示されます。 VisualEventモードのオンとオフを切り替えるために使用します。



注意！ ボタンは、拡張機能をインストールした後に読み込まれたページでのみ機能します！



ボタンをアクティブにすると、開いているHTMLページが暗くなり、イベントハンドラーがハングしているすべての要素が色付きの四角形で強調表示されます。





カーソルを任意の長方形に移動すると、ハンドラー関数のコード、ファイル名、および宣言された行が表示されます。





もう一度目でボタンを押すと、VisualEventモードがオフになります。 実際、これについては、拡張機能はそれ以上何もしません。 興味のある方はOpera拡張機能ディレクトリからインストールできます。 ブックマークレットを拡張機能に変換する詳細に興味がある人は、次のセクションに招待します。

ブックマークレットを分解します

何かをどこかに移植する前に、まだ何かがどのように機能するかを理解しておくといいでしょう。 このために、ブックマークレット自体のコードを見てみましょう。



ブックマークレットは、リンクに追加された実際のコードと、スタイルシートとすべての機能の実装を含むいくつかの追加ファイルで構成されます。 ブックマークレットのコードは非常に簡単です。

(function() { var url = 'http://example.com/VisualEvent/builds/VisualEvent_Loader.js'; if( typeof VisualEvent!='undefined' ) { if ( VisualEvent.instance !== null ) { VisualEvent.close(); } else { new VisualEvent(); } } else { var n=document.createElement('script'); n.setAttribute('language','JavaScript'); n.setAttribute('src',url+'?rand='+new Date().getTime()); document.body.appendChild(n); } })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

url変数には、すべてのロジックのアクティブ化を提供するブートローダースクリプトのアドレスが含まれています。 リストから、コードが VisualEvent オブジェクトの存在を確認し、検出されない場合はロードを開始することがわかります 。 オブジェクトが検出されると、VisualEventモードがアクティブになっているかどうかがチェックされます。 そして、テストの結果に応じて、オフにするかオンにします。



実際、このスクリプトはVisualEventモードのオン/オフボタンの機能を実装し、すべてのロジックは個別に保存され、最初のアクティベーション中にロードされます。 ただし、拡張機能を作成するため、すべてのVisualEventコードをその中に埋め込む必要があります。これにより、サードパーティのサイトへのアクセスが完全に排除され、最初のアクティベーションの時間が短縮されます。



すべてのブックマークレットコードは、3つのファイルで配布されます。

• VisualEvent_Loader.js
• VisualEvent.js
• VisualEvent-jQuery.js

VisualEvent_Loader.jsが最初にロードされます。 VisualEventが以前にロードされたかどうかを再度確認し、もしあれば、デバッグモードをアクティブまたは非アクティブにします。 VisualEventがまだロードされていない場合、ページがjQueryを使用しているかどうかを確認します。 jQueryを使用する場合、ブックマークレット自体のコードを含むVisualEvent.jsファイルがロードされます。 jQueryがロードされていない場合、 VisualEvent-jQuery.jsファイルがロードされ、VisualEventコードとjQueryライブラリコードの両方が含まれます。



拡張機能にVisualEventアクティベーションオプションの両方を実装する必要があることは明らかです：jQueryの有無。 さらに、コードを複数のファイルに分散させることはできません 。



JSファイルに加えて、ブックマークレットは外部VisualEvent.cssファイルから独自のスタイルシートを使用します。

パネルにボタンを作成する

拡張機能の開発を開始する最も簡単な方法は、ツールバーにボタンを追加することです。 第一に、ボタンをクリックすることで拡張機能をデバッグするのがはるかに簡単です。第二に、視界にボタンがあると目を楽しませ、熱狂の波がすぐに収まらないようにします。



拡張機能の基本構造の作成方法、config.xml記述ファイルへの入力方法、およびボタンをツールバーに追加する方法については説明しません。これらはすべて公式ガイドに記載されており、Habréで説明されています。



config.xmlファイルを安全に作成し、アイコンを見つけ、ツールバーにボタンを追加して、次のステップに進みました-拡張モードで動作するようにスクリプトを調整します。 そして、ここで最初の驚きは私を待っていました。 ツールバーのボタンクリックを処理するコードは、クリックされたページにアクセスできないことがわかりました。 最初はそのような振る舞いにがっかりし、回避策を見つけようとしましたが、2、3の実験の後、この問題を解決できないことに気付きました。



そして、すてきなcleanPages拡張機能を思い出しました。この拡張機能は、ツールバーのボタンを押すだけで、ページから意味のあるコンテンツのみを選択し、読みやすくします。 つまり ボタンを押すだけで、ページで何かが行われ、スクリプトが読み込まれ、コードが変更されます。 これがまさに私たちが必要としているものです！

叙情的な余談実際、拡張ファイルはすべてのスクリプト、スタイルシート、および画像が使用されたZIPアーカイブです。 したがって、拡張ファイルを持つことは、解凍して内部にどのように配置されているかを確認することはまったく困難ではありません。

検死の結果、拡張機能は2つのスクリプトで構成されている必要があることがわかりました。ツールバーのボタンハンドラーと、すべてのタブのすべてのロードページに自動的に接続するバックグラウンドスクリプトです。 ボタンハンドラは、ボタンが押されたタブの識別子を含むすべてのタブにブロードキャストメッセージを送信するだけです。バックグラウンドスクリプトはすべてのメッセージをリッスンし、それを受信すると、拡張ロジックをアクティブにします。



その結果、ボタンクリック処理関数は次の形式を取りました。

 function buttonClicked() { var tab = opera.extension.tabs.getFocused(); if ( tab ) { opera.extension.broadcastMessage( JSON.stringify(opera.extension.tabs.getFocused().url)+ '|' + 'VisualEvent-1.0'); } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

呼び出しopera.extension.broadcastMessage（）がブロードキャストメッセージを送信する場所。 バックグラウンドスクリプトには次のロジックがあります。

 opera.extension.onmessage = function(e) { var dataArray = e.data.split('|'); if ( window.top == window.self && e.data && JSON.parse(dataArray[0]) == window.decodeURI(window.location.href.replace(window.location.hash, '')) ) { if ( 'VisualEvent-1.0' == dataArray[1] ) { enableVisualEvent(); } } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、メッセージを受信した後、その形式とボタンがクリックされたページのURLがチェックされていることがわかります。 はい、チェックされるのはURLなので、複数の同一のタブを開いている場合、VisualEventはすべてのユーザーで同時にアクティブになります。



メカニズムには欠点がないわけではないため、ボタンやページを操作する簡単な方法を誰かが知っている場合は、コメントでそれを読んで喜んでいます。

ページを処理するスクリプトを書いています

ページを処理するスクリプトの作成を既に開始しており、ツールバーボタンからページにメッセージハンドラーを追加しています。 そして、このスクリプトはenableVisualEvent（）関数を呼び出します。 この関数にブックマークレットコードを配置したのは、ローダーファイルを読み込む代わりに、別の関数として設計されたコードを呼び出すだけであるという点だけが異なります。



実際、バックアップスクリプトから同じ拡張子に属する別のJavaScriptファイルを接続する方法を見つけることができなかったため、3つのソースブックマークレットファイル（ VisualEvent 、 VisualEvent_loaderおよびjQuery ）を個別の関数としてコーディングし、それを含める必要がありました単一のバックグラウンドスクリプト。

JavaScriptの適応

UserJSの拡張機能への変換に関するマニュアルに記載されているとおり。

さまざまな理由で、UserJSが拡張機能として機能しない場合があります。 （ さまざまな理由で、UserJSが拡張モードで動作しないことがあります ）

そして、これは本当です、少なくとも私にはうまくいきませんでした:)。 しかし、同じマニュアルには、この不名誉に対処する方法に関するレシピも含まれています。 主な理由は、拡張機能がサンドボックス内で機能し、ウィンドウオブジェクトの明示的な表示によってのみページのグローバルスコープにアクセスできることです。 つまり jQueryを " $ "または "j Query "として呼び出しても機能せず、代わりに " window。$ "または " window.jQuery "を使用します。 また、スクリプトで使用されるすべてのグローバル変数に対してこのような修正を行う必要があります。



すべての置換が行われた後、拡張機能は完全に機能しました。 しかし、スタイルシートは接続しませんでした。

CSSを接続

ソースコードは独自のスタイルシートを使用し、外部ファイルからロードしました。 回避策として、すべてのCSSコードをバックグラウンドスクリプトに含め、最初の初期化で<head>に<style>タグを作成し、すべてのCSSを書き込みます。 -ルール：

 function initCss() { var css = '< CSS->'; var n = document.createElement('style'); n.type = 'text/css'; var rules = document.createTextNode(css); if ( n.styleSheet ) { n.styleSheet.cssText = rules.nodeValue; } else { n.appendChild(rules); } document.getElementsByTagName('head')[0].appendChild(n); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、スタイルシートは素晴らしい働きをしました。 唯一の不便な点は、すべてのCSSコードを1行に含めて、引用符のエスケープを手動で行う必要があることです。

結論

読んでくれた皆さん、ありがとう！ :)



この記事をいくつかの提案とともに要約したいと思います。 新しいことを学ぶことは常に有用であり、時には興味深いことさえあります。 JavaScriptに精通している人は、拡張機能の開発において特別な困難に遭遇することはありません。 拡張機能を開発する際、それらの非自明な機能に遭遇する場合がありますが、便利な開発者ガイドと既存の拡張機能のコードを使用すると、簡単に理解できます。



ところで、Chromeユーザーは彼に似た拡張機能を見つけることができます。