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

Posted newmiracle

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谷歌浏览器插件开发教程1相关的知识，希望对你有一定的参考价值。

谷歌浏览器插件开发教程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

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

{
    "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的主要内容，如果未能解决你的问题，请参考以下文章

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

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

google浏览器插件开发教程

Chrome谷歌插件在哪里下载？附图文教程！

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

Python爬虫常用：谷歌浏览器驱动——Chromedriver 插件安装教程