Develop Reference

JQuery Chrome Extension, unable to change css attribute

I have a simple chrome extension that I use on one URL to change the layout of a page very slightly (color, position etc)
I'm trying to do the same on a new URL. The code I'm using for both is the same and it works fine on one URL but not another.
This is the failing code. I've replaced the actual URL with SITE in this post.
var url = window.location.href;
if (url.toLowerCase().indexOf('SITE') >= 0) {
console.log ('Amending CSS');
$('.main-container').css({"background":"red"});
}
The element I'm trying to change is:
<clr-main-container _ngcontent-c0="" class="main-container">
Checking my console I see 'Amending CSS' but nothing appears to have changed.
The URL is accessed via HTTPS and is a firewall, so I'm not sure if there is a way they could block changes or not.
Any one any ideas on this thanks :)

I'm trying the same and it's working for snippet website check:
$(function(){
var url = window.location.href;
console.log(url);
if (url.toLowerCase().indexOf('stacksnippets') >= 0) {
console.log ('Amending CSS');
$('body').css({"background":"red"});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If the previous code didn't work with this might be due to a css on the same element with higher priority !important
check this:
$(function(){
var url = window.location.href;
console.log(url);
if (url.toLowerCase().indexOf('stacksnippets') >= 0) {
console.log ('Amending CSS');
$('body').addClass("red_bg");;
}
});
.red_bg
{
background:red !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I think you might need to wrap your code in
$(document).ready(function() {
// your code
});
This will wait for the page to be ready before it runs the code, hopefully ensuring the element is on the page.
May i also recommend the chrome extension, Stylebot. It allows you to apply custom CSS to any website, and it will remember it for future visits.

Linking bookmarklet with site's bookmark [duplicate]

Is it possible to call a javascript function from the URL? I am basically trying to leverage JS methods in a page I don't have access to the source.
Something like: http://www.example.com/mypage.aspx?javascript:printHelloWorld()
I know if you put javascript:alert("Hello World"); into the address bar it will work.
I suspect the answer to this is no but, just wondered if there was a way to do it.

There isn't from a hyperlink, no. Not unless the page has script inside specifically for this and it's checking for some parameter....but for your question, no, there's no built-in support in browsers for this.
There are however bookmarklets you can bookmark to quickly run JavaScript functions from your address bar; not sure if that meets your needs, but it's as close as it gets.

You can use Data URIs.
For example:
data:text/html,<script>alert('hi');</script>
For more information visit: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

Write in address bar
javascript:alert("hi");
Make sure you write in the beginning: javascript:

/test.html#alert('heello')
test.html
<button onClick="eval(document.location.hash.substring(1))">do it</button>

you may also place the followinng
<a href='javascript:alert("hello world!");'>Click me</a>
to your html-code, and when you click on 'Click me' hyperlink, javascript will appear in url-bar and Alert dialog will show

About the window.location.hash property:
Return the anchor part of a URL.
Example 1:
//Assume that the current URL is
var URL = "http://www.example.com/test.htm#part2";
var x = window.location.hash;
//The result of x will be:
x = "#part2"
Exmaple 2:
$(function(){
setTimeout(function(){
var id = document.location.hash;
$(id).click().blur();
}, 200);
})
Example 3:
var hash = "#search" || window.location.hash;
window.location.hash = hash;
switch(hash){
case "#search":
selectPanel("pnlSearch");
break;
case "#advsearch":
case "#admin":
}

Using Eddy's answer worked very well as I had kind of the same problem.
Just call your url with the parameters : "www.mypage.html#myAnchor"
Then, in mypage.html :
$(document).ready(function(){
var hash = window.location.hash;
if(hash.length > 0){
// your action with the hash
}
});

you can use like this situation:
for example, you have a page: http://www.example.com/page.php
then in that page.php, insert this code:
if (!empty($_GET['doaction']) && $_GET['doaction'] == blabla ){
echo '<script>alert("hello");</script>';
}
then, whenever you visit this url: http://www.example.com/page.php?doaction=blabla
then the alert will be automatically called.

Just use:
(function() {
var a = document.createElement("script");
a.type = "text/javascript";
a.src = "http://www.example.com/helloworld.js?" + Math.random();
document.getElementsByTagName("head")[0].appendChild(a)
})();
This basically creates a new JavaScript line in the head of the HTML to load the JavaScript URL you wish on the page itself. This seems more like what you were asking for. You can also change the a.src to the actual code, but for longer functions and stuff it becomes a problem. The source link can also link to a JavaScript file on your computer if targeted that way.

No; because it would make links extremely dangerous.

you can execute javascript from url via events
Ex: www.something.com/home/save?id=12<body onload="alert(1)"></body>
does work if params in url are there.

There is a Chrome extension called Bookmarklet URL (no affiliation). To append a URL with JavaScript, so that the JavaScript command is executed just after loading the webpage, one can use ?bmlet=javascript:
Example: Display an alert box
https://github.com/?bmlet=javascript:alert("Hi");
Example: Enable spell-checking while editing a GitHub README file
[Obviously, a spelling checking extension must be originally available.]
https://github.com/<username>/<repositoryname>/edit/main/README.md?bmlet=javascript:document.getElementById("code-editor").setAttribute("spellcheck","true");
On some pages, it might take some time, as the JavaScript command runs after completely loading the page. Simple commands like alert("Hi"); should run quickly.

I am a student and I have just realized my school blocked JavaScript from the address bar. It works with the "a" tag on a .html file but not on the bar anymore. I am not asking for help, I would just like to share this.

You can do one thing that is you can first open the link www.example.com. Then you can search:
javascript:window.alert("Hello World!")

Call Javascript function from URL/address bar

Is it possible to call a javascript function from the URL? I am basically trying to leverage JS methods in a page I don't have access to the source.
Something like: http://www.example.com/mypage.aspx?javascript:printHelloWorld()
I know if you put javascript:alert("Hello World"); into the address bar it will work.
I suspect the answer to this is no but, just wondered if there was a way to do it.

There isn't from a hyperlink, no. Not unless the page has script inside specifically for this and it's checking for some parameter....but for your question, no, there's no built-in support in browsers for this.
There are however bookmarklets you can bookmark to quickly run JavaScript functions from your address bar; not sure if that meets your needs, but it's as close as it gets.

You can use Data URIs.
For example:
data:text/html,<script>alert('hi');</script>
For more information visit: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

Write in address bar
javascript:alert("hi");
Make sure you write in the beginning: javascript:

/test.html#alert('heello')
test.html
<button onClick="eval(document.location.hash.substring(1))">do it</button>

you may also place the followinng
<a href='javascript:alert("hello world!");'>Click me</a>
to your html-code, and when you click on 'Click me' hyperlink, javascript will appear in url-bar and Alert dialog will show

About the window.location.hash property:
Return the anchor part of a URL.
Example 1:
//Assume that the current URL is
var URL = "http://www.example.com/test.htm#part2";
var x = window.location.hash;
//The result of x will be:
x = "#part2"
Exmaple 2:
$(function(){
setTimeout(function(){
var id = document.location.hash;
$(id).click().blur();
}, 200);
})
Example 3:
var hash = "#search" || window.location.hash;
window.location.hash = hash;
switch(hash){
case "#search":
selectPanel("pnlSearch");
break;
case "#advsearch":
case "#admin":
}

Using Eddy's answer worked very well as I had kind of the same problem.
Just call your url with the parameters : "www.mypage.html#myAnchor"
Then, in mypage.html :
$(document).ready(function(){
var hash = window.location.hash;
if(hash.length > 0){
// your action with the hash
}
});

you can use like this situation:
for example, you have a page: http://www.example.com/page.php
then in that page.php, insert this code:
if (!empty($_GET['doaction']) && $_GET['doaction'] == blabla ){
echo '<script>alert("hello");</script>';
}
then, whenever you visit this url: http://www.example.com/page.php?doaction=blabla
then the alert will be automatically called.

Just use:
(function() {
var a = document.createElement("script");
a.type = "text/javascript";
a.src = "http://www.example.com/helloworld.js?" + Math.random();
document.getElementsByTagName("head")[0].appendChild(a)
})();
This basically creates a new JavaScript line in the head of the HTML to load the JavaScript URL you wish on the page itself. This seems more like what you were asking for. You can also change the a.src to the actual code, but for longer functions and stuff it becomes a problem. The source link can also link to a JavaScript file on your computer if targeted that way.

No; because it would make links extremely dangerous.

you can execute javascript from url via events
Ex: www.something.com/home/save?id=12<body onload="alert(1)"></body>
does work if params in url are there.

There is a Chrome extension called Bookmarklet URL (no affiliation). To append a URL with JavaScript, so that the JavaScript command is executed just after loading the webpage, one can use ?bmlet=javascript:
Example: Display an alert box
https://github.com/?bmlet=javascript:alert("Hi");
Example: Enable spell-checking while editing a GitHub README file
[Obviously, a spelling checking extension must be originally available.]
https://github.com/<username>/<repositoryname>/edit/main/README.md?bmlet=javascript:document.getElementById("code-editor").setAttribute("spellcheck","true");
On some pages, it might take some time, as the JavaScript command runs after completely loading the page. Simple commands like alert("Hi"); should run quickly.

I am a student and I have just realized my school blocked JavaScript from the address bar. It works with the "a" tag on a .html file but not on the bar anymore. I am not asking for help, I would just like to share this.

You can do one thing that is you can first open the link www.example.com. Then you can search:
javascript:window.alert("Hello World!")

Sending user to their browser's Home Page using Javascript

Is it possible to get a browser's home page using Javascript?
I'd like to place a link on a page that goes to the home page set in the browser.

EDIT: simplified answer
Identify browsers and:
Call window.home(); for all browsers
Call window.location.href =
"about:home"; for IE
To do so you can use http://jquery.thewikies.com/browser/
The jQuery Browser Plugin is an addon
for jQuery that makes it easy to
uniquely identify your visitors'
browsers.
Other solutions:
<script language="javascript">
function gohome(){
if (typeof window.home == 'function'){ // The rest of the world
window.home();
} else if (document.all) { // For IE
window.location.href = "about:home";
} else {
document.write("<p>Please click on your browser's Home
button.</p>");
}
}
</script>
This is via this website. The poster states that there are issues to target Safari. This can be fixed using this other website.
Using the CSS tricks explained there you can then do:
<script type="text/javascript">
isSafari3 = false;
if(window.devicePixelRatio) isSafari3 = true;
</script>
and use this in the script above to call the correct function:
if (typeof window.home == 'function' || isSafari3)

Default home page (default new tab) URL:
Google Chrome:
https://www.google.com/_/chrome/newtab
Firefox and IE:
about:home
Opera:
opera:speeddial
Safari:
http://livepage.apple.com
To find out the default home page URL of your browser, go to your home page and type location.href in the console. Note that the browser might redirect you to your locale, so you'll need to find out the page before redirection (it happens on Chrome).
If you're using this browser detection code you can use this one-liner to get the correct url:
var homepageurl = browser == 'gc' ? 'https://www.google.com/_/chrome/newtab' : browser == 'op' ? 'about:speeddial' : browser=='sa' ? 'http://livepage.apple.com' : 'about:home'
Browser detection code JSFiddle: https://jsfiddle.net/oriadam/ncb4n882/

Not sure if there is a cross-browser solution. In IE you can use the HomePage behavior and call navigateHomePage.

For FF and the like: window.home();
For IE: location = "about:home";

window.home() didn't work for me in FF37, but this was fine:
location.href = "about:home";

Setting focus to an embedded Flash movie/HTML embed element using Javascript/jQuery

Is there a way to set focus to the embed HTML element using JavaScript? Test case: embedded YouTube videos on a page.
I have no control over the embedded Flash element. So, is there a way to set focus on it by using only JavaScript?
I read somewhere that calling the element.focus() method works only in IE. I need a browser-independent way that works in Chrome/Firefox.
Thanks!

This only works in Internet Explorer.
http://kb2.adobe.com/cps/155/tn_15586.html

I've tried to do this too, and ended up to a nice solution using jquery:
var gotoflash=jQuery("#flash_file").offset().top;jQuery("html:not(:animated),body:not(:animated)").animate({ scrollTop: gotoflash}, 1000);
where: <div id="flash_file"> flash object code here </div>

It can be done by adding flash content dynamically, for example with swfobject.

I haven't confirmed this, but you could try:
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
// Call from within another function:
thisMovie("FlashObjectID").focus();
thisMovie("FlashObjectID").showFlash();
// showFlash() is an AS3 ExternalInterface call from JS to .swf which establishes the TextInput.setFocus(); method
source: http://www.htmlforums.com/archive/index.php/t-64150.html