moonye

2016-08-02 21:18

让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条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。