Chrome 扩展图像更改不持久

Question

我正在尝试创建一个 Chrome 扩展（实际上是 Opera，但我认为这不重要），它使用两个文本框作为输入来生成要渲染的图像的路径，但是图片永远不会出现。

manifest.json

{
    "manifest_version": 2,

    "name": "Opera Extensions — Getting Started",
    "description": "Sample extension for the “Making your first extension” article",
    "version": "1.0",
    "background": {
        "scripts": ["home.js", "background.js"]
    },

    "permissions": ["tabs"],
    "browser_action": {
        "default_icon": "icon.png",
        "default_title": "Go to Dev.Opera!"
    },
    "web_accessible_resources": ["home.html"]
}

home.html

<html>
<body>

    <form>
        <label for="a">Part 1:</label>
        <input type="text" id="a" name="a"><br><br>
        <label for="b">Part 2:</label>
        <input type="text" id="b" name="b"><br><br>
        <input id="submit" type="submit" value="Go">
    </form>

    <img id="myImg" src="" />

</body>
</html>

<script src="home.js"></script>

home.js

var submit = null;
document.addEventListener("DOMContentLoaded", () => {
    submit = document.getElementById("submit");
    if (submit !== null) {
        submit.addEventListener("click", myFunction);
    }
});

function myFunction() {
    var a = document.getElementById('a').value;
    var b = document.getElementById('b').value;

    if (a !== '' && b !== '') {
        var fileName = "media/" + a + b + ".png";
        var image = document.getElementById("myImg");
        image.src = fileName;
    } else {
        alert('Enter values');
    }
}

奇怪的是，当我调试我的代码时，检查元素时确实会出现正确的路径，但是一旦代码完成调试，图像 src 就会恢复为空。我也知道路径是正确的，因为如果我将它硬编码到 src 中，它就会出现。

下面的第一张图片显示了调试期间的 HTML，第二张图片显示了硬编码时确实出现的图片。

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

正在提交您的表单，正在刷新整个页面。在点击侦听器中，您需要接受事件参数并调用 preventDefault()。像这样：

submit.addEventListener("click", (e) => {
        e.preventDefault()
        myFunction()
    });

调用preventDefault 将阻止事件的默认操作发生。在这种情况下，提交表单。阅读所有相关内容 here。

Chrome 扩展图像更改不持久

Chrome extension image change not persisting

html

javascript

google-chrome-extension