让chrome插件在手机上跑起来

本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载

创建一个chrome的插件,并让这个插件能够作为一个app,运行在终端设备上。 <!--more-->

创建一个chrome插件

该插件app实现一个搜索框,输入内容后,根据输入内容去github搜索名称有关联的repositories

  • 书写manifest.json
  • 创建chrome app的加载页面
  • 书写加载页面的内容
  • 使用chrome的扩展程序加载程序代码manifest.json chrome的app的配置文件有固定的形式,简单配置如下{ "manifest_version": 2,//固定为2 "name": "chrome extension search",//名称自定义 "version": "1.0", "app": { "background": { "scripts": ["scripts/main.js"]//app的入口文件 } }, "permissions": [ //如果这里有调用ajax请求,需要将url填在这里,否则在app中无法正常发起请求 "https://api.github.com/search/repositories" ] }

创建chrome app的加载页面

由于入口是一个js文件,而实际我们是需要创建一个界面来展示数据和做一些交互,所以这里会借助chrome的一个api来实现这个功能,在应用启动的时候,我们来创建一个页面出来

chrome.app.runtime.onLaunched.addListener(function() {

    var screenWidth = screen.availWidth;
    var screenHeight = screen.availHeight;
    var width = 500;
    var height = 300;

    chrome.app.window.create('index.html', {
        id: "chromesearch1",
        outerBounds: {
            width: width,
            height: height,
            left: Math.round((screenWidth - width) / 2),
            top: Math.round((screenHeight - height) / 2)
        }
    });
});

书写加载页面的内容

页面入口文件,这里贴出部分代码

<body>
    <h1>Search !!!</h1>
    <div class="container">
        <input type="text" class="input">
        <div></div>
    </div>
</body>
<script type="text/javascript"   src="scripts/jquery.min.js" ></script>
<script  type="text/javascript"  src="scripts/script.js" ></script>

需要注意的是,chrome的扩展插件出于安全考虑,是不能写内联的脚本的,内联样式是可以的 引用第三方的cdn服务器上得脚本也是不允许的

使用chrome的扩展程序加载程序代码

打开chrome-工具(右上角条纹按钮)-更多工具-扩展程序,启动开发者模式,就可以自由加载本地的程序包了。 点击加载已解压扩展程序,指定到上面我们项目的根目录,加载成功后即可启动程序。

mac下载applaunch下面也可以找到刚才我们自定义的app

mac下在手机模拟器下运行chrome app

  • 准备工作
  • 创建工程
  • 发布准备工作
  • node(the lastest)
  • xcode
  • npm install -g ios-deploy
  • npm install -g ios-sim
  • ios 开发者账号(可选,如果要在真机上运行app则需要)
  • npm install -g cca

使用命令cca checkenv来check环境是否准备好 正常提示iOS Development: SDK configured properly.

创建一个工程

//空的项目
cca create YourApp
//创建软连接链接到项目目录
cca create YourApp --link-to=path/to/manifest.json
//拷贝chromeapp目录到当前目录
cca create YourApp --copy-from=path/to/manifest.json

发布

执行如下脚本在模拟器中预览

//模拟机上运行
cca emulate ios
//真机上运行 (开发者账号)
cca run ios

如果更新了代码,需要重新执行如下命令

cca prepare

调试方式可以参考这里

而实际上因为是web页面的调试,所以在浏览器端可以做很多调试了,而只有少部分问题需要在模拟机或者真机上调试。当然,需要到真机上调试的问题一般都会比较麻烦

小结

  • hybrid中开发形式多样,可以直接嵌入app或者使用三方框架来实现,而谷歌提供的cca(c ordova c hrome a pp)可以对自家的chrome插件打包,直接生成跨端的app,而且这种app是纯前端投入可以实现的做得
  • 据悉,cca不再提供新功能,而谷歌只保证原有功能可用。但其实它提供的是一个工具包,它是基于cordova apache来实现的,这个才是核心,有cordova apache在就好。
  • 实现方式和ionic类似,而ionoc对应的文档(中文文档)以及对应的组件会比cca这种方式更全面,而cca这种方式提供的更多是方便和快捷。

代码路径

第一部分示例代码

参考

chrome事件生命周期 在手机上运行chrome app官方文档

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏区块链

Web安全测试基础-2

文 | 李文祥 一、Web安全漏洞概念及原理分析 1.2 跨站脚本攻击(XSS) 概念:通常指黑客通过“HTML注入”篡改了网页,插入了恶意的脚本,从而在用户浏...

21090
来自专栏Android干货

Android项目实战(二十四):项目包成jar文件,并且将工程中引用的jar一起打入新的jar文件中

9240
来自专栏Python爬虫实战

Python爬虫:爬取在线教程转成pdf

1、网站介绍2、准备工作2.1 软件安装2.2 库安装3、爬取内容3.1 获取教程名称3.2 获取目录及对应网址3.3 获取章节内容3.4 保存pdf3.5 合...

19810
来自专栏云计算教程系列

如何使用Prometheus监视您的Ubuntu 14.04服务器

Prometheus是由SoundCloud开发的开源监控系统。与其他监控系统(如InfluxDB和Graphite)一样,Prometheus将其所有数据存储...

22100
来自专栏云计算教程系列

如何使用Prometheus监控CentOS 7服务器

Prometheus是由SoundCloud开发的开源监控系统。与其他监控系统(如InfluxDB和Graphite)一样,Prometheus将其所有数据存储...

1K00
来自专栏逸鹏说道

Javascript缓存投毒学习与实战

0x00 起因 不久前@三好学生师傅买了一个wooyun wifi,然后聊到了缓存投毒: ? 然后看到wooyun wifi的这个说明: 默认情况下该功能附带缓...

46750
来自专栏Unity

天天德州-海外版-Unity多语言配置实现

不同类型的文本实现不一样,思路是一致的,首先生成本地配置描述,在运行时脚本根据语言类型读取配置数据。

65730
来自专栏coding...

跨平台移动开发 Flutter 初体验安装flutter安装VSCode新建Flutter工程Tips

打开 Terminal 先cd到你需要安装的目录下, 我这里直接在 ~ 个人目录下

20730
来自专栏惨绿少年

ansible服务部署与使用

第1章 ssh+key实现基于密钥连接(ansible使用前提) 说明:    ansible其功能实现基于SSH远程连接服务 使用ansible需要首先实现...

55500
来自专栏吴柯的运维笔记

如何用Rysnc实现数据同步?

Rsync(remote sync) 是UNIX及类UNIX平台一款数据镜像备份软件,它不像FTP等其他文件传输服务那样需要进行全备份,Rsync可以根据数据...

419130

扫码关注云+社区

领取腾讯云代金券