时间戳

首页 > 解决方案 > Chrome 扩展图像更改不持久

javascript - Chrome 扩展图像更改不持久

问题描述

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

清单.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"]
}

主页.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>

主页.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，第二张显示了硬编码时出现的图片。

调试器代码硬编码图像

任何帮助，将不胜感激。谢谢。

标签： javascripthtmlgoogle-chrome-extension

解决方案

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

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

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

推荐阅读