时间戳

首页 > 解决方案 > Chrome 扩展 - 将变量从 HTML 文件传递​​到 .js 文件

javascript - Chrome 扩展 - 将变量从 HTML 文件传递​​到 .js 文件

问题描述

我正在尝试将一个变量从我的 Chrome 扩展程序的 HTML 传递到我的 content_script.js 文件中。第一次使用javascript，所以我很迷茫。我已经尝试了一些东西，但它们似乎都不起作用。这是我最近的尝试：

popup.html

<html>
<head><title>activity</title></head>
<body>
<input id="email" type="email" placeHolder="Email" /> <br />
<button id="clickactivity">Create Account</button>  <br />
<script src="popup.js"></script>
</body>
</html>

popup.js

function injectTheScript() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    // query the active tab, which will be only one tab
    //and inject the script in it
    chrome.tabs.executeScript(tabs[0].id, {file: "content_script.js"});
});
}

document.getElementById('clickactivity').addEventListener('click', injectTheScript);

content_script.js

function registerAccount() {
    regEmail = document.getElementById("email");
    document.getElementById("register-email").value=regEmail.value;
}

registerAccount();

标签： javascriptgoogle-chrome-extension

解决方案

您的内容脚本和弹出脚本在不同的文档上运行：您不能直接从另一个访问其中一个的变量。

试试这个：

popup.js

document.getElementById('clickactivity').onclick = () => {
    chrome.tabs.executeScript({code: `
        var inputToFill = document.getElementById('register-email');
        if (inputToFill) inputToFill.value = '${document.getElementById('email').value}';
    `});
};

其他选项可能是通过存储使用消息传递或同步。

推荐阅读