【chrome extensions course】2.sayhello
今天的主题是引入css、js。并且引入jquery来简化dom操作。案例如下图。
1.gif
- 我们需要修改文字的样式
- 我们需要监听输入框的输入事件，而后将输入框的值赋给hello后面文本
github项目地址： 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” })})说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 【chrome extensions course】2.sayhello
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 【chrome extensions course】2.sayhello
