谷歌浏览器插件开发教程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>通知公告 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代码？？：