Javascript 由Chrome扩展加载时，HTML页面显示不正确

由于这是我第一次发帖，我希望我能提供正确的细节，这样我的问题就相对容易回答了

我正在构建一个flashcard系统作为Google Chrome的扩展。包含flashcard系统的主页是一个单独的页面，由扩展插件通过单击浏览器操作按钮（浏览器右上角的图标）加载

我的问题是，由扩展加载的HTML文件看起来很有趣。有趣的是，文本神奇地“收缩”。看起来CSS文件正在加载，但Javascript没有加载。Javascript不会影响文本的外观，但我也希望页面也能加载Javascript

我对构建Chrome扩展不太熟悉，所以我可能遗漏了一些重要的细节

所以，如果有人知道这种神奇的“文本更改”和“Javascript未加载”是如何发生的，我很想得到一些帮助

以下是我得到的代码：

HTML（popup.HTML）

主JavaScript（drill.js）

扩展JavaScript文件（eventPage.js）

这里有几张图片可以解释我所说的：

但是

谢谢，

---

Roy

除非扩展清单中允许，否则无法加载外部脚本，因为

在所有扩展页上也会插入样式，从而添加此规则：

body {
    font-family: 'Droid Sans', Arial, sans-serif;
    font-size: 75%;
}

编辑：您可以通过添加否定规则的样式来解决此问题，如下所示：

body {
    font-family: initial;
    font-size: initial;
}

要加载jQuery，您必须将Google CDN列入白名单。您不能将http URL列入白名单，您必须切换到https版本。将此添加到manifest.json：

"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"

---

令人惊叹的！感谢您快速而详细的回复！我还有一个简短的问题。因此，如果我允许我的本地脚本“drill.js”，我将如何在manifest.json中编写它？@TheBlindDeveloper本地脚本是允许的，只要它们位于单独的文件中，您就不必执行任何操作。似乎“drill.js”中的javascript没有加载。知道为什么吗？由于上面的回答，字体部分是固定的，但它仍然拒绝加载javascript文件。非常感谢您的帮助！控制台说了什么吗？下面是它说的：“拒绝加载脚本“”，因为它违反了以下内容安全策略指令：“script src‘self’”。drill.js:1 Uncaught ReferenceError:$未定义”

{
  "manifest_version": 2,

  "name": "My Test Plugin",
  "description": "Experimental Plugin build for Roy",
  "version": "1.0",

  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },

  "browser_action": {
    "default_icon": "icon.png"
  },

  "permissions": [
   "activeTab"
   ]
}

chrome.browserAction.onClicked.addListener(function (activeTab) {
    var newURL = "popup.html";
    chrome.tabs.create({ url: newURL });
});

body {
    font-family: 'Droid Sans', Arial, sans-serif;
    font-size: 75%;
}

body {
    font-family: initial;
    font-size: initial;
}

"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"