通过运行在不同 HTML 上的 js 文件传递信息-解网

问：

我正在构建一个 chrome 扩展程序，可以阻止来自 YouTube 的广告，它有一个具有以下样式的弹出菜单：

每当我访问此弹出菜单时，我都可以使用本地存储来保存单选按钮和按钮中的所有信息，当我打开弹出窗口时，我会向自己发送一个 alert（），它会显示变量的正确值。

但是，由于这些扩展的结构，我弄乱了 2 个 HTML，一个是弹出窗口，另一个是 Youtube HTML，每当我尝试使用本地存储数据访问这些信息时，它总是返回 false（至少它不再返回 null，所以我想我走在正确的道路上“），我只是找不到一种方法来访问我的另一个 JS 脚本上的这些信息变量，该脚本操作 YouTube HTML。

这是弹出的 HTML：

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="top-container">
    <img src="icon_48.png">
    <h2>Yazigi Ad Skipper</h2>
</div>
<div class="container">
<h3>Section of functionalities</h3>
<b>Skip video AD:</b>
<label>
    <input type="radio" name="option" value="after">
    After 5 seconds
</label>
<label>
    <input type="radio" name="option" value="instantly">
    Instantly&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</label>
<br>
<b>Block banners and ad images:</b>
<label>
    <input type="radio" name="option1" value="activated">
    Activated&nbsp;&nbsp;&nbsp;
</label>
<label>
    <input type="radio" name="option1" value="deactivated">
    Deactivated
</label>
<button id="onoff">Turn off Ad Skipper</button>
</div>
<script src="popup.js" defer></script>
</body>
</html>

这是弹出的JS：

// popup.js

var AdSkipper;
var WaitVideoAd;
var closeBanner;

function initializeVariables() {
AdSkipper = localStorage.getItem('AdSkipper') === 'true';
WaitVideoAd = localStorage.getItem('WaitVideoAd') === 'true';
closeBanner = localStorage.getItem('closeBanner') === 'true';
}

// Initialize variables
initializeVariables();

// Function to update button text and localStorage
function updateAdSkipperButton() {
    let button = document.getElementById("onoff");
    if (AdSkipper) {
        button.innerText = 'Turn off Ad Skipper';
    } else {
        button.innerText = 'Turn on Ad Skipper';
    }
    localStorage.setItem('AdSkipper', AdSkipper);
}
// Event listener for the "Turn on/off Ad Skipper" button
document.getElementById("onoff").addEventListener("click", function () {
    AdSkipper = !AdSkipper;
    // Update localStorage after AdSkipper is changed
    localStorage.setItem('AdSkipper', AdSkipper);
    // Update button text
    updateAdSkipperButton();
});

// Event listener for the radio button with name "option"
document.querySelectorAll('input[name="option"]').forEach(function (radio) {
    radio.addEventListener("change", function () {
        WaitVideoAd = this.value === "after";
        localStorage.setItem('WaitVideoAd', WaitVideoAd);
    });
});

// Event listener for the radio button with name "option1"
document.querySelectorAll('input[name="option1"]').forEach(function (radio) {
    radio.addEventListener("change", function () {
        closeBanner = this.value === "activated";
        localStorage.setItem('closeBanner', closeBanner);
    });
});

// Initialize the button text based on the stored value
updateAdSkipperButton();

// Alerts after initializing variables
alert(AdSkipper);
alert(WaitVideoAd);
alert(closeBanner);

如果需要，这就是我构建清单的方式：

 "action": {
    "default_popup": "popup.html"
},
"content_scripts": [{
    "run_at": "document_start",
    "matches": ["*://*.youtube.com/*"],
    "js": ["script.js"]
}]

这是我从主脚本文件中访问变量数据的公平尝试：

window.addEventListener('yt-page-data-updated', function () {
AdSkipper =   localStorage.getItem('AdSkipper') === 'true';
WaitVideoAd = localStorage.getItem('WaitVideoAd') === 'true';
closeBanner = localStorage.getItem('closeBanner') === 'true';
});

javascript html jquery google-chrome-extension 网络爬虫

通过运行在不同 HTML 上的 js 文件传递信息

Passing information through js files running on different HTML

评论