如何更改 chrome 扩展中的表格样式？

Question

我目前正在为我的大学开发一个 chrome 扩展程序，它作为学生的增强套件，并修复了我们大学登录时糟糕的 css。我已经更改了大部分页面，但我目前在定位和更改表格的 css 时遇到问题。这是我要定位的表格代码：

<form name="stud_login" action="stud_login_submit.asp" method="post">

        <input type="hidden" name="message" value="">

        <table cellpadding=2 cellspacing=0 border=2 bordercolor=#CC9900 width="434">
            <tr>
                <td bgcolor=#E1ECF2 align=center width="424" height="100">

                <table cellspacing='0' cellpadding='4' align='center' border='1' width='428' height='100' style='border-collapse: collapse;' bordercolor='#FFFFFF'>

                <tr>
                    <td bgcolor=#5A768D colspan=2 height=30 align="center">
                        &nbsp;
                    </td>
                </tr>

                <tr>
                    <td bgcolor=#5A768D width="117" height="33">
                        <font color=#FFFFFF><b>Register No.</b></font>
                    </td>
                    <td height="33" width="292">
                        <input type="text" name="regno" class="textbox2" size="20" maxlength="9" value="" tabindex="1">
                    </td>
                </tr>

                <tr>
                    <td bgcolor=#5A768D width="117" height="36">
                        <font color=#FFFFFF><b>Password</b></font>
                    </td>
                    <td height="36" width="292">
                        <input type="password" name="passwd" class="textbox" size="20" maxlength="15" tabindex="1">
                    </td>
                </tr>

                <tr>
                    <td bgcolor=#5A768D height="36" width="117" rowspan=2 valign=top>
                        <font color=#FFFFFF><b>Verification Code</b></font>
                    </td>
                    <td height="36" width="292" align=center bgcolor="#FFFFE8">
                        <img src="captcha.asp" id="imgCaptcha" onContextMenu="return false;" ondrag="return false;" onmousedown="return false;">
                    </td>
                </tr>

                <tr>
                    <td height="36" width="292">
                        <input type="text" name="vrfcd" class="textbox" size="10" maxlength="6" tabindex="1">&nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="javascript:void(0);" onclick="RefreshImage('imgCaptcha');"><font color=blue>Change Verification Code</font></a>
                    </td>
                </tr>

                <tr>
                    <td colspan=2 bgcolor=#5A768D height=40 align=center>

                        <input type="submit" value="Login" class="submit3" onclick="return checknull()" tabindex="1">
                        &nbsp;&nbsp;
                        <input type="button" value="Reset" class="submit3" onclick="call_reset()" tabindex="1">
                        &nbsp;&nbsp;
                        <!--<input type="button" value="Forgot Password ?" class="submit3" onclick="modalWin(); return false;" tabindex="1">-->
                        <input type="button" value="Forgot Password ?" class="submit3" onclick="fgtpswd_popup(); return false;" tabindex="1">

                    </td>
                </tr>

                </table>

                </td>
            </tr>
        </table>

        </form>

我已经更改了它的按钮并隐藏了不相关的细节，但我想通过 css 更改它的整个设计并给它一个现代设计，任何人都可以举例说明如何更改它并让它看起来更好。

Answer 1

如果您想修改甚至覆盖现有网页的内容，您必须使用内容脚本或直接将Javascript代码注入到页面中。 确保您的 Chrome 扩展程序对您尝试与之交互的 url 具有正确的权限。

更具体地说，为了将 CSS 文件注入页面，您可以：

1) 在 Javascript 中以编程方式创建一个“样式”节点，编辑其 innerHTML，然后将其弹出到页面中

2) 插入样式表链接，指向扩展目录中的文件。请注意，对于此方法，您需要在 manifest.json 的“web_accessible_resources”字段中列出样式表。

Answer 2

请使用以下代码：

 @media screen and (-webkit-min-device-pixel-ratio:0)
    {
        //Your Css Here
    }