Learning Man's Blog

Chrome Extensions —— fir.im Downloader 编写

字数统计: 752阅读时长: 3 min
2018/12/21

0x01 遇到的问题

i. WebRequest & Ajax

  1. 先放上request的生命周期图

  2. Chrome 官方处于安全考虑对于插件修改 User-Agent 的操作很敏感,但也在WebRequestAPI中提供了修改方法及示例代码

    The following example illustrates how to delete the User-Agent header from all requests:

     chrome.webRequest.onBeforeSendHeaders.addListener(
         function(details) {
           for (var i = 0; i < details.requestHeaders.length; ++i) {
             if (details.requestHeaders[i].name === 'User-Agent') {
               details.requestHeaders.splice(i, 1);
               break;
             }
           }
           return {requestHeaders: details.requestHeaders};
         },
         {urls: ["<all_urls>"]},
         ["blocking", "requestHeaders"]);
  3. 有个坑就是WebRequest修改User-Agent是不支持同步JS原生的xhr以及jquery$.ajax,貌似这个BUG没有修复过。

    个人测试大致如下,总体来说就是异步 UA 可被更改

    注:$.ajax在未设置type时等同于$.get

HTTP 请求 xhr xhr (async=false) $.ajax $.ajax (async=false) $.get $.post
WebRequest能否修改UA
  1. 同时在上面的链接中提到了declarativeWebRequest可能支持修改,然而被官方文档一句描述所终结

    Note: this API is currently on hold, without concrete plans to move to stable.

    外加一句可用性的补刀

    Availability: Beta and Dev channels only.

  2. 所以如何取舍就成了问题,当然也可使用async/await调整执行顺序

ii. content-script vs injected-script

  1. 从易用性、消息通信方面选择,肯定都是 CS > IS,放上他人总结的互相通信概览

    注:-表示不存在或者无意义,或者待验证。

    注:发现此表确认已过时,待补充

\ injected-script content-script popup-js background-js
injected-script - window.postMessage - -
content-script window.postMessage - chrome.runtime.sendMessage
chrome.runtime.connect
chrome.runtime.sendMessage
chrome.runtime.connect
popup-js - chrome.tabs.sendMessage
chrome.tabs.connect
- chrome.extension.getBackgroundPage()
background-js - chrome.tabs.sendMessage
chrome.tabs.connect
chrome.extension.getViews -
devtools-js chrome.devtools.inspectedWindow.eval - chrome.runtime.sendMessage chrome.runtime.sendMessage
  1. 但是在使用中,如果页面中的一些 dom 节点是二次渲染的,CS 去获取节点时候,在document_end之后都只会返回为空,这时候就需要动态插入js,即injectd-script

  2. 然后通信方向就成了 injected-script <<<>>> content-script <<<>>> background,原本还想把结果放到 popup 里,那通信简直美如画

iii. content-css vs injected-css

这个其实没有什么可吐槽的,就是插入时需要小心控制,很容易影响全局,何况 CSS 还写不好 Orz

0x02 开发 fir.im 下载助手

  1. fir.im 对于android/ios客户端下载逻辑有部分区分,android是直链下载,但ios需要通过同一步给予的链接并使用ios ua访问一个install.xml文件后获取最终下载链接。

  2. 而由于ajax无法修改user-agent,亦不想异步推送信息至injected-script增加复杂度,所以将下载单独剥离出来。

  3. 为了区分android直链下载还是ios解析xml下载,由于下载文件需要跨域到https://pro-bd.fir.imajax会因CORS策略导致访问失败,所以可以用ajax的成功与否来进行简单区别。

项目地址

https://github.com/sari3l/Chrome-Extensions/tree/master/fir.im%20Downloader

参考资料

  1. https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html
  2. https://developer.chrome.com/extensions/api_index
CATALOG
  1. 1. 0x01 遇到的问题
    1. 1.1. i. WebRequest & Ajax
    2. 1.2. ii. content-script vs injected-script
    3. 1.3. iii. content-css vs injected-css
  2. 2. 0x02 开发 fir.im 下载助手
  3. 3. 项目地址
  4. 4. 参考资料