让chrome插件在手机上跑起来

创建一个chrome的插件，并让这个插件能够作为一个app，运行在终端设备上。

创建一个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来实现这个功能，在应用启动的时候，我们来创建一个页面出来

代码语言：javascript复制

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)
        }
    });
});

书写加载页面的内容

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

代码语言：javascript复制

<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.

创建一个工程

代码语言：javascript复制

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

发布

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

代码语言：javascript复制

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

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

代码语言：javascript复制

cca prepare

调试方式可以参考这里

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

小结

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