【chrome extensions course】1.helloworld

广告位

1. chrome extensions介绍 chrome extensions值的是chrome浏览器扩展插…

1. chrome extensions介绍

chrome extensions值的是chrome浏览器扩展插件。它能增强chrome浏览器的功能,例如跨域插件,截屏插件,翻译软件,甚至一些小游戏等等。

你可以把一个extension理解为一个app

【chrome extensions course】1.helloworld

截图1559450226.png

2. 开发技术

chrome extensions的开发只要有html,css,javascript技术就快速上手

3. 入门项目hello world

github项目地址:https://github.com/yanglimou/chrome-extensions-study/tree/master/helloworld

0. 新建目录helloworld,项目结构如下
【chrome extensions course】1.helloworld

截图1559450692.png

1. manifest.json

每一个extension都有一个manifest.json文件,它是extension的描述文件

{     "manifest_version": 2,//描述extension的版本(这个基本不变,除非chrome浏览器更新了extension的开发版本,类似于开发安卓的安卓版本)     "name": "hello world",//该extension名称     "version": "1",//该extension的版本,升级需要增加     "description": "this is a hello world extension",//描述信息     "browser_action": {//表示这个extension是一个browser action extension         "default_popup": "hello.html",//点击弹出页面         "default_icon": "images/icon16.png"//工具栏的默认展示图标     },     "icons": {//相关显示图标         "16": "images/icon16.png",         "32": "images/icon32.png",         "48": "images/icon48.png",         "128": "images/icon128.png"     } } 
2. hello.html
<!DOCTYPE html> <html> <head>     <title>hello world</title> </head> <body>     <h1>hello world</h1> </body> </html> 
3. 安装
【chrome extensions course】1.helloworld

1.gif

4. have a try

金罗老师

关于作者: 金罗老师

为您推荐