Add HTML when a certain checkbox is checked - javascript

I want to add HTML to a page a certain checkbox is clicked (right now it's Reddit's 'Remember Me' checkbox, but in the future I'm want it to work with more checkboxes). I have made this content script, but I have no idea if it's doing anything to the opened chrome tab.
\\content_script.js
$(document).ready(function() {
var inputTable = document.getElementByTagName('input');
for(var i=0; i<inputTable.length; i++){
if((inputTable[i].getAttribute('type')=='checkbox') && (inputTable[i].getAttribute('name')=='rem')){
var rememberMe = inputTable[i];
}
}
document.addEventListener('DOMContentLoaded', function () {
rememberMe.addEventListener('change', changeHandler);
});
}
function changeHandler(){
if(rememberMe.checked){
var remTrack = chrome.extension.getURL ("rememberme.htm");
document.body.insertBefore (remTrack, document.body.firstChild);
}
else{
}
}
rememberme.htm is the html that I want to add containing the mp3 that I want to play (Will this work if the page isn't necessarily in HTML5?).
<!DOCTYPE html>
<html><head>
<title>Remember Me</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="HelloWorld.js"></script>
</head><body>
<audio autoplay loop>
<source src="remember.mp3" type="audio/mpeg">
</audio>
</body></html>
From what I've been reading it seems like I should just make the content script call whatever javascript that I want the open chrome tab to run, but I don't know how to do this while also inserting HTML into the open chrome tab. Any help is appreciated, and if the tag won't work if the page is not in HTML5 then what is the easiest way to play the mp3 in javascript?

Reddit is my favorite page, I guess that Redditors should stick together, so here's your script refactored.
It appends a track with 'God Save the Queen' played by United States Navy Band to Reddit homepage after clicking remember me button. When specifying audio source you need to give an url where the track is located, just like with images. You also don't need to add head and body, and the way you are fetching your html it is mistaken, you're actually getting only an url not html of your extension.
window.onload = main();
function main() {
var elem = document.getElementById('rem-login-main');
elem = addEventListener('change',changeHandler);
}
function changeHandler () {
var yourAudio = document.createElement('audio');
yourAudio.src = "http://upload.wikimedia.org/wikipedia/commons/d/de/United_States_Navy_Band_-_God_Save_the_Queen.ogg";
yourAudio.controls = true;
yourAudio.autoplay = true;
var parentNode = document.getElementById('header');
parentNode.insertBefore(yourAudio);
}
To test it go to Reddit, click F12, open chrome browser devtools console, within devtools go to tab sources, find tab snippets, right click, create new snippet, copy paste this code, save it, click play button on the right (it says 'run snippet' when you hover over it). If you want to make it an extension you need manifest.json.
Hope it works, don't remember to upvote or accept an answer if you find it useful.

Related

HTML with JS not working properly in some browsers

The code below which I found here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var desktopFallback = "https://youtube.com/watch?v=4KnNVK-udTU",
mobileFallback = "https://youtube.com/watch?v=4KnNVK-udTU",
app = "vnd.youtube://4KnNVK-udTU";
if( /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
window.location = app;
window.setTimeout(function() {
window.location = mobileFallback;
}, 25);
} else {
window.location = desktopFallback;
}
function killPopup() {
window.removeEventListener('pagehide', killPopup);
}
window.addEventListener('pagehide', killPopup);
};
</script>
</body>
</html>
Is supposed to open youtube app based on the device. If it's a mobile device's browser through which the file was opened, the video must open up in the app. The code works fine in browser like FireFox. But it is not working on chrome. The app is not being opened, instead the browser version of youtube is being opened. That implies the mobilefallback link is being called, which is not I want.
And also if clicked from somewhere it works fine. The problem is only with Chrome. I don't know if it's some kind of chrome feature...but this is not what I need. Any help?
I can use any kind of solution. Even some other way to open up links like vnd.youtube://4KnNVK-udTU this directly in app.
Sorry if this info is not enough...I'll provide whatever it takes for you to help me out. ThankYou :)

Edit page HTML through external Javascript in a Chrome Extension

I'm working on my first extension ever and I'm somewhat stuck with it, so I'd like the community to give me some orientation on how to do it.
What I want to do is a basic Tab manager, which in first place should (1) read all the open tabs in the browser, (2) display them in a webpage, and (3) allow reordering in the webpage and reflect that in the browser itself.
UPDATED
So far I've already done (1) with the following code in a file named eventPage.js:
chrome.browserAction.onClicked.addListener(function(activeTab){
var newURL = "main.html";
chrome.tabs.create({ url: newURL });
});
chrome.tabs.query({}, function(tabs) {
console.log(tabs);
for (var i=0; i<tabs.length; i++) {
var tabURL = tabs[i].url;
console.log(tabURL);
writeURL(tabURL);
}
});
function writeURL(tabURL) {
var node = document.getElementById('div1');
node.innerHTML = '<p>' + tabURL + '</p>';
}
Where I'm having problems is with (2) because I don't know how to display the information of the tabs in the newly opened main.html; as far as I understand and tested, I can't add script content in the body of the main.html file.
UPDATED
The main.html file at this point doesn't do a thing, what i'd like to do is print all far just
<!doctype html>
<html>
<head>
<title>Tab & Window Manager</title>
<script src="eventPage.js"> </script>
</head>
<body>
Just testing
<div id="div1">
<p id="p1">This is part of the native HTML.</p>
</div>
</body>
</html>
The output I get so far is:
just the last tab, which actually is the extension tab, but I want all tabs to be listed.
So, how can I display all the tabs information in the newly opened html file and what's the best way to do it? I haven't found any example or guide about this specific use case.
Any help will be greatly appreciated.

I want to do function at open Chrome with web site Javascript

I'm new at Javascript and I have a question.
I want to at start if I open Chrome and web site to do my function.
I want to every time do this function if I open Google Chrome!
I have adblock, and I want if every time I open this web site how2play.pl I want to delete this window scr.hu/0qbal/i9wa2 with code scr.hu/0qbal/gs9sy like in console paste document.getElementById('sdf09-8e9daf9e854f26f98cabf235ad8343cb').style.display = "none";
Please explain step by step.
<!doctype html>
<html>
<head>
<title>Testing</title>
</head>
<body>
<script type="text/javascript">
window.onload = function()
{
alertme('this works');
};
function alertme(text)
{
alert(text);
}
</script>
<button onclick="alertme('you clicked me');">Click Me</button>
</body>
</html>
When the page is done loading or if you click on the button, the code will run a javascript function that will display an alert box.
How it works
In the javascript there is a window.onload = function() -- which allows you to run any function you want immediately when the page is done loading (in this example it will run the alertme('this works');)
When you look at the button you will see that the button contains alertme('you clicked me');
That is also a function that executes when the button is clicked.

JavaScript isn't loaded when using link element

Im trying to make a website with JavaScript popups. Basically, when you click a link an alert or prompt comes up saying "You are now entering the [enter webpage name here] section."
For some reason, when I click the link, it will open the page but ignore any JavaScript! Here is the basic code:
HTML:
<html>
<head><link rel="text/javascript" href="effects.js" /></head>
<body>
Click here
</body>
</html>
JavaScript (effects.js):
function common_lang() {
var enterCommon = prompt("You are now entering the Common Languages section.");
}
I don't get why this won't work! Does anyone have any ideas? Also, is there a way to make this more efficient? And I need the file in the same window so I can't use any window.open jazz. But efficiency isn't a priority, remember!
You should use the script tag instead of link
<script type="text/javascript" src="effects.js">
First you need to change the link tag to script like:
<script type="text/javascript" src="effects.js"></script>
Second, this is because you are using the href attribute so the link just redirects you to common_code.html
if you want to navigate to the link based on user prompt selection you can do it like:
Click here
function common_lang() {
var enterCommon = prompt("You are now entering the Common Languages section.");
if(enterCommon) {
var a = document.createElement('a');
a.href = "common_code.html";
a.dispatchEvent(new Event('click'));
}
}

Testing if an upload field will accept "click"

So, I would like to be able to have people click on a link, and the an input field with a file will open. But I only want this to happen if the browser has support for it. As pointed out in this answer, chrome supports this. Firefox 3.6 does not, but Firefox 4 should.
I know you can frequently test for support of features in javascript, but I'm unsure how to test for this feature.
If you'd like to see what I mean, the below code shows the feature when clicking on the link. You can also play with this on my page.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Upload Field Click Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var clicker = document.getElementById('clicker');
var uploader = document.getElementById('uploader');
clicker.addEventListener("click", function(e) {
uploader.click();
e.preventDefault();
}, false);
});
</script>
</head>
<body>
<form>
<input type="file" id="uploader">
</form>
Should click the uploader
</body>
</html>
Things that do not work:
testing !uploader.click
seeing if uploader.click() throws an exception
You could use JQuery to dynamically write the HTML into the document at the appropriate place
$("#mylinkID").after('Whatever');`
and the link would be added after the element that contained the ID "mylinkID". If no support for JS, the link doesn't get displayed.

Categories

Resources