Chrome plug-in development record (2)

This time the problem is more serious. The customer opens the link of 720yun in the full screen of the touch screen, such as this: https://720yun.com/t/e33jvs4aeO8,
um, it looks good, touch it with a finger, hey, how slippery Do not move? Two fingers together, no, five fingers together, still no, what's wrong with this thing? Just deliver something like this to scare me? ! !
When the customer's father roared, the earth would tremble three times!
I was so scared that I went to the scene to check the problem on Christmas Eve. After verification, on the 720yun.com platform, the touch attribute of the device is completely invalid. It can only slide up and down, but not left and right. It is completely a large-screen computer! Changing all kinds of common and uncommon operating gestures on the spot can’t slide the interface. The gestures, mouse and other settings in the system settings have no effect. Contact the after-sales engineer of the manufacturer. After talking for a long time, the other party can’t understand what this is doing. The link said in the past that they would not know the results until their test engineer finished the test next week...
It seems that I am afraid that I will freeze here, and it is cold and windy in the middle of the night, and there is no one in the field!
Open this link with a mobile phone, and the mobile phone can slide freely. Quickly call out the browser developer tools, responsive mode, choose iphone6, the hopeful... Frustrated! Tried many times, no way! I can't take it anymore, I chose the ipad, and F5 to death, it's a miracle that I can slide it! ! ! Hurry up and change back to iphone6, refresh it again, it’s okay, my God, I felt so happy at that time, just as happy as the girl who received an Apple on the street tonight! So I packed up my things and prepared to go home, and there was something to be said for this matter!
When the 720 cloud platform detects that the client is a PC device, it will automatically block the left and right sliding operation of gestures, and only supports left and right mouse clicks; when it detects that the client is a mobile device, it will block mouse input and enable Gesture sliding, you can just slide with one finger. Then our solution is to find a way to make the platform task me a mobile device, so that the platform supports my gesture sliding operation! To pretend to be other devices, it is naturally the user-agent keyword, write a plug-in, change the browser user-agent, so there is this plug-in development record, two!

Let's get to the point.

To change the user-agent of chrome through a plug-in, there is a key object that must be understood: webRequest:
insert image description here
key life cycle:
insert image description here
detailed description of each life cycle... there are too many, detailed technical documents are not here, you can read it everywhere on the Internet, such as : http://www.kkh86.com/it/chrome-extension-doc/extensions/webRequest.html
https://www.cnblogs.com/developer-ios/p/5816381.html

Here my plug-in is also very simple, the key code is as follows:

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"]
     );

Run it, and report an error:
insert image description here

It turns out that the chrome object must exist in the js introduced in the background way,

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

And at this time, using console.log can't output information on the console. The research is not in-depth, and I don't know the reason.
Ok, fix that and run, well, it looks ok.
Later, I found this plug-in: User-Agent Switcher, http://www.pcsoft.com.cn/soft/36355.html
I tried it, the function is quite powerful, very good.
I installed the equipment in the afternoon, and the operation is very smooth. I think the customer's father will not yell this time.
This is really an operation that is obviously not supported by the device, and it is really frustrating to think of various ways to achieve it tactfully!

Guess you like

Origin blog.csdn.net/AJian759447583/article/details/85255716