【chrome extensions course】2.sayh
2019-06-03 本文已影响7人
bugWriter_y
今天的主题是引入css、js。并且引入jquery来简化dom操作。案例如下图。
1.gif
- 我们需要修改文字的样式
- 我们需要监听输入框的输入事件，然后将输入框的值赋给hello后面文本
github项目地址：https://github.com/yanglimou/chrome-extensions-study/tree/master/sayhello
- mainfest.json
{
"manifest_version": 2,
"name": "say hello",
"version": "1",
"description": "this is a say hello extension",
"browser_action": {
"default_popup": "sayHello.html",
"default_icon": "images/icon16.png"
},
"icons": {
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
- sayHello.html
<!DOCTYPE html>
<html>
<head>
<title>sayHello</title>
<script src="jquery.min.js"></script>//引入jquery
<script src="sayHello.js"></script>//引入sayhello.js，自己的js逻辑
<link rel="stylesheet" href="sayHello.css">//引入样式表
</head>
<body>
<h1>hello <span>world</span></h1>
<input type="text">
</body>
</html>
- sayHello.css
body{//增加了弹出框的宽度
min-width: 200px;
}
h1{
color: green;//颜色设置
}
h1 span{
text-decoration: underline;//下划线设置
}
- sayHello.js
$(function(){
$("input").on("input",function(){//监听输入事件
$("span").text($(this).val()?$(this).val():"world")//如果有值显示具体的值，没有值显示默认值“world”
})
})
