I'm creating my first chrome extension. My aim is simple, on a certain webpage, I want to hide an element with id someid.
I've created a background page, which for now selects the element with id someid
and alerts it to the screen. Problem is, the value of ele is null.
Tried $("#someid").hide(); as well, no luck.
Is there something special I need to do to interact with the DOM in a tab? I alerted
tab.url and that shows the right url.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
<script>
$(document).ready(function(){
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
if(changeInfo.status == "complete")
{
if(tab.url.indexOf("somedomain.com") > -1)
{
chrome.tabs.getSelected(null, function(tab){
var tabUrl = tab.url;
chrome.tabs.executeScript(tab.id, {file: "background.js"},function({
var ele = document.getElementById("someid");
alert(ele);
});
});
}
}
});
});
</script>
</head>
<body></body>
</html>
As Stan pointed out, the problem was improper context. I used a content script and that fixed the problem. thanks!
Related
I made a script (jquery) in an html document, which does a search in a list (li) what was typed in a box (input). It happens that when the file is saved locally (localhost), the script is executed and works normally. However, when I send the page to remote hosting, the script stops working, not performing the search and not showing the expected result. Does anyone know what could be causing this problem?
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#txtBusca").keyup(function(){
var texto = $(this).val();
$("#ulItens li").css("display", "block");
$("#ulItens li").each(function(){
if($(this).text().toUpperCase().indexOf(texto.toUpperCase()) < 0)
$(this).css("display", "none");
});
});
});
</script>
I have a page that I work on daily and I need to look through the page for text that has HTML of:
<tr style="background-color:#33FF00">
How can I use CSS to auto navigate to that color or HTML code when the page loads?
Is there a way?
I cannot edit the html as it's not hosted locally and I don't have access to write access, only read.
I am currently using Stylebot to modify the css for my own display purposes and want to know if I can do the same to auto navigate to that colored section.
If there is a way similar to using style bot but for HTML like userscripts etc, I am not familiar enough so if you have a workaround any tutorial would be great to show me how to implement it.
Thanks!
UPDATED
Copy and paste the code below into a text file and save it as an html file. Then open it in a browser.
This code loads the target page from the host into the 'result' element, then uses some post-load javascript to navigate to the colored tr elements. If the page requires scripts on external stylesheets, etc., these need to be loaded explicitly.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$(document).ready(function(){
var sourceUrl='https://en.wikipedia.org/wiki/Main_Page';
var sourceScript='https://en.wikipedia.org/wiki/Main_Page';
$( "#result" ).load(sourceUrl, function() {
$.getScript(sourceScript, function(){
alert("Script loaded and executed.");
});
$('html, body').animate({
scrollTop: $('tr').filter(function(){
var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
return color === "#33ff00";
}).position().top
}, 100);
});
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
from jQuery scroll to element
and JQuery Find Elements By Background-Color
UPDATE 2
Or, in an iFrame (but only works if you are on the same domain as the target page)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function onLoadHandler(){
var $iframe = $("#result").contents();
var trs=$iframe.find('tr');
$iframe.find('html,body').animate({
scrollTop: trs.filter(function(){
var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
return color === "#33ff00";
}).position().top
}, 100);
};
</script>
</head>
<body>
<iframe id="result" src="FRAMESOURCE" style="top:0;left:0;width:100%;height:700px" onload="onLoadHandler();"> </iframe>
</body>
</html>
UPDATE 3
If none of these work, try: 1) load your page in a browser, 2) open Developer Tools, 3) go to the Page Inspector or Elements tab, 3) Ctrl-F and search for your color string ('#ddcef2'), 4) right-click the first highlighted element in your search results and select "Scroll into view"
Try and see if that does the trick:
* {
display: none
}
[style*=background-color:#33FF00] {
display: table-row
}
I have a large application that I want to convert from NATIVE to IFRAME sandbox now that NATIVE is deprecated. The general flow of the application is as follows: The user fills out a form on the beginning page and presses a Begin button. The beginning page is then hidden, and based upon values from the first page, the user is then shown a new page. My problem when using IFRAME is that the new page is never shown. It works as expected in NATIVE mode. I have created a simplified script that exhibits the problem. Please help me understand what I am forgetting or doing wrong.
Code.gs
function doGet() {
Logger.log('enter doget');
var html = HtmlService.createTemplateFromFile('BeginHeader').evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
function include(filename) {
Logger.log('enter include');
Logger.log(filename);
var html = HtmlService.createHtmlOutputFromFile(filename).getContent();
Logger.log(html);
return html;
}
Javascript.html
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
<script
src="https://apis.google.com/js/api.js?onload=onApiLoad">
</script>
<script>
function showForm(hdr) {
console.log('enter showform');
console.log(hdr);
console.log('hiding first page');
document.getElementById('beginDiv').style.display = 'none';
var el = document.getElementById('recordDiv');
el.innerHTML = hdr;
console.log('showing new page');
el.style.display = 'block';
}
function oops(error) {
console.log('entered oops');
alert(error.message);
}
</script>
<script>
$(document).ready(function() {
console.log('begin ready');
$("#beginForm").submit(function() {
console.log('enter begin submit');
//console.log('hiding first page');
//document.getElementById('beginDiv').style.display = 'none';
console.log('including page 2');
google.script.run
.withSuccessHandler(showForm)
.withFailureHandler(oops)
.include('Page2');
});
});
</script>
BeginHeader.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="beginDiv" style="display:block">
<p>Click on Begin. </p>
<form id="beginForm">
<input type="submit" value="Begin">
</form>
</div>
<!-- results of content being filled in -->
<div id="recordDiv"></div>
<?!= include('Javascript'); ?>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<body>
<p> This is page 2. </p>
</body>
</html>
There is no point in ever using a button of the "submit" type, unless you want to force the form to make an HTTP Request, and reload the application. That's what a "submit" type button does. It causes the page to be reloaded. The "submit" type button is meant to work together with a form in a certain way. It causes a GET or POST request to happen. That's what the problem is. So, you'll need to reconfigure things a little bit.
Just use a plain button.
<input type="button" value="Begin" onmouseup="gotoPg2()">
I created a gotoPg2() function to test it:
<script>
window.gotoPg2 = function() {
console.log('enter begin submit');
//console.log('hiding first page');
//document.getElementById('beginDiv').style.display = 'none';
console.log('including page 2');
google.script.run
.withSuccessHandler(showForm)
.withFailureHandler(oops)
.include('Page2');
};
</script>
If you use that, they you don't need the $(document).ready(function() { etc. code anymore. And, if you don't need that code, then you don't need to load jQuery.
Unless you are using jQuery for other things, then you don't need:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
The NATIVE mode was probably blocking the intended usage of the "submit" request. That's why the code in NATIVE was working. IFRAME allows things to work as they are built and intended to work, which means that the page was probably trying to be reloaded, and an error was occurring. I was getting a 404 page error in the browser console.
I'm currently (in HTML) trying to load a link in a new tab or window right when the website is opened, without anyone clicking on a link on a page. I've so far managed to open a link automatically and open a link in a new tab and window, but not at the same time. Can someone help me with this? I also don't mind using another language if this is not possible in HTML.
First question why do you want to do that?
Secondly You can use javascript for that.
function OpenInNewTab(url) {
var win = window.open(url, '_blank');
win.focus();
}
And in your HTML put
<body onload=OpenInNewtab('http.....')>
.......
</body>
Here is the code to open a link in new tab on page load using jquery.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
jQuery(document).ready(function () {
newTab();
});
function newTab() {
var form = document.createElement("form");
form.method = "GET";
form.action = "http://www.google.com";
form.target = "_blank";
document.body.appendChild(form);
form.submit();
}
</script>
</head>
<body>
<a class="my-link">link</a>
</body>
</html>
If you want to open a new page in new window once the main page of the website is loaded, try this by calling the onload javascript function in the body:
<body onload="myfunction()">
And then in myfunction() you can call try this !
window.open(url, '_blank');
I need to apply this line:
target="_blank" onclick="exoMobilePop();"
To all links on my Drupal 7 website.
Can anybody help me with this?
If you really need this functionality on links and not on the whole document you can go with this solution.
...
<script>
(function() {
var linksOnPage = document.querySelectorAll("a");
var link = "";
for (var i = 0; i < linksOnPage.length; i++) {
link = linksOnPage[i];
link.setAttribute("target", "_blank");
link.addEventListener("click", function(e){
exoMobilePop();
});
}
})();
</script>
</body>
</html>
But be careful. This will address literally every link on your page. Including administrative links, menu items, etc. If it's not desired, you can replace "a" with a more specific selector.
Try the <base> tag. The target attribute specifies the default target for all hyperlinks and forms in the page. Place the tag in the <head> section.
Note: This attribute can be overridden by using the target attribute for each hyperlink/form (if needed).
<head>
...
<base target="_blank">
...
</head>
Use JavaScript (or jQuery) to handle and reroute the click events. JSFiddle
JavaScript
document.addEventListener("click", function (e) {
// e.preventDefault(); // Prevent a link from following the URL
exoMobilePop();
});
jQuery
$("body").on("click", "a", function (e) {
// e.preventDefault(); // Prevent a link from following the URL
exoMobilePop();
});