Alter Youtube Video Page using Chrome Console JS & CSS - javascript

I was wondering if I could adjust the style of some html elmements on a web page using the google chrome console.
I watch podcasts on youtube. And I hate the fact that youtube suggests related videos that are miles ahead in the podcast timeline (i'm trying to catch up). I want to adjust a couple of element styles on the site.
What I want to achieve is to run the following code every time a youtube video page loads:
function youtubeVideoPageLoad()
{
youtubeFunction();
$('body').on('transitionend', function(event)
{
if (event.target.id != 'progress') return false;
$('#watch7-sidebar-contents').remove();
$('.html5-main-video').css("width","auto");
$('.html5-main-video').css("height","auto");
$('.player-height').css("height","720px");
$('.ytp-chrome-bottom').css("width","100%");
youtubeFunction();
});
}
$(youtubeVideoPageLoad);
This removes the suggested videos and makes the video and sub content bigger. Just nicer for me.
How can I make this possible because I get .css is undefined. Is this a problem because I cannot use jQuery in the console.
And how could I run this every time a youtube page is loaded?
Thanks

As rism mentioned, If you must do this via the console and using jQuery, you'll need to actually inject jQuery into the page yourself as Google does not use jQuery on the YouTube page.
Here's how:
var script=document.createElement('script');
script.src='https://code.jquery.com/jquery-latest.min.js';
var head=document.getElementsByTagName('head')[0]
head.appendChild(script);
Then you can use jQuery functions like jQuery.find('div').
You still wont be able to use the $ as YouTube has a different value assigned to $ already.
That said, I use Stylebot for this type of stuff. It's a Google chrome extension that allows you to add your own CSS to any website. It saves your custom CSS and applies it anytime you open that webpage.
I personally use it to remove unwanted google ad divs and to fix issues with page layouts when I dont own the page (jumpy menus and what not). I also use it to customize our work websites like Atlassian Jira and Confluence. It has worked well for me.
After you install it, there are a few ways to use it. The simplest is to...
Click the CSS browser action button
Click the "Edit CSS" button at the bottom of the flyout menu
Write your custom CSS in the provided box and click "Save"

I've no idea what your youTubeFunction is supposed to represent so I hope you do. As per comments $ probably doesn't mean jQuery on YouTube and this is conclusion is supported by console.log($) output. So best bet is too just use plain javascript as below or condense it into a single line:
function youtubeVideoPageLoad()
{
youtubeFunction();
var uBody = document.getElementsByTagName('body')[0];
uBody.addEventListener('transitionend', ytCustomizer);
}
function ytCustomizer(event)
{
if (event.target.id != 'progress') return false;
document.getElementById('watch7-sidebar-contents').style.display='none';
var vid = document.getElementsByClassName('html5-main-video')[0];
vid.style.width='auto';
vid.style.height='auto';
document.getElementsByClassName('player-height')[0].style.height= "720px";
document.getElementsByClassName('ytp-chrome-bottom')[0].style.width= "100%";
youtubeFunction();
});
youtubeVideoPageLoad();

Related

How To Access and Click Button PhantomJS

I am trying to automatically download a plugin on my wordpress site by implementing phantomJs. For some reason, I cannot seem access the download button (shown below)
This is the HTML code to the image (with domain sensitive information blurred out for security purposes)
So far, I have tried accessing this element by using the following code:
function() {
page.evaluate(function() {
let mainLink = document.querySelector('a[data-slug="better-wp-security"]')
mainLink.click()
})
}
Some things to mention:
This function, as it is part of a larger file, will NOT execute until the page has finished loading.
PhantomJS is executing correctly, there are no problems with permissions
The script before-hand is properly accessing the install plugins page, which I verified by capturing screenshots before trying to click.
I have defined click earlier int he file, it works perfectly.
Any ideas how I can accomplish this? Thanks all!
ADDED INFORMATION:
It seems as if the path from the main div element is as follows:
#the-list .plugin-card plugin-card-better-wp-security .plugin-card-top .action-links .plugin-action-buttons .install-now button
I imagine the solution to this question has something to do with this sequence.
I was able to accomplish this by now going after the data-slug attribute, but rather going after the href element itself. Although I can't generate my own wponce value without the use of the Rest API, I was able to search the document to find an href that contained certain parts of the url. This is the final code below:
document.querySelector('a[href*="action=install-plugin&plugin=better-wp-security"]').click()
That's it! Simple and easy!

Injecting chrome extension UI using shadow DOM

I am very new to HTML and the complete web world wrt development. I am trying to create a chrome extension and have decided upon showing the extension UI to the user by injecting a content script when the browser action is clicked. I have created an HTML page for the UI to be shown and now I need to load this HTML page as a small widget somewhere on the right top of the current page (to appear like a popup). From the different things looked up on the internet, I have decided to use shadow DOM but have no clue how to do all this. Can someone help me with a sample code to help me go ahead with this? I am not able to write a javascript that would be used as the content script to do the above mentioned job.
Edit 1: After some more reading, I found out out that we need to create the element hierarchy using javascript and cannot directly make use of any created HTML page. Is that correct? And if we have to make use of javascript, should make use of calls to document.createElement and add element? or document.write?
Just compiling reference from the responses I've got in this thread:
My Background.js:
function hello() {
chrome.tabs.executeScript(null, { file: "injectedScripts/jquery-2.1.3.min.js" }, function () {
chrome.tabs.executeScript(null, { file: "injectedScripts/a.js" });
});
}
// Supposed to Called when the user clicks on the browser action icon.
chrome.browserAction.onClicked.addListener(hello);
Injected Script a.js:
$.get(chrome.extension.getURL("popup.html"), function (data) {
//$(data).appendTo('body');
// Or if you're using jQuery 1.8+:
$($.parseHTML(data)).appendTo('body');
});
Also added popup.html and a.js paths to web_accessible_resources in manifest.json
For Chrome extension content scripts you'll only be able to inject JavaScript/CSS. You won't be able to have you're own HTML popup page like when using browserAction.
With JavaScript you'll need to dynamically create elements and insert them into the DOM. You're on the right track. You can use document.createElement or a library like jQuery to help with DOM manipulation as you get more familiar with web dev.

How to debug bookmark anchors not working because of JavaScript

I came into an issue where I thought all of my links containing anchor bookmarks (ie: "/index.php#top") were not working with FireFox. I came to the conclusion that there is some JavaScript within the Joomla 2.5 template I am developing that is killing off all of my links within my pages that contain hash marks (making them not go anywhere).
To see what I am talking about, here is my template that is working correctly:
http://www.lawsonsp.com/ink-information/textile-plastisol-inks?jtpl=8
and here is my template containing the issue:
http://www.lawsonsp.com/ink-information/textile-plastisol-inks?jtpl=9
On this page (on both templates) the image links at the top of the main content should link down to their corresponding sections below (ie: "#white")
How do I go about diagnosing WHICH Javascript code is killing the links containing hash marks? (preferably with FireFox, but with any method would be appreciated)
I recently had to tackle this exact problem. I found using jQuery to listen for and manage the event was the most effective solution. Here is a sample of the code I used:
JHtml::_('jquery.framework');
jQuery(document).on('click', '#go-to-my-anchor', function(e) {
e.preventDefault();
window.location.hash = '#my-anchor';
});
I found that, in the lower section of the jqm.init.js file, some settings are initialized and/or deactivated before JQuery mobile is loaded. A couple of these lines are commented out by default, and I found two that correspond to handling links with a hash like in my issue.
I've made sure the following lines are uncommented to allow normal link handling by the browser instead of JQuery (I'm pretty sure)
$(document).bind("mobileinit", function() {
...
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
...
});
If anyone sees a problem with this, please let me know as I am admittedly new to JS coding...

From a SWF, play youtube video in lightbox without any code external to the swf

I am trying to build a Flash banner ad which will be hosted on a site I have no access to. My client would like to have a button which, when clicked, would open a youtube video in a lightbox frame. I've been looking all around, but all I see that seems workable involves my being able to edit the html page. I am trying to do this with AS3 and Javascript. Some solutions involve JQuery, but I am not a JQuery pro.
Can anyone offer any advice?
Thanks!
lightbox is a jquery function. The only way you could do it is if the jquery library is being loaded. Let alone the plethora of crossdomain issues.
The only way I know of doing what you want would be to create the javaScript code inside of your flash app.
I would assume it could be possible to include an entire library inside this anonymous function.
var script:XML = <script>
<![CDATA[
// Your JavaScript code here
]]>
</script>;
ExternalInterface.call(script);

injecting jQuery, Colorbox, & custom code into a page via a bookmarklet

I've been inspired by the Instapaper bookmarklets that allow a page to be added to Instapaper without a separate pop-up window and without requiring a full page reload. I'd like to combine that idea with a Delicious bookmarklet for bookmarking pages.
The jQuery Colorbox plugin supports loading iframe content into colobox pop-ups, so it seemed like a good place to start. I pieced together several bookmarklets to get the code below, which seemed off to a good start, until I added the "$.fn.colorbox..." line. I can't seem to get a Colorbox to open. I even tried simplifying it to just open the Google hopepage, but no luck there either:
javascript:
function iprl5(){
var d=document,z=d.createElement('scr'+'ipt'),y=d.createElement('scr'+'ipt'),x=d.createElement('scr'+'ipt'),b=d.body,l=d.location,t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');
try{
if(!b)
throw(0);
d.title='(Saving...)%20'+d.title;
x.setAttribute('src','http://cachedcommons.org/cache/jquery/1.4.2/javascripts/jquery.js');
y.setAttribute('src','http://cachedcommons.org/cache/jquery-colorbox/1.3.9/javascripts/jquery-colorbox.js');
b.appendChild(x);
b.appendChild(y);
$.fn.colorbox({href:'http://www.delicious.com/save?url='+encodeURIComponent(window.location.href)+'&title='+encodeURIComponent(document.title)+'&v=5&',open:true,iframe:true});
}
catch(e){
alert('Please%20wait%20until%20the%20page%20has%20loaded.');
}
}
iprl5();
void(0)
Scripts are loaded in a separate thread. You need to wait until the script is loaded before you use it. Usually something like this:
var checkIfLoaded = function(){
if($.fn.colorbox){
// continue your processing
}else{
window.setTimeout(200, checkIfLoaded);
}
}
checkIfLoaded();

Categories

Resources