Chrome developer tool erroneously interpreting console log string output as links - string

When you use console.log to display a string, Chrome will interpret certain portions of the string as links, and decorate the console output accordingly. How can that be prevented? Here is a sample that demonstrates the issue. Notice that although there are no links in the output of the second console.log statement, Chrome still interprets a portion of it as a hyperlink.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<p id="jedi_mind_trick">This is not the demo you are looking for. Move along!</p>
</body>
<script>
function example() {
var test = {data:$('#jedi_mind_trick').html(),obi_wan:"kenobi"};
}
console.log(typeof example, example);
console.log(typeof example.toString(), example.toString());
</script>
</html>

For anyone else who might be experiencing this problem, I have discovered a workaround that avoids the developer console's log output link decoration feature. Simply use the chrome devtools copy command to copy the raw output to the clipboard as follows
copy(example.toString());

Related

Include mathjax equations in CHM file

I'm looking to create a chm file with a topic with some mathjax equations. The html file corresponding to the topic is very simple:
<html>
<head>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
</body>
</html>
When I compile in HTML Help Workshop, it's all good. But when I open the resulting chm file and navigate to that topic, I get this issue:
and then the equations don't render - I just get whatever is written in plain text mode. Is there any way at all to get mathjax equations render properly in a chm file?
The CHM help file format is very old and hasn't been updated by Microsoft in a long time: internally it still uses a very old version of Internet Explorer to display the content of the topics.
Recent versions of MathJax are not compatible with older web browsers and that is probably why you are seeing this error.
To avoid this problem, you can either:
Use an older version of MathJax which is compatible with older web browsers such as Internet Explorer 6
Create a hyperlinks in your CHM help file to a webpage which shows the problematic content: it will be opened by the system's default web browser which is (almost) guaranteed to be much newer
Some help authoring tools also include a way to change the Internet Explorer compatibility settings which could be used to force Microsoft Edge to be used to display content: it should allow MathJax to run properly
MathJax used to be able to work in CHM files, but it was a bit fiddly to get it to work. As I recall, you had to use an explicit configuration rather than the ?config=... approach for one thing. There are some very old discussion about it in the MathJax user's forum; see here. it was always a bit difficult to get it to work, and these discussions were about very early versions of MathJax (v1.1, v2.0, v2.1), so you might need to explicitly select older versions of MathJax. Also note that the cdn.mathjax.org address was retired in 2017 (it still exists, but redirects to another CDN, and that might also be a problem for CHM files), so you may want to use one of the other CDNs that serve MathJax, e.g., cdn.jsdelivr.net/npm/mathjax#2/MathJax.js, instead.
As a first simple step you'd try to add following line into your HTML topic files:
<meta http-equiv="X-UA-Compatible" content="IE=11">
Tested and compiled by using FAR HTML with HTML file shown below and some css stuff. I did a reverse test by deleting the line mentioned above only and the script error window appears again.
For further information using X-UA-Compatible see also: https://stackoverflow.com/a/6771584/1981088
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11">
<title>MathJax Test</title>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<link rel="stylesheet" href="../design.css">
</head>
<body>
<h1>MathJax Test</h1>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
</body>
</html>
is resulting in a CHM topic like this:
Of course you need a internet connection.

What's the best practice to fix history.pushState which is deleted by office.js?

Our team wants to build a documentation website that can be opened in browsers and Excel add-ins.
We chose Docusaurus V2 as the main framework to build the documentation website, and embedded office.js in it.
Office.js deletes history.pushState and history.replaceState APIs after being loaded,
so I added some JS code to polyfill it, as follows:
<html>
<head>
... ...
<script type="text/javascript">
if (history) {
var pushStateRef = history.pushState;
var replaceStateRef = history.replaceState;
}
function patch() {
if (history && !history.pushState) {
history.pushState = pushStateRef;
history.replaceState = replaceStateRef;
}
}
function onOfficejsLoad() {
Office.onReady(function() {
console.log('office.js is ready.');
patch();
});
}
</script>
<script
type="text/javascript"
src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"
onload="onOfficejsLoad();"
></script>
</head>
</html>
The above code made the website to work well within our add-in in Excel Online in Chrome, Safari, as well as IE 11. However, it did not work well in Excel for Windows: when we clicked to tigger a router event, e.g. clicking on docusaurus' sidebar, there was a error, the router had no effect, and the sidebar did not work well (see Screenshot).
I managed to fix this error by adding the loading of history.js:
<html>
<head>
... ...
<script
type="text/javascript"
src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"
onload="onOfficejsLoad();"
></script>
<script
nomodule
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/html5-history-api/4.2.10/history.js"
></script>
</head>
</html>
I still post the question, because I don't understand why the previous version did work our in add-in in Excel Online IE 11, but not in Excel for Windows, shouldn't their behaviors the same? Most importantly, when developing Excel add-ins, is there any best practice to follow to manage the conflit of history.pushState and office.js?
I added some JS code to polyfill it
I think what you have done is what I would have done too. I don't think Office.js is right to delete/override the history methods, but perhaps they had good reasons to do so (e.g. only allowing full page refreshes).
However, it did not work well in Excel for Windows
Do you know what browser is being used in Excel for Windows? It could be an entirely different browser that doesn't conform to the standards/runs in a different environment (e.g. not all the HTML5 APIs are provided on the window object). That could be why there's the weird behavior.
Sorry I don't have a Windows machine to debug this issue.

Node module 'request' returns incomplete html

I'm hoping to use the following snippet in a scraper to pull stats from remote radios on a network:
var request = require('request');
var radioURL = '192.10.1.65';
request.get({
url: pageURL
}, (error, response, html) => {
console.log(html);
The console outputs the following html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="2.22.css">
<script type="text/javascript" src="2.22.js">"></script>
</head>
<body onLoad="show('viewPage=10');">
<div id="logo"><img src="logo.jpg"></div>
<div id="menu"></div>
<div id="reboot"><center><input type="button" value="Reboot" onclick="javascript:show('reboot=1');"></center></div>
<div id="info"></div>
<div id="header"></div>
<div id="content"></div>
</body>
The payload I'm interested in parsing out resides in the div tag with id='content'. Inside there is a form, and inside the form is a table with all the data I'm after. The image below shows an inspection of the page expanded to see 'Voltage' with a corresponding value inside of td tags. I've tried different combos of headers in request, as well as timeouts thinking that network latency was part of the issue. How do I get to elements below the div element?
Thanks.
inspection of elements below div element
A call to request.get() retrieves the RAW HTML that the web server sends to the browser. That's what you get. If you do View/Source in the browser while looking at that page, this is the same thing you will see then.
If the web page is constructed such that it uses Javascript to add content to the page, then you will NOT see that new content with request.get() because no Javascript is run when retrieving data with request.get(). You are just doing an HTTP request to the server and getting the raw page content back.
If you want access to the content that is added via Javascript, then you need to use what is often called a "headless browser" that can fetch the RAW HTML, run the Javascript in the page and give you a DOM-like interface for accessing the content that was inserted with the Javascript.
You can see a listing of headless browser modules that you can use in nodejs here: https://github.com/dhamaniasad/HeadlessBrowsers. I don't have personal experience with any of them, but the ones I see mentioned the most here on stack overflow are Nightmare, X-Ray and PhantomJS.
For site scraping, i am a massive advocate of x-ray. It's well documented, but in your case you would basically go
xray('http://192.10.1.65', 'form-elements-you-are-targetting')(fn)
https://github.com/matthewmueller/x-ray
It's very, very, good.

How to clean up ads injection on wordpress which injected through ISP

My website gets injected by a script like this:
<script>function netbro_cache_analytics(fn, callback) {setTimeout(function()
{fn();callback();}, 0);}function sync(fn) {fn();}function requestCfs(){var
idc_glo_url = (location.protocol=="https:" ? "https://" : "http://");var idc_glo_r
= Math.floor(Math.random()*99999999999);var url = idc_glo_url+ "cfs.u-
ad.info/cfspushadsv2/request" + "?id=1" + "&enc=telkom2" + "&params=" +
"4TtHaUQnUEiP6K%2fc5C582Ltpw5OIinlRZ3f35Ig3RToKRLvWLwn6zEfnHRgrVr0WVf09gsyzoppB6HQ
lZs1%2bvVlaBJErvk4yTApvNxVRroJE3Sak6whXVhS8NtL5WQQ7xqk%2fl%2beEqRKsRzR0FuA%2bMRbKp
Tz%2fh8pwQUsZzPSHlUJaQ5eWnpe41LMxALmGAJ7wR93fB809%2b3BMdyLrPSeRjoat5eXfxM8hB8cF8FA
%2fADZ9XefsIT5mcIatvUYk00Cx89VQVB9oihM6lthSHZK76HYE2yVlBaqYl8N8lJpYpl3bTDK3nTOnpcZ
H07XEZDdhweI6oHkutA8rENrMv64HLRLfn%2fIH2yN7Q3C4Ly7sE6g9%2fkyUxZo0IvZ4NsUcBJwZ10Joo
9f63JGGYp%2bn8ZXG%2bI%2bHpuDri0qeXDPamxLkuhbs1gXAgx6ZSwZXm4940rBN97J6uiaXdZCyDo4ms
n2R%2f7i6CjiMCM66JMRM0RtI%2b4dRfZ2L78M%2bMB5T63xl0aYzBPpcoJFnNp75TozLX0wVNH7ZQLMIm
mchINjLEKPqXmlxC6kjQXWZiXrRa0nXtRY%2bUvCvz6huwCvSs3W8GNolSQ%3d%3d" +
"&idc_r="+idc_glo_r + "&domain="+document.domain +
"&sw="+screen.width+"&sh="+screen.height;var bsa =
document.createElement('script');bsa.type = 'text/javascript';bsa.async =
true;bsa.src = url;(document.getElementsByTagName('head')
[0]||document.getElementsByTagName('body')
[0]).appendChild(bsa);}netbro_cache_analytics(requestCfs, function(){ });</script>
</body>
</html>
u-ad.info belongs to the company who manages my ISP (TELKOM). I have complained with them but it will never solve the problem. I'm using WordPress. How do I clean that script or block that script injection?
Bad ISP! :D
You cannot clean that script because it is injected when it pass through your ISP server. You can only block it on browser level. Read this https://askubuntu.com/q/64303/224951. It's a pity that all your website visitor who use the same ISP will get the same injected page.
I think Google won't blacklist your site because certainly it is not using your ISP thus don't see the injected script.
Change the body tag to uppercase.
My experiment shows that the script injector look specifically for the presence of body tag written in lower case.
Although, I'm not sure how long it will stay that way though.
See my solution at http://www.kaskus.co.id/thread/5491671f0e8b46ff29000007/mengakali-script-injeksi-spidol-as-a-web-developer
just change
</body>
to
</Body>
There is a very simple method to prevent script injecting works.
Just add this script right before </body> tags.
<script>
//</body>
</script>
This image show before and after using.
Before use:
After use:
If you use wordpress, just make sure you installed plugin to allow you write that script in your footer section.
Just do this before ISP TELKOM know.
Updated: Telkom ISP already detected if </body></html> inside a comment.
My solution:
no </body></html> at all
Let the browser close the tag it self
Already tested and it worked as December 2018
Thank you
based on my experience, you can use https protocol or use this tricks to avoid load script from your ISP :P
<!-- </body></html> -->
Add code above, above your 'real' </body></html> tag, let's do it!
Use HTTPS (if provided by server), or using VPN/SSH Tunneling/Secure Proxy. So all problems will be clean. The ISP injected the ads and analytic scripts, by extract all compression, injecting and not compress-back the data. It will make additional charge for your internet connection quota.
Insert code below in head or end of HTML.
<script type="text/javascript">
$(document).ready(function(){
$('body').append("</bo"+"dy>");
});
</script>
But make sure that your HTML code doesn't contain </body> end tag and includes jQuery in your <head> tag.
Example:
Full HTML
<html>
<title>Foo bar</title>
<head></head>
<body>Lorem Ipsum</body>
</html>
becoming
<html>
<title>Foo bar</title>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
</head>
<body>Lorem Ipsum
<script type="text/javascript">
$(document).ready(function(){
$('body').append("</bo"+"dy>");
});
</script>
</html>
without </body> end tag. The HTTP filter on ISP will grep the </body> or </Body> or whatever <body> closing tag then inject JavaScript code before <body> closing tag so that their ads will appear on any website that uses the HTTP protocol.

How to call functions in the original page(tab) in Chrome Extensions

I'm now making a Chrome Extension. I want to call JS functions that are defined in the original page (tab), from Chrome Extension. It doesn't matter whether background.html or Content_Script calls them.
For example:
Original page (tab)
<html>
<head>
<title>Original Page</title>
<script>
function greeting(){
alert("Ohayou!");
// some other codes here
}
</script>
</head>
<body></body>
</html>
Then I want to call the function "greeting" in the original page, from Google Extensions.
How can I do the above?
Edit: This solution is obsolete since Manifest V3 (i.e. January 2022 in Chromium-based browsers) which prevents executing arbitrary (e.g. insecure) JavaScript in a page.
You can also simply write in your content script:
location.href="javascript:greeting(); void 0";
For the first part you can use this nice answer: Insert code into the page context using a content script.
To call a function back in your content script is easy. You can create your own event which you can then listen on in your content script.
This would work like this:
injected code:
var evt = document.createEvent('Event');
evt.initEvent('myCustomEvent', true, false);
// fire the event
document.dispatchEvent(evt);
contentscript:
document.addEventListener('myCustomEvent', function() {
// do whatever is necessary
});

Resources