I noticed the Chrome console gave an error when the following was typed:
$("body").hide();
Is there a solution to modify HTML elements when working with Google Apps?
Jquery can't be accessible in browser console directly, because it's a external library file & doesn't come inbuilt within browser.
So to access the Jquery from console, you can run below line in console;
var jqlib = document.createElement('script');
jqlib.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jqlib);
Here we get the script tag of current page & injecting JQuery library into it.
After running above lines, you can execute your code;
$(body).hide();
Related
So I have a webpage with a function applaud. When I call it from the console, I get the normal return:
applaud(3004,1935);
undefined
However, if I use CTG plugins (simple plugin to run a js script), with that code
applaud(3004,1935);
I get the following error in console:
3VM5444:1 Uncaught ReferenceError: applaud is not defined
at <anonymous>:1:1
(anonymous) # VM5444:1
and function isn't working.
Do you know how I can use it?
Thanks.
I know this is a bit outdated, but I can answer this. (I made the extension in question.)
Chrome Extensions by default insert scripts into a webpage in a different context than the rest of the page. This is for security reasons. If you'd like to run code in the context of the webpage, you'd need to use a little workaround.
In the script that the Chrome Extension injects, have that inject a <script> tag into the body of the page. Then that script will be loaded and be able to execute the functions like you can in the console.
Here's a demo of code that can do what I'm talking about:
//Create a new script element.
var script = document.createElement("script");
//Get the function you want to inject as a string and add it to the script.
script.innerHTML = injection.toString();
//Add a call to that injection function so it'll automatically execute once it's injected.
script.innerHTML += "injection();";
//Inject that newly created script into the body of the page.
document.body.appendChild(script);
//The contents of this script will be run inside the same context as the webpage.
function injection(){
applaud(3004, 1935);
}
I have been trying to turn a bookmarklet into a small development environment that I can use for testing some javascript and sending commands easily on the fly and updating the code on my server quickly to see the result. This has half way worked using method's I have found in this site and google however it doesn't seem to work very well and sometimes randomly doesn't work. The end goal is to have a bookmarklet that I can click on from any page and it loads a javascript file I have saved on my server. I have created the following two bookmarklets to try and get this working:
Failed Method 1:
javascript:
var s = document.createElement('script');
s.type='text/javascript';
document.body.appendChild(s);
s.src='//smewth.com/test.js';
void(0);
Method 1 in one line bookmarklet form: javascript: var s = document.createElement('script'); s.type='text/javascript'; document.body.appendChild(s); s.src='//smewth.com/test.js'; void(0);
Failed Method 2:
javascript:(
function(){
var imported = document.createElement('script');
imported.type='text/javascript';
imported.src = 'https://smewth.com/test.js';
document.head.appendChild(imported);
})();
Method 2 in one line bookmarklet form: javascript:( function(){ var imported = document.createElement('script'); imported.type='text/javascript'; imported.src = 'https://smewth.com/test.js'; document.head.appendChild(imported); })();
I got method 1 by decomposing the kickass bookmarklet from (http://kickassapp.com/). The actual one I got from their site works fine on my browser no problems. I even did a direct substitution from the URL they were using to load with my URL. The second method I found while searching on this site and this actually worked for a small while and stopped working for some unknown reason (maybe different browsers). I tried appending this script object to the head and the body on each of them with no improved results.
I created the test.js script just for this post and it contains a simple alert box statement:
$$ [/]# cat test.js
alert("hi");
$$ [/]#
NOTE: When I do this with the code embedded within the the bookmarklet itself without appending it to a head/body object then it works fine such as this:
javascript:%20alert("hi");
I did notice that with both of these methods, the code is actually getting injected into the page however I am not seeing the code is ever executed when I click the bookmark. Does anyone know which method is the best or something similar to do this so I can have javascript load through a page which I update on a remote server (reliably)? Maybe I need to attach the to a different object?
Thank you for your help.
-Jeff
UPDATE: I am showing this works while this site is loaded but it doesn't work when your at a site like google.com. Not sure what the difference is or how to accomodate this, google.com has a head and a body object too. I am showing this works in some sites and in some it doesn't.
I figured this out. There were two things occurring which accounts for the intermittent symptom of this issue. The first issue was that the site which was hosting the code was on a self-signed certificate. I began to notice the issue was occurring only when trying to run this from within secure sites. Then in Chrome I saw a error show up in the console. It would be nice if Firefox gave me a error on the console or something as this was the root of the issue. The second thing I had to do was disable OCSP in Firefox as I used a free certificate for testing purposes.
I also had to use method 1 as described above. Firefox and Chrome both did not like the anonymous function call for some reason. From now on I will refer to Chrome to look for errors in the console as Firefox has proven itself not very useful for this.
For my debugging, I'm trying to load a javascript file from the console. I've tried several options:
var ns = document.createElement("script");
ns.type = 'text/javascript';
ns.src = 'http://localhost/test.js';
document.getElementsByTagName("head")[0].appendChild(ns);
and also:
$.getScript('http://localhost/test.js');
Neither worked as expected. I can see the <script> tag added in the DOM tree but the script is not execute and the Network tab in the developer's tools does not show the script being loaded.
How can I get it to execute?
UPDATE: Interestingly, the code works fine on Chrome, but not on FireFox (I'm on Ubuntu 12.04).
Is there a command line tool that allows you to get the text of the JavaScript interpreted source of a web page similar to how you can see the interpreted code in FireBug on FireFox?
I would like to use CURL or similar tool to request a web page. The catch is I would like to view how the code has been modified by JavaScript. For instance if the dom has been changed or an element has been modified, I would like to see the modified version. I know FireBug does this for FireFox, but I am looking for a way to script the process.
Have you looked in to tools like PhantomJS for running the tests? Many of them support running a "headless" browser, which lets you render pages and run JS against the rendered page without having to actually run a browser. It doesn't use curl, but I don't see why that should be a requirement.
For instance:
$ phantomjs save_page.js http://example.com
with save_page.js:
var system = require('system');
var page = require('webpage').create();
page.open(system.args[1], function()
{
console.log(page.content);
phantom.exit();
});
I'm creating a Chrome extension that appends a script tag to a page, and then uses code defined in that external script:
$('body').append('<script src="..."></script><script>console.log(SomeObject)</script>');
SomeObject is defined in the external script, so I should be able to access it, right? Well, I can't, as I get an "undefined" error.
I even tried using head.js to load the external script and execute a function after the script is loaded, to no avail.
If I open the Chrome console, I can access the damn object just fine!!!
I tried both a content script and executeScript inside a background page to no avail. On both, if I use console.log(window), I can inspect the window object in the console, and SomeObject is nowhere to be found. If I inspect the window object on the Chrome console, there it is!
Are injected scripts sandboxed somehow or what gives?
Thanks!
This is what finally worked:
var script = document.createElement('script');
script.src = "...";
script.addEventListener('load', function() {
// SomeObject is available!!!
});
document.head.appendChild(script);
I wonder why none of the other methods worked...
I bet the script just isn't loaded when you call it right away, does this work:
<script src="..."></script><script>setTimeout(function() {console.log(SomeObject)}, 3000)</script>
So it seems the answer is you can't, due to security restrictions :(
I had to hack my way around it by using an iframe (oddly, the iframe can access its parent document).