谷歌浏览器插件开发教程1

我我觉得这个插件对你写代码还是很有帮助的

比方说你用layaair开发游戏的时候你测试的时候你发现精灵坐标不对？或者不见了？？？这个时候谷歌浏览器插件大显身手了可以实时看到游戏里面的精灵状态更好的能解决问题

其实不难就是跟做网站一样

先写页面 popup.html

<!doctype html>

<html>

<head>

<meta http-equiv="content-type" content="txt/html; charset=utf-8" />

<title>Document</title>

<style>

* {
    padding: 0;
    margin: 0;
}
body {
    /*
    width: 1000px;
    */
    
    margin: 0 auto;
    font-size: small;
}
a {
    text-decoration: none;
    color: #333;
}
li {
    display: inline-block;
}
#header #top {
    width: 100%;
}
.left {
    float: left;
    width: 62%;
}
.right {
    float: left;
    width: 35%;
}
#header p {
    -webkit-writing-mode: vertical-rl;
    position: fixed;
    top: 150px;
    left: 5%;
    border: 1px dashed #999;
    font-weight: bold;
    padding: 10px;
    font-size: 27px;
    color: red;
    background-color: #c6ebf4;
}
#header #fenxiang {
    position: fixed;
    right: 0;
}
#main {
    width: 80%;
    margin: 20px auto 100px auto;
    line-height: 200%;
}
#main ul {
    background-color: #287ea9;
    padding: 5px 0;
}
#main ul li a {
    padding: 0 10px;
    color: #fff;
}
#main h2 {
    width: 62%;
    padding: 10px 0;
    margin-bottom: 5px;
    border-bottom: 1px dotted #999;
}
#main h2 img {
    vertical-align: bottom;
}
#main h2 span {
    color: #287ea9;
}
#news {
    padding: 10px 0;
    border-right: 1px dotted #999;
}
#news dt img {
    width: 30%;
    float: left;
    padding: 10px 10px;
}
#news dd {
    margin-left: 40%;
    width: 57%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#news dd,
#tongzhi dd {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
}
#news dd a,
#tongzhi dd a {
    color: #287ea9;
}
.tu {
    text-align: center;
}
#fenjie {
    width: 95%;
    border: 1px solid #888;
    margin: 10px 0;
}
#main #zuoxia {
    border-right: 1px dotted #999;
}
#main #zuoxia h2 {
    width: 99.5%;
}
#zhaosheng {
    width: 98%;
    border: 1px dotted #999;
    margin: 20px 1%;
}
#zhaosheng dt {
    background-color: #287ea9;
}
#zhaosheng dt ol li a {
    color: #fff;
    padding: 6.5px 20px;
}
#zhaosheng dt ol li a:hover,
#zhaosheng dt .dw {
    background-color: #4b7fcd;
    color: #fff32b
}
#zhaosheng dd {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#zhaosheng dd a {
    color: red;
    padding-left: 15px;
}
#zhaosheng dd a:hover,
#zhaosheng dd .dw {
    color: #287ea9;
}
#zhaosheng dd .jiacu {
    font-weight: bolder;
}
#tongzhi {
    margin: 15px 1% 0 1%;
}
#tongzhi dt {
    color: #fff;
    padding-left: 48px;
    margin-bottom: 22px;
}
#tongzhi dd {
    width: 90%;
    margin-left: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#tongzhi dd a:hover,
#tongzhi dd .dw {
    color: red;
}
#main dd a span {
    color: #333;
    font-weight: lighter;
}
.rightimg {
    text-align: center;
}
.rightimg img {
    width: 90%;
    margin: 10px 10px 0 10px;
}
#footer {
    clear: both;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    line-height: 170%;
}
#footer span {
    color: #287ea9;
}
</style>

</head>

<body>

<div id="main">

    <ul>
        <li><a href="">首页</a>
        </li>
        <li><a href="">学院介绍</a>
        </li>
        <li><a href="">新闻公告</a>
        </li>
        <li><a href="">学历教育</a>
        </li>
        <li><a href="">培训考证</a>
        </li>
        <li><a href="">国际合作</a>
        </li>
        <li><a href="">学生工作</a>
        </li>
        <li><a href="">本科班博客</a>
        </li>
        <li><a href="">党务工作</a>
        </li>
        <li><a href="">联系我们</a>
        </li>
    </ul>
    <div>
        <div class="left">
            <dl id="news">
                <dt><img src="/uploads/user_upload/36431/1.png"></dt>
                <dd><a href="#"><span>07-02</span> 我校成功举办第二届“香港职业教育体…</a>
                </dd>
                <dd><a href="#"><span>06-23</span> 中澳项目合作会议在我校召开</a>
                </dd>
                <dd><a href="#"><span>06-23</span> 美国夏威夷大学卡比奥拉尼学院代表再…</a>
                </dd>
                <dd><a href="#"><span>06-22</span> 香港职业训练局一行来我校交流访问</a>
                </dd>
                <dd><a href="#"><span>06-20</span> 2017年上半年全国大学英语四六级考试…</a>
                </dd>
                <dd><a href="#"><span>06-07</span> 哈尔滨工业大学现代远程教育2017年退…</a>
                </dd>
                <dd><a href="#"><span>05-23</span> 中山考区全国中小学教师资格面试考试…</a>
                </dd>
            </dl>
            </div>
            <div id="zuoxia">
                <h2><img src="/uploads/user_upload/36431/img_9.gif"> 招生专栏 <span>more >></span></h2>
                <dl id="zhaosheng">
                    <dt>
                            <ol>
                                <li><a href="" class="dw">学历教育</a></li>
                                <li><a href="">培训考证</a></li>
                                <li><a href="">国际交流</a></li>
                            </ol>
                        </dt>
                  
                </dl>
            </div>
        </div>
        <div class="right">
            <dl id="tongzhi">
                <dt>通知公告 &nbsp;&nbsp; more >></dt>
                <dd><a href="#" class="dw"><span>09-01</span> 2017年我校成人大专招生专业代码</a>
                </dd>
                <dd><a href="#"><span>07-04</span> 关于公布2017年上半年中山市普…</a>
                </dd>
                <dd><a href="#"><span>06-26</span> 中山市教育和体育局关于2017年…</a>
                </dd>
                <dd><a href="#"><span>06-22</span> 美国北亚利桑那大学来我校交流…</a>
                </dd>
                <dd><a href="#"><span>06-02</span> 中山职院成人教育2017届优秀毕…</a>
                </dd>
                <dd><a href="#"><span>05-10</span> Corel国际认证考试培训班招生简章</a>
                </dd>
                <dd><a href="#"><span>03-30</span> 关于英语ab级、计算机水平和英…</a>
                </dd>
            </dl>
           
        </div>
    </div>
</div>

</body>

</html>

再弄个icon

再加个配置文件里面参数设置下

扫描二维码关注公众号，回复： 7951122 查看本文章

{
    "name": "todo-plugin",
    "version": "0.9.0",
    "manifest_version": 2,
    "description": "chrome plugin demo",
    "browser_action": {
        "default_icon": "icon.png",
        "default_title": "Todo List",
        "default_popup": "popup.html"
    }
}

上面的路径要对哦

然后放到1个文件夹里然后打开 chrome://extensions/

点击

选择文件夹直接导入就OK啦

开关开上左边那个是刷新代码改完要点击刷新才可以看到最新效果

来看看成果浏览器右上角

点击看看是不是出现了你刚写的html代码？？：

谷歌浏览器插件开发教程1

猜你喜欢