为个人项目创建 Google 登录扩展，因此我设置了功能，允许我使用我的 Google 帐户登录该扩展，并且它可以工作。我使用一个名为“popup.html”的初始 HTML 文件来保存 Google 身份验证的逻辑，方法是调用“popup.js”作为后端脚本，显示“等待登录”消息，然后将该属性设置为成功登录后，通过将其内容设置为“popup.html”的innerHTML 属性，显示另一个名为“authorized.html”的HTML 文件的内容。问题是“authorization.html”自己的脚本“authorized.js”不会在我的控制台上打印任何内容，甚至不会在控制台上抛出错误，尽管“authorized.html”的其他内容已成功显示。下面仅是我的代码的相关部分，但我想知道为什么会遇到这个问题以及如何规避它。谢谢你
popup.html：
<!DOCTYPE html>
<html>
<head>
<title>Google OAuth Sign-In</title>
<script src="popup.js"></script>
</head>
<body>
<div id="Sign-In TempUI" class="content-body">Waiting for Google Sign-In</div >
</body>
</html>
popup.html：
console.log('popup.js loaded');
document.addEventListener('DOMContentLoaded', function () {
const NewGUI = document.getElementById('Sign-In TempUI');
chrome.identity.getAuthToken({ interactive: true }, function (token) {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
return;
}
console.log('Token acquired:', token);
loadAuthorizedUI(token);
});
function loadAuthorizedUI(token) {
console.log('Debug:', token);
fetch('authorized.html')
.then(response => response.text())
.then(html => {
console.log('HTML content:', html);
NewGUI.innerHTML = html;
})
.catch(error => console.error('Error fetching or processing HTML:', error));
}
});
授权.html：
<!-- Page Displayed after recieving token from OAuthetication. Should display GUI for Email handling -->
<!DOCTYPE html>
<html>
<head>
<title>Authorized UI</title>
</head>
<body>
<h1>Welcome! You are now authorized.</h1>
<ul id="emailList">
</ul>
<script src="authorized.js"></script>
<div>Hit end</div>
</body>
</html>
授权.js：
//throw new Error('This is a test error from authorized.js');
console.log('authorized.js loaded');
之前，我启动了另一个 document.addEventListener('DOMContentLoaded', function ()) ，然后在尝试通过 Id 获取其元素后尝试替换 emailList 的内容，但它甚至无法打开authorized.js。 Console.log 不会打印任何内容，并且异常实际上不会在控制台上显示任何内容。但是，当我将authorized.js脚本移至popup.html时，它会突然显示albiet错误。我最大的困惑是“欢迎！您现在已获得授权”。并且“Hit end”将显示在我的 GUI 上，但脚本甚至不会打印，就好像它跳过它一样
您的authorized.js 文件似乎未按预期执行。造成这种行为的原因可能有几个：
脚本未加载：确保authorized.js 文件的路径正确并且该文件可访问。仔细检查文件名及其相对于authorized.html 文件的位置。
内容安全策略：Chrome 扩展程序具有内容安全策略 (CSP)，可限制内联脚本和某些类型的动态代码执行。确保您的扩展程序的 manifest.json 文件包含适当的权限和 CSP 指令以允许执行脚本。
错误抑制：即使您的authorized.js 文件中发生错误，如果在Chrome 扩展程序的后台脚本中的某个位置捕获到该错误，该错误也可能不会显示在控制台中。检查扩展代码中是否有任何可能抑制错误的 try-catch 块或错误处理程序。
调试：尝试在authorized.js开头添加一条简单的语句，以确保文件被加载并执行。例如：
console.log('authorized.js loaded');
权限：确保您的扩展程序具有在authorized.html和authorized.js上下文中执行脚本所需的权限。
清单文件：检查扩展程序的清单文件 (manifest.json)，以确保它正确指定需要访问的资源以及这些资源所需的权限。
通过解决这些潜在问题，您应该能够诊断authorized.js 未执行的原因并相应地解决问题。