Chrome扩展开发入门
2017-01-07 21:04
309 查看
扯蛋
高能预警,扯蛋部分和本次技术讨论无关,可以跳过不看不知道从何开始,写博客或者记笔记时我都要写个”前言”,把写本次文章的前因后果、当时的感想或者学习的想法写下来。我想学一个技术都是有最初的动机的,如果一上来就谈技术,而根本不知道自己的需求是什么,那么学习的效果应该不是太好。
其实这几年我学过好多东西,学的时候觉得很简单,感觉没必要记录,但是时间一长,就很尴尬的全忘了,想要用时只能几乎从头开始回忆。所以,我觉得学习任何知识,不要以简单和困难作为是否记录的因素,不管怎样,只要学了并且有收获,不管是成功还是失败,也不管当前的进度是如何,全记下来,即使你学某个知识学到一半不学了,但是等一段时间后你又想这了,你就能很快的回忆起来。
本文前言
今天写的《Chrome扩展开发入门》只是把最简单的东西记录下,就是Chrome浏览器如何加载自己写的javascript脚本并打出”Hello world!”,我想只要知道了这个,后续就可以跟着相应的教材慢慢学了。而学这个本来是想写个12306抢票插件啥的,但是最近好忙,先把其它几个正在学习的内容学完再学这个。
参考免费电子书《Chrome扩展及应用开发》,csdn也有pdf版本的,但是pdf的里面没有图片,里面的链接也无法直接点,所以还是建议直接看网上的。
本人开发工具:PHPStorm。
Chrome扩展—“hello world!”
我们先运行看下效果,然后帖出全部代码,最后解释代码。运行方法
打开Chrome,我使用的版本是版本 55.0.2883.87 m (64-bit),不同Chrome可能有点不一样。具体内容看图了,很简单的。选择源码目录
点击”确认”后就弹出”hello world!”
源码目录中主要就是这两个文件,.idea是phpstorm的配置文件,不用管
源码
此次运行是在Chrome加载时打印的,一共两个文件:manifest.json和popup.js。maniffest.json内容如下:
{ //在chrome中加载时运行 "name": "Hello world扩展", "manifest_version":2, "version": "1.0", "description": "我的第一个Chrome扩展程序", "background": { "scripts": ["popup.js"] } }
popup.js内容如下:
window.onload= function () { alert("hello world!"); }
Chorme扩展程序必须要有一个名为maniffest.json的文件,具体各字段含义请参见给出的电子书。
相关文章推荐
- Chrome扩展开发指南(1)——入门
- Chrome扩展及应用开发 入门笔记(二)跨域请求
- Chrome扩展开发指南(1)——入门
- Chrome扩展及应用开发 入门笔记(网络请求,脚本注入)
- chrome扩展开发入门
- Chrome 56 扩展开发入门:Hello
- Chrome扩展及应用开发 入门笔记(五)消息机制
- Chrome扩展开发指南(1)——入门
- Chrome扩展及应用开发 入门笔记(一)
- Chrome扩展及应用开发 入门笔记(七)带选项页面的扩展与本地存储
- Chrome扩展入门开发
- Chrome扩展开发入门 2.怎样使用Chrome Extensions API?
- Chrome扩展及应用开发 入门笔记(六)进阶(网络请求,脚本注入)
- Chrome扩展及应用开发 入门笔记(三)存储数据
- Chrome插件开发入门+扩展
- Chrome扩展开发入门
- Chrome扩展开发指南(1)——入门
- Chrome 56 扩展开发入门:Content Scripts
- 开发chrome扩展程序
- Chrome扩展程序开发调试简明教程