タブ用のクロスブラウザ拡張機能を作成しましたが、あなたはそうしません

誇大妄想の主張を伴う長く退屈な紹介

いつものように、この世界では何かが私にはあまり合わないことを発見した。 つまり、デスクトップコンピューターの検索エンジンにある種の長いクエリを入力してからタブレットに切り替えると、まったく同じ結果を得るためにクエリのテキストを逐語的に思い出せませんでした。 すべてが順調に始まりました。 私は検索エンジンで私の質問への答えへのリンクを見ました、そしてそれが長い読書問題を約束することを実現しました。 次に、コンピューターの電源を切り、タブレットでソファに倒れました。検索エンジンにすべてを再入力し、タブレットでそのリンクを開き、落ち着いて、より快適な位置に横たわって、読みます...だった。 テキスト内のいくつかの小さな不一致-私のリンクは検索エンジンではなくなりました。 リンク自体を再生することもオプションではありません。長すぎます。 クエリテキストのオプションに戸惑い、私はタブレットを壊すことにほとんど怒りました。 くそー、起きて、コンピューターの電源を入れ直して、ブラウザーを起動し、履歴を掘り下げて、要求の正確なテキストを見つけなければなりませんでした。









ChromeおよびFirefoxにインストールされた拡張機能

アイデア

私は考えましたが、開いているタブをサーバーを介して他のコンピューターに転送し、そこで引き続き作業できるようにするブラウザー用の拡張機能を作成するのは良いことです。 はい、一部のブラウザにはすでにクラウド機能があります。両方のデバイスにログインするだけで... ...それが問題です。 しかし、コンピューターにChromeがあり、タブレットにFirefoxがある場合はどうなりますか？ そして...ええ、ログインするだけです。 それでもGoogleアカウントのパスワードを思い出した場合。 また、Firefoxにはアカウントがありません。 アカウントがあるかどうかさえ知りませんか？ もちろん、登録して、おそらく何らかの形で目的のリンクを自分に投げることができるサードパーティのクラウドサービスがあります。 ただし、そこに登録して別のパスワードをしっかりと記憶する必要があります...いいえ、これは完全に非現実的です。 最終的に、メールを介してリンクを自分で投げることができます。 しかし、これはすべて時間がかかり、アドレスバーからコピーして貼り付けてから、アドレスバーに貼り付けます。これは、たとえばタブレットでは非常に不便です。 いいえ、これはなんらかのナンセンスです...



ソファに横たわって、私はゆっくりとこれらすべての行動があまりにも多くの動きを必要とすることに気づきました...いいえ、みんな、そうしません。 そして、この世界で何かが私に合わないことを理解したら、私は座って自分のやり方ですべてを行うコードを書きます。 私は、タブレットとデスクトップコンピューターの両方のソーシャルネットワークで承認されていると思いました。 また、たとえば同じコンピューター上の異なるブラウザーでも。 一般的に、私にとっての解決策は明らかでした-ソーシャルネットワークを介してユーザーを認証すること。

叙情的な余談

ちなみに、自分で何かを書くときは、それも自分のやり方でやります。 高度なノートブックに純粋なjavaScriptを記述し、githubを使用せず、サードパーティのライブラリを使用せず、jqueryも使用しません。 したがって、ブラウザー拡張機能の作成方法に関するチュートリアルはありません。 これは教えません。 私のようにしないでください。 警告します-これは悪い例です。 私はまた、彼らの反応を予想して、すべての潜在的な批評家に伝えたいです-はい、私はあなたのすべての正しい怒りに完全に同意します。 はい、スクリプト全体を1つまたは2つのファイルに押し込むことはできませんが、サラダのようにすべてを細かく切り刻んで、コマンドラインから長くスマートなコマンドを使用して3時間収集できるようにする必要があります。 はい、javascriptコードとhtmlコードを1つのファイルに結合することはできません-それらを結合する別のレベルの抽象化を台無しにすることをお勧めします。 はい、テーブルレイアウトを使用することはできませんが、いまいましい、それは鉄です！ そして、さらにそう-今、彼らは私を燃やします-innerHtmlを使用して複雑なhtml構造を一挙に作成することはできませんが、ループ内のすべての子をアタッチおよびデタッチし、各ハンドラーを慎重にアタッチして削除する必要があります...はい、私はすべて間違っています。 罪深い、悔い改める。 しかし、私は意識的にそれを行います。簡単だからです。 そして誰が私を禁じますか？ 最後に、それは違法ではありませんか？ 開発プロセス図は不必要に複雑であると考えているため、現代のmodが必要とするようにプログラミングする方法がわかりません。また、試したくさえありません。 私は自分の手でコードを書き、一行も書かずに他の人の作品からそれを構築するのではありません。 ただし、私のコードは軽量であり、特別なチームが組み立てる必要はなく、すぐに動作します。 F5テクノロジーを使用してコードを書いています。 これは、開発プロセスで現在のバージョンがどのように機能するかを確認するために、F5ブラウザーをクリックするだけです。











ただし、それ以外の場合は拡張機能がテストに合格しないため、ハンドラーをループで切断する必要がありました。 また、念のため拡張機能では、htmlインデックスファイルで-突然-動的に接続されたスクリプトは禁止されています。 そこで、スクリプトタグを介してそれらを接続しました。

タブストレージ

そこで、ブラウザで開いたタブを特定のリストに保存することを決定しました。このリストは、コンピューター-ホームコンピューター、職場コンピューター、ローカルコンピューターと呼ばれます。 ローカルとは、リストがサーバー上ではなくブラウザーデータベースに保存されている場合であり、したがって、リストの保存元のブラウザーでのみ使用できます。 これは、異なるコンピューター間でスローする必要のないタブ用です。 まあ、残りのリストは、拡張機能でサポートされているものの中から任意のコンピューターとブラウザーで表示できます。



各タブについて、ユーザーは任意のテキストコメントを残すことができます。 たとえば、シリーズを見ているときに停止したシリーズを覚えておくと便利です。また、タイトルやリンクの種類が明確でない場合は、ページの内容を自分でマークしておくと便利です。



ChromeとFirefoxの拡張機能の作成に関するドキュメントによると、拡張機能コードはメインとバックグラウンドの2つのファイルに配置する必要があります。 メインスクリプトはユーザーインターフェイスの表示を処理し、バックグラウンドスクリプトはブラウザーのタブを制御し、サーバーとデータを交換できます。 ChromeとFirefoxのタブの管理は非常に似ています。 たとえば、Chromeでタブを開いたり閉じたりするためのイベントハンドラーは次のようになります。

chrome.tabs.onUpdated.addListener( function(tabId, changeInfo) { });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、Firefoxでは次のようになります。

 browser.tabs.onUpdated.addListener( function(tabId, changeInfo, tabInfo) { });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、開いているすべてのタブのリストを表示する関数は、両方のブラウザーで同じように記述されています。

 chrome.tabs.query({},function(data){ });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

はい、はい、クロムはFirefoxでも書かれています...など これは少し奇妙ですが、ブラウザがAPIの標準化に向かっているという事実は非常に勇気づけられます。



実際には、拡張機能のすべての機能は、いくつかの機能を使用して実現されます-アイコンをクリックして拡張ウィンドウを開き、開いているタブを読み取り、タブを閉じ、新しいタブを作成し、タブイベントをリッスンし、拡張ウィンドウとデータを交換します。 それだけです これらのメソッドは、バックグラウンドスクリプトからのみ使用できます。



読み取り後、ブラウザーで開かれたタブはサーバーに送信され、通常のSQLデータベースに保存されます。 サーバースクリプトはPHPで記述されています。 データテーブルという別のテーブルの行へのリンクを格納するユーザーテーブルがあります。 このデータは、ページのアドレス、ページの名前、ユーザーのテキストコメントであり、約1キロバイト長のテキストタイプフィールドにテキスト文字列の形式で保存されます。 データは暗号化されていない形式で保存されます。 1メガバイトあたり約1,000個のタブを保存できます。 ユーザーごとに最大25個のストレージ（「コンピューター」）が提供されます。



ただし、拡張機能の無料バージョンでは、ユーザーは2つのストレージ（ホームコンピューターと仕事用コンピューター）に制限され、各ストレージは10個までのタブを保存できます。 私はまだ有料版と支払い方法に取り組んでいます。 最大25台の「コンピューター」とそれぞれ約1000個のタブがあり、背景画像、各コンピューターのアイコンと名前、階層リストなどが選択できます。



別のリポジトリ-ローカルコンピュータがあります。 タブデータはユーザーのコンピューターのローカルブラウザーデータベースに保存されるため、ここでは制限はありません。 ここには、好きなだけタブを保存できますが、ハードドライブが許可する以上のタブは保存できません。 さらに、データはローカルストレージではなくindexedDBに格納されるため、5または数メガバイトの制限はありません。 重要なことは、ブラウザの履歴とともにこのリポジトリを誤って消去しないことです。 また、タブをテキストファイルにエクスポートおよびインポートする予定です。



indexedDBを使用するために、長さが106行しかない小さなサブライブラリを作成しました。 サーバー上のデータベースとは異なり、ここではすべてのデータをテキスト文字列に抽出する必要はありませんが、連想配列にそのまま保存できます。 そこにあるストレージの原理はこれです：キーは価値です。 また、値は巨大な連想配列になる場合があります。

ユーザー認証

Firefox



既に述べたように、承認はソーシャルネットワークを介して行われ、サーバーではOAuthプロトコルを使用します。 FacebookとVKontakteで引き続きサポートされていますが、ユーザーを認証する方法の数を増やす予定です。 OAuthサーバー認証スキームは、両方のソーシャルネットワークのドキュメントで詳細に説明されているため、詳細に説明する意味はありません。 ユーザーが既にソーシャルネットワークにログインしており、既に拡張権限を付与している場合でも、承認中に新しいブラウザータブが開くという事実が気に入らなかったことにのみ注意してください。 このタブは、バックグラウンド拡張スクリプトによってキャッチされ、その後強制的に閉じられます。一般に、見た目は美しくなく、他のタブに押し込まれて、表示されて破棄されると点滅します。



これを閉じるには、VKontakteの場合、タブイベントハンドラーでアドレスの存在を確認する必要があります。

 oauth.vk.com/blank.html
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Facebookの場合：

 https://www.facebook.com/connect/blank.html
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

念のため：

 facebook.com/connect/login_success.html
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのため、最初に拡張アセンブリをGoogle Web Storeに送信し、対応するクライアントjavascript apiソーシャルネットワークの予備プルアップを使用して、クライアントで認証を実行しました。 さらに、拡張機能はユーザーにインストールされており、サーバーで認証する必要があるため、iフレームの拡張機能のバックグラウンドスクリプトで、サーバーからhtmlをプルアップしましたが、既にソーシャルネットワークAPIをプルアップしています...



そして、サーバーとのデータ交換スキームはそのようなものでした。 拡張インデックスページは、コマンド（クリック情報など）をバックグラウンド拡張スクリプトに送信します。 postMessageを使用するバックグラウンドスクリプトは、iフレームhtmlにデータを送信します。 Iフレームは、サーバー上のphpスクリプトにデータを送信します。 サーバーはiフレームで応答し、iフレームはバックグラウンドスクリプトで応答し、バックグラウンドスクリプトはインデックスで応答し、ユーザーには答えが表示されます。 うーん...そして、最も重要なこと-それはすべてうまくいきました！



一般に、これは機能しませんでした。 Googleは拡張機能をいくつかの文言で囲みましたが、その中には、拡張機能がセキュリティポリシーに準拠していないという漠然とした言葉がありました。 サポートとのやり取りを通じて、詳細を達成することができました。 つまり、拡張機能がサードパーティのサーバーからhtmlとjsをプルアップするという事実が好きではありませんでした...一般に、私はクライアントの承認を得て、サーバーの承認を得る必要がありました。 はい。バックグラウンド拡張スクリプトからhttp postリクエストをサーバーに直接送信しましたが、許可されていることが判明しました。 いいでしょう それはさらに良いです。 短いことが判明したため、ソーシャルネットワークからJavaScript APIを取得する必要はありません。これはユーザーにとって余分な待ち時間です。

タブを表示

拡張オプションに戻ります。 タブのリスト自体は一連の行であり、最初に画像のファビコン、次にページタイトル、最後にリンクが続きます。 画面上の指定された行サイズに収まらないものはトリミングされます。 ただし、データベースは完全に保存されます。 また、任意の行を色付きのタイルの形で画面から取り出すことができます。 これは、そもそも目の前にあるべき最も重要なサイトのためのものです。









Chromeタブリスト



タイルの色は、サイトのドメイン名に基づいて自動的に選択されます。 この関数はURLを受け入れます。 ドメイン名は3つのほぼ等しい文字グループに分割され、各グループの最初の文字は色成分の値R、G、Bに変換されます。この変換は次のように実行されます。 これらの3文字のコードは、26による除算の残りを取得することにより、0〜25の範囲d1に縮小されます。ロシア語のアルファベットの文字もこの範囲に縮小されます。 27番目の文字が最初に来ることは問題ではありません。アルファベットのすべての文字の色成分が必ずしも異なる必要はないので、繰り返してみましょう。 次に、範囲d1（0 ... 25）から得られた3つの数値は、範囲d2（150 ... 255）に比例して減少します。 一般に、これらの範囲は関数の開始時に設定され、他の範囲に変更できます。 色成分が明るくなるように150〜255を取りました。 たとえば、0 ... 100に設定すると、タイルは暗くなります。 したがって、ドメイン名の3文字は、150〜255の範囲の3つの数字に変換されます。 そして、ご想像のとおり、これらはタイルR、G、Bの色成分として解釈されます。すべてが非常に単純です。

 getSiteColor=function(url) { var d1=[0,25], d2=[150,255]; var code=0, codep=0, color=0, str='', domen='', ar=[], inc=0; ar=url.split('//'); if (ar.length>1) {str=ar[1];} else {str=ar[0];}; str=str.split('www.').join(''); domen=str.split('/')[0]; str=domen.split('.').join(''); ar=[]; inc=Math.floor(str.length/3); if (str.length % 3 >0) {inc++;}; for (var i=0; i<str.length; i+=inc) { code=str.slice(i, i+1).charCodeAt(0); codep=code % (d1[1]-d1[0]+1); color=Math.round( codep * (d2[1]-d2[0]) / (d1[1]-d1[0]) ) + d2[0]; ar.push(color); }; return {r:ar[0], g:ar[1], b:ar[2], domen:domen}; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

HTMLドキュメント構造

htmlドキュメントは、オーバーレイによって結合された絶対配置を備えた複数のキャンバス要素と、リストが表示されるdivブロックで構成されます。 サイズを変更すると、ブラウザウィンドウにこれらのすべての要素のサイズを変更する関数がハングし、新しい高さと幅に調整されます。 最小サイズもあり、これが克服されてスクロールバーが表示されます。 背景画像は下のキャンバスに表示されます。 ユーザーがナビゲートしやすいように、さまざまなリスト（つまり、コンピューター）に対して、さまざまな背景を設定する必要があると判断しました。 背景画像は、ウィンドウの縦横比を維持したまま塗りつぶされ、注意を引かないようにわずかに明るくなります。その上に白い半透明の長方形が描画されます。 バックグラウンドキャンバスの上には、メインメニューのキャンバスがあり、画面の上部のみを塗りつぶします。 さて、さらに高いのはdivブロックで、タブのリスト自体が形成されます。 キャンバスメニューナビゲーションは、ミニライブラリを介して行われます。









OperaおよびYandexブラウザー

ローカリゼーション

メイン画面にはフラグがあり、クリックすると、インターフェースがロシア語と英語の間で切り替わります。 ここでは、ページは同じアドレスにリダイレクトされますが、コマンドラインにパラメーターがあります。 このパラメーターは、他のすべての要素をロードする前に読み取られます。 そして、その値に基づいて、これまたはロシア語または英語のフレーズを含むjsファイルは、フレーズの連想配列lng_en.jsまたはlng_ru.jsにロードされます。 また、アプリケーション自体では、インターフェイスフレーズを導出するために、この連想配列からのテキスト文字列へのリンクが既に使用されています。 また、アドレスバーの値に応じて、グラフィカルインターフェイスの要素（buttons_en.pngまたはbuttons_ru.png）を含むファイルがロードされます。 特に多くはなく、このスプライトリスト全体の重量が50しかないため、空のボタンを1つ作成してアイコンと碑文をオーバーレイするよりも、グラフィックエディタで各言語のアイコンと碑文と一緒にボタンを作成する方がよいと判断しましたKb 引き続きデザインに取り組み、すべてのボタンの形を変える予定です。











とにかく、特定のローカライズに関連付けられていないグラフィック要素を含むスプライトmain.pngを含む一般ファイルがロードされます。

ウェブ版

自宅や職場のコンピューターから慎重に保存されたリンクを電話から途中で見ることができればいいと思いました。 ただし、すべてのモバイルOSブラウザーが拡張機能をサポートしているわけではありません。 そこで、Webアセンブリを作成しました。 特定のアドレスでサイトにアクセスすると、ソーシャルネットワークの1つを使用してログインし、タブを表示できます。



はい、リストにタブを追加したり編集したりする方法はありません。 ただし、少なくともリストからタブを開いてページを閲覧することはできます。 このサイトのモバイル版で作業し、その中にタブのより大きなリストを表示することは価値があると思います。









IE 11のWebバージョン

広告

私はこれまで自分の拡張を促進することに本当に取り組んでいませんでした。 彼はソーシャルネットワークでグループを作成し、そこにいる友人全員を招待しました。 はい、彼はYandex Directで1,500ルーブルの広告キャンペーンを開始しました。 彼女は特別な結果を出さなかったが、多分私は正しい発表をしなかった。 または、問題は、拡張機能のホームページの英語版へのリンクを示したことです。 また、ホームページではなく、すぐに拡張ストアの1つにリンクを張る価値があるかもしれません。 ご存知のように、私はマーケティングの天才ではありません。 一般に、他のパラメーターを使用して再試行します。 キャンペーンでは39回のクリックが発生しました。 その結果、新しいユーザーを獲得したかどうかを判断するのは困難です。









Firefoxの下のバージョンには奇妙な点が1つありました。









10月17日の統計では、227回のダウンロードが示されています。 Yandex.Directのキャンペーンがこれに貢献したかどうかはわかりませんが、何らかの理由で、何らかの理由で1日1〜2回ダウンロードが続けられます。 同時に、Firefoxの拡張機能には、毎日のユーザーという概念があります。









ダウンロード数が227だったのに1日1〜2人のユーザーしかいなかった理由は明らかではありません。 おそらくそれは何らかの失敗でした。 一般的に、私はそれが何であり、これらの人々がどこにいるのか理解していませんでした...



Chromeウェブストア拡張ストアの統計は、永遠にロードされないスケジュール（これは私には見られませんでした）と毎日5〜10人のユーザーを満足させました。









また、アセンブリをOpera拡張ストアに送信しました。 しかし、2つのバージョンを配置し、それらのいずれかのモデレーションを待たずに、ある時点で、そこに新しいバージョンを広めようとしました。 実際、OperaがChromeストアから拡張機能を完全にインストールする場合、なぜこれが必要なのですか。

まとめ

Chrome、Firefox、Webバージョンの3つの拡張ビルドを作成しました。 実際、3つのアセンブリはすべて同じアセンブリであり、現在使用されているブラウザエンジンを構成内で単に示しています。 そして、タブを操作するための対応する関数が初期化されます。 この値を変更してから、zipにパックしてパッケージを適切な拡張ストアに送信します。



ChromeとFirefoxのバージョンはテストされ、それぞれの公式拡張ストアに配置されています。 さらに、Googleでの拡張機能開発者としての登録には5ドルかかります。 Mozillaは無料で提供しています。 Webバージョンの拡張機能はサーバーにあります。 Chromeストアのアセンブリは、互換性のあるブラウザーで正常に機能します。YandexブラウザーとOperaにもインストールできます。 さらに高度な機能を備えた新しいバージョンをリリースする予定です。



一般的に、ブラウザの拡張機能は強力です。 今、私はソファから立ち上がる必要はありませんし、タブレットを壊す怒りも必要ありません。 これは完全な禅です。 すべてに良い。