首先需要明白的是chrome app不是B/S的项目，而是C/S的架构，所有东西都会尽可能的写在客户端，一些外部的文件都是不允许直接访问的或者调用的。起初的时候以为chrome app就是一个浏览器封装访问web端的程序，这种思路是不对的，开发一段时间后发现chrome app其实就是完全就是写html+css+javascript了，跟我们常用的mvc设计模式差了去了……
由于一直是做web开发的，所以有些思路和一些问题要纠结好久才能找到应对方法，最麻烦的一点就是不能直接引用远程文件、图片、js等等
- 各种报错，比如提示window.toolbar,window.menubar等等不可用，也不知道是引入哪个js导致的报错
解决方法：忽略，或者覆盖这些方法 - window.localStorage 不可用，解决方法： 用chrome.storage.local替换，同时需要在manifest的permission中加上“storage”
- alert不可用，继续覆盖，做一个自己的alert
<pre>
window.alert=function(str){
$("#alert_dialog").removeClass("hide")
$("#alert_dialog_content").text(str)
$('#j-mask').removeClass('hide');}
</pre> - 不能加载远程图片，只要src是远程的，就js报错 - -，解决方式是下载到本地，并替换：
<pre>
var xhr = new XMLHttpRequest();
var remote_url = obj.attr('src');
xhr.responseType = 'blob';
xhr.onload = function() {
var local_path = window.URL.createObjectURL(xhr.response)
obj.attr('src',local_path)
restore_img_path(url,local_path)
}
xhr.open('GET',remote_url , true);
xhr.send();
//为了不看到那么多js报错，最好把远程的图片地址存在其他字段，不要存在src里面，然后批量去找到并下载图片，再一一替换路径
</pre> - 由于我们可能会重复很多次使用同一张图片，而使用第四点的方法，每一张图片都会缓存到本地，然后不重复的去命名，导致效率会很低下影响速度，于是我做一个自己的缓存机制：
在storage.local下面加一个images属性，存储所有(远程:本地)的json数据，每次在替换路劲前在images里找一遍，如果已经缓存过了，那么直接调用后面存储的本地地址，就不用再去远程重复下载了
<pre>
var restore_img_path = function(url,local_path){
if(chrome.storage.local.images==null){ chrome.storage.local.images = {} }
chrome.storage.local.images[url] = local_path
}
var get_local_img = function(url){
if(chrome.storage.local.images==null){ chrome.storage.local.images = {} }
return chrome.storage.local.images[url]
}
</pre>
可能是纯B/S开发做久了，做一段时间chrome app感觉真的挺神奇的，根本停不下来~
欢迎有兴趣的小伙伴一起研究
网友评论