美文网首页
谷歌插件/App -- 入门

谷歌插件/App -- 入门

作者: 夏_至 | 来源:发表于2016-04-07 22:21 被阅读1465次

google chrome是一个很神的浏览器,特别对于开发人员来说,代码接口都开源,可以做很多有意思的开发。

基于chrome的两种开发方式:1.chrome extension(扩展程序) 2.chrome app(应用)

  1. 扩展程序(extension) chrome://extensions
    例如:印象笔记的剪裁工具,在chrome商店或者印象笔记官网下载对应文件,安装好以后会在浏览器右上角出现一个大象的图标
印象笔记

这种扩展程序能够操作让浏览器操作任何页面的元素,例如保存某些数据(爬虫),截图,或者拦截广告等,只要浏览器启动了,那么扩展程序就会生效,这种程序完全依赖浏览器而存在

2.应用程序(app) chrome://apps
则是可以‘脱离’浏览器单独运行的一种程序,可以创建快捷方式,不开浏览器运行,可以有自己的图标,程序以及一个或多个窗口。为什么‘脱离’打了引号呢?因为你的chrome浏览器还是得安装的,不然还是运行不了app的

一个播放器app

接下来现在我们动手开发一个简单的应用程序:
a.首先在桌面新建一个 my_app的文件夹,找个128*128像素的png或者ico文件放进去(当做程序图标),例如我放的名字叫icon.png
b.新建一个文本文件然后改名为: manifest.json 然后输入代码并保存:

{
"manifest_version": 2,
"name": "my app",
"version": "2",
"minimum_chrome_version": "35",
"icons": {
"128": "icon.png"
},
"app": {
"background": {
"scripts": ["background.js"]
}
},
"permissions":[]
}

c.新建文本文件然后改名: index.html 输入代码保存:

随便写点什么吧!
hello world!
12345……

d.新建文本文件然后改名: background.js 输入代码保存:

chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
id: "MainWindow",
innerBounds: {
width: 900,
height: 600
}
});
});

到这里代码就都写好了,最终的文件结构为:

Paste_Image.png

接下来在chrome浏览器中输入 chrome://extensions
勾选‘开发这模式’,然后点击‘加载已解压的扩展程序...’,找到并选择刚刚的my_app文件夹,然后就会出现下面的程序了,点击启动~

Paste_Image.png Paste_Image.png
点击‘详细信息’可以选择在桌面创建快捷方式,这样以后就可以直接脱离浏览器启动我的程序了 _ Paste_Image.png

相关文章

  • 谷歌插件/App -- 入门

    google chrome是一个很神的浏览器,特别对于开发人员来说,代码接口都开源,可以做很多有意思的开发。 基于...

  • Mac app 推荐

    Mac app 推荐 开发工具篇 Postman (Chrome 工具) 这款APP 最初是 谷歌浏览器的插件.....

  • 2022-06-16

    谷歌插件 什么是谷歌插件? 谷歌插件,全名谷歌浏览器扩展程序。那什么是谷歌浏览器扩展程序,官方说明如下: 扩展程序...

  • iOS hack别人app实践(2)---入门级小插件的开发

    iOS hack别人app实践(2)---入门级小插件的开发 本文主要介绍了一个针对第三方app的自动操作插件的开...

  • 2020-05-11 谷歌浏览器之宝藏插件

    首先要保证可以访问谷歌Ghelper 访问谷歌必备插件 插件1 FireShot(网页截屏) 下载地址 插件2 哔...

  • xcode7 插件制作入门

    xcode7 插件制作入门 xcode7 插件制作入门

  • flutter天气预报APP

    前言 这是一个使用flutter写的天气预报APP,主要使用了以下几个插件,入门级练练手。dio:网络请求插件,用...

  • 谷歌插件

    1.新建目录,将相关文件都放在该目录下,编写一个manifest.json文件,内容如下: { "name": "...

  • 谷歌插件

    谷歌插件开发笔记 插件开发相关及问题记录。 第一阶段,原生chrome extension阶段,调用chorme的...

  • sublime-5:sublime连招

    1.实时刷新 1.1.给谷歌浏览器下载插件LiveReload LiveReload插件我们可以通过谷歌的应用商店...

网友评论

      本文标题:谷歌插件/App -- 入门

      本文链接:https://www.haomeiwen.com/subject/ccnulttx.html