Question

我正在构建的chrome扩展程序会在用户单击popup中的选择按钮时从选项卡中打开所选文本。我正在尝试使用jquery。

的manifest.json

    {
  "manifest_version": 2,

  "name": "cap",
  "description": "BLAH",
  "version": "1.0",

  "permissions": [ "tabs",
    "https://*/*","http://*/*"
  ],
  "content_scripts": [
  {
    "matches": ["http://*/*","https://*/*"],
    "js": ["selection.js"],
    "run_at": "document_start",
    "all_frames": true
  }
 ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup_main.html"
  }
}

我在popup.html

中包含了jquery脚本

<html><head>
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="/popup.css">
<script type="text/javascript" src="popup.js"></script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<!-- <script type="text/javascript" src="js/tag-it.js"></script> -->
</head>
<body>

</body></html>

popup.js

$(document).ready(function(){
  $("p").click(function(){
      chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function (response) {
      var text = document.getElementById('text'); 
      text.innerHTML = response.data;
    });
  });
  });
});

在执行此脚本时我发现错误：

未捕获的ReferenceError：$未定义

请帮忙！

Answer 1

您需要更改脚本标记的顺序以允许首先加载jQuery：

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="popup.js"></script>

Answer 2

更改顺序。您必须首先加载jquery核心插件，然后再加载其他插件

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="popup.js"></script>

在chrome扩展中使用jquery

2 个答案: