В моем расширении chrome у меня есть следующий background.js в качестве фонового скрипта, который вызывает URL-адрес вкладки, а затем определяет его безопасность.
background.js
chrome.runtime.onInstalled.addListener(function () {
console.log('loaded');
});
chrome.tabs.onUpdated.addListener(function () {
chrome.tabs.query({ 'active': true, 'lastFocusedWindow': true }, function (tabs) {
var url = tabs[0].url;
console.log(url);
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (url.indexOf('https') >= 0) {
console.log('secure site');
console.log(url.indexOf('https'));
sendResponse({ security: "YES" });
}
else if (url.indexOf('https') < 0) {
console.log('insecure site');
sendResponse({ security: "NO" });
console.log(url.indexOf('https'));
}
else {
console.log('unable');
sendResponse({ security: "?" });
}
}
)
})
});
У меня есть запрос сообщения из моего popup.js (ниже), который отправляет сообщение в background.js. Есть слушатель для сообщения и отправляет ответ ДА НЕТ в зависимости от того, присутствует ли https.
popup.js
chrome.runtime.sendMessage({ greeting: "hello" }, function (response) {
if (response.security == "YES") {
document.getElementById('webSecure').innerHTML = "YES";
}
else {
document.getElementById('webSecure').innerHTML = "NO";
}
//document.getElementById('webSecure').innerHTML = response.security;
});
Затем popup.js получит элемент в моем popup.html (ниже) и отобразит результат.
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="material.css">
<script defer src="material.min.js"></script>
<link rel="stylesheet" href="styles.css">
<style>
body {
width: 300px;
}
</style>
</head>
<body>
<header>
<img src="logo_default256.png" id="logo" alt="logo-default">
<div class="options">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
<input type="checkbox" id="switch-2" class="mdl-switch__input">
<span class="mdl-switch__label"></span>
</label>
<a href="settings.html">SETTINGS</a>
</div>
</header>
<hr>
<section>
<div class="content">
<h4>Is this website secure?</h4>
<p id="webSecure" class="result">0</p>
</div>
<div class="content">
<h4>Trusted Site</h4>
<!-- Accent-colored flat button -->
<p class="result">NO</p>
</div>
<div class="content">
<h4>Harmful Language</h4>
<p class="result">0</p>
</div>
</section>
<script src="popup.js"></script>
</body>
</html>
Однако это не работает должным образом. При установке он работает правильно и отображает ДА для веб-сайта https. Однако, со второй попытки, я перешел на http-сайт и все еще получил вывод YES. Кажется, что ответ не меняется с первой попытки.
При проверке консоли правильный ответ site secure появляется с первой попытки. Во второй попытке появляются site secure и insecure site, но первая появляется первой. Скорее всего, именно поэтому вместо «Нет» появилось «Да». При переходе на веб-сайт http с первой попытки происходит то же самое, когда он дает правильный ответ, но неправильный ответ при переходе на веб-сайт https со второй попытки.
На этом изображении консоли показан URL-адрес и предоставленный ответ. Обратите внимание, что первый ответ был правильным, но во второй раз присутствовали оба ответа, что не имеет смысла.
Консоль
Кажется, что оператор if в background.js запоминает предыдущий результат или что-то подобное. Я не знаком со всей ситуацией и хотел бы услышать, как я могу решить эту проблему.