Проблема расширений - ContentScript & Premissions для наложения - PullRequest
Новая
       4

Проблема расширений - ContentScript & Premissions для наложения

0 голосов
/ 23 февраля 2011

В настоящее время я разрабатываю оверлей для 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-страницу, все в порядке, я вижу это. Поэтому я спрашиваю себя, не возникает ли проблема из контент-скрипта или из разрешений, но я не знаю, откуда она может возникнуть ...

Заранее спасибо.

Редактировать 23.02.2011 - 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>

1 Ответ

1 голос
/ 23 февраля 2011

В настоящее время вы включаете 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"
    } ],

(кроме того, фоновая страница не имеет видимого тела, поэтому вы вставляете свой фрейм в невидимую страницу прямо сейчас)

...