Question

我正在编写chrome扩展程序，我想使用jQuery和simpleweather.js 扩展的目的是在新标签中显示外部温度，背景图像很好当我在外部使用脚本HTML网站正在工作并显示温度但扩展不起作用 HTML：

<head>
    <title>Nová karta</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
    <script src="javascript.js"></script>
</head>

清单：

{
  "browser_action": {
    "default_title": "TimePage", 
    "default_popup": "popup.html" 
  },
  "description": "", 
  "chrome_url_overrides": { 
    "newtab": "timepage.html" 
  },
  "permissions": [ 
    "tabs",
    "cookies"
  ],

  "content_scripts": [
    {
      "matches": [ "<all_urls>" ],
      "js": [ "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js", "https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js" ],
    }
  ],
  "manifest_version": 2, 
  "name": "Temperature", 
  "version": "1.0" 
}

当我将脚本本地HTML包含在与timepage.html相同的文件夹中时，网站无效，甚至不显示温度，扩展功能也不起作用。
HTML：

<head>
    <title>Nová karta</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css">

    <script src="weather/jquery.simpleWeather.min.js"></script>
    <script src="jquery.js"></script>
    <script src="javascript.js"></script>
</head>

清单：

{
  "browser_action": {
  "default_title": "TimePage", 
  "default_popup": "popup.html" 
  },
  "description": "", 
  "chrome_url_overrides": { 
    "newtab": "timepage.html" 
  },
  "permissions": [ 
    "tabs",
    "cookies"
  ],

  "content_scripts": [
    {
      "matches": [ "<all_urls>" ],
      "js": [ "jquery.simpleWeather.min.js", "jquery-3.1.1.min.js" ],
    }
  ],
  "manifest_version": 2, 
  "name": "Temperature", 
  "version": "1.0" 
}

Answer 1

这里唯一的问题是装货单。你应该先调用jquery，然后再调用simpleWeather和js。

Answer 2

我解决了这个问题。您只需要更改脚本的顺序。 HTML：

<head>
    [...]  
    <script src="jquery-3.1.1.min.js"></script>
    <script src="jquery.simpleWeather.min.js"></script>
    <script src="javascript.js"></script>
</head>

如何在chrome扩展中使用外部JavaScript

2 个答案: