JS append to child only works on some webpages - javascript

Context: I have a Chrome extension that is not an app where chrome.extension.isInstalled (or whatever that code is) will work. Therefore I'm detecting the presence of whether or not my extension is installed by having the extension append a blank div into the webpage. This way, I can check if that div is present, and if so, not allow user to install again.
The problem is, both these variations of code below:
var isInstalled = document.createElement('div');
isInstalled.id = 'extension-is-installed';
document.body.appendChild(isInstalled);
document.body.innerHTML += "<div id='extension-is-installed-2'>"
Work on some pages and not others. They work on Google, REI, etc. but not on eBay, Amazon, etc. Incidentally, the one page I need it to work on http://www.projectborrow.com, it does not.
Any thoughts on why? I included my site above so that someone can try to make the append-ment work.
Thanks!

In the manifest.json file for the Chrome Extension, you have to specify which websites the extention will operate on. Then in the code for the actual extension itself, you need to specify how the extension will operate on each site.

Related

Can I inject text links within the body of a web-page

I am coding a proof of concept for my boss, I am a backend developer and haven't done javascript in years so I don't know much about same origin policy and other obstacles.
He basically has a chrome plugin and wants to replace matching keywords with links to his service, this will happen in any domain the user visits and not just one, similar to in-text advertising.
I was also wondering if it's possible to do this with an iframe, without the need of a chrome extension.
You will need a Chrome extention for that and permisions for content scripts.
It takes a lot of improvement but basically what you want to do is this:
document.onload = function(){
var textToParse = document.body.innerHTML,
linkHTML = 'Your Boss\'s Service Reference',
newText = '';
textToParse.split('Your Boss\'s Service Reference').join(linkHTML);
document.body.innerHTML = newText;
}
WARNING: The above code is a basic example of how to do it but might cause problems if the search in textToParse matches something that is HTML code. You should use jQuery and other tools for an easier/more secure way to edit text within HTML elements.

How do I check if firebug is installed with javascript?

Here it is described how to check if Firebug is installed by checking if an image of firebug exists: http://webdevwonders.com/detecting-firefox-add-ons/
But it seems to be a bit outdated, cause the images he uses there don't exist anymore in firebug.
the firebug chrome.manifest looks like:
content firebug content/firebug/ contentaccessible=yes
...
but in the whole addon I only find one png now, and that is placed in the rootfolder of the addon. But some other content is accessible, for example: chrome://firebug/content/trace.js
Ho
So, in gerneral:
How do I make an image accessible that resides inside a Firefox SDK Addon?
I program an Addon and I want to make an image ok.png available to all javascripts in Firefox.
I added the image in the data folder and added a chrome.manifest
content response-timeout-24-hours data/
content response-timeout-24-hours data/ contentaccessible=yes
But no way to call it via a URL like
chrome://response-timeout-24-hours/data/ok.png
How do the paths belong together? which is relative to which?
I created a Bug report here.
So if you want to make your add-on detectable you need another approach:
you can use a PageMod to attach a content script that would wait for a
message from your web-app and "respond" by sending another message
back to your app. you would know that if you don't receive the
response, your addon is not installed. check out the documentation for
more details:
https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-mod
I used this to make my add-on detectable.

Get URL in javascript without file extension

In Google Analytics I'm tracking goals with virtual page views. I take
trackingURL = window.location.pathname+'thankyou.php';
and then
_gaq.push(['_trackPageview',trackingURL]);
The issue is when a page is something like www.domain.com/page.php it ends up being domain.com/page.phpthankyou.php and not tracking properly, but if it was domain.com/page/ and then it became domain.com/page/thankyou.php it would track properly.
How can I get the full url, without the extension, so I can add on /thankyou.php, but if it is already a directory with the / at the end, then I just want to add thankyou.php to it?
Thanks!
Use this (which only replaces the extension with a slash if it finds it):
trackingURL = window.location.pathname.replace(".php","/") +'thankyou.php';
Which replaces domain.com/page.php with domain.com/page/

Remove target attribute in iframe link

I have an iframe on one of my pages that shows content on an external site (vendor product). All works well except a few links that have target="_main" in them. These links open in a new tab. What I need to do is strip the target attribute from all links within the iframe so all links stay within the iframe rather than opening a new window or tab.
It seems like there should be a simple javascript solution to this.
If I can't get this to work in an iframe then I will be forced to re-create all the content on my site which would be very painful..... to say the least.
Any help???
You need access to the external site's codebase in order to dynamically fix this. What you want to do in the external site's codebase is to check if the sites is within an iframe. If it is within an iframe then run a function to remove all target attributes on links.
// vendors product page
if ( self !== top ){
$('a').removeAttr('target');
} // else do nothing
self !== top is the same as saying if my site isn't the top most window then return true.
Not directly that I am aware of.
However, if you have access to a scripting language (like PHP or ASP) on your site you can read your vendors' page directly from your server, do a find & replace on it & then render that onto your site; either in an iframe or however else you want.
Edit
There are many ways to do this, depending on how much control you have over you PHP config. Have a look at these resources & see if you can figure out what to do. If not I would suggest you start a new question specifically focused on what it is you are struggling with.
http://php.net/manual/en/function.file-get-contents.php With this method you have to be aware of the tip on the page:
A URL can be used as a filename with this function if the fopen wrappers have been enabled. See fopen() for more details on how to specify the filename. See the Supported Protocols and Wrappers for links to information about what abilities the various wrappers have, notes on their usage, and information on any predefined variables they may provide.
http://php.net/manual/en/function.fsockopen.php Again, be aware of the warning & notes.
http://php.net/manual/en/book.curl.php
I personally have written a class that uses fsockopen because it is the most flexible for my needs but usually file_get_contents does the trick because it is the simplest to set up out of the 3 options, if you have the right wrappers configured & you don't need to start working with SSL or funny protocols. I stay away from CURL because you have to install a library in order for it to work. I prefer my code to be portable for standard installs.
Some useful links that might help:
PHP readfile from external server
Possible Example
$vendorUrl = isset( $_REQUEST['vendor'] ) ? $_REQUEST['vendor'] : 'www.default-vendor.com';
$iframeContents = file_get_contents("http://$vendorUrl", false);
exit str_replace( 'target="_main"', '', $iframeContents );
Then you just have point your iframe at whatever page you save this script in on your server & include ?vender=www.vendor-url.com as the query string.
How about giving your own iframe the name _main?
<iframe name="_main" ...
The other links should then open in that iframe too.
Regards, Max

Accessing IFrame's contentWindow.document gives 'Access is Denied' on IE6

I did not think it was possible but I hate IE6 twice as much now then this morning.
Please don't bug me about the why but I'll try to explain what we're trying to achieve.
We have 2 apps running, let's say APP1 & APP2, both of them are on the same domain. APP1 is including a JavaScript file that is hosted on APP2. This JS file will:
Create an IFrame (using document.createElement)
Set the source of the IFrame to the root of APP2 (where some HTML is generated);
Add a div to the body of APP1
Read the contents of the IFrame (so the generated HTML of APP2)
set this contents as the innerHTML of the div (3)
So in the end in APP1 we have a header where the contents is generated by APP2 without there being an IFrame on the screen.
The problem lies in step 4; this is working fine for all browsers except for IE6 (could this be the most used sentence in web development?).
I get a JS-error when trying to access contentWindow.document of the iframe: 'Access is denied'. I'm no expert but as I understand this error you would get if both apps were not on the same domain but they are (dev.echnet/APP1 & dev.echnet/APP2).
This is the code I use for above steps (took out stuff that is not executed if not IE6):
(1), (2) & (3):
var elIf;
$().ready(function()
{
elIf = document.createElement('<iframe name="uhframename">');
elIf.setAttribute('id','idUhFrame');
document.body.appendChild(elIf);
var uhDiv = document.createElement('div');
document.body.appendChild(uhDiv);
elIf.src='dev.echnet/APP1?nocache='+Math.random();
getText();
}
(4)
function getText() {
var sContent = "";
if (elIf.contentWindow.document.body) { // access denied on elIf.contentWindow.document
...
}
}
I've googled a lot and tried many possibilities I found (also on SO) but none of them seem to solve this issue.
I also tried setting the domain explicitly on the IFrame by settings its source to this:
"javascript:(function(){document.open();document.domain=\'dev.echnet\';document.close();})()"
but I'm not exactly sure if this has any effect since I'm setting the source to something else a few steps further. Anyway, since it's the same domain it should not matter?
Hoping for some help or someone to shoot down all IE6 users (a feasible task nowadays) so I can skip this task :-).
After some working with it for another question on here, I've come up with this solution.
Seems .document isn't always necessary.
http://jsfiddle.net/sTkVR/4/
I'm using chrome, and it was not working with .document but works like a charm with out it

Categories