Google browser plug-in development Tutorial 1

I I think this plugin you write code or helpful

Let's say you use when layaair development of the game when you test you find elves coordinates right? Or gone? ? ? This time Google browser plug-in that can see in real time to show their talents inside the game Elves state better able to solve problems

It is not difficult to do that with the same website

The first to write a page 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;
In {
}
    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><href = A 
        </ li>""> Student </a>
        <li> <a href=
        </ li>> International Cooperation </a>""""
        <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> our school successfully held the second session of the "Hong Kong vocational education body ... </a>02-07> <span>
                </ dd> 
                <dd> <a href= "#"> <span> 06 - 23 </ span> Project Cooperation conference held in Australia in my school </a> 
                </ dd> 
                <dd> <A href = " # " > <span> 06 - 23 </ span>卡比奥拉尼on behalf of the University of Hawaii School of </a> again ... 
                </ dd> 
                <dd> <a href=" # "> <span> 06 - 22 </ span> Hong Kong Vocational training Council visited our school exchange visit </a> 
                </ dd> 
                <dd> <a href="#"><span>06-20</ span> the first half of 2017, the National University of CET </a> ... 
                </ dd> 
                <dd> <a href= "#"> <span> 06 - 07 </ span> Harbin Institute of Technology Modern Distance Education 2017 </a> back ... 
                </ dd> 
                <dd> <a href= "#"> <span> 05 - 23 </ span> Zhongshan District National primary and secondary school teacher qualification examination exam interview </a> ... 
                </ dd> 
            </ DL> 
            </ div> 
            <div ID = " zuoxia " > 
                <H2> <IMG the src = "/uploads/user_upload/36431/img_9.gif " > Admissions column <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 the above mentioned id = " Tongzhi " > 
                <dt> Announcement nbsp &; & nbsp; More >> </ dt> 
                <dd> <a href=" # "class  =" DW "> <span> 09 - 01 < / span> 2017 adult college enrollment in our school professional codes </a> 
                </ dd> 
                <dd> <a href= "#"> <span> 07 - 04 </ span> announced on the first half of 2017 in Zhongshan City of Cape </a> ... 
                </ dd>
                <dd><a href="#"><span>06- 26</ span> Zhongshan City Bureau of Education and Sports on </a> 2017 ... 
                </ dd> 
                <dd> <a href= "#"> <span> 06 - 22 </ span> Northern Arizona University to me </a> school exchange ... 
                </ dd> 
                <dd> <a href= "#"> <span> 06 - 02 </ span> Zhongshan Vocational-Technical college adult Education 2017 session of the outstanding </a> Bi ... 
                </ dd> 
                <dd> <a href= "#"> <span> 05 - 10 </ span> Corel international certification exam training brochures </a>
                </dd>
                <dd><a href="#"> <span> 03 - 30 </ span> ab level of English, computer skills and English </a> ... 
                </ dd> 
            </ DL> 
           
        </ div> 
    </ div> 
</ div> 

</ body> 

</ html>

Then get hold icon

Plus a configuration file which parameter settings

{
    "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"
    }
}

To the above path oh

Then into a folder and then open the chrome: // extensions /

Click on

Select the folder directly into OK it

Switch open on the left that is done to change the code to refresh Click to refresh before they can see the latest results

Take a look at the top right of the results of the browser

Click to see if there have been just write your html code? ? :

Google browser plug-in development Tutorial 1

Guess you like