Fatal编程技术网

Google chrome extension 在Chrome扩展名'；s popup.html

google-chrome-extension

Google chrome extension 在Chrome扩展名'；s popup.html,google-chrome-extension,Google Chrome Extension,更新： 这个问题是由包含旧版本的jQuery（1.4.2）引起的。 在我改用1.8.2之后，问题就消失了。但我还是不知道 我知道为什么 我最近做了一个Chrome扩展。多亏了这篇文章，我意识到我必须包括一个js文件，如： <script src="popup.js"></script> 我想知道我能做些什么来解决这个问题。非常感谢 下面是一个基本示例，说明如何使用它来工作。我最好的猜测是，jQuery似乎没有加载，因为您的popup.js是如何设置的（它试图在加载元素之

更新：

这个问题是由包含旧版本的jQuery（1.4.2）引起的。 在我改用1.8.2之后，问题就消失了。但我还是不知道 我知道为什么

我最近做了一个Chrome扩展。多亏了这篇文章，我意识到我必须包括一个js文件，如：

<script src="popup.js"></script>
我想知道我能做些什么来解决这个问题。非常感谢

下面是一个基本示例，说明如何使用它来工作。我最好的猜测是，jQuery似乎没有加载，因为您的
popup.js
是如何设置的（它试图在加载元素之前附加
单击
功能）。我不是JS专家，所以我相信其他人会对如何等待
DOM
加载有更好的想法，但这是一个基本测试（注意：这使用了最新版本jQuery的本地版本（目前为1.8.2），因为清单2中的新内容策略不允许使用内联脚本）：

Manifest.json

{
  "name": "Test Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Testing",

  "browser_action": {
    "default_icon":   "my_icon.png",
    "default_title":  "My Text Extension",
    "default_popup":  "popup.html"
  },

  "permissions": [
    "tabs", "http://*/", "https://*/"
  ]
}
Popup.html

<html>
  <head>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="popup.js"></script>
  </head>
  <body>
    <a id="intro" href="#"  target="_blank">Intro</a>
  </body>
</html>
发生这种情况的原因是页面正在按顺序加载，并且脚本在加载DOM之前启动。这意味着在DOM存在之前就调用了脚本，因此它根本看不到DOM；它在脚本之后加载

使用事件等待DOM是解决这个问题的一种方法，但是您也可以在最后加载的body标记的末尾或后面添加脚本，以便首先加载DOM。当然，有很多人会认为这是一种不好的做法，反之亦然。原因是您可能在加载DOM时加载脚本，或者因为有许多大型脚本会导致加载延迟，这些都是讨论jQuery操纵的网站时的有效要点

当使用Chrome扩展时，相反的做法可能是有益的。一个原因是，即使使用最密集的扩展，也要始终提供一些代表性响应，并且不必担心在代码中等待DOM。实际上，这取决于你需要什么，但了解你所有的选择总是有益的。您可以在中看到这两种做法

使用jQuery时，您可能希望使用该方法，因为它会等待页面上的所有内容（图像、视频、链接、脚本等）加载完毕。与onload不同，ready方法是在DOM本身完成加载时调用的，而与实际加载的页面无关。您可以通过以下方式执行此操作：

$(document).ready(function() { 
  // jQuery code to execute after
});
您还可以使用以下事件在JavaScript中等待DOM：

您的
标签是否在
标签内？谢谢您的评论。它们在标签里面。让我更新一下我的问题。奇怪的是，我刚刚用jQuery1.4.2进行了尝试，结果成功了。哦，好吧，只要它现在还在工作！谢谢你的回答，但我正在使用清单2。根据谷歌官方文件，清单1将在几个月内死亡。在清单1中，似乎一切正常。@AwQiruiGuo啊，我的坏（生活在过去：））。现在更新-我所做的唯一更改是指定
manifest\u version:2
，并将
popup
的关键字更改为
default\u popup
。那样的话对你有用吗？谢谢。但是jQuery没有加载，它会提示“拒绝执行内联脚本，因为它违反了以下内容安全策略指令：”script src'self'chrome extension resource:”问题似乎是由包含jquery.js引起的-这是从jquery官方网站下载的js文件，未经任何修改。@AwQiruiGuo您正在加载jquery的本地副本吗？ 
{
  "name": "Test Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Testing",

  "browser_action": {
    "default_icon":   "my_icon.png",
    "default_title":  "My Text Extension",
    "default_popup":  "popup.html"
  },

  "permissions": [
    "tabs", "http://*/", "https://*/"
  ]
}

<html>
  <head>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="popup.js"></script>
  </head>
  <body>
    <a id="intro" href="#"  target="_blank">Intro</a>
  </body>
</html>

/*
   Here we wait for the body of the popup to load before
   attaching our functionality
*/
window.onload = function() {
  $("#intro").click(function(){
    alert("clicked"); // Should fire now
  });
};

$(document).ready(function() { 
  // jQuery code to execute after
});

document.addEventListener('DOMContentLoaded', function() {
  // JavaScript code here
});