Google chrome extension 更改输入字段的最佳方式？

我正在尝试创建一个扩展，当我点击它时，会出现一个下拉菜单，用图标填充任何网页中的每个输入字段（文本、搜索等）， 就像恢复图标中的Lazarus或谷歌语音搜索图标一样， 最近我尝试了很多方法，但都没有奏效( 我试图找到一种适合所有字段的方法，无论其形状或大小。

document.addEventListener（'DOMContentLoaded'，function（）{
document.addEventListener('DOMContentLoaded', function () {
    $(document).ready(function () {
        var elements = $('input[type=text], input[type=search], input[type=textarea]');
        for (var i = 0; i < elements.length; i++) {
            var input = elements[i];

            input.className = 'inputWithImge';
            var oImg = document.createElement('img');
            oImg.src = chrome.extension.getURL("list.png");
            oImg.className = 'img';

        }

        $(document).ready(function () {   
            $(".inputWithImge").after(oImg);
            $(".inputWithImge").each(function () {
                $(this).add($(this).next()).wrapAll('<divclass="imageInputWrapper"></div>');
            });
        });
    });
});

$（文档）.ready（函数（）{
变量元素=$（'input[type=text]、input[type=search]、input[type=textarea]）；
对于（var i=0；i

我试图制作图像或按钮，并将其与输入字段包装在一个div中，但效果不理想。它出现在字段旁边，但我希望图标在其中，而不更改字段大小或宽度。img{垂直对齐：中间！重要；光标：指针！重要；}.imageInputWrapper{border:solid 1px#000！重要；display:inline block！重要；}.inputWithImge{border:none！重要；右边距：5px！重要；padding:0px！重要；边距：0px！重要；高度：自动！重要；宽度：100%！重要；}