Question

我在问这个问题时感觉有点傻逼，但我真的需要你帮助建立这个，因为我对Javascript和Chrome开发的了解仍然很差。我有这个简单的HTML页面，上面有实验表格

http://alcatra.ideatech.cz/chrome_plugin_experiment.php

chrome_plugin_experiment.php

<!DOCTYPE HTML>
<html> 
<body>
<div class="content">
    <div class="heading">
        <h2>Chrome Plugin Experiment</h2>
    </div>
    <div class="formdiv">
        <form action="welcome.php" method="post">
            <div class="form-div-name-class">
                Name: <input type="text" name="experiment-chrome-testname" class="form-input-name-class" id="form-input-name-id">
            </div><br>
            <div class="form-div-favcolor-class">
                Favourite color: <input type="text" name="experiment-chrome-testfavcolor" class="form-input-favcolor-class" id="form-input-favcolor-id">
            </div><br>
            <div class="form-div-submit-button">
                <input type="submit" name="experiment-chrome-submit" class="form-input-submit-class" id="form-input-submit-id">
            </div>
        </form>
    </div>
</div>
</body>
</html>

的welcome.php

<html>
<body>

Welcome <b><?php echo $_POST["experiment-chrome-testname"]; ?></b>, how are you?<br>
You said your favourite color is: <b><?php echo $_POST["experiment-chrome-testfavcolor"]; ?></b>

</body>
</html>

我需要构建一个非常简单的Chrome扩展程序，该扩展程序在我访问的每个页面 ，并且仅在HTML中<input name="experiment-chrome-testname">和<input name="experiment-chrome-testfavcolor">的页面上代码，这个插件将完成它的工作。我需要此扩展程序抓取提交的表单POST数据并将其替换为扩展程序中预设的值，因此结果页面将显示这些不同于我最初输入表单的值。

示例：当我在名称字段中键入任何名称（例如＆＃39; David＆＃39;）并将任何颜色（例如＆＃39; red＆＃39;）键入颜色字段时，点击提交按钮后，我的分机将取代大卫＆＃39; - ＆GT; ＆＃39;彼得＆＃39;和＆＃39; red＆＃39; - ＆GT; ＆＃39; blue＆＃39;，其中＆＃39; Peter＆＃39;和＆＃39;蓝色＆＃39; 在扩展程序中的JavaScript代码中手动设置。我将被重定向到页面＆＃39; welcome.php＆＃39;我会看到：

Welcome Peter, how are you?
You said your favourite color is: blue

即使我在上一个表单中键入了任何不同的内容。

我将真诚地感谢任何为我写这篇文章的人，或者至少向我解释我必须如何继续。请不要责怪我，我已经花了几个小时用谷歌搜索，但我仍然无法理解应该在后台脚本中加入什么以及在我的案例中还有什么内容脚本。

Answer 1

为什么要使用扩展而不是纯JavaScript？在纯JavaScript中，您可以使用

var myForm = document.getElementById("myFormId");

首先获取表单，然后向其添加事件侦听器并修改发布数据。

myForm.addEventListener('submit', function(event) {...});

BTW，根据Issue 91191，我们现在无法修改chrome扩展中的表单数据。

Chrome扩展程序 - 使用扩展程序

1 个答案: