Question

我目前正在为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>

Answer 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"
    } ],

（除了背景页面没有可见的主体，所以你现在将框架注入一个不可见的页面）

扩展问题 - 内容脚本＆amp;叠加的权限

1 个答案: