0

現在、Google Chrome のオーバーレイ (必要に応じてツールバー) を開発していますが、いくつか問題があり、その理由がわかりません。

だから、基本的に私はこの manifest.json で拡張機能を作成しました:

{   

    "background_page" : "background.html",
    "browser_action" :
    {
        "default_icon" : "images/Extension.png"
    },
    "content_scripts": 
    [ {
      "all_frames": true,
      "css": ["css/overlay.css"],
      "js": ["js/overlay.js"],
      "matches": ["http://*/*"],
      "run_at": "document_start"
    } ], 
    "permissions" : ["tabs", "unlimitedStorage", "http://*/*"], 
    "name" : "MyOverlay",
    "version" : "1.1",
    "description" : "Sindar Overlay"
}

コンセプトは、私の background.html ページが jquery.js と overlay.js を呼び出すことです。次に、overlay.js の初期化時に、次を使用して html ページ (overlay.html) を呼び出します。

<iframe id="YourToolbarFrame" src="'+toolbarURL+'">

問題は、拡張機能を開始しようとすると、コンパイルの問題はなく、すべてがうまくいっているように見えますが、オーバーレイが表示されないことです。そして、HTMLページを開いたばかりのときは、すべて問題ありません。だから私は、問題がコンテンツスクリプトまたはアクセス許可から来ていないかどうかを自問していますが、どこから来たのかわかりません...

前もって感謝します。

編集 2011/02/23 - 18:46

background.html 

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="js/overlay.js"></script>
  </head>
</html>

overlay.js

var overlay= {
    init: function() {
        this.injectoverlay();
        //alert('Initialisation reussie');
    },

    injectoverlay: function() {
        var body = $('body'),
            overlayURL = chrome.extension.getURL("overlay.html"),
            iframe = $('<iframe id="YouroverlayFrame" src="'+overlayURL+'">');

            body.append(iframe);
            iframe.show();

        //alert('Injection reussie');
    }
}

var length = {}, maxLength = 0, currentLength;

$(function(){
$('#menu li.title')
   .each(function(){
        // Save the Menu Length
        length[$(this).attr('id')] = currentLength = $(this).height();

        // Fix the height
        $(this).height(20);

        if(currentLength > maxLength)
        {
            maxLength = currentLength;
        }

        // To don't overflow on the content
        $('#menu').height(maxLength);
   })

   .mouseenter(function(){
        $(this).stop().animate({
            height: length[$(this).attr('id')]
        }, 500);
   })
   .mouseleave(function(){
       $(this).stop().animate({
           height: '20px'
       }, 500);      
   });
});

$(document).ready(function() {
    overlay.init();
});

overlay.html

<html>
  <head>
        <title>overlay</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" href="css/overlay.css" type="text/css"></link>
        <base target="_blank" />
    </head>
    <body>
        <div class="default">
            <form id="searchForm">
                <img id="logo" src="images/Extension.png"></img>
                <input type="search" value="Enter you research" name="search">
                <input type="submit" value="Go !" /> |
            </form>

            <ul id="menu">
                <!--
                <li class="title" id="accueil">
                    <a class="" href="#">Accueil</a>
                </li>
                -->
                <li class="title" id="contact">
                    <a class="" href="#">Contact</a>
                    <ul class="dropMenu">
                        <li><a href="www.google.com">google</a></li>
                        <li><a href="www.yahoo.com">yahoo</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <!--    Include the library of Google, more centralized.
                Optimized the browser cache.
                Compressed version. -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    </body>
</html>
4

1 に答える 1

1

現在overlay.js、すべてのページにコンテンツ スクリプトとして含め、何らかの理由で背景ページに含めています。このタスクにはバックグラウンド ページは必要ありません。jquery を挿入するためだけにこれを行っている場合、解決策はjquery.jsそれをダウンロードして拡張機能フォルダーに配置し、manifest.json に自動的に挿入することです。

//"background_page" : "background.html", - this is not needed
"content_scripts": 
    [ {
      "all_frames": true,
      "css": ["css/overlay.css"],
      "js": ["js/jquery.js", "js/overlay.js"], //jquery included as well
      "matches": ["http://*/*"],
      "run_at": "document_start"
    } ],

（背景ページには目に見えるボディがないため、今すぐフレームを目に見えないページに挿入します）

于 2011-02-23T18:39:55.787 に答える