Question

我一直在努力弄清楚为什么我的代码不会在Chrome浏览器操作扩展程序中运行。如果我将它全部构建为单个HTML页面并在测试中运行它可以正常工作。当我尝试将HTML放在“popup.html”文件中，然后将jquery代码添加到我的popup.js（其中包含一些已经有效的javascript）时，它将无法正常工作。基本操作是：当点击扩展图标时，用户会看到2个按钮以“添加链接”或“添加文档”单击时，每个按钮切换打开/关闭不同的iframe。按钮工具提示也会在悬停时显示。我是一名新手程序员，担心我错过了一些简单的事情。我做错了什么？

这是popup.html文件

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="popup.js"></script>
</head>

<body>

<h1>My Web Page</h1>

<p> click the button to get the current tab URL for cut/paste  <button id="myBtn"> Try it</button> </p>

<p id="demo">Url displays Here</p>

<button id= 'link'> Add Link </button> <button id='Doc'> Add Doc </button>

<div id="testdiv">
<iframe height="400" allowTransparency="true" frameborder="0" scrolling="yes" style="width:400;border:none"  src="https://wufoo.com"><a href="https://wufoo.com">Fill out my Wufoo form!</a></iframe> 
</div>

<div id="testdiv2">
<iframe height="400" allowTransparency="true" frameborder="0" scrolling="yes" style="width:400;border:none"  src="https://wufoo.com"><a href="https://wufoo.com"">Fill out my Wufoo form!</a></iframe>
</div>

</body>
</html>

这是popup.js文件

//----Here is jquery script for button tooltip on hover-----

$('#link').mouseenter(function(){
    $('body').append("<div id='linkTooltip' style='position:fixed;'></div>");
    $('#linkTooltip').html("Add a Web Link to your Portal");
    $('#linkTooltip').css({
        "top" : $(this).offset().top + MYTOPOFFSET,
        "left" : $(this).offset().left + MYLEFTOFFSET
    });
});
$('#link').mouseleave(function(){
    $('#linkTooltip').remove();
});


$('#Doc').mouseenter(function(){
    $('body').append("<div id='DocTooltip' style='position:fixed;'></div>");
    $('#DocTooltip').html("Add a Document or online link to a document");
    $('#DocTooltip').css({
        "top" : $(this).offset().top + MYTOPOFFSET,
        "left" : $(this).offset().left + MYLEFTOFFSET
    });
});
$('#Doc').mouseleave(function(){
    $('#DocTooltip').remove();
});


 //--------Here is the jquery script to toggle the iframes when button clicked.

$(document).ready(function(){
 $("#testdiv").hide()
    $("#link").click(function(){
        $("#testdiv").toggle()
    });
});

$(document).ready(function(){
  $("#testdiv2").hide()
    $("#Doc").click(function(){
        $("#testdiv2").toggle() 
    });
});

清单文件是：

"manifest_version": 2,

"name": "IT Vendorconnect Sample",
"description": "This extension launches Wufoo Form on current page",
"version": "1.0",

"icons": { "128": "ITVCicon128x128.png" },

 "browser_action": {
  "default_icon": "ITVCicon.png",
  "default_popup": "popup.html"
 },

 //---------------

  "content_scripts": [ {
  "js": [ "jquery.min.js", "popup.js" ],
  "matches": [ "http://*/*", "https://*/*"]
  }],

  //---------------

“权限”：[ “标签”， “activeTab”

] }

jquery在html页面中工作，但在chrome扩展中不起作用

0 个答案: