web-dev-qa-db-ja.com

Google Chromeでツールバーを作成する方法

私はGoogle Chrome拡張機能を初めて調べています。StumbleUponツールバーのように、拡張機能アイコンをクリックしたときにページの上部にツールバーとして表示されるものを作成したいと思います。

これを行う方法がわかりません。例は主にpopup.htmlを示しており、固定ツールバーではありません。

google-chromegoogle-chrome-extensiontoolbar
24
Robin

この回答はChromeでツールバーを作成する2つの方法を示していますが、 ページアクション または ブラウザアクション バッジを使用することを強くお勧めします。これらはツールバーほどスペースを取らず、クリックでパネルを表示するために使用することもできます 一時的なホスト権限を取得 を使用してページを操作することもできます。

そして、本当にツールバーは必要ないがサイドバーが必要な人のために、アクティブな chrome.sidebar AP​​Iの提案 があります。これは単なる提案であり、いつ実装されるかはまだ確定していません。

chrome.infobars AP​​I

このセクション 使用するchrome.infobars APIを使用してデモを表示します。このAPIは安定したチャネルに行ったことがないため、 削除される ;使用しないでください。

コンテンツスクリプト

コンテンツスクリプトを使用したツールバーの作成は注意が必要です。ページにコードを挿入し、ドキュメントの構造を変更する必要があります。これにより、インターネット上の一部のページが破損する可能性があります。

コンテンツスクリプトを使用してツールバーを作成するには、次の手順を実行する必要があります。

  1. 次の2つのステップを実行するページでコンテンツスクリプトを実行します。
  2. ツールバーを挿入します（<iframe>-後で説明します）。
  3. ページのコンテンツをシフトします。

ステップ1は簡単です。前の例を参照するか、 コンテンツスクリプト のドキュメントを読んでください。

手順2：ツールバーを挿入する

スタイルの競合を最小限に抑え、ページがツールバーを使用しないようにするには、iframeを挿入します。前の方法とは異なり、拡張APIに直接アクセスすることはできません（埋め込みページはコンテンツスクリプトでも、拡張のプロセスで実行されているページでもないため）。

ツールバーの挿入：

add-toolbar.js（コンテンツスクリプト）

var height = '40px';
var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL('toolbar.html');
iframe.style.height = height;
iframe.style.width = '100%';
iframe.style.position = 'fixed';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.style.zIndex = '938089'; // Some high value
// Etc. Add your own styles if you want to
document.documentElement.appendChild(iframe);

次に、toolbar.htmlというファイルを作成し、マニフェストファイルの "web_accessible_resources" セクションに追加します。このファイルはツールバーの場所で使用されます。悪意のないことは何でも自由に行ってください。通常のWebページのように機能し、文字通りChrome APIのいずれにもアクセスできないことを覚えておいてください。

ステップ3：コンテンツをシフトする

これまでのところ、ページにフレームを追加しただけです。問題が1つあります。ページのコンテンツが部分的に非表示になっています。それはとてもいいことではありません。これを修正する方法はいくつかありますが、私は CSS変換 を使用することを選択します。これは比較的使いやすく、ほとんどのページではbody要素でこのプロパティを使用しないためです。

// continuing add-toolbar.js
var bodyStyle = document.body.style;
var cssTransform = 'transform' in bodyStyle ? 'transform' : 'webkitTransform';
bodyStyle[cssTransform] = 'translateY(' + height + ')';

translateYを指定すると、position:fixedの子要素を含め、本文が下に移動します。ルート要素の<body>タグの外にiframeを追加したため、要素は影響を受けません。

ツールバーで拡張APIを使用したい！

残念ながら、Chromeは埋め込まれたhtmlページを非特権拡張ページとして扱います。使用できる拡張APIは一部のみです（コンテンツスクリプトと同様））。

別のオプションは、サーバーからページをロードし、その特定のページでコンテンツスクリプトを実行することです。 キャッシュマニフェスト を設定して、ユーザーがネットワークに接続していない場合でもツールバーを引き続き使用できるようにします。

46
Rob W

Chrome APIには、ユーザーを支援するツールバーウィジェットがありません。手動でツールバーdivを作成してページに配置する必要があります。 コンテンツスクリプト を使用してこれを行うことができます。これにより、JavaScriptとCSSをページに挿入できます。

3
serg

これにより、さまざまなブラウザーにつまずくようなブラウザー拡張機能が提供されますが、必要に応じてダウンロードをchromeに制限することもできます。

インストーラー

一般的なインストールページ（Windowsを使用している場合にインストールプロセスを容易にするために署名できる実行可能ファイルを提供します）：

http://crossrider.com/apps/35180/install_page

特定のインストール：

また、Crossriderを使用すると、chromeストアへの公開も簡単になり、Windowsで実行可能なダウンロード用の拡張機能に簡単に署名できます。

情報

APIのドキュメントは次のとおりです。クロスブラウザソリューションとしては非常に広範囲です。

http://docs.crossrider.com/

以下のコードでは、回答の文字数に制限があるため、htmlとcssを入れていません。ただし、見栄えが良い場合は、それを開いて（crxはzipで、拡張子を.Zipに変更する）、cssとhtmlを取得するか、私が送信する方法を見つけることができます。 HTMLとCSSをページに挿入していることに注意してください。

私は通常cssとhtmlを書き、次に両方を縮小します（ http://cssminifier.com/ と http://www.willpeavy.com/minifier/ ）、次に私は縮小された出力を取得し、 http://www.htmlescape.net/stringescape_tool.html のような文字列エスケープツールを使用してエスケープし、必要に応じて拡張コードに挿入できるようにしますもちろん、その拡張であり、Webページではないので、可能な限り高速である必要があります。

したがって、これが良さそうな場合は、crossrider.comにアクセスして、アカウントを設定し（100％無料）、これらのファイルを適切な場所に貼り付け、必要な縮小/エスケープされたHTMLとCSSを挿入して、以下のextension.jsのcssstrとhtmlstr。

コード

extension.js：

appAPI.ready(function($) {
    // Place your code here (you can also define new functions above this scope)
    // The $ object is the extension's jQuery object

    // Adds a listener that handle incoming messages
    var lid = appAPI.message.addListener(function(msg) {
        switch(msg.action) {
            case 'SHOWEXAMPLEBAR': 
            $('#examplebar-toolbar').show();
                break;
            case 'HIDEEXAMPLEBAR': 
                $('#examplebar-toolbar').hide();
                break;
            default: 
                break;
         }
    });

    // Add toolbar (not included here due to size - be sure it is escaped)
    var cssstr = '/* The CSS of your toolbar */';

    // Add toolbar HTML (not included here due to size - be sure it is escaped)
    var htmlstr = '\x3C!-- the html of your toolbar --\x3E';

    $('\x3Cstyle\x3E'+cssstr+'\x3C/style\x3E' + htmlstr).prependTo('body');
    $('#examplebar-close').click(function() {
        //Tell the background to change its buttonstate:
        $('#examplebar-toolbar').hide();
        appAPI.message.toBackground({action: "HIDEEXAMPLEBAR"});
    });
});

background.js：

// Note: the $ variable that represents the jQuery object is not available
//       in the background scope
appAPI.ready(function() {
    // Global variable to hold the toggle state of the button
    var buttonState = true;

    // Sets the initial browser icon
    appAPI.browserAction.setResourceIcon('button.png');

    // Sets the tooltip for the button
    appAPI.browserAction.setTitle('Bar');

    // Sets the text and background color for the button
    if (appAPI.browser.name !== 'safari') {
        appAPI.browserAction.setBadgeText('bar');
        appAPI.browserAction.setBadgeBackgroundColor([255,0,0,50]);
    }else{
        // Safari only supports numeric characters
        // and has a fixed background color
        appAPI.browserAction.setBadgeText('1234');
    }

    // Sets the initial onClick event handler for the button
    appAPI.browserAction.onClick(function(){
        if (buttonState) {
            //Hide the toolbar by notifying the extension code:
            appAPI.message.toAllTabs({action: "HIDEEXAMPLEBAR"});
            if (appAPI.browser.name !== 'safari') {
            // Sets the text and background color for the button
            // using the optional background parameter
                appAPI.browserAction.setBadgeText('helo', [0,0,255,255]);
                // Sets the icon to use for the button.
                appAPI.browserAction.setResourceIcon('button.png');
            } else {
                // Safari only supports numeric characters,
                // has a fixed background color,
                // and can only use the extension's icon
                appAPI.browserAction.setBadgeText('4321');
            }
        } else {
            appAPI.message.toAllTabs({action: "SHOWEXAMPLEBAR"});
            // Remove the badge from the button
            appAPI.browserAction.removeBadge();

            if (appAPI.browser.name !== 'safari'){
                // Reset the icon for the image
                appAPI.browserAction.setResourceIcon('button.png');
            }
        }

        // Toggle the state
        buttonState = !buttonState;
    });

    // Adds a listener that handle incoming messages
    var lid = appAPI.message.addListener(function(msg) {
        switch (msg.action) {
            case 'HIDEEXAMPLEBAR': 
            buttonState = !buttonState;
            break;
            default:
                break;
        }
    });    
});

注意事項

また、jQueryは拡張スコープで自動的に使用できるため、APIと一緒に無料で入手できます。また、iframeに挿入する場合は、設定でiframeを有効にすることを忘れないでください。

コミュニティサポートサイトの場合： https://getsatisfaction.com/crossrider

彼らは非常に敏感であり、トラブルが発生したときにあなたを助けることができます。

0
hoonto