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扩展程序对您尝试与之互动的网址具有正确的权限。

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

1）以编程方式创建＆＃34;样式＆＃34; Javascript中的节点，编辑其innerHTML，然后将其弹出到页面

2）插入指向扩展程序目录中文件的样式表链接。请注意，对于此方法，您需要在manifest.json＆＃34; web_accessible_resources＆＃34;中列出样式表。领域。

Answer 2

请使用以下代码：

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

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

2 个答案: