chrome 扩展开发二三事

Tue, 10 Jun 2014 21:28:34 +0800

chrome 扩展可以通过 chrome.webRequest.onBeforeSendHeaders 回调来修改请求头，修改请求头部字段会在 TCP 连接发起之后，也就是这个时候 URL 已经是不能变的，这个接口也可以修改 URL，会导致一次重定向，不过貌似重定向之后携带的 cookie 会有些异常，没有细跟
那么，自然的，会想到一个问题，怎么获取请求的响应呢，对于这个问题，答案是，一般情况下，chrome 扩展无法获取请求的响应，参看，http://stackoverflow.com/questions/18534771/chrome-extension-how-to-get-http-response-body
那么不一般的情况呢，我们需要通过 chrome.devtools.network.onRequestFinished 来监听响应报文，但是，这个接口只能在 dev tools 中使用，所谓 dev tools，就是说，你需要自定义一个控制台面板，就是按下 F12 之后出来的那些 Elements, Network, Console 那一排，在那后面，自己追加一个，参看，http://stackoverflow.com/questions/10393638/chrome-extensions-other-ways-to-read-response-bodies-than-chrome-devtools-netw
写一个自己的 panel 其实不难，还是 html javascript css 那一套，通过 chrome.devtools.panels.create 来创建自己的 panel
问题是一般情况下，我们把调试信息打到 console.log 里面，这个是调试一般页面的好方法，但是，如果我们本身就要调试一个 console，那么怎么办呢，http://codemadesimple.wordpress.com/2012/11/15/debug-chrome-dev-tools-panel/，这里提供了一个思路，把 dev page 写成 options page，然后用 options page 来调，但是，如果我们的 dev page 是跟当前页面紧密耦合的，例如，我们需要调试当前页面的响应的话，这种情况，他的方法貌似就不奏效了
http://stackoverflow.com/questions/11103780/console-log-for-chrome-devtools-api，这里有一些其他的讨论，主要是重载 console 的，但是在我这儿试了试，貌似不是很奏效
所以我最后的办法是 alert
另外一个小 tips，对于 json 格式的 alert，会打 object，这个其实毛线用都没有，我也知道他是一个 object 啊，这个时候，可以 alert(JSON.stringify(xxx))，可以把 json 内容展开
如果想要在插件中发起跨域的 ajax 请求，记得在 manifest.json 中声明相关的权限
对于旧版本的 chrome，例如 chrome 31，即使你声明了跨域的权限，也没法在 dev page 中发起跨域的请求，background page 中可以
所以就需要曲线救国，使用 chrome 扩展的模块间通讯接口，把需要发起的请求包装送到可以发起请求的地方去发送，收到回复之后再送回来，相关的接口是 chrome.runtime.sendMessage 和 chrome.runtime.onMessage.addListener
chrome.runtime.onMessage.addListener 的回调函数中有一个 sendResponse 的回复用的函数，如果需要异步的使用这个函数，记得 return true，这是个坑，而且不容易发现，官方是这么说的，runtime.onMessage: The chrome.runtime.onMessage listener must return true if you want to send a response after the listener returns
近日，google 开始推送 chrome 35.0.1916.114，从这个版本开始，chrome 不再允许用户自行安装插件
上有政策下有对策，对策总结起来不外乎，不升级 chrome，把插件发布到 store，让用户用开发者模式运行
另外还有一个大杀器，https://support.google.com/chrome/a/answer/188453?hl=en，这个大杀器我还没怎么深入研究，稍后再看看这个好不好使
感言，chrome 已经不是一个浏览器，而像是一个操作系统了

-——————–

2014-6-13 11:22:07 update

http://tieba.baidu.com/p/1740161948，这里提到了用 ad block plus 作为例子的企业定制安装方式
http://dev.chromium.org/administrators/policy-list-3#ExtensionInstallForcelist，这里是 google 官方给出的一些安装说明
https://developer.chrome.com/extensions/hosting.html，这里说明了安装文件的托管方式
但是当我尝试使用这种方式进行安装的时候一直安装不上去，阅读了文档，提到 content type，也正确设置了，还是不行
于是我尝试把 ad block plus 的安装文件部署到自己的环境上，是可以安装的，于是我开始认为是我的 crx 打包的有问题
后来查到了这里，http://productforums.google.com/forum/#!topic/chrome/ayfF5WaeQqc，同学们在反应 web store 的扩展安装不上去，从这个帖子里面找到一个叫 chrome debug 的 log 文件
http://www.chromium.org/for-testers/enable-logging，这里说明了怎么打开 log
从 log 中翻查，终于找到原因，原来是扩展的 id 不同，在开发者模式下，我看到一个 id 是 a，但是，打包之后，扩展的 id 变成了 b，跟声明的不符，所以安装不上，哇靠，要是不看日志，鬼知道 id 会不匹配啊
https://developer.chrome.com/extensions/packaging，这里说了一些打包时候的注意事项
https://developer.chrome.com/extensions/autoupdate，这里说明了一些关于扩展自动升级的事项
旧版本的 chrome，例如 31，在企业安装的时候，会比较慢，一般需要等 1-3 分钟才会发起请求去拉安装文件，新版本的就快很多，一般一启动就去拉了，不知道为什么
chrome 31 的插件安装缓慢跟版本本身有关，跟网络环境无关，这个没办法

-———————–

2014-6-19 10:26:28 update

在线的 javascript 代码压缩和混淆工具有，http://closure-compiler.appspot.com/home，http://marijnhaverbeke.nl/uglifyjs，http://ganquan.info/yui/

历史评论

tonyseek (2014-06-14 16:21:10):

“修改请求头部字段会在 TCP 连接发起之后，也就是这个时候 URL 已经是不能变的” 似乎这个时候 HTTP 请求还没有建立，所以虽然 TCP 连接已建立，但是修改 Host Name 和 URL 的 Path 还是可行的吧？未亲测。

ZRJ (2014-06-16 10:56:40):

嗯，修改 url 的那个方式我没有细跟，原因是当时修改了 url 之后重新带上的 cookie 貌似有问题，所以就用了修改请求头其他字段的方式，至于说重新发起 tcp，我猜可能是 chrome 为了防止修改之后的 url 跟修改之前的 url 不是同一个目标机器上的，所以才会弃用原来的 tcp 连接而发起重新的 tcp 连接

dahaijiang (2014-06-20 09:50:15):

强大呀！

Chrome-扩展 on ZRJ | 学习笔记

chrome 扩展开发二三事

历史评论