Use TamperMonkey to solve the problem that Google cannot be used normally by the wall stackoverflow.

  html, javascript, stackoverflow

Stackoverflow is one of the tools on which Cheng Xuyuan relies for survival. The quality and accuracy of the answers to technical questions in stackoverflow search are much higher than those on other platforms. However, it is really annoying that such a good website cannot be used normally (unable to log in, comment, answer questions, etc.) because Google is blocked by the wall. In the past, VPN was still available, but now most VPN has been closed down. . Programmer’s life is really more and more sad. . So I am determined to find a way to solve this headache problem by myself.

Solutions

First, we found the reason why Stackoverflow cannot be used normally. We opened stackoverflow’s website and found that there was a prominent prompt on the top of the page:

Stack Overflow requires external JavaScript from another domain, which is blocked or failed to load.

Translation is:

Stack Overflow needs to use some JS files under other domain names, but they are blocked or failed to load.

Therefore, we should think that it should be the problem of loading some JS files.

Open the browser console, found that the console reported a lot of mistakes, as shown in the figure below:

image

We found that the first mistake was to acquirehttps://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.jsIt failed because Google was blocked and the js file under its domain name could not be accessed, and this jquery acquisition failure led to a series of js errors. Therefore, the key to solving the problem is to enable stackoverflow to load this jquery file. We can’t get the jquery file from the original address unless we break the wall or Google is unsealed, but I don’t want to use vpn (because I can’t afford it), so I wonder if I can get the same version of jquery file from other CDN and let stackoverflow load it? This is entirely possible, as long as we replace the script tag of google jquery with that of other CDN in the process of loading stackoverflow web pages. However, how to access all the pages under stackoverflow domain name to realize automatic replacement?

I came across a Chrome plugin calledTamperMonkeyThis tool allows users to create js scripts themselves and mount them on the target web page to achieve the purpose of modifying the style and behavior of the web page. So TamperMonkey should be able to achieve our goal of replacing the script tag.

Install TamperMonkey

TamperMonkey provides plug-ins for mainstream browsers (Chrome, Microsoft Edge, Safari, Operanext, and Firefox), and everyone can choose their own browser installation.

We first installed TamperMonkey plug-in for the browser, Chrome I used, but because Google was blocked by the wall (damn it*), we cannot install it through Google Web Store, so we can only download it from a third party and install it manually.

TamperMonkey download address:Download from weiyun

When the download is complete, open Chrome’s Extensions page:

image

Drag the just downloaded. crx plug-in file to the Extensions window and click Add Extension:

image

This completes the installation of TamperMonkey.

The next step is to write a script to replace the original google jquery reference.

TamperMonkey script

Let’s look at google’s jquery reference in the page first:

image

As you can see, it is just a common script tag. Now our thinking should be clear, that is, javascript should be used for DOM operation to replace the original script tag.

First, let’s open TamperMonkey and create a new script. The script reads as follows:

// ==UserScript==
// @name         GoogleJsReplace
// @namespace     https://stackoverflow.com/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match         https://stackoverflow.com/
// @grant        none
// ==/UserScript==

(function() {
'use strict';

function createScriptElement(file) {
var jsElm = document.createElement("script");
jsElm.src = file;
return jsElm;
}

function replaceGoogleScripts(){
var scripts = document.querySelectorAll('script');
scripts.forEach(function (script) {
var matches = script.src.match(/jquery\/([\d\.]+)\/jquery.min.js/);
if (matches) {
var version = matches[1];
var newSrc = 'https://cdn.bootcss.com/jquery/' + version + '/jquery.min.js';
script.parentNode.replaceChild(createScriptElement(newSrc), script);
console.log('replaced google jquery with ' + newSrc);
}
});
}
replaceGoogleScripts();
})();

The content of the script is very simple. Find the script tag of jquery in the page and replace it with a new script tag. src is the jquery address of bootcss cdn (both jquery officials and Microsoft cdn were tested and the access speed was not as fast as bootcss).

After adding the script, we also need to make some settings for the usage scenario of the script. First of all, we need to set a time point for the script to run. We hope to replace google’s jquery script as soon as it is added to DOM. However, after reviewing a large amount of data, I find that this cannot be done (if anyone knows how to do it, please leave a message). Therefore, we can only choose to execute the script at the earliest possible time so that jquery can load it as early as possible. TamperMonkey provides several execution points through configurationrun-atImplementation. We chose the earliest time point document-start, as shown in the following figure:

image

We also think that this script is only valid for stackoverflow website and we can use it@includeOr ..@matchImplementation. I chose to use match, as shown in the following figure:

image

This is the end of the story. We open itstackoverflow.com, you can see jquery has been successfully downloaded, the red prompt message at the head of the webpage has disappeared, and the website can be used normally.

image

Thank you for reading. In addition, I’m here to help my friends raise funds for love. I hope everyone can give some love. My friend’s mother is suffering from rectal cancer. She is currently receiving treatment in Beijing Armed Police General Hospital. Please leave a message and leave your contact information. Thank you in the future!

clipboard.png