Chrome扩展开发入门

2017-01-08 08:26:02来源:CSDN作者:rosetta人点击

扯蛋

  高能预警,扯蛋部分和本次技术讨论无关,可以跳过不看
  不知道从何开始,写博客或者记笔记时我都要写个”前言”,把写本次文章的前因后果、当时的感想或者学习的想法写下来。我想学一个技术都是有最初的动机的,如果一上来就谈技术,而根本不知道自己的需求是什么,那么学习的效果应该不是太好。
  其实这几年我学过好多东西,学的时候觉得很简单,感觉没必要记录,但是时间一长,就很尴尬的全忘了,想要用时只能几乎从头开始回忆。所以,我觉得学习任何知识,不要以简单和困难作为是否记录的因素,不管怎样,只要学了并且有收获,不管是成功还是失败,也不管当前的进度是如何,全记下来,即使你学某个知识学到一半不学了,但是等一段时间后你又想这了,你就能很快的回忆起来。

本文前言

  今天写的《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的文件,具体各字段含义请参见给出的电子书。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台