chrome插件开发记录（二）

这次的问题比较严重了，客户在触摸屏全屏中打开720云的链接，比如这个：https://720yun.com/t/e33jvs4aeO8，
嗯，看起来还不错，用手指一摸，咦，怎么滑不动？两个手指一起，不行，5个手指一起，还是不行，这玩意儿什么毛病？就交付个这种东西来唬我？！！
客户爸爸一声吼，地球都要抖三抖！
吓得我平安夜里屁滚尿流出到现场检查问题。经查证，在720yun.com平台上，设备的触摸属性全然失效，只可上下滑动，无法左右滑动，完完全全就是一台大屏电脑了！现场更换各种常用的不常用的操作手势均无法滑动界面，依次测试系统设置里的笔势、鼠标等设置均无效果，联系厂家售后工程师，讲半天对方听不明白这是在干嘛，叫发链接过去说要等下周他们的测试工程师测完才知道结果…
这看来看去怕是要僵到这里了，这大半夜寒风凛凛四野无人的！
用手机打开这链接，手机竟然可以自由滑动，赶紧调出浏览器开发者工具，响应式模式，选iphone6，满怀希望的…落空！试了好多遍，不行！快受不了了，选了ipad，往死里F5，卧槽大力出奇迹，竟然可以滑动了！！！赶紧换回iphone6，再刷新，也可以，我的天，当时就觉得太幸福了，就跟今晚大街上收到苹果的妹子一样开心！于是收拾东西准备回家，这事有戏了！
当720云平台检测到客户端是pc设备时，自动会屏蔽手势的左右滑动操作，只支持鼠标左键点中左右拖拽；当检测到客户端是移动设备时，就会屏蔽鼠标输入，启用手势滑动，就可以一根手指随便滑了。那我们的解决思路就是想办法让平台任务我就是一个移动设备，从而让平台支持我的手势滑动操作！要伪装成其他设备，那自然就是user-agent关键字了，写插件，改浏览器user-agent，于是就有了这篇插件开发记录，二！

下面进入正题。

要通过插件更改chrome的user-agent，有个关键对象必须要了解：webRequest：
在这里插入图片描述
关键生命周期：

各个生命周期的详细说明…就太多了，这里不做详细技术文档，网上到处都可以看，如：http://www.kkh86.com/it/chrome-extension-doc/extensions/webRequest.html
https://www.cnblogs.com/developer-ios/p/5816381.html

这里我的插件也很简单，关键代码如下：

function mod_headers(header_array, p_name, p_value) {
    var did_set = false;
    for (var i in header_array) {
        var header = header_array[i];
        var name = header.name;
        if (name == p_name) {
            header.value = p_value;
            did_set = true;
            break;
        }
    }
    if (!did_set) {
        header_array.push({
            name: p_name,
            value: p_value
        });
    }
    return header_array;
}
     
chrome.webRequest.onBeforeSendHeaders.addListener(
         function (details) {
            details.requestHeaders = mod_headers(details.requestHeaders, 'User-Agent', 'Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.76 Mobile Safari/537.36');
             return {
                 requestHeaders: details.requestHeaders
             };
         },
         {
             urls: ["<all_urls>"]
         },
         ["blocking", "requestHeaders"]
     );

运行起来，又报错：
在这里插入图片描述

原来chrome对象必须在以background的方式引入的js中才能存在，

"background": {
        "scripts": ["js/change-user-agent-720yun.js"]
 }

而且这个时候使用console.log也无法在控制台输出信息，研究不深入，也不知道是什么原因。
好，解决这个问题再运行，嗯，看起来可以了。
后来又找到这个插件：User-Agent Switcher，http://www.pcsoft.com.cn/soft/36355.html
试了一下，功能挺强大的，很不错的。
下午给设备装上，操作很流畅，想来客户爸爸这回应该不会吼了。
这真是，明明设备不支持的操作，非要想各种办法去婉转的实现，真折腾！

chrome插件开发记录（二）

猜你喜欢